// CCSE 2026 website — Nav, Hero, Proof strip
const SHOTS = "./assets/screenshots/";
const LOGO = "./assets/logo/ccse-logo.webp";
const REVIEWS_WORD = { es: "reseñas", en: "reviews", ar: "مراجعة", ro: "recenzii", fr: "avis", ru: "отзывов", zh: "条评价", de: "Bewertungen", it: "recensioni" };

function Nav({ t, lang, setLang, theme, setTheme }) {
  const { Button } = dsLib();
  const links = [
    ["#funciones", t.nav.features],
    ["#como-funciona", t.nav.how],
    ["#preguntas", t.nav.quiz],
    ["#opiniones", t.nav.reviews],
    ["#faq", t.nav.faq],
  ];
  return (
    <div className="navwrap">
      <nav className="nav" aria-label="Principal">
        <a href="#top" className="brand">
          <img src={LOGO} alt="" width="34" height="34" style={{ borderRadius: 9 }} />
          <span>CCSE <em>2026</em></span>
        </a>
        <div className="navlinks">
          {links.map(([href, label]) => <a key={href} href={href}>{label}</a>)}
        </div>
        <div className="navactions">
          <label className="langsel">
            <Icon name="globe" size={16} />
            <select value={lang} onChange={(e) => setLang(e.target.value)} aria-label="Language / Idioma">
              {LANGS.map((l) => <option key={l.code} value={l.code}>{l.label}</option>)}
            </select>
            <Icon name="chevron-down" size={14} />
          </label>
          <button className="iconbtn" aria-label={theme === "dark" ? "Light theme" : "Dark theme"}
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            <Icon name={theme === "dark" ? "sun" : "moon"} size={18} />
          </button>
          <Button size="sm" href="#descargar" icon={<Icon name="download" size={16} />}>{t.nav.download}</Button>
        </div>
      </nav>
      <div className="navstripe" aria-hidden="true"></div>
    </div>
  );
}

function Hero({ t }) {
  const { Badge, StoreBadge, PhoneFrame } = dsLib();
  return (
    <section className="hero" id="top">
      <div className="heroglow" aria-hidden="true"></div>
      <div className="container herogrid">
        <div className="herocopy">
          <Reveal>
            <Badge tone="red" icon={<Icon name="badge-check" size={14} />}>{t.hero.eyebrow}</Badge>
          </Reveal>
          <Reveal delay={80}>
            <h1>
              {t.hero.h1a}{" "}
              <span className="hl">
                {t.hero.h1b}
                <svg className="hlswash" viewBox="0 0 220 12" preserveAspectRatio="none" aria-hidden="true">
                  <path d="M3 9 C 60 3, 160 3, 217 8" fill="none" stroke="var(--accent-2)" strokeWidth="6" strokeLinecap="round" />
                </svg>
              </span>
            </h1>
          </Reveal>
          <Reveal delay={160}><p className="lede">{t.hero.lede}</p></Reveal>
          <Reveal delay={240}>
            <div className="storebar">
              <StoreBadge store="app-store" lang={t.htmlLang === "es" ? "es" : "en"} size="lg" />
              <StoreBadge store="google-play" lang={t.htmlLang === "es" ? "es" : "en"} size="lg" />
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div className="heronote">
              <Icon name="check-circle-2" size={16} style={{ color: "var(--app-green)" }} />
              <span>{t.hero.note}</span>
            </div>
          </Reveal>
          <Reveal delay={380}>
            <div className="herorating">
              <span className="herorating-num">4.9</span>
              <span className="herorating-stars" aria-hidden="true">★★★★★</span>
              <span className="herorating-count">(288 {REVIEWS_WORD[t.htmlLang] || "reviews"})</span>
            </div>
          </Reveal>
        </div>
        <div className="herophones">
          <Reveal delay={200}>
            <div className="phoneback">
              <PhoneFrame src={SHOTS + (t.shots.items[1].src)} alt="" width={218} shadow={false} />
            </div>
            <div className="phonefront">
              <PhoneFrame src={SHOTS + (t.shots.items[0].src)} alt={t.hero.phoneAlt} width={288} float />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ProofStrip({ t }) {
  const { StatCounter } = dsLib();
  return (
    <section className="proof">
      <div className="container proofrow">
        {t.proof.map((p, i) => (
          <Reveal key={i} delay={i * 90} className="proofitem">
            {p.n == null ? (
              <div className="proofinfty">
                <div>{p.symbol}</div>
                <span>{p.label}</span>
              </div>
            ) : (
              <StatCounter value={p.n} suffix={p.suffix} label={p.label} />
            )}
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, ProofStrip, SHOTS, LOGO });