// app.jsx — root app with hero variant switcher + tweaks

const {
  Nav, HeroKinetic, HeroSplit, HeroCinematic, HeroNeural,
  Services, Expertise, Specializations, Contact, Footer,
  ServicesCinema, ExpertiseWall, SpecializationsEditorial, ContactCinema, ScrollChrome,
  TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSlider, TweakSelect,
} = window;

const HERO_VARIANTS = {
  neural:  { label: "Neural",  component: () => <HeroNeural/> },
  kinetic: { label: "Kinetic", component: () => <HeroKinetic/> },
  split:   { label: "Split",   component: () => <HeroSplit/> },
  cinema:  { label: "Cinema",  component: () => <HeroCinematic/> },
};

const ACCENT_PRESETS = {
  "Signature sky":  { a: "#7cc4e8", b: "#b79dff" },
  "Electric lime":  { a: "#b6ff3d", b: "#5ce1a9" },
  "Warm copper":    { a: "#ff9a6c", b: "#f5c77a" },
  "Violet pulse":   { a: "#a78bfa", b: "#f472b6" },
  "Mint":           { a: "#6be4bf", b: "#7ad5ff" },
};

const FONT_PAIRS = {
  "Geist + Instrument Serif": { sans: "'Geist', ui-sans-serif, system-ui, sans-serif",   serif: "'Instrument Serif', serif" },
  "Inter + Playfair":         { sans: "'Inter', ui-sans-serif, system-ui, sans-serif",   serif: "'Playfair Display', serif" },
  "Space Grotesk + Fraunces": { sans: "'Space Grotesk', ui-sans-serif, sans-serif",      serif: "'Fraunces', serif" },
  "Jakarta + Fraunces":       { sans: "'Plus Jakarta Sans', ui-sans-serif, sans-serif",  serif: "'Fraunces', serif" },
  "IBM Plex Sans + Serif":    { sans: "'IBM Plex Sans', ui-sans-serif, sans-serif",      serif: "'IBM Plex Serif', serif" },
};

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

  // Apply tweaks as CSS variables
  React.useEffect(() => {
    const r = document.documentElement.style;
    const preset = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS["Signature sky"];
    r.setProperty("--accent", preset.a);
    r.setProperty("--accent-2", preset.b);
    const fp = FONT_PAIRS[tweaks.fonts] || FONT_PAIRS["Geist + Instrument Serif"];
    r.setProperty("--font-sans", fp.sans);
    r.setProperty("--font-serif", fp.serif);
    window.__motionLevel = tweaks.motion;
    window.__brainVariant = tweaks.brain;
  }, [tweaks.accent, tweaks.fonts, tweaks.motion, tweaks.brain]);

  const Hero = (HERO_VARIANTS[tweaks.hero] || HERO_VARIANTS.kinetic).component;

  return (
    <>
      <Nav/>
      <ScrollChrome/>
      <main>
        <Hero key={tweaks.hero}/>
        <ServicesCinema/>
        <ExpertiseWall/>
        <SpecializationsEditorial/>
        <ContactCinema/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero"/>
        <TweakRadio label="Variant" value={tweaks.hero}
          options={[{value:"neural",label:"Neural"},{value:"kinetic",label:"Kinetic"},{value:"split",label:"Split"},{value:"cinema",label:"Cinema"}]}
          onChange={(v) => setTweak("hero", v)}/>
        {tweaks.hero === "neural" && (
          <TweakRadio label="Brain" value={tweaks.brain}
            options={[{value:"anatomical",label:"Anatomic"},{value:"constellation",label:"Nodes"},{value:"wireframe",label:"Wire"}]}
            onChange={(v) => setTweak("brain", v)}/>
        )}

        <TweakSection label="Palette"/>
        <TweakSelect label="Accent" value={tweaks.accent}
          options={Object.keys(ACCENT_PRESETS)}
          onChange={(v) => setTweak("accent", v)}/>

        <TweakSection label="Typography"/>
        <TweakSelect label="Font pair" value={tweaks.fonts}
          options={Object.keys(FONT_PAIRS)}
          onChange={(v) => setTweak("fonts", v)}/>

        <TweakSection label="Motion"/>
        <TweakSlider label="Intensity" value={tweaks.motion} min={1} max={10} step={1}
          onChange={(v) => setTweak("motion", v)}/>
      </TweaksPanel>
    </>
  );
}

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