// app.jsx — Root App with cart state + Tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  palette: 'Emerald & Gold',
  displayFont: 'Cormorant Garamond',
  uiFont: 'Inter',
  density: 'regular',
  marquee: true,
  spinSeal: true,
}; /*EDITMODE-END*/

const PALETTES = {
  'Emerald & Gold': {
    emerald: '#0E3D2E',
    emeraldDeep: '#082A1F',
    gold: '#C9A47A',
    goldDeep: '#A8855A',
    goldSoft: '#E3CDAE',
    ivory: '#FBF8F3',
    pearl: '#F4EEE4',
    paper: '#EFE7D8',
  },
  'Pearl & Champagne': {
    emerald: '#5A4A3A',
    emeraldDeep: '#2E2620',
    gold: '#C9A461',
    goldDeep: '#A8855A',
    goldSoft: '#EBDABE',
    ivory: '#FBF7F2',
    pearl: '#F2E9DC',
    paper: '#E8DCC8',
  },
  'Rose & Nude': {
    emerald: '#7A4E5A',
    emeraldDeep: '#3F2630',
    gold: '#C99488',
    goldDeep: '#A8746A',
    goldSoft: '#E8C7BE',
    ivory: '#FCF6F3',
    pearl: '#F4E4DD',
    paper: '#E8D2C8',
  },
  'Onyx & Gold': {
    emerald: '#1B1B18',
    emeraldDeep: '#0C0C0A',
    gold: '#C9A47A',
    goldDeep: '#A8855A',
    goldSoft: '#E3CDAE',
    ivory: '#F8F4EC',
    pearl: '#EAE2D2',
    paper: '#DDD2BE',
  },
};

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

  // Apply palette + fonts as CSS vars
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES['Emerald & Gold'];
    const r = document.documentElement;
    r.style.setProperty('--emerald', p.emerald);
    r.style.setProperty('--emerald-deep', p.emeraldDeep);
    r.style.setProperty('--gold', p.gold);
    r.style.setProperty('--gold-deep', p.goldDeep);
    r.style.setProperty('--gold-soft', p.goldSoft);
    r.style.setProperty('--ivory', p.ivory);
    r.style.setProperty('--pearl', p.pearl);
    r.style.setProperty('--paper', p.paper);
    r.style.setProperty('--f-display', `"${t.displayFont}", Georgia, serif`);
    r.style.setProperty('--f-sans', `"${t.uiFont}", ui-sans-serif, system-ui, sans-serif`);
    const dens = t.density === 'compact' ? 92 : t.density === 'comfy' ? 108 : 100;
    r.style.setProperty('--section-scale', dens + '%');
  }, [t.palette, t.displayFont, t.uiFont, t.density]);

  // Marquee + seal animation toggles
  React.useEffect(() => {
    document.querySelectorAll('.marquee-track').forEach((el) => {
      el.style.animationPlayState = t.marquee ? 'running' : 'paused';
    });
    document.querySelectorAll('.badge-spin svg').forEach((el) => {
      el.style.animationPlayState = t.spinSeal ? 'running' : 'paused';
    });
  }, [t.marquee, t.spinSeal]);

  return (
    <>
      {/* <Nav /> */}
      <NavWithLogo />
      <main>
        <Hero />
        <About />
        <Science />
        <Products />
        <Showcase />
        {/* <Studio/> */}
        <Benefits />
        <BeforeAfter />
        <Testimonials />
        <Contact />
      </main>
      <Footer />
      <MessengerWidget />
      <ScrollTopButton />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakSelect
          label="Mood"
          value={t.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Display"
          value={t.displayFont}
          options={['Cormorant Garamond', 'Playfair Display', 'EB Garamond', 'DM Serif Display', 'Tenor Sans']}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSelect
          label="UI"
          value={t.uiFont}
          options={['Inter', 'Manrope', 'DM Sans', 'Work Sans', 'Helvetica Neue']}
          onChange={(v) => setTweak('uiFont', v)}
        />
        <TweakSection label="Motion" />
        <TweakToggle label="Marquee" value={t.marquee} onChange={(v) => setTweak('marquee', v)} />
        <TweakToggle label="Spin authenticity seal" value={t.spinSeal} onChange={(v) => setTweak('spinSeal', v)} />
      </TweaksPanel>
    </>
  );
}

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