// Initium — Nav, Hero, StatusStrip
const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#top" className="logo">
      <span className="logo-mark"></span>
      <span>INITIUM</span>
    </a>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="tablist" aria-label="Language">
      <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
      <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

function Nav({ lang, setLang, t }) {
  return (
    <header className="nav" id="top">
      <div className="shell nav-inner">
        <div className="nav-left">
          <Logo />
          <nav className="nav-links">
            <a href="#servicios" className="nav-link">{t.nav.services}</a>
            <a href="#como-funciona" className="nav-link">{t.nav.how}</a>
            <a href="#tarifa" className="nav-link">{t.nav.pricing}</a>
            <a href="#respaldo" className="nav-link">{t.nav.trust}</a>
            <a href="#preguntas" className="nav-link">{t.nav.faq}</a>
          </nav>
        </div>
        <div className="nav-right">
          <LangToggle lang={lang} setLang={setLang} />
          <a href="#contacto" className="btn btn-primary">
            {t.nav.cta}
            <svg className="arr" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M3 6h6m0 0L6 3m3 3L6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ t }) {
  return (
    <section className="hero">
      <div className="hero-grid"></div>
      <div className="shell hero-inner">
        <div className="hero-meta fade-up">
          <span>● {t.hero.meta1}</span>
          <span className="sep"></span>
          <span>{t.hero.meta2}</span>
          <span className="sep"></span>
          <span>{t.hero.meta3}</span>
        </div>

        <h1 className="hero-headline display-xxl fade-up delay-1">
          {t.hero.h1a} <span className="serif-display" style={{ color: "var(--gold)" }}>{t.hero.h1b}</span>
          <br />
          {t.hero.h1c} <span className="serif-display">{t.hero.h1d}</span>
        </h1>

        <p className="hero-sub fade-up delay-2">{t.hero.sub}</p>

        <div className="hero-cta fade-up delay-3">
          <a href="#contacto" className="btn btn-primary btn-lg">
            {t.hero.cta1}
            <svg className="arr" width="14" height="14" viewBox="0 0 12 12" fill="none">
              <path d="M3 6h6m0 0L6 3m3 3L6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#como-funciona" className="btn btn-ghost btn-lg">{t.hero.cta2}</a>
        </div>

        <div className="hero-bullets fade-up delay-4">
          <div><span className="check-mini">✓</span> {t.hero.b1}</div>
          <div><span className="check-mini">✓</span> {t.hero.b2}</div>
          <div><span className="check-mini">✓</span> {t.hero.b3}</div>
        </div>

        <div className="partner-bar fade-up delay-4" style={{ marginTop: 36 }}>
          <span className="label">{t.hero.partner_label}</span>
          <span className="logos">
            {t.hero.partners.map((p, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ color: "var(--text-3)" }}>·</span>}
                <span>{p}</span>
              </React.Fragment>
            ))}
          </span>
        </div>
      </div>
    </section>
  );
}

function StatusStrip({ t }) {
  const items = t.status.items;
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % items.length), 2400);
    return () => clearInterval(id);
  }, [items.length]);
  return (
    <div className="status-strip">
      <div className="shell">
        <div className="status-track">
          <span className="status-label"><span className="live-pulse"></span> {t.status.live}</span>
          {items.map((it, i) => (
            <div className={"status-item" + (i === active ? " on" : "")} key={i}>
              <span className="status-bullet"></span>
              <span className="status-key">{it.k}</span>
              <span>{it.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, StatusStrip, Logo, LangToggle });