/* Professor's Transport — entry */
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tokens whenever tweaks change
  useEffectApp(() => { window.applyTokens(t); }, [t]);

  return (
    <>
      <UtilityBar />
      <Nav />
      <Hero t={t} />
      {t.showLaneTicker && <LaneTicker />}
      <Capabilities />
      <FleetShowcase />
      <Why />
      <Industries />
      <Testimonials />
      {t.showQuoteForm && <QuoteForm />}
      <Drive />
      <News />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakSelect
            label="Base palette"
            value={t.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              { value: "navy-amber", label: "Navy + amber" },
              { value: "graphite", label: "Graphite" },
              { value: "forest", label: "Forest" },
              { value: "ink-paper", label: "Ink on paper" },
            ]}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={["#dba24a", "#c25a3a", "#3a7be0", "#b8d845"]}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakRadio
            label="Font"
            value={t.fontPairing}
            onChange={v => setTweak("fontPairing", v)}
            options={[
              { value: "geist-serif", label: "Geist" },
              { value: "manrope-mono", label: "Manrope" },
              { value: "saans-only", label: "Grotesk" },
            ]}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Default" },
              { value: "spacious", label: "Spacious" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakText
            label="Headline (use *italic* for serif spans)"
            value={t.heroHeadline}
            onChange={v => setTweak("heroHeadline", v)}
          />
          <TweakToggle
            label="On-time badge"
            value={t.showHeroBadge}
            onChange={v => setTweak("showHeroBadge", v)}
          />
          <TweakToggle
            label="Live lane ticker"
            value={t.showLaneTicker}
            onChange={v => setTweak("showLaneTicker", v)}
          />
        </TweakSection>

        <TweakSection label="Sections">
          <TweakToggle
            label="Show quote form"
            value={t.showQuoteForm}
            onChange={v => setTweak("showQuoteForm", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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