/* Trepa't — Otros servicios + Centros educativos + Team building */
const { Button: SButton, Input: SInput, Select: SSelect, Checkbox: SCheckbox, Badge: SBadge } = window.TrepaTDesignSystem_f8c9ea;

/* ---- Formulario de lead reutilizable ---- */
function LeadForm({ title, sub, fields, consent, submit, okt, okp }) {
  const [sent, setSent] = React.useState(false);
  window.useLucide("leadform" + sent);
  if (sent) {
    return (
      <div className="formwrap">
        <div className="form-success">
          <div className="ok"><i data-lucide="check"></i></div>
          <h3>{okt}</h3>
          <p style={{ color: "var(--slate-600)", maxWidth: "40ch", margin: "0 auto" }}>{okp}</p>
        </div>
      </div>
    );
  }
  return (
    <form className="formwrap" onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: window.scrollY - 120, behavior: "smooth" }); }}>
      <h3>{title}</h3>
      <p>{sub}</p>
      <div className="form-grid">
        {fields.map((f) => (
          <div key={f.name} className={f.full ? "full" : ""}>
            {f.options
              ? <SSelect label={f.label} options={f.options} required />
              : <SInput label={f.label} type={f.type || "text"} multiline={f.multiline} placeholder={f.ph || ""} required={!f.optional} rows={f.multiline ? 4 : undefined} />}
          </div>
        ))}
        <div className="full form-consent">
          <SCheckbox label={consent} required />
        </div>
        <div className="full">
          <SButton variant="primary" size="lg" block iconRight={<i data-lucide="send"></i>}>{submit}</SButton>
        </div>
      </div>
    </form>
  );
}

/* ============================== OTROS SERVICIOS ============================== */
function Servicios({ lang, go }) {
  const t = window.TPT_I18N[lang].servicios;
  window.useLucide("servicios" + lang);
  return (
    <main className="view-enter">
      <window.Hero variant="teallight" ghost="navy" crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead} />
      <window.Band tone="ink" />
      <section className="sec">
        <div className="container">
          <div className="svc2">
            {t.cards.map((c) => (
              <div key={c.t} className="svc2__card">
                <span className="svc2__ic" style={{ background: c.color }}>
                  <i data-lucide={c.icon} style={{ color: c.color === "var(--cream)" ? "var(--ink)" : "var(--white)" }}></i>
                </span>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
                <div className="svc2__tags">
                  {c.tags.map((tag) => <SBadge key={tag} variant="cream">{tag}</SBadge>)}
                </div>
                {c.pending
                  ? <p style={{ marginTop: 14, marginBottom: 0, fontSize: 12.5, color: "var(--danger)", fontWeight: 700 }}>{c.pending}</p>
                  : <div style={{ marginTop: 16 }}><SButton variant="outline" size="sm" iconRight={<i data-lucide="arrow-up-right"></i>} onClick={() => go("team")}>{t.ask}</SButton></div>}
              </div>
            ))}
          </div>
        </div>
      </section>
      <window.Band tone="coral" />
      <window.CTABanner title={t.cta.title} p={t.cta.p}>
        <SButton variant="secondary" size="lg" iconLeft={<i data-lucide="users-round"></i>} onClick={() => go("centros")}>{t.cta.b1}</SButton>
      </window.CTABanner>
    </main>
  );
}

/* ============================== CENTROS EDUCATIVOS ============================== */
function Centros({ lang, go }) {
  const t = window.TPT_I18N[lang].centros;
  const f = t.form;
  window.useLucide("centros" + 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}>
        <SButton variant="primary" size="lg" iconRight={<i data-lucide="arrow-down"></i>}
          onClick={() => { const el = document.getElementById("form-centros"); if (el) window.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" }); }}>{t.hero.cta1}</SButton>
      </window.Hero>
      <window.Band tone="coral" />

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

      {/* La visita paso a paso */}
      <section className="sec sec--cream">
        <div className="container">
          <window.SecHead center eyebrow={t.visit.eyebrow} title={t.visit.title} />
          <div className="timeline">
            {t.visit.steps.map((s, i) => (
              <div key={s.t} className="tl-step">
                <div className="tl-step__dot"><i data-lucide={s.icon}></i></div>
                <div>
                  <h4>{i + 1}. {s.t}</h4>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Formulario */}
      <section className="sec sec--sand" id="form-centros">
        <div className="container">
          <LeadForm title={f.title} sub={f.sub}
            fields={[
              { name: "center", label: f.center, full: true },
              { name: "contact", label: f.contact },
              { name: "email", label: f.email, type: "email" },
              { name: "phone", label: f.phone, type: "tel", optional: true },
              { name: "students", label: f.students, type: "number" },
              { name: "date", label: f.date, type: "date", optional: true },
              { name: "msg", label: f.msg, full: true, multiline: true, optional: true },
            ]}
            consent={f.consent} submit={f.submit} okt={f.okt} okp={f.okp} />
        </div>
      </section>
      <window.Band tone="ink" />
    </main>
  );
}

/* ============================== TEAM BUILDING ============================== */
function Team({ lang, go }) {
  const t = window.TPT_I18N[lang].team;
  const f = t.form;
  window.useLucide("team" + lang);
  return (
    <main className="view-enter">
      <window.Hero variant="ink" ghost="coral" seal crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead}>
        <SButton variant="primary" size="lg" iconRight={<i data-lucide="arrow-down"></i>}
          onClick={() => { const el = document.getElementById("form-team"); if (el) window.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" }); }}>{t.hero.cta1}</SButton>
      </window.Hero>
      <window.Band tone="coral" />

      {/* Beneficios */}
      <section className="sec">
        <div className="container">
          <window.SecHead center eyebrow={t.benefits.eyebrow} title={t.benefits.title} />
          <div className="why-grid">
            {t.benefits.items.map((b) => (
              <div key={b.t} className="why-card tpt-card tpt-card--flat">
                <div className="tpt-card__body" style={{ gap: 12, padding: "var(--space-7) var(--space-6)", alignItems: "center" }}>
                  <span className="why-ic"><i data-lucide={b.icon}></i></span>
                  <h3>{b.t}</h3>
                  <p>{b.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Qué incluye */}
      <section className="sec sec--cream">
        <div className="container">
          <div className="split split--reverse">
            <div className="split__media">
              <image-slot id="trepat-team-photo" shape="rounded" radius="16" placeholder={t.includes.slot}></image-slot>
            </div>
            <div className="split__copy">
              <span className="eyebrow">{t.includes.eyebrow}</span>
              <h2>{t.includes.title}</h2>
              <ul className="checklist">
                {t.includes.list.map((l) => <li key={l}><i data-lucide="check"></i>{l}</li>)}
              </ul>
              <p style={{ marginTop: 8, fontSize: 14, color: "var(--slate-600)" }}>{t.who}</p>
              <window.FichaCard slug="team-building" lang={lang} />
            </div>
          </div>
        </div>
      </section>

      {/* Formulario */}
      <section className="sec sec--sand" id="form-team">
        <div className="container">
          <LeadForm title={f.title} sub={f.sub}
            fields={[
              { name: "company", label: f.company, full: true },
              { name: "contact", label: f.contact },
              { name: "email", label: f.email, type: "email" },
              { name: "phone", label: f.phone, type: "tel", optional: true },
              { name: "people", label: f.people, type: "number" },
              { name: "date", label: f.date, type: "date", optional: true },
              { name: "msg", label: f.msg, full: true, multiline: true, optional: true },
            ]}
            consent={f.consent} submit={f.submit} okt={f.okt} okp={f.okp} />
        </div>
      </section>
      <window.Band tone="ink" />
    </main>
  );
}

window.Servicios = Servicios;
window.Centros = Centros;
window.Team = Team;