/* eslint-disable */
/* Lee Winbush v2 — main app + tweaks */

const { useState: useStateV2, useEffect: useEffectV2 } = React;

const TWEAK_DEFAULTS_V2 = /*EDITMODE-BEGIN*/{
  "accent": "navy",
  "theme": "light",
  "density": "comfortable",
  "headlineFont": "source-serif"
}/*EDITMODE-END*/;

function AppV2() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS_V2);

  useEffectV2(() => {
    document.documentElement.dataset.accent = tweaks.accent;
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dataset.font = tweaks.headlineFont;
  }, [tweaks.accent, tweaks.theme, tweaks.density, tweaks.headlineFont]);

  const fontSwap = {
    "source-serif": '"Source Serif 4", "Source Serif Pro", Georgia, serif',
    "newsreader": '"Newsreader", Georgia, serif',
    "instrument": '"Instrument Serif", Georgia, serif',
    "spectral": '"Spectral", Georgia, serif',
  };

  useEffectV2(() => {
    document.documentElement.style.setProperty("--font-display", fontSwap[tweaks.headlineFont]);
  }, [tweaks.headlineFont]);

  useEffectV2(() => {
    if (tweaks.density === "spacious") {
      document.documentElement.style.setProperty("--section-y", "128px");
      document.documentElement.style.setProperty("--hero-y", "140px");
      document.documentElement.style.setProperty("--hero-y-bottom", "120px");
    } else {
      document.documentElement.style.setProperty("--section-y", "96px");
      document.documentElement.style.setProperty("--hero-y", "96px");
      document.documentElement.style.setProperty("--hero-y-bottom", "96px");
    }
  }, [tweaks.density]);

  const scrollToContact = () => {
    document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div id="top" data-screen-label="01 Lee Winbush — Strategic Tech Advisor">
      <NavV2 onContactClick={scrollToContact} />
      <HeroV2 onContactClick={scrollToContact} />
      <WhoIWorkWith />
      <InsightSection />
      <CaseProof />
      <Framework />
      <AboutLee />
      <Differentiation />
      <Engagements onContactClick={scrollToContact} />
      <CTAV2 />
      <FooterV2 />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={tweaks.theme} options={[
            { value: "light", label: "Light" },
            { value: "dark", label: "Dark" },
          ]} onChange={(v) => setTweak("theme", v)} />
        </TweakSection>

        <TweakSection label="Accent color">
          <TweakSelect label="Accent" value={tweaks.accent} options={[
            { value: "navy",  label: "Navy (default)" },
            { value: "stone", label: "Stone" },
            { value: "brass", label: "Brass" },
            { value: "pine",  label: "Pine" },
            { value: "mono",  label: "Mono — no color" },
          ]} onChange={(v) => setTweak("accent", v)} />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakSelect label="Headline font" value={tweaks.headlineFont} options={[
            { value: "source-serif", label: "Source Serif 4 (default)" },
            { value: "newsreader",   label: "Newsreader" },
            { value: "instrument",   label: "Instrument Serif" },
            { value: "spectral",     label: "Spectral" },
          ]} onChange={(v) => setTweak("headlineFont", v)} />
        </TweakSection>

        <TweakSection label="Density">
          <TweakRadio label="Spacing" value={tweaks.density} options={[
            { value: "comfortable", label: "Comfortable" },
            { value: "spacious",    label: "Spacious" },
          ]} onChange={(v) => setTweak("density", v)} />
        </TweakSection>

        <TweakSection label="Reference">
          <a href="CMA Design System.html" style={{
            display: "block", padding: "10px 12px",
            background: "rgba(255,255,255,0.05)",
            border: "1px solid rgba(255,255,255,0.1)",
            color: "inherit", textDecoration: "none", fontSize: "12px",
            borderRadius: "4px", textAlign: "center",
          }}>Open Design System →</a>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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