// hifi-app.jsx — root of the hi-fi La Foire page.
// Wires tweaks (hero variant + accent palette) + composes sections.

const HIFI_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "cubes",
  "accentPalette": "pissenlit"
}/*EDITMODE-END*/;

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

  return (
    <div className="page" data-accent={t.accentPalette}>
      <StickyRibbon />
      <Nav />

      <Hero variant={t.heroVariant} />

      <Damier />
      <PitchSection />
      <FBSection />
      <StandsSection />
      <LeaderboardSection />
      <FinalCTASection />
      <Footer />

      <TweaksPanel title="Tweaks · La Foire">
        <TweakSection label="Hero">
          <TweakRadio
            label="Variante"
            value={t.heroVariant}
            options={[
              { value: 'cubes',   label: 'Cubes' },
              { value: 'monster', label: 'Monstre' },
              { value: 'classic', label: 'Classique' },
            ]}
            onChange={(v) => setTweak('heroVariant', v)}
          />
        </TweakSection>

        <TweakSection label="Accent">
          <TweakRadio
            label="Palette"
            value={t.accentPalette}
            options={[
              { value: 'pissenlit', label: 'Jaune' },
              { value: 'bouteille', label: 'Vert' },
              { value: 'charrette', label: 'Bleu' },
            ]}
            onChange={(v) => setTweak('accentPalette', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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