/* App entry — wires Tweaks panel + sections */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline1": "Engineering Confidence.",
  "headline2": "Delivering Certainty.",
  "tintSpeed": 30,
  "evidenceVariant": "slider",
  "showSidebar": false,
  "perfTransition": "kenburns",
  "perfGlow": 0.32
}/*EDITMODE-END*/;

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

  return (
    <>
      <StackBackdrop />
      <HeaderNav />
      <Hero tweaks={tweaks} />
      <MobileNav />
      <FloatingCTA />
      <StackCard index={0} tone="dark"  first><ServicesSection /></StackCard>
      <StackCard index={1} tone="light"><ContactCTA /></StackCard>
      <StackCard index={2} tone="dark"><Projects /></StackCard>
      <StackCard index={3} tone="light"><Process /></StackCard>
      <StackCard index={4} tone="dark"><HolisticApproach /></StackCard>
      <StackCard index={5} tone="light"><ValueProp tweaks={tweaks} /></StackCard>
      <StackCard index={6} tone="dark"><RealProblem /></StackCard>
      <StackCard index={7} tone="light" last><AboutMe /></StackCard>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero copy" />
        <TweakText
          label="Line 1 (charcoal)"
          value={tweaks.headline1}
          onChange={(v) => setTweak('headline1', v)}
        />
        <TweakText
          label="Line 2 (copper)"
          value={tweaks.headline2}
          onChange={(v) => setTweak('headline2', v)}
        />

        <TweakSection label="Hero atmosphere" />
        <TweakSlider
          label="Tint cycle"
          min={8} max={90} step={1} unit="s"
          value={tweaks.tintSpeed}
          onChange={(v) => setTweak('tintSpeed', v)}
        />
        <TweakToggle
          label="Right-side nav (desktop)"
          value={tweaks.showSidebar}
          onChange={(v) => setTweak('showSidebar', v)}
        />

        <TweakSection label="Evidence module" />
        <TweakRadio
          label="Layout"
          options={['slider', 'toggle', 'side']}
          value={tweaks.evidenceVariant}
          onChange={(v) => setTweak('evidenceVariant', v)}
        />

        <TweakSection label="02b — Performance Story" />
        <TweakRadio
          label="Image transition"
          options={['kenburns', 'wipe', 'fade']}
          value={tweaks.perfTransition}
          onChange={(v) => setTweak('perfTransition', v)}
        />
        <TweakSlider
          label="Glow intensity"
          min={0} max={0.7} step={0.02}
          value={tweaks.perfGlow}
          onChange={(v) => setTweak('perfGlow', v)}
        />
      </TweaksPanel>
    </>
  );
}

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