// App entry — composes the home page, wires Tweaks panel.
const TWEAK_DEFAULTS = JSON.parse(document.getElementById("tweak-defaults").textContent.match(/\{[\s\S]*\}/)[0]);

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

  return (
    <>
      <Nav />
      <Hero variant={tweaks.headline_variant} ladderStyle={tweaks.ladder_style} />
      {tweaks.show_logos && <Logos />}
      <HowItWorks />
      <SampleReport />
      <Deliverables />
      {tweaks.show_pulse && <Pulse />}
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Headline"
            value={tweaks.headline_variant}
            onChange={(v) => setTweak("headline_variant", v)}
            options={[
              { value: "Become", label: "Become" },
              { value: "Invisible→Cited", label: "Inv→Cited" },
              { value: "Index", label: "The Index" },
            ]}
          />
          <TweakRadio
            label="Ladder style"
            value={tweaks.ladder_style}
            onChange={(v) => setTweak("ladder_style", v)}
            options={[
              { value: "bars", label: "Bars" },
              { value: "stairs", label: "Stairs" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle
            label="Show engine row"
            value={tweaks.show_logos}
            onChange={(v) => setTweak("show_logos", v)}
          />
          <TweakToggle
            label="Show Cited Pulse"
            value={tweaks.show_pulse}
            onChange={(v) => setTweak("show_pulse", v)}
          />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        @keyframes riseIn {
          0% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
          100% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
        }
      `}</style>
    </>
  );
};

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