/* Trepa't — Página Empezar a escalar */
const { Button: EButton, Card: ECard } = window.TrepaTDesignSystem_f8c9ea;

function Empezar({ lang, go }) {
  const t = window.TPT_I18N[lang].empezar;
  window.useLucide("empezar" + lang);

  return (
    <main className="view-enter">
      <window.Hero variant="petrol" ghost="cream" crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead}>
        <EButton variant="primary" size="lg" iconLeft={<i data-lucide="calendar-check"></i>} onClick={() => {}}>{t.hero.cta1}</EButton>
        <EButton variant="cream" size="lg" onClick={() => go("tarifas")}>{t.hero.cta2}</EButton>
      </window.Hero>

      <window.Band tone="coral" />

      {/* Modalidades */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.modes.eyebrow} title={t.modes.title} />
          <div className="svc2">
            {t.modes.items.map((m, i) => (
              <div key={m.t} className="svc2__card">
                <span className="svc2__ic" style={{ background: i === 0 ? "var(--coral-100)" : "var(--petrol-100)" }}>
                  <i data-lucide={m.icon} style={{ color: i === 0 ? "var(--coral-600)" : "var(--teal-mid)" }}></i>
                </span>
                <h3>{m.t}</h3>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cómo funciona — 3 pasos */}
      <section className="sec sec--cream">
        <div className="container">
          <window.SecHead center eyebrow={t.steps.eyebrow} title={t.steps.title} />
          <div className="steps">
            {t.steps.items.map((s, i) => (
              <div key={s.t} className="step">
                <div className="step__n">{i + 1}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Actividades guiadas */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.guided.eyebrow} title={t.guided.title} />
          <window.ActPicks slugs={["bautismo", "curso-nivel-1", "curso-nivel-2"]} lang={lang} go={go} cols={3} />
          <div style={{ textAlign: "center", marginTop: "34px" }}>
            <EButton variant="outline" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("actividades")}>{t.guided.cta}</EButton>
          </div>
        </div>
      </section>

      {/* Qué necesitas */}
      <section className="sec">
        <div className="container">
          <div className="split">
            <div className="split__media">
              <image-slot id="trepat-empezar-need" shape="rounded" radius="16" placeholder={t.need.slot}></image-slot>
            </div>
            <div className="split__copy">
              <span className="eyebrow">{t.need.eyebrow}</span>
              <h2>{t.need.title}</h2>
              <p>{t.need.p}</p>
              <ul className="checklist">
                {t.need.list.map((l) => <li key={l}><i data-lucide="check"></i>{l}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="sec sec--sand">
        <div className="container">
          <window.SecHead center eyebrow={t.faq.eyebrow} title={t.faq.title} />
          <window.FAQ items={t.faq.items} />
        </div>
      </section>

      <window.Band tone="ink" />

      <window.CTABanner title={t.cta.title} p={t.hero.lead}>
        <EButton variant="secondary" size="lg" iconLeft={<i data-lucide="calendar-check"></i>} onClick={() => {}}>{t.hero.cta1}</EButton>
      </window.CTABanner>
    </main>
  );
}
window.Empezar = Empezar;