// Solutions ALXL — main app shell
const { useState, useEffect } = React;

function Nav({ lang, setLang, t, onDark }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${onDark ? "on-dark" : ""}`}>
      <a href="#top" className="nav__logo">
        <img src="assets/logo_mark.png" alt="Solutions ALXL" />
      </a>
      <div className="nav__links">
        <a href="#how">{t.nav.services}</a>
        <a href="#banc">{t.nav.banc}</a>
        <a href="#cas">{t.nav.cas}</a>
        <a href="#contact">{t.nav.contact}</a>
      </div>
      <div className="nav__right">
        <div className="lang-toggle">
          <button onClick={() => setLang("fr")} className={lang==="fr" ? "active":""}>FR</button>
          <span style={{opacity:.4}}>/</span>
          <button onClick={() => setLang("en")} className={lang==="en" ? "active":""}>EN</button>
        </div>
      </div>
    </nav>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap footer__inner">
        <div className="mono">{t.footer.copy}</div>
        <div className="mono">{t.footer.meta}</div>
      </div>
    </footer>
  );
}

function App() {
  const [lang, setLang] = useState(() => {
    try { return localStorage.getItem("alxl-lang") || "fr"; } catch { return "fr"; }
  });
  useEffect(() => { try { localStorage.setItem("alxl-lang", lang); } catch {} }, [lang]);
  const [onDark, setOnDark] = useState(true);

  // detect when nav is over a dark section
  useEffect(() => {
    const on = () => {
      // hero is dark; manifesto/case/chain are light; assembly/contact dark
      const y = window.scrollY + 50;
      const sections = [
        { sel: "#top", dark: true },
        { sel: "#how", dark: false },
        { sel: ".scrolly", dark: false },
        { sel: ".assembly", dark: true },
        { sel: "#banc", dark: false },
        { sel: "#cas", dark: false },
        { sel: "#contact", dark: true },
      ];
      let cur = sections[0];
      sections.forEach(s => {
        const el = document.querySelector(s.sel);
        if (el && el.getBoundingClientRect().top + window.scrollY <= y) cur = s;
      });
      setOnDark(cur.dark);
    };
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, [lang]);

  const t = window.ALXL_COPY[lang];

  return (
    <div data-screen-label="Solutions ALXL · hi-fi blueprint">
      <Nav lang={lang} setLang={setLang} t={t} onDark={onDark} />
      <Hero t={t} />
      <KpiStrip t={t} />
      <Manifesto t={t} />
      <ScrollyNeedsSpecs t={t} />
      <ScrollyAssembly t={t} />
      <ChainSection t={t} />
      <CaseStudy t={t} />
      <Contact t={t} />
      <Footer t={t} />
    </div>
  );
}

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