/* global React, ReactDOM, Nav, Hero, Studio, Projects, Team, Careers, Contact,
   useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff7a45",
  "bgTone": "ink",
  "display": "grotesk",
  "motion": true
}/*EDITMODE-END*/;

const ACCENT_PAIRS = {
  "#ff7a45": "#ffb15c", // ember (default)
  "#7a5ae0": "#a78bfa", // violet
  "#2ba8ff": "#7cc8ff", // electric blue
  "#19c37d": "#5fe3b3", // green
};

const BG_TONES = {
  ink:  { bg: "#0a0a0d", bg2: "#0e0e12" },
  warm: { bg: "#0d0a09", bg2: "#120e0c" },
  cool: { bg: "#080a0e", bg2: "#0b0e14" },
};

function useScrollReveal() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal:not(.in)"));
    if (!("IntersectionObserver" in window)) {
      els.forEach(e => e.classList.add("in")); return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = t.accent || "#ff7a45";
    const a2 = ACCENT_PAIRS[a] || "#ffb15c";
    r.setProperty("--accent", a);
    r.setProperty("--accent-2", a2);
    // derive soft + line from accent
    r.setProperty("--accent-soft", hexA(a, 0.14));
    r.setProperty("--accent-line", hexA(a, 0.32));
    // bgTone via data attribute so CSS handles --bg/--bg-2 (no inline style conflict with light theme)
    document.documentElement.setAttribute("data-bg-tone", t.bgTone || "ink");
    document.documentElement.setAttribute("data-display", t.display);
    document.documentElement.setAttribute("data-motion", t.motion ? "on" : "off");
  }, [t.accent, t.bgTone, t.display, t.motion]);

  useScrollReveal();

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Studio />
        <Projects />
        <Team />
        <Careers />
        <Contact />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={t.accent}
          options={Object.keys(ACCENT_PAIRS)}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Canvas" />
        <TweakRadio label="Background" value={t.bgTone}
          options={["ink", "warm", "cool"]}
          onChange={(v) => setTweak("bgTone", v)} />
        <TweakSection label="Headlines" />
        <TweakRadio label="Display" value={t.display}
          options={["grotesk", "serif"]}
          onChange={(v) => setTweak("display", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Mascot + ambient motion" value={t.motion}
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </>
  );
}

function hexA(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

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