/* App — root composition + nav + Tweaks panel wiring */

const { useState, useEffect } = React;

const ACCENT_PRESETS = {
  ochre:    { accent: "oklch(0.74 0.155 70)",  deep: "oklch(0.55 0.155 55)" },
  ink:      { accent: "oklch(0.55 0.022 250)", deep: "oklch(0.32 0.020 250)" },
  forest:   { accent: "oklch(0.62 0.110 155)", deep: "oklch(0.42 0.090 155)" },
  oxblood:  { accent: "oklch(0.55 0.140 25)",  deep: "oklch(0.42 0.130 25)" },
};

const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#top" className="logo" style={{ textDecoration: "none", color: "inherit" }}>
        <span className="dot" />
        <span>Kim Coaching Group</span>
        <small>EST 2024</small>
      </a>
      <div className="nav-links">
        <a href="#approach">Approach</a>
        <a href="#offerings">Offerings</a>
        <a href="#about">About</a>
        <a href="#resources">Writing</a>
        <a href="https://tidycal.com/kcg/starter-package" target="_blank" rel="noopener" className="nav-cta">
          Book First Two →
        </a>
      </div>
    </div>
  </nav>
);

const App = () => {
  const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);

  // Apply accent + density to :root
  useEffect(() => {
    const root = document.documentElement;
    const a = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.ochre;
    root.style.setProperty("--accent", a.accent);
    root.style.setProperty("--accent-deep", a.deep);
  }, [tweaks.accent]);

  useEffect(() => {
    document.body.dataset.density = tweaks.density || "default";
  }, [tweaks.density]);

  return (
    <div id="top">
      <Nav />
      <Hero variant={tweaks.heroVariant} showStamp={tweaks.showStamp} />
      <QuietStruggle />
      <BoldMoves />
      <Offerings />
      <Testimonials />
      <About />
      <Resources />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroVariant}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "manifesto", label: "Manifesto" },
              { value: "split",     label: "Split" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Show credentials stamp"
            value={tweaks.showStamp}
            onChange={(v) => setTweak("showStamp", v)}
          />
        </TweakSection>

        <TweakSection label="Identity">
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            options={[
              { value: "ochre",   label: "Ochre" },
              { value: "ink",     label: "Ink" },
              { value: "forest",  label: "Forest" },
              { value: "oxblood", label: "Oxblood" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Layout">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={[
              { value: "cozy",      label: "Cozy" },
              { value: "default",   label: "Default" },
              { value: "spacious",  label: "Spacious" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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