// app.jsx — root of the FSR landing page
// Loads after sections.jsx and tweaks-panel.jsx.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "mixed",
  "heroVariant": "cards",
  "accent": "teal",
  "servicesStyle": "cards",
  "processStyle": "horizontal",
  "headline": 0,
  "density": "regular"
}/*EDITMODE-END*/;

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

  // Apply tweak attributes to html element
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme',   t.theme);
    root.setAttribute('data-accent',  t.accent);
    root.setAttribute('data-density', t.density);
  }, [t.theme, t.accent, t.density]);

  return (
    <React.Fragment>
      <Nav heroTheme={t.theme === 'light' ? 'light' : 'dark'} />
      <Hero t={t} />
      <Pain />
      <Services style={t.servicesStyle} />
      <Deliverables />
      <Process style={t.processStyle} />
      <About />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={[
            {label: 'Mixed', value: 'mixed'},
            {label: 'Dark',  value: 'dark'},
            {label: 'Light', value: 'light'},
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={[
            {label: 'Teal',       value: 'teal'},
            {label: 'Restrained', value: 'restrained'},
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            {label: 'Compact',  value: 'compact'},
            {label: 'Regular',  value: 'regular'},
            {label: 'Spacious', value: 'spacious'},
          ]}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Visual"
          value={t.heroVariant}
          options={[
            {label: 'Floating UI cards', value: 'cards'},
            {label: 'Single dashboard',  value: 'dashboard'},
            {label: 'Minimal (text only)', value: 'minimal'},
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakSelect
          label="Headline"
          value={t.headline}
          options={[
            {label: 'A · Operational support', value: 0},
            {label: 'B · Structure & visibility', value: 1},
            {label: 'C · Reduce overhead', value: 2},
          ]}
          onChange={(v) => setTweak('headline', Number(v))}
        />

        <TweakSection label="Sections" />
        <TweakRadio
          label="Services"
          value={t.servicesStyle}
          options={[
            {label: 'Cards',    value: 'cards'},
            {label: 'Numbered', value: 'numbered'},
          ]}
          onChange={(v) => setTweak('servicesStyle', v)}
        />
        <TweakRadio
          label="Process"
          value={t.processStyle}
          options={[
            {label: 'Horizontal', value: 'horizontal'},
            {label: 'Vertical',   value: 'vertical'},
          ]}
          onChange={(v) => setTweak('processStyle', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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