/* WalletLab — landing app shell */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#0E9D5C", "#2FD46A"],
  "particles": true,
  "cursor": true
}/*EDITMODE-END*/;

const ACCENT_SETS = {
  green: ["#0E9D5C", "#2FD46A"],
  teal: ["#0E9488", "#2DD4BF"],
  forest: ["#3F8F2E", "#8FC430"],
  ocean: ["#1E6FD9", "#4FA3FF"],
};

const LANG_META = {
  fr: { label: "FR", htmlLang: "fr" },
  en: { label: "EN", htmlLang: "en" },
  nl: { label: "NL", htmlLang: "nl" },
};

function getLang() {
  const params = new URLSearchParams(window.location.search);
  const fromUrl = params.get("lang");
  if (fromUrl && LANG_META[fromUrl]) return fromUrl;
  const stored = localStorage.getItem("wl_lang");
  if (stored && LANG_META[stored]) return stored;
  const browser = (navigator.language || "fr").slice(0, 2).toLowerCase();
  return LANG_META[browser] ? browser : "fr";
}

window.LANG = getLang();
document.documentElement.lang = LANG_META[window.LANG].htmlLang;

function switchLang(l) {
  localStorage.setItem("wl_lang", l);
  const url = new URL(window.location.href);
  url.searchParams.set("lang", l);
  window.location.href = url.toString();
}

function LangSwitcher() {
  const current = window.LANG;
  return (
    <div className="lang-switcher">
      {Object.keys(LANG_META).map(l => (
        <button
          key={l}
          className={"lang-btn" + (l === current ? " active" : "")}
          onClick={() => l !== current && switchLang(l)}
          aria-label={LANG_META[l].label}
        >
          {LANG_META[l].label}
        </button>
      ))}
    </div>
  );
}

function Nav({ onBurger }) {
  const c = window.CONTENT[window.LANG];
  const [stuck, setStuck] = useState(false);
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "features", label: c.nav.features },
    { id: "how",      label: c.nav.how },
    { id: "usecases", label: window.LANG === "fr" ? "Cas d'usage" : window.LANG === "nl" ? "Toepassingen" : "Use cases" },
    { id: "pricing",  label: c.nav.pricing },
    { id: "faq",      label: c.nav.faq },
  ];
  return (
    <nav className={"nav" + (stuck ? " stuck" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href="#top"><span className="brand-mark"><Icon name="wallet" size={16} /></span>WalletLab</a>
        <div className="nav-links">
          {links.map(l => <a key={l.id} href={"#" + l.id}>{l.label}</a>)}
        </div>
        <div className="nav-cta">
          <LangSwitcher />
          <a className="btn ghost sm" href="/app/login">{c.nav.login}</a>
          <button className="btn green sm" data-mag>{c.nav.cta}<Icon name="arrow" size={14} /></button>
        </div>
        <button className="nav-burger" onClick={onBurger} aria-label="Menu"><Icon name="menu" size={24} /></button>
      </div>
    </nav>
  );
}

function MobileMenu({ open, onClose }) {
  const c = window.CONTENT[window.LANG];
  const links = [
    { id: "features", label: c.nav.features },
    { id: "how",      label: c.nav.how },
    { id: "usecases", label: window.LANG === "fr" ? "Cas d'usage" : window.LANG === "nl" ? "Toepassingen" : "Use cases" },
    { id: "pricing",  label: c.nav.pricing },
    { id: "faq",      label: c.nav.faq },
  ];
  return (
    <div className={"mmenu" + (open ? " open" : "")}>
      <div className="mmenu-head">
        <a className="brand" href="#top" onClick={onClose}><span className="brand-mark"><Icon name="wallet" size={16} /></span>WalletLab</a>
        <button className="nav-burger" style={{ display: "grid" }} onClick={onClose} aria-label="Fermer"><Icon name="close" size={22} /></button>
      </div>
      <div className="mmenu-body">
        {links.map(l => (
          <a key={l.id} className="mmenu-link" href={"#" + l.id} onClick={onClose}>{l.label}<Icon name="chevron" size={20} /></a>
        ))}
        <div style={{ padding: "12px 0 8px", borderTop: "1px solid var(--line)", marginTop: 8 }}>
          <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 8, textTransform: "uppercase", letterSpacing: ".06em" }}>Langue / Language</div>
          <div style={{ display: "flex", gap: 8 }}>
            {Object.keys(LANG_META).map(l => (
              <button
                key={l}
                className={"lang-btn" + (l === window.LANG ? " active" : "")}
                onClick={() => { onClose(); if (l !== window.LANG) switchLang(l); }}
              >
                {LANG_META[l].label}
              </button>
            ))}
          </div>
        </div>
      </div>
      <div className="mmenu-foot">
        <button className="btn green" onClick={onClose}>{c.nav.cta}<Icon name="arrow" size={16} /></button>
        <a className="btn ghost" href="/app/login" onClick={onClose}>{c.nav.login}</a>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);
  useRevealRoot();

  useEffect(() => {
    const acc = t.accent || ACCENT_SETS.green;
    const [base, bright] = Array.isArray(acc) ? acc : [acc, acc];
    const root = document.documentElement;
    root.style.setProperty("--green", base);
    root.style.setProperty("--green-bright", bright);
  }, [t.accent]);

  useEffect(() => {
    document.body.style.cursor = t.cursor ? "none" : "auto";
  }, [t.cursor]);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);

  useEffect(() => {
    if (!menuOpen) return;
    history.pushState({ m: 1 }, "");
    const onPop = () => setMenuOpen(false);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, [menuOpen]);

  const accentKey = Object.keys(ACCENT_SETS).find(k => JSON.stringify(ACCENT_SETS[k]) === JSON.stringify(t.accent)) || "green";
  const c = window.CONTENT[window.LANG];

  return (
    <>
      <div className="bg-mesh"></div>
      {t.particles && <ParticleBG />}
      {t.cursor && <Cursor />}

      <Nav onBurger={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />

      <div className="page">
        <Hero />
        <Marquee />
        <Stats />
        <How />
        <Features />
        <Showcase />
        <UseCases />
        <Compare />
        <Testimonials />
        <Pricing />
        <FAQ />
        <BigCTA />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label={window.LANG === "nl" ? "Visuele identiteit" : window.LANG === "en" ? "Visual identity" : "Identité visuelle"} />
        <TweakColor label="Accent"
          value={t.accent}
          options={[ACCENT_SETS.green, ACCENT_SETS.teal, ACCENT_SETS.forest, ACCENT_SETS.ocean]}
          onChange={v => setTweak("accent", v)} />
        <TweakSection label={window.LANG === "nl" ? "Animaties" : "Animations"} />
        <TweakToggle label={window.LANG === "nl" ? "Geanimeerde achtergrond" : window.LANG === "en" ? "Animated background" : "Fond animé (particules)"} value={t.particles} onChange={v => setTweak("particles", v)} />
        <TweakToggle label={window.LANG === "nl" ? "Aangepaste cursor" : window.LANG === "en" ? "Custom cursor" : "Curseur personnalisé"} value={t.cursor} onChange={v => setTweak("cursor", v)} />
      </TweaksPanel>
    </>
  );
}

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