/* Oqiva Labs — main app composition */

const { useState, useEffect, useRef } = React;
const C = window.OQIVA_CONTENT;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "density": "regular",
  "dark": true,
  "showCanvas": true
}/*EDITMODE-END*/;

const ACCENTS = {
  green:  { accent: "oklch(0.62 0.16 150)", deep: "oklch(0.45 0.14 152)", soft: "oklch(0.92 0.05 150)", glow: "oklch(0.78 0.13 150 / 0.22)" },
  ink:    { accent: "oklch(0.55 0.15 240)", deep: "oklch(0.40 0.14 245)", soft: "oklch(0.92 0.05 240)", glow: "oklch(0.70 0.13 240 / 0.22)" },
  amber:  { accent: "oklch(0.74 0.15 70)",  deep: "oklch(0.55 0.14 60)",  soft: "oklch(0.94 0.05 80)",  glow: "oklch(0.80 0.14 70 / 0.22)" },
  violet: { accent: "oklch(0.62 0.16 295)", deep: "oklch(0.45 0.16 295)", soft: "oklch(0.92 0.05 295)", glow: "oklch(0.78 0.14 295 / 0.22)" },
};

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("oqiva_lang") || "en");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    document.documentElement.lang = lang;
    localStorage.setItem("oqiva_lang", lang);
  }, [lang]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Apply tweaks to root
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-density", t.density);
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    const acc = ACCENTS[t.accent] || ACCENTS.green;
    r.style.setProperty("--accent", acc.accent);
    r.style.setProperty("--accent-deep", acc.deep);
    r.style.setProperty("--accent-soft", acc.soft);
    r.style.setProperty("--accent-glow", acc.glow);
  }, [t]);

  useReveal();

  return (
    <div className="site">
      {t.showCanvas && <AmbientField />}
      <ScrollRail lang={lang} />
      <Nav lang={lang} setLang={setLang} scrolled={scrolled} />
      <Hero lang={lang} c={C} />
      <LiveTicker lang={lang} />
      <Manifesto lang={lang} />
      <WhatWeDo lang={lang} c={C} />
      <ProductSection lang={lang} c={C} />
      <WhyNow lang={lang} c={C} />
      <Market lang={lang} c={C} />
      <Approach lang={lang} c={C} />
      <Partner lang={lang} c={C} />
      <Investor lang={lang} c={C} />
      <Founder lang={lang} c={C} />
      <VisionMission lang={lang} c={C} />
      <FinalCTA lang={lang} c={C} />
      <Footer lang={lang} c={C} />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakRadio
          label="Color"
          value={t.accent}
          options={["green", "ink", "amber", "violet"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Density" />
        <TweakRadio
          label="Layout"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSection label="Theme" />
        <TweakToggle
          label="Dark mode"
          value={t.dark}
          onChange={(v) => setTweak("dark", v)}
        />
        <TweakToggle
          label="Ambient field"
          value={t.showCanvas}
          onChange={(v) => setTweak("showCanvas", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function Nav({ lang, setLang, scrolled }) {
  const links = [
    { id: "products", l: C.nav.products },
    { id: "approach", l: C.nav.approach },
    { id: "partners", l: C.nav.partners },
    { id: "investors", l: C.nav.investors },
    { id: "founder", l: C.nav.about },
  ];
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="shell nav-inner">
        <a href="#top" className="wordmark">
          <span className="mark"><Mark size={24} animated /></span>
          <span>Oqiva Labs</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          {links.map((it) => (
            <a key={it.id} href={`#${it.id}`} className="nav-link">{window.t(it.l, lang)}</a>
          ))}
        </nav>
        <div className="nav-cluster">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "th" ? "on" : ""} onClick={() => setLang("th")}>TH</button>
          </div>
          <a href="#contact" className="btn btn-primary nav-cta">
            {lang === "th" ? "ติดต่อ" : "Contact"}
            <ArrowRight />
          </a>
        </div>
      </div>
    </header>
  );
}

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