/* Root app + Tweaks. */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "graphite",
  "typePair": "newsreader-geist",
  "density": "default",
  "hero": "reel",
  "accent": "#c8552d"
}/*EDITMODE-END*/;

/* -------- palette swatches (curated, not free picker) -------- */
const PALETTES = {
  graphite: {
    label: "Graphite (dark)",
    css: {
      "--bg": "oklch(0.22 0.005 250)",
      "--bg-elev": "oklch(0.26 0.006 250)",
      "--bg-sunk": "oklch(0.18 0.005 250)",
      "--fg": "oklch(0.94 0.004 250)",
      "--fg-muted": "oklch(0.66 0.006 250)",
      "--fg-faint": "oklch(0.50 0.006 250)",
      "--rule": "oklch(0.34 0.006 250)",
      "--rule-strong": "oklch(0.44 0.008 250)",
      "--accent": "oklch(0.72 0.14 38)",
      "--accent-ink": "oklch(0.78 0.12 38)",
      "--grid": "oklch(0.30 0.006 250 / 0.55)",
      "--grid-major": "oklch(0.40 0.008 250 / 0.45)",
    },
    swatch: ["#2c2f33", "#eceef1", "#e8895a"],
  },
  obsidian: {
    label: "Obsidian (dark)",
    css: {
      "--bg": "oklch(0.16 0.004 260)",
      "--bg-elev": "oklch(0.20 0.005 260)",
      "--bg-sunk": "oklch(0.12 0.004 260)",
      "--fg": "oklch(0.96 0.003 260)",
      "--fg-muted": "oklch(0.66 0.005 260)",
      "--fg-faint": "oklch(0.48 0.005 260)",
      "--rule": "oklch(0.28 0.005 260)",
      "--rule-strong": "oklch(0.40 0.006 260)",
      "--accent": "oklch(0.74 0.16 38)",
      "--accent-ink": "oklch(0.80 0.13 38)",
      "--grid": "oklch(0.24 0.005 260 / 0.6)",
      "--grid-major": "oklch(0.34 0.006 260 / 0.5)",
    },
    swatch: ["#16181c", "#f0f1f4", "#e98e5d"],
  },
  warm: {
    label: "Warm Editorial (light)",
    css: {
      "--bg": "oklch(0.975 0.005 80)",
      "--bg-elev": "oklch(0.99 0.004 80)",
      "--bg-sunk": "oklch(0.945 0.006 80)",
      "--fg": "oklch(0.20 0.012 60)",
      "--fg-muted": "oklch(0.45 0.008 60)",
      "--fg-faint": "oklch(0.62 0.006 60)",
      "--rule": "oklch(0.86 0.006 70)",
      "--rule-strong": "oklch(0.74 0.008 70)",
      "--accent": "oklch(0.58 0.14 38)",
      "--accent-ink": "oklch(0.30 0.10 38)",
      "--grid": "oklch(0.86 0.005 70 / 0.6)",
      "--grid-major": "oklch(0.78 0.008 70 / 0.55)",
    },
    swatch: ["#f6f3ec", "#1f1c17", "#c8552d"],
  },
  cool: {
    label: "Cool Slate (light)",
    css: {
      "--bg": "oklch(0.975 0.004 240)",
      "--bg-elev": "oklch(0.99 0.003 240)",
      "--bg-sunk": "oklch(0.945 0.005 240)",
      "--fg": "oklch(0.21 0.015 250)",
      "--fg-muted": "oklch(0.46 0.012 250)",
      "--fg-faint": "oklch(0.62 0.008 250)",
      "--rule": "oklch(0.86 0.008 240)",
      "--rule-strong": "oklch(0.74 0.012 240)",
      "--accent": "oklch(0.58 0.12 230)",
      "--accent-ink": "oklch(0.32 0.10 230)",
      "--grid": "oklch(0.86 0.006 240 / 0.6)",
      "--grid-major": "oklch(0.78 0.01 240 / 0.55)",
    },
    swatch: ["#eff2f6", "#1a1d22", "#2c6fb0"],
  },
};

const TYPE_PAIRS = {
  "newsreader-geist": {
    label: "Newsreader / Geist",
    css: {
      "--ff-display": "\"Newsreader\", Georgia, serif",
      "--ff-sans": "\"Geist\", \"Helvetica Neue\", sans-serif",
      "--ff-mono": "\"JetBrains Mono\", ui-monospace, monospace",
    },
  },
  "fraunces-manrope": {
    label: "Fraunces / Manrope",
    css: {
      "--ff-display": "\"Fraunces\", Georgia, serif",
      "--ff-sans": "\"Manrope\", \"Helvetica Neue\", sans-serif",
      "--ff-mono": "\"JetBrains Mono\", ui-monospace, monospace",
    },
  },
  "instrument-inter": {
    label: "Instrument Serif / Geist",
    css: {
      "--ff-display": "\"Instrument Serif\", Georgia, serif",
      "--ff-sans": "\"Geist\", sans-serif",
      "--ff-mono": "\"JetBrains Mono\", monospace",
    },
  },
};

function applyTweaks(t) {
  const root = document.documentElement;
  // palette
  const pal = PALETTES[t.palette] || PALETTES.graphite;
  Object.entries(pal.css).forEach(([k, v]) => root.style.setProperty(k, v));
  // type
  const tp = TYPE_PAIRS[t.typePair] || TYPE_PAIRS["newsreader-geist"];
  Object.entries(tp.css).forEach(([k, v]) => root.style.setProperty(k, v));
  // density
  root.dataset.density = t.density === "default" ? "" : t.density;
  // hero
  root.dataset.hero = t.hero;
}

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

  useEffect(() => { applyTweaks(t); }, [t.palette, t.typePair, t.density, t.hero]);

  return (
    <>
      <div className="shell">
        <TopBar />
        <Hero />
        <Marquee />
        <Works />
        <CaseStudy />
        <ShippedTitles />
        <Resume />
        <About />
        <Contact />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor
            label="Theme"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={Object.entries(PALETTES).map(([k, p]) => ({ value: k, label: p.label, color: p.swatch }))}
          />
        </TweakSection>

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

        <TweakSection title="Layout">
          <TweakRadio
            label="Density"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "default", label: "Default" },
              { value: "roomy", label: "Roomy" },
            ]}
          />
          <TweakRadio
            label="Hero"
            value={t.hero}
            onChange={(v) => setTweak("hero", v)}
            options={[
              { value: "reel", label: "Reel" },
              { value: "still", label: "Still" },
              { value: "grid", label: "Grid" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* TweakColor: swatch-based color picker. The starter exports TweakColor already, but it
   takes flat hex options. We render a small custom variant that shows palette swatches. */
function TweakColor({ label, value, onChange, options }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ fontSize: 11, letterSpacing: 0.6, textTransform: "uppercase", color: "rgba(0,0,0,.55)" }}>{label}</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
        {options.map((o) => (
          <button
            key={o.value}
            onClick={() => onChange(o.value)}
            style={{
              border: value === o.value ? "1.5px solid #111" : "1px solid rgba(0,0,0,.15)",
              padding: 8, background: "white", textAlign: "left",
              display: "flex", flexDirection: "column", gap: 6, cursor: "pointer",
            }}
          >
            <div style={{ display: "flex", gap: 4 }}>
              {o.color.map((c, i) => (
                <span key={i} style={{ width: 18, height: 18, background: c, border: "1px solid rgba(0,0,0,.08)" }}></span>
              ))}
            </div>
            <span style={{ fontSize: 11, color: "#111" }}>{o.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

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