/* global React, L, useScrollY, useTilt, RippleCanvas, Rise, SHead, useSeen, useCountUp, ICONS, KPI_ICONS */
const { useState: aS, useEffect: aE } = React;

/* ===== NAV ===== */
function Nav({ lang, setLang, theme, setTheme }) {
  const t = L.t[lang];
  const y = useScrollY();
  const [open, setOpen] = aS(false);
  const ids = ["sobre-mi", "logros", "palmares", "proximas", "patrocinio", "contacto"];
  aE(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);
  return (
    <header className={`nav${y > 40 ? " stuck" : ""}`}>
      <a href="#top" className="brand" onClick={() => setOpen(false)}>
        <i className="brand-m">
          <svg viewBox="0 0 40 40" fill="none" aria-hidden="true">
            <path d="M21 3 L35 35 H21 Z" fill="#FF6B35" />
            <path d="M19 3 L5 35 H17 Z" fill="none" stroke="currentColor" strokeWidth="2.2" />
          </svg>
        </i>
        <span className="brand-n">LARA<b>·</b>HIMMES</span>
      </a>
      <nav className={`nav-links${open ? " open" : ""}`}>
        {ids.map((id, i) => <a key={id} href={`#${id}`} onClick={() => setOpen(false)}>{t.menu[i]}</a>)}
      </nav>
      <div className="nav-tools">
        <button className="lang" onClick={() => setLang(lang === "es" ? "en" : "es")} aria-label="Idioma">
          <span className={lang === "es" ? "on" : ""}>ES</span><i>/</i><span className={lang === "en" ? "on" : ""}>EN</span>
        </button>
        <button className="icobtn" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Tema">{theme === "dark" ? "☾" : "☀"}</button>
        <button className={`burger${open ? " x" : ""}`} onClick={() => setOpen(!open)} aria-label="Menú" aria-expanded={open}>
          <span /><span /><span />
        </button>
      </div>
    </header>
  );
}

/* ===== HERO ===== */
function Hero({ lang }) {
  const t = L.t[lang];
  const y = useScrollY();
  const tiltRef = useTilt(9);
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <img src="assets/lh-waterline.jpeg" alt="Lara Himmes navegando su ILCA 6 a ras de agua" style={{ transform: `translate3d(0,${y * 0.2}px,0)` }} />
      </div>
      <div className="hero-mesh" />
      <div className="hero-ov" />
      <RippleCanvas />
      <div className="hero-in">
        <div>
          <div className="hero-tags" data-rv style={{ "--d": "100ms" }}>
            <span className="chipx hot"><i className="pulse" />{t.live}</span>
            <span className="chipx">{L.sail}</span>
            <span className="chipx">→ LA28</span>
          </div>
          <h1>
            <Rise text="LARA" delay={160} />
            <Rise text="HIMMES" delay={300} className="hi" />
          </h1>
          <div className="hero-role" data-rv style={{ "--d": "480ms" }}>{t.role}</div>
          <p className="hero-tag" data-rv style={{ "--d": "560ms" }}>"{t.tagline}"</p>
          <div className="hero-cta" data-rv style={{ "--d": "640ms" }}>
            <a href="#contacto" className="btn btn-p">{t.ctaPrimary} →</a>
            <a href="#palmares" className="btn btn-o">{t.ctaSecondary} ↓</a>
          </div>
          <div className="hero-meta" data-rv style={{ "--d": "720ms" }}>
            <div className="mm"><span>{lang === "es" ? "Clase" : "Class"}</span><strong>ILCA 6</strong></div>
            <div className="mm"><span>{lang === "es" ? "Equipo" : "Team"}</span><strong>RFEV · ESP</strong></div>
            <div className="mm"><span>{lang === "es" ? "Próxima regata" : "Next event"}</span><strong>{lang === "es" ? "MUNDIAL · 5–12 SEP 2026" : "WORLDS · 5–12 SEP 2026"}</strong></div>
          </div>
          <div className="scr" data-rv style={{ "--d": "800ms" }}><i />{t.scroll} ↓</div>
        </div>
        <div className="tilt" ref={tiltRef} data-rv="r" style={{ "--d": "420ms" }}>
          <div className="tilt-in">
            <div className="tilt-ring" />
            <div className="tilt-ph">
              <img src="assets/lh-studio-dark-v.jpeg" alt="Retrato de estudio de Lara Himmes con la equipación del Equipo Español" />
              <div className="tilt-sheen" />
            </div>
            <div className="tilt-sail">{L.sail}</div>
            <div className="tilt-cap">{L.t[lang].role}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== TICKER ===== */
function Ticker({ lang }) {
  const items = lang === "es"
    ? ["EQUIPO PREOLÍMPICO ESPAÑA", "ILCA 6", "MÁS FUERTE QUE LA DUDA", "CAMPEONA DE ESPAÑA", "RFEV", "CAMINO A LA28", "ESP·223235"]
    : ["SPANISH PRE-OLYMPIC TEAM", "ILCA 6", "STRONGER THAN DOUBT", "SPANISH CHAMPION", "RFEV", "ROAD TO LA28", "ESP·223235"];
  const row = [...items, ...items];
  return (
    <div className="tk" aria-hidden="true">
      <div className="tk-t">{row.map((x, i) => <React.Fragment key={i}><s>◆</s><b>{x}</b></React.Fragment>)}</div>
    </div>
  );
}

/* ===== ABOUT ===== */
function About({ lang }) {
  const t = L.t[lang];
  return (
    <section className="sec sec-alt diag-t" id="sobre-mi">
      <div className="wrap">
        <SHead n={t.aboutNum} title={t.aboutTitle} sub={lang === "es" ? "Trayectoria · Valores" : "Path · Values"} />
        <div className="ab">
          <div className="ab-ph" data-rv="l">
            <div className="ab-ph-in"><img src="assets/lh-studio-red-v.jpeg" alt="Lara Himmes con el polo del ESP Sailing Team" /></div>
            <div className="ab-ph-tag">
              <b>{lang === "es" ? "Desde los 8 años" : "Since the age of 8"}</b>
              <span>{lang === "es" ? "Optimist → Laser 4.7 → ILCA 6" : "Optimist → Laser 4.7 → ILCA 6"}</span>
            </div>
          </div>
          <div className="ab-body" data-rv="r">
            <p className="ab-kick">{t.aboutKicker.split(" ").slice(0, 2).join(" ")} <b>{t.aboutKicker.split(" ").slice(2).join(" ")}</b></p>
            {t.aboutBody.map((p, i) => <p key={i}>{p}</p>)}
            <div className="pills">{t.badges.map((b) => <span className="pill" key={b}>{b}</span>)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== KPIs ===== */
function KpiCell({ k, i, lang }) {
  const [ref, seen] = useSeen(0.35);
  const n = useCountUp(k.n, seen, 1500 + i * 130);
  return (
    <div className={`kpi${seen ? " in" : ""}`} ref={ref} style={{ "--d": `${i * 110}ms` }}>
      <div className="kpi-o">{ICONS[KPI_ICONS[i]]}</div>
      <b>{n}</b>
      <span>{k.k[lang]}</span>
    </div>
  );
}
function Kpis({ lang }) {
  const t = L.t[lang];
  return (
    <section className="sec sec-alt" id="logros" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <SHead n={t.kpiNum} title={t.kpiTitle} sub={t.kpiSub} />
        <div className="kpis">{L.kpis.map((k, i) => <KpiCell k={k} i={i} lang={lang} key={i} />)}</div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Ticker, About, Kpis });