/* Trepa't — Página Contacto */
const { Button: CButton, Input: CInput, Checkbox: CCheckbox } = window.TrepaTDesignSystem_f8c9ea;

function Contacto({ lang, go }) {
  const t = window.TPT_I18N[lang].contacto;
  const f = t.form;
  const [sent, setSent] = React.useState(false);
  window.useLucide("contacto" + lang + sent);

  return (
    <main className="view-enter">
      <window.Hero variant="teal" ghost="cream" seal crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead} />
      <window.Band tone="coral" />

      <section className="sec">
        <div className="container">
          <div className="contact-grid">
            {/* Columna info */}
            <div className="contact-info">
              {t.info.map((i) => (
                <div key={i.t} className="contact-card">
                  <span className="contact-card__ic"><i data-lucide={i.icon}></i></span>
                  <div>
                    <h4>{i.t}</h4>
                    <p>{i.v}</p>
                    {i.note && <span className="contact-card__note">{i.note}</span>}
                  </div>
                </div>
              ))}
              <a className="contact-ig" href="#" onClick={(e) => e.preventDefault()}>
                <span className="contact-card__ic"><i data-lucide="instagram"></i></span>
                <div>
                  <h4>{t.social}</h4>
                  <p>@trepat.escalada</p>
                </div>
                <i data-lucide="arrow-up-right" className="contact-ig__arrow"></i>
              </a>
            </div>

            {/* Columna mapa + formulario */}
            <div className="contact-side">
              <div className="contact-map">
                <i data-lucide="map"></i>
                <span>{t.mapLabel}</span>
              </div>

              {sent ? (
                <div className="formwrap">
                  <div className="form-success">
                    <div className="ok"><i data-lucide="check"></i></div>
                    <h3>{f.okt}</h3>
                    <p style={{ color: "var(--slate-600)", maxWidth: "34ch", margin: "0 auto" }}>{f.okp}</p>
                  </div>
                </div>
              ) : (
                <form className="formwrap" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h3>{f.title}</h3>
                  <p>{f.sub}</p>
                  <div className="form-grid">
                    <CInput label={f.name} required />
                    <CInput label={f.email} type="email" required />
                    <div className="full"><CInput label={f.msg} multiline rows={4} required /></div>
                    <div className="full form-consent"><CCheckbox label={f.consent} required /></div>
                    <div className="full"><CButton variant="primary" size="lg" block iconRight={<i data-lucide="send"></i>}>{f.submit}</CButton></div>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
      <window.Band tone="ink" />
    </main>
  );
}
window.Contacto = Contacto;