/* global React, ReactDOM, Hero, Nav, Problem, Diagnostic, Approach, Engagements, Proof, About, FinalCTA, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "data",
  "heroCopy": "work",
  "accent": "navy",
  "typePair": "cinzel-source",
  "hierarchy": "capital",
  "ctaCopy": "diagnostic",
  "density": "balanced"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply data-* on body for CSS-driven variants
  useEffect(() => {
    document.body.dataset.direction = tweaks.direction;
    document.body.dataset.density = tweaks.density;

    // Accent color
    const accents = {
      blue: "#155ac1",
      navy: "#1b2538",
      teal: "#2f5972"
    };
    document.documentElement.style.setProperty("--accent", accents[tweaks.accent] || accents.blue);

    // Type pairing
    const pairs = {
      "cinzel-source": { display: "'Cinzel', serif", serif: "'Source Serif 4', Georgia, serif", sans: "'Public Sans', sans-serif" },
      "cinzel-public": { display: "'Cinzel', serif", serif: "'Public Sans', sans-serif", sans: "'Public Sans', sans-serif" },
      "public-only": { display: "'Public Sans', sans-serif", serif: "'Public Sans', sans-serif", sans: "'Public Sans', sans-serif" }
    };
    const p = pairs[tweaks.typePair] || pairs["cinzel-source"];
    document.documentElement.style.setProperty("--display", p.display);
    document.documentElement.style.setProperty("--serif", p.serif);
    document.documentElement.style.setProperty("--sans", p.sans);
  }, [tweaks]);

  return (
    <div>
      <Nav />
      <Hero copyVariant={tweaks.heroCopy} />
      <Problem />
      <Engagements hierarchy={tweaks.hierarchy} />
      <Diagnostic />
      <Approach />
      <Proof />
      <About />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Visual direction">
          <TweakRadio label="Style" value={tweaks.direction} onChange={v => setTweak("direction", v)}
            options={[{ value: "data", label: "Editorial" }, { value: "manifesto", label: "Manifesto" }, { value: "warm", label: "Warm" }]} />
        </TweakSection>
        <TweakSection title="Hero copy">
          <TweakSelect label="Variant" value={tweaks.heroCopy} onChange={v => setTweak("heroCopy", v)}
            options={[
              { value: "firm", label: "Firm: Capital readiness for founders raising into institutional money" },
              { value: "work", label: "Work: The work behind the round" },
              { value: "discipline", label: "Discipline: Rigor in the rest of your business. Improvisation in the round." }
            ]} />
        </TweakSection>
        <TweakSection title="Accent color">
          <TweakRadio label="Color" value={tweaks.accent} onChange={v => setTweak("accent", v)}
            options={[{ value: "blue", label: "Bold blue" }, { value: "navy", label: "Navy" }, { value: "teal", label: "Teal" }]} />
        </TweakSection>
        <TweakSection title="Type pairing">
          <TweakSelect label="Pairing" value={tweaks.typePair} onChange={v => setTweak("typePair", v)}
            options={[
              { value: "cinzel-source", label: "Cinzel + Source Serif (editorial)" },
              { value: "cinzel-public", label: "Cinzel + Public Sans (modern)" },
              { value: "public-only", label: "Public Sans only (minimal)" }
            ]} />
        </TweakSection>
        <TweakSection title="Offering hierarchy">
          <TweakRadio label="Lead with" value={tweaks.hierarchy} onChange={v => setTweak("hierarchy", v)}
            options={[{ value: "capital", label: "Capital" }, { value: "coo", label: "COO" }, { value: "equal", label: "Equal" }]} />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio label="Spacing" value={tweaks.density} onChange={v => setTweak("density", v)}
            options={[{ value: "sparse", label: "Sparse" }, { value: "balanced", label: "Balanced" }, { value: "dense", label: "Dense" }]} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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