/* global React, ReactDOM, Nav, StickyCTA, Hero, Marquee, Press, Story, Cases, Quiz, BeforeAfter, Videos, FinalCTA, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
const { useEffect } = React;

// Curated palettes — each has dark + light variants
const PALETTES = {
  warm: {
    dark:  { bg: "#0a0a0a", bg2: "#131211", bg3: "#1c1a17", ink: "#f5f1ea", ink2: "#cfc8bb", ink3: "#8a8377", line: "#2a2622", line2: "#3a352e", accent: "#d4a574" },
    light: { bg: "#faf7f1", bg2: "#f3eee5", bg3: "#ebe4d6", ink: "#1a1814", ink2: "#4a443b", ink3: "#7a7263", line: "#e3dccc", line2: "#d2c9b3", accent: "#a67a3f" },
  },
  forest: {
    dark:  { bg: "#0d100d", bg2: "#141815", bg3: "#1c211d", ink: "#eef0e8", ink2: "#c5c9bb", ink3: "#828777", line: "#262b25", line2: "#363c34", accent: "#9bb37a" },
    light: { bg: "#f5f6f0", bg2: "#eceee3", bg3: "#e1e5d3", ink: "#181a16", ink2: "#454a40", ink3: "#737867", line: "#dadfca", line2: "#c4ccb1", accent: "#5a7d3e" },
  },
  rust: {
    dark:  { bg: "#0e0a08", bg2: "#171110", bg3: "#1f1614", ink: "#f4ece2", ink2: "#d0c2b3", ink3: "#8a7d6e", line: "#2b201c", line2: "#3a2c26", accent: "#d97757" },
    light: { bg: "#fbf6ef", bg2: "#f3ece0", bg3: "#ebe1cf", ink: "#1a1411", ink2: "#4a3e35", ink3: "#7d6f62", line: "#e4d8c4", line2: "#d4c5ac", accent: "#b8482a" },
  },
  ink: {
    dark:  { bg: "#08090c", bg2: "#0f1116", bg3: "#161823", ink: "#eaeef8", ink2: "#b9c0d2", ink3: "#7a8298", line: "#1d2030", line2: "#2a2e44", accent: "#a0b4ff" },
    light: { bg: "#f6f7fb", bg2: "#edeff5", bg3: "#e2e5ef", ink: "#0e1018", ink2: "#3d4258", ink3: "#6f7693", line: "#dde1ee", line2: "#c8cee0", accent: "#4a63d6" },
  },
};
const PALETTE_OPTS = [
  ["#0a0a0a", "#f5f1ea", "#d4a574"],
  ["#0d100d", "#eef0e8", "#9bb37a"],
  ["#0e0a08", "#f4ece2", "#d97757"],
  ["#08090c", "#eaeef8", "#a0b4ff"],
];
const PALETTE_NAMES = ["warm", "forest", "rust", "ink"];

// Curated font pairings
const FONT_PAIRS = {
  editorial: {
    display: '"Instrument Serif", Georgia, serif',
    sans: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  classic: {
    display: '"Cormorant Garamond", "Times New Roman", serif',
    sans: '"DM Sans", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  modern: {
    display: '"Fraunces", Georgia, serif',
    sans: '"Plus Jakarta Sans", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  bold: {
    display: '"Space Grotesk", -apple-system, sans-serif',
    sans: '"Space Grotesk", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
};

const DEFAULTS = window.__TWEAK_DEFAULTS;

function applyPalette(name, mode) {
  const palette = PALETTES[name] || PALETTES.warm;
  const p = palette[mode] || palette.dark;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => {
    const cssKey = "--" + (k === "bg2" ? "bg-2" : k === "bg3" ? "bg-3" : k === "ink2" ? "ink-2" : k === "ink3" ? "ink-3" : k === "line2" ? "line-2" : k);
    root.style.setProperty(cssKey, v);
  });
  // Warm accents read on dark bgs; on light bgs we want light text over the accent button
  const accentInkLight = mode === "light";
  root.style.setProperty("--accent-ink", accentInkLight ? "#faf7f1" : p.bg);
}

function applyFonts(name) {
  const f = FONT_PAIRS[name] || FONT_PAIRS.editorial;
  const root = document.documentElement;
  root.style.setProperty("--f-display", f.display);
  root.style.setProperty("--f-sans", f.sans);
  root.style.setProperty("--f-mono", f.mono);
}

function App() {
  const [t, setT] = useTweaks(DEFAULTS);

  // Apply non-CSS-var-toggleable settings imperatively
  useEffect(() => applyPalette(t.palette, t.mode), [t.palette, t.mode]);
  useEffect(() => applyFonts(t.fonts), [t.fonts]);
  useEffect(() => {
    document.documentElement.dataset.mode = t.mode;
    document.documentElement.dataset.density = t.density;
  }, [t.mode, t.density]);

  const onBook = () => {
    // Replace with Calendly / Cal.com link
    alert("→ This would open your booking flow (Calendly, Cal.com, Savvycal, etc.)");
  };

  return (
    <>
      <Nav onBook={onBook} />
      <Hero layout={t.heroLayout} headline={t.headline} onBook={onBook} />
      <Marquee />
      <Press />
      <Story />
      <Cases />
      <Wall />
      <Meetups onBook={onBook} />
      <Quiz onBook={onBook} />
      <SoundLikeYou onBook={onBook} />
      <About onBook={onBook} />
      <BeforeAfter />
      <Videos />
      <FinalCTA onBook={onBook} />
      <Footer />
      <StickyCTA onBook={onBook} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakColor
            label="Palette"
            value={PALETTE_OPTS[PALETTE_NAMES.indexOf(t.palette)]}
            options={PALETTE_OPTS}
            onChange={(arr) => {
              const idx = PALETTE_OPTS.findIndex((p) => p[0] === arr[0]);
              setT("palette", PALETTE_NAMES[idx]);
            }}
          />
          <TweakRadio
            label="Mode"
            value={t.mode}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setT("mode", v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[{ value: "spacious", label: "Spacious" }, { value: "compact", label: "Compact" }]}
            onChange={(v) => setT("density", v)}
          />
        </TweakSection>

        <TweakSection label="Type">
          <TweakSelect
            label="Font pairing"
            value={t.fonts}
            options={[
              { value: "editorial", label: "Instrument Serif × Geist" },
              { value: "classic", label: "Cormorant × DM Sans" },
              { value: "modern", label: "Fraunces × Jakarta" },
              { value: "bold", label: "Space Grotesk (single)" },
            ]}
            onChange={(v) => setT("fonts", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakSelect
            label="Layout"
            value={t.heroLayout}
            options={[
              { value: "split", label: "Split · text + portrait" },
              { value: "centered", label: "Centered · text only" },
              { value: "asym", label: "Asymmetric · stats + text + portrait" },
            ]}
            onChange={(v) => setT("heroLayout", v)}
          />
          <TweakSelect
            label="Headline copy"
            value={t.headline}
            options={[
              { value: "a", label: "A · noise into boring business" },
              { value: "b", label: "B · one honest conversation" },
              { value: "c", label: "C · stop guessing" },
            ]}
            onChange={(v) => setT("headline", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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