/* global React, ReactDOM, L, useLang, useTheme, useReveal, SHead, ICONS, Nav, Hero, Ticker, About, Kpis, Palmares, Upcoming */
const { useState: cS } = React;

/* ===== SPONSORSHIP ===== */
function Sponsor({ lang }) {
  const t = L.t[lang];
  return (
    <section className="sec" id="patrocinio">
      <div className="wrap">
        <SHead n={t.sponNum} title={t.sponTitle} sub={t.sponWhy} lead={t.sponLead} />
        <div className="why">
          {L.sponsorPillars.map((p, i) => (
            <div className="whyc" key={p.icon} data-rv style={{ "--d": `${i * 120}ms` }}>
              <div className="whyc-o">{ICONS[p.icon]}</div>
              <h3>{p.t[lang]}</h3>
              <div className="whyc-v">{p.v[lang]}</div>
              <p>{p.d[lang]}</p>
            </div>
          ))}
        </div>

        <div className="cta-band" data-rv="s">
          <div className="cta-band-bg"><img src="assets/lh-hiking-wide.jpeg" alt="" aria-hidden="true" /></div>
          <div className="cta-band-in">
            <span className="cta-band-eye">{lang === "es" ? "Dossier de patrocinio 2026 · 2028" : "Sponsorship deck 2026 · 2028"}</span>
            <h3>{lang === "es" ? <>Te mando los <em>niveles y contrapartidas</em> hoy mismo.</> : <>I'll send you the <em>tiers and benefits</em> today.</>}</h3>
            <p>{lang === "es"
              ? "Cuatro niveles, de Cobre a Diamante, con visibilidad en vela, casco y equipación. Dime en qué mercado quieres activar y te preparo la propuesta a medida."
              : "Four tiers, from Copper to Diamond, with visibility on sail, hull and kit. Tell me which market you want to activate in and I'll tailor the proposal."}</p>
            <div className="cta-band-btns">
              <a href={`mailto:${L.contact.email}?subject=${encodeURIComponent(lang === "es" ? "Dossier de patrocinio — Lara Himmes" : "Sponsorship deck — Lara Himmes")}`} className="btn btn-p">{lang === "es" ? "Pedir el dossier" : "Request the deck"} →</a>
              <a href={`https://wa.me/${L.contact.phoneRaw.replace("+", "")}`} target="_blank" rel="noopener" className="btn btn-o">{ICONS.wa}WhatsApp</a>
            </div>
            <div className="cta-band-foot">
              <span>{L.contact.email}</span>
              <i />
              <span>{L.contact.phone}</span>
              <i />
              <span>{lang === "es" ? "Respuesta en 24 h" : "Reply within 24 h"}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== GALLERY ===== */
function Gallery({ lang }) {
  const t = L.t[lang];
  return (
    <section className="sec sec-alt diag-t" id="galeria">
      <div className="wrap">
        <SHead n={t.galNum} title={t.galTitle} sub={t.galSub} />
        <div className="gal">
          {L.gallery.map((g, i) => (
            <figure className={`gc${g.span ? " " + g.span : ""}`} key={g.src} data-rv="s" style={{ "--d": `${Math.min(i, 7) * 80}ms` }}>
              <img src={g.src} alt={g.cap[lang]} loading="lazy" />
              <figcaption>{g.cap[lang]}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== CONTACT ===== */
function Contact({ lang }) {
  const t = L.t[lang];
  const [sent, setSent] = cS(false);
  const submit = (e) => {
    e.preventDefault();
    const f = new FormData(e.currentTarget);
    const body = [
      `${t.fName}: ${f.get("nombre") || "—"}`,
      `${t.fEmail}: ${f.get("email") || "—"}`,
      `${t.fCompany}: ${f.get("empresa") || "—"}`,
      `${t.fType}: ${f.get("tipo") || "—"}`,
      `${t.fNews}: ${f.get("news") ? "Sí" : "No"}`,
      "",
      f.get("mensaje") || ""
    ].join("\n");
    const subject = `${f.get("tipo") || "Contacto"} — ${f.get("empresa") || f.get("nombre") || ""}`;
    window.location.href = `mailto:${L.contact.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  return (
    <section className="sec sec-alt" id="contacto">
      <div className="wrap">
        <SHead n={t.ctNum} title={t.ctTitle} sub={lang === "es" ? "Patrocinio · Prensa" : "Sponsorship · Press"} />
        <div className="ct">
          <div data-rv="l">
            <p className="ct-sub">{t.ctSub}</p>
            <div className="ct-dir">
              <a className="ct-d" href={`mailto:${L.contact.email}`}><span>Email</span><b>{L.contact.email}</b></a>
              <a className="ct-d" href={`tel:${L.contact.phoneRaw}`}><span>{lang === "es" ? "Teléfono" : "Phone"}</span><b>{L.contact.phone}</b></a>
              <a className="ct-d" href={`https://instagram.com/${L.contact.instagram}`} target="_blank" rel="noopener"><span>Instagram</span><b>@{L.contact.instagram}</b></a>
              <a className="ct-d" href={`https://tiktok.com/@${L.contact.tiktok}`} target="_blank" rel="noopener"><span>TikTok</span><b>@{L.contact.tiktok}</b></a>
            </div>
            <div className="ct-quick">
              <span className="ct-quick-l">{t.orCall}</span>
              <a className="soc" href={`https://wa.me/${L.contact.phoneRaw.replace("+", "")}`} target="_blank" rel="noopener">{ICONS.wa}{t.whatsapp}</a>
              <a className="soc" href={`tel:${L.contact.phoneRaw}`}>{ICONS.phone}{t.call}</a>
            </div>
            <div className="socs">
              <a className="soc" href={`https://instagram.com/${L.contact.instagram}`} target="_blank" rel="noopener">{ICONS.ig}@{L.contact.instagram}</a>
              <a className="soc" href={`https://tiktok.com/@${L.contact.tiktok}`} target="_blank" rel="noopener">{ICONS.tiktok}@{L.contact.tiktok}</a>
              <a className="soc" href={`mailto:${L.contact.email}`}>{ICONS.mail}Email</a>
            </div>
          </div>
          <form className="frm" onSubmit={submit} data-rv="r">
            <div className="fr fr2">
              <div className="fl"><label htmlFor="c-n">{t.fName}</label><input id="c-n" name="nombre" required autoComplete="name" /></div>
              <div className="fl"><label htmlFor="c-e">{t.fEmail}</label><input id="c-e" name="email" type="email" required autoComplete="email" /></div>
            </div>
            <div className="fr fr2" style={{ marginTop: 15 }}>
              <div className="fl"><label htmlFor="c-c">{t.fCompany}</label><input id="c-c" name="empresa" autoComplete="organization" /></div>
              <div className="fl">
                <label htmlFor="c-t">{t.fType}</label>
                <select id="c-t" name="tipo" defaultValue={t.fTypes[0]}>
                  {t.fTypes.map((x) => <option key={x} value={x}>{x}</option>)}
                </select>
              </div>
            </div>
            <div className="fr" style={{ marginTop: 15 }}>
              <div className="fl"><label htmlFor="c-m">{t.fMsg}</label><textarea id="c-m" name="mensaje" placeholder={t.fMsgPh} required /></div>
            </div>
            <label className="chk"><input type="checkbox" name="news" />{t.fNews}</label>
            <button className="btn btn-p" type="submit">{sent ? t.fSent : t.fSend} →</button>
            <p className="frm-note">{t.fNote}</p>
            {sent ? <div className="ok">✓ {t.fSent}</div> : null}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const t = L.t[lang];
  return (
    <footer className="ft">
      <div className="wrap ft-in">
        <span>© 2026 {L.fullName} · {L.sail}</span>
        <span>{t.role} · {t.rights}</span>
        <div className="ft-r">
          <a href="#top">{t.top} ↑</a>
          <a className="ft-by" href="https://www.ams2.dev/" target="_blank" rel="noopener">
            <span className="ft-by-k">{lang === "es" ? "Diseño y desarrollo" : "Design & build"}</span>
            <span className="ft-by-v">ams2<b>.dev</b><i>↗</i></span>
          </a>
        </div>
      </div>
    </footer>
  );
}

/* ===== APP ===== */
function App() {
  const [lang, setLang] = useLang();
  const [theme, setTheme] = useTheme();
  useReveal();
  return (
    <>
      <Nav lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
      <main>
        <Hero lang={lang} />
        <Ticker lang={lang} />
        <About lang={lang} />
        <Kpis lang={lang} />
        <Palmares lang={lang} />
        <Upcoming lang={lang} />
        <Sponsor lang={lang} />
        <Gallery lang={lang} />
        <Contact lang={lang} />
      </main>
      <Footer lang={lang} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);