// app.jsx — root + tweaks wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4a574",
  "darkMode": false,
  "fontHead": "Tenor Sans",
  "showMarquee": true,
  "density": "airy"
}/*EDITMODE-END*/;

// Apply tweak values to CSS vars + classes on the root element
function applyTheme(t){
  const root = document.documentElement;
  root.style.setProperty('--accent', t.accent);
  // pick contrasting ink for accent
  const lightAccents = ['#d4a574','#efeae2','#f4d5b3','#fff'];
  const darkOnAccent = lightAccents.some(c => c.toLowerCase() === (t.accent||'').toLowerCase()) ? '#14110d' : '#f6f3ee';
  root.style.setProperty('--accent-ink', darkOnAccent);
  root.style.setProperty('--serif', `"${t.fontHead}", "Times New Roman", serif`);
  document.body.classList.toggle('theme-dark', !!t.darkMode);
  document.body.dataset.density = t.density;
}

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

  React.useEffect(()=>{ applyTheme(t); }, [t]);

  // Ensure Google Font is loaded for chosen heading
  React.useEffect(()=>{
    const fam = encodeURIComponent(t.fontHead);
    const id = 'gf-head';
    let l = document.getElementById(id);
    if (!l){ l = document.createElement('link'); l.id=id; l.rel='stylesheet'; document.head.appendChild(l); }
    l.href = `https://fonts.googleapis.com/css2?family=${fam}:ital,wght@0,400;1,400&display=swap`;
  }, [t.fontHead]);

  const accentOptions = ['#d4a574','#e0c4a3','#c89e7a','#a87b56','#2a6f4a','#7a7268','#0e0c0a'];
  const fontOptions = ['Tenor Sans', 'Big Shoulders Stencil Display', 'Cormorant Garamond', 'Fraunces', 'Playfair Display'];

  return (
    <CartProvider>
      <Nav />
      <Hero />
      <Marquee items={[
        'made for sun', 'worn in sun', 'washed off sun', 'made for sun',
        'launching 06.06', 'belgrade · dalmatia · online', 'limited drop'
      ]} />
      <Story />
      <SkincareShop />
      <Marquee inv items={[
        'SPF50 face', 'SPF30 body', 'after sun gel', 'afterglow butter',
        'mineral · cruelty-free · made in eu', 'SPF50 face'
      ]} />
      <BeachShop />
      <BundlesSection />
      <Lookbook />
      <Ritual />
      <Newsletter />
      <Footer />
      <CartDrawer />

      <TweaksPanel title="nude&shy · tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent}
          options={accentOptions}
          onChange={(v)=>setTweak('accent', v)} />
        <TweakToggle label="Dark mode" value={t.darkMode}
          onChange={(v)=>setTweak('darkMode', v)} />

        <TweakSection label="Type" />
        <TweakSelect label="Headline font" value={t.fontHead}
          options={fontOptions}
          onChange={(v)=>setTweak('fontHead', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={['airy', 'compact']}
          onChange={(v)=>setTweak('density', v)} />
        <TweakToggle label="Show marquee" value={t.showMarquee}
          onChange={(v)=>{
            setTweak('showMarquee', v);
            document.querySelectorAll('.marquee').forEach(m => m.style.display = v ? '' : 'none');
          }} />
      </TweaksPanel>
    </CartProvider>
  );
}

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