/* ============================================================
   NOVRIX — Nav, Hero A/B, Footer  → window
   ============================================================ */

function Brand() {
  return (
    <a className="brand" href="#top" aria-label="Novrix">
      <span className="brand__mark">
        {/* N mark — two verticals + diagonal, blue accent dot */}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 18V6l14 12V6" stroke="#fff" strokeWidth="2.4"/>
          <circle cx="19" cy="18" r="2.6" fill="#3b6bff"/>
        </svg>
      </span>
      <span className="brand__name">NOVRIX<b>.</b></span>
    </a>
  );
}

function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="wrap nav__inner">
        <Brand />
        <div className="nav__links">
          <a className="nav__link" href="#services">{t.nav.services}</a>
          <a className="nav__link" href="#sectors">{t.nav.sectors}</a>
          <a className="nav__link" href="#cases">{t.nav.cases}</a>
          <a className="nav__link" href="#contact">{t.nav.contact}</a>
        </div>
        <div className="nav__right">
          <div className="lang" role="group" aria-label="Language">
            <button className={lang === "fr" ? "active" : ""} onClick={() => setLang("fr")}>FR</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a className="btn btn-primary nav__cta" href="#contact">{t.nav.cta}</a>
        </div>
      </div>
    </nav>
  );
}

/* word-by-word headline */
function Words({ words }) {
  return (
    <>
      {words.map((w, i) => (
        <span className="word" key={i}>
          <span style={{ "--wd": `${i * 110}ms`, color: i === words.length - 1 ? "var(--accent)" : undefined }}>
            {w}{i < words.length - 1 ? " " : ""}
          </span>
        </span>
      ))}
    </>
  );
}

function HeroA({ t }) {
  const [ref, seen] = useInView(0.98);
  return (
    <header className={"hero heroA" + (seen ? " is-in" : "")} id="top" ref={ref}>
      <div className="hero__glow" />
      <div className="wrap">
        <span className="hero__tag" data-reveal><span className="dot" />{t.hero.status}</span>
        <h1>
          <Words words={t.hero.words} />
        </h1>
        <p className="hero__sub" data-reveal style={{ "--d": "260ms" }}>{t.hero.sub}</p>
        <div className="hero__cta" data-reveal style={{ "--d": "360ms" }}>
          <a className="btn btn-primary" href="#contact">{t.hero.ctaPrimary} <IconArrow /></a>
          <a className="btn btn-ghost" href="#cases">{t.hero.ctaSecondary}</a>
        </div>
        <div className="heroA__ticker" data-reveal style={{ "--d": "460ms" }}>
          {t.hero.ticker.map((x, i) => <span key={i}>{x}</span>)}
        </div>
      </div>
    </header>
  );
}

function DataPanel({ t }) {
  const [ref, seen] = useInView(0.85);
  const [shown, setShown] = useState(0);
  useEffect(() => {
    if (!seen) return;
    const motionOff = document.documentElement.getAttribute("data-motion") === "off";
    if (motionOff) { setShown(t.hero.logs.length); return; }
    const timers = t.hero.logs.map((_, i) => setTimeout(() => setShown((s) => Math.max(s, i + 1)), 200 + i * 220));
    return () => timers.forEach(clearTimeout);
  }, [seen, t]);
  return (
    <div className="signal-stack" ref={ref}>
      {t.hero.logs.map((l, i) => (
        <div className={"signal" + (i < shown ? " in" : "")} key={i} style={{ visibility: i < shown ? "visible" : "hidden" }}>
          <span className="signal__dot"><i /></span>
          <span className="signal__body">
            <span className="signal__t">{l.t}</span>
            <span className="signal__v">{l.v[0]}{l.v[1]}</span>
          </span>
        </div>
      ))}
    </div>
  );
}

function HeroB({ t }) {
  const [ref, seen] = useInView(0.98);
  return (
    <header className={"hero heroB" + (seen ? " is-in" : "")} id="top" ref={ref}>
      <div className="hero__glow" style={{ left: "75%", top: "0%" }} />
      <div className="wrap">
        <div className="heroB__left">
          <span className="hero__tag" data-reveal><span className="dot" />{t.hero.status}</span>
          <h1><Words words={t.hero.words} /></h1>
          <p className="hero__sub" data-reveal style={{ "--d": "240ms" }}>{t.hero.sub}</p>
          <div className="hero__cta" data-reveal style={{ "--d": "340ms" }}>
            <a className="btn btn-primary" href="#contact">{t.hero.ctaPrimary} <IconArrow /></a>
            <a className="btn btn-ghost" href="#cases">{t.hero.ctaSecondary}</a>
          </div>
        </div>
        <div className="heroB__panelwrap" data-reveal style={{ "--d": "200ms" }}>
          <DataPanel t={t} />
        </div>
      </div>
    </header>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__slogan" data-reveal>Built to move <b>faster.</b></div>
          <div className="footer__contact" data-reveal>
            <a href="mailto:contact@novrix.be"><span className="k">email</span>contact@novrix.be</a>
            <a href="tel:+32473289767"><span className="k">tél</span>+32 473 28 97 67</a>
            <a href="https://novrix.be"><span className="k">web</span>novrix.be</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} Novrix — {t.footer.rights}</span>
          <a className="nav__link" href="#top" style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}><IconArrowUp />{t.footer.backTop}</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, HeroA, HeroB, Footer, Brand });