/* Trepa't — Página Inicio */
const { Button: HButton, Card: HCard, Badge: HBadge } = window.TrepaTDesignSystem_f8c9ea;

function Home({ lang, go }) {
  const t = window.TPT_I18N[lang].home;
  const tar = window.TPT_I18N[lang].tarifas;
  window.useLucide("home" + lang);
  const teaser = tar.groups.cuotas;

  return (
    <main className="view-enter">
      <window.Hero variant="teal" ghost="cream" seal
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead}>
        <HButton variant="primary" size="lg" iconLeft={<i data-lucide="mountain"></i>} onClick={() => go("empezar")}>{t.hero.cta1}</HButton>
        <HButton variant="cream" size="lg" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("tarifas")}>{t.hero.cta2}</HButton>
      </window.Hero>

      <window.Band tone="coral" />

      {/* ¿Por qué Trepa't? */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.why.eyebrow} title={t.why.title} />
          <div className="why-grid">
            {t.why.items.map((r) => (
              <HCard key={r.t} elevation="flat" className="why-card">
                <span className="why-ic"><i data-lucide={r.icon}></i></span>
                <h3>{r.t}</h3>
                <p>{r.d}</p>
              </HCard>
            ))}
          </div>
        </div>
      </section>

      {/* Servicios resumen */}
      <section className="sec sec--sand">
        <div className="container">
          <window.SecHead eyebrow={t.svc.eyebrow} title={t.svc.title} />
          <div className="svc-grid">
            {t.svc.items.map((s) => (
              <a key={s.t} className="svc" onClick={() => go(s.to)}>
                <span className="svc__ic"><i data-lucide={s.icon}></i></span>
                <div className="svc__meta">
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                <i data-lucide="arrow-up-right" className="svc__arrow"></i>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Actividades y cursos */}
      <section className="sec">
        <div className="container">
          <window.SecHead eyebrow={t.acts.eyebrow} title={t.acts.title} sub={t.acts.p} />
          <window.ActPicks slugs={["bautismo", "curso-nivel-1", "escuela-infantil", "aniversarios"]} lang={lang} go={go} />
          <div style={{ textAlign: "center", marginTop: "34px" }}>
            <HButton variant="cream" size="lg" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("actividades")}>{t.acts.cta}</HButton>
          </div>
        </div>
      </section>

      {/* Primer día */}
      <section className="firstday">
        <div className="container firstday__inner">
          <div className="firstday__photo">
            <image-slot id="trepat-home-firstday" shape="rounded" radius="16" placeholder={t.firstday.slot}></image-slot>
          </div>
          <div className="firstday__copy">
            <span className="eyebrow">{t.firstday.eyebrow}</span>
            <h2>{t.firstday.title}</h2>
            <p>{t.firstday.p}</p>
            <HButton variant="primary" size="lg" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("empezar")}>{t.firstday.cta}</HButton>
          </div>
        </div>
      </section>

      {/* Tarifas teaser */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.pricing.eyebrow} title={t.pricing.title} />
          <div className="price-grid">
            {teaser.map((p) => (
              <HCard key={p.name} tone={p.featured ? "petrol" : "default"} elevation="flat" className={"plan" + (p.featured ? " is-featured" : "")}>
                {p.featured && <span className="plan__flag"><HBadge variant="coral">{tar.flag}</HBadge></span>}
                <div className="plan__name">{p.name}</div>
                <div className="plan__price"><strong>{p.price}</strong><span>{p.unit}</span></div>
                <ul className="plan__feat">
                  {p.feat.map((f) => <li key={f}><i data-lucide="check"></i>{f}</li>)}
                </ul>
                <HButton variant={p.featured ? "primary" : "outline"} block onClick={() => {}}>{p.cta}</HButton>
              </HCard>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: "30px" }}>
            <HButton variant="cream" size="lg" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("tarifas")}>{t.pricing.cta}</HButton>
          </div>
        </div>
      </section>

      <window.Band tone="ink" />

      <window.CTABanner title={t.hero.tagline} p={t.cta.p}>
        <HButton variant="secondary" size="lg" iconLeft={<i data-lucide="mountain"></i>} onClick={() => go("empezar")}>{t.hero.cta1}</HButton>
      </window.CTABanner>
    </main>
  );
}
window.Home = Home;