// app.jsx — root + tweaks wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8612a",
  "accentSoft": "#f0d4b8",
  "accentInk": "#693517",
  "density": "regular",
  "type": "fraunces-inter",
  "videoSize": "regular"
}/*EDITMODE-END*/;

const TYPE_PAIRS = {
  "fraunces-inter": {
    display: '"Fraunces", Georgia, serif',
    sans: '"Inter", ui-sans-serif, system-ui, sans-serif',
    label: "Fraunces × Inter",
  },
  "instrument-mono": {
    display: '"Instrument Serif", Georgia, serif',
    sans: '"DM Sans", ui-sans-serif, system-ui, sans-serif',
    label: "Instrument × DM Sans",
  },
  "playfair-work": {
    display: '"Playfair Display", Georgia, serif',
    sans: '"Work Sans", ui-sans-serif, system-ui, sans-serif',
    label: "Playfair × Work Sans",
  },
};

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

  // Apply tokens to :root
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-soft", t.accentSoft);
    r.setProperty("--accent-ink", t.accentInk);
    const pair = TYPE_PAIRS[t.type] || TYPE_PAIRS["fraunces-inter"];
    r.setProperty("--display", pair.display);
    r.setProperty("--sans", pair.sans);
    document.body.dataset.density = t.density;
  }, [t]);

  // Scroll reveal
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Topbar email={ABOUT.email} />
      <main>
        <Hero videoSize={t.videoSize} />
        <Stats />
        <Speaking />
        <Services />
        <Repos />
        <Articles />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Site tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="Primary"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Soft tint"
          value={t.accentSoft}
          onChange={(v) => setTweak("accentSoft", v)} />
        <TweakColor label="Deep ink"
          value={t.accentInk}
          onChange={(v) => setTweak("accentInk", v)} />
        <TweakButton label="Reset palette" secondary
          onClick={() => setTweak({
            accent: "#c8612a",
            accentSoft: "#f0d4b8",
            accentInk: "#693517",
          })} />

        <TweakSection label="Typography" />
        <TweakSelect label="Pairing" value={t.type}
          options={Object.entries(TYPE_PAIRS).map(([v, p]) => ({ value: v, label: p.label }))}
          onChange={(v) => setTweak("type", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={[
            { value: "cozy", label: "Cozy" },
            { value: "regular", label: "Reg" },
            { value: "airy", label: "Airy" },
          ]}
          onChange={(v) => setTweak("density", v)} />
        <TweakRadio label="Hero video" value={t.videoSize}
          options={[
            { value: "small", label: "Small" },
            { value: "regular", label: "Mid" },
            { value: "large", label: "Tall" },
          ]}
          onChange={(v) => setTweak("videoSize", v)} />

        <TweakSection label="Quick palettes" />
        <div style={{ display: "flex", gap: 6 }}>
          <TweakButton label="Terracotta" secondary
            onClick={() => setTweak({ accent: "#c8612a", accentSoft: "#f0d4b8", accentInk: "#693517" })} />
          <TweakButton label="Olive" secondary
            onClick={() => setTweak({ accent: "#7a8a3a", accentSoft: "#d9dfb8", accentInk: "#3f4a1d" })} />
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <TweakButton label="Plum" secondary
            onClick={() => setTweak({ accent: "#8a4a78", accentSoft: "#e7d3df", accentInk: "#4a2540" })} />
          <TweakButton label="Indigo" secondary
            onClick={() => setTweak({ accent: "#4a5fa8", accentSoft: "#d0d7ec", accentInk: "#243165" })} />
        </div>
      </TweaksPanel>
    </>
  );
}

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