// app.jsx — main App, tweaks panel, mount

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "hero": "editorial",
  "displayFont": "Instrument Serif",
  "eyebrowStyle": "mono",
  "showComparison": true,
  "showNutrition": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [presetTier, setPresetTier] = React.useState(null);

  // Apply palette via data attribute on root
  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
  }, [t.palette]);

  // Display font swap via CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty('--display',
      `"${t.displayFont}", "Times New Roman", serif`);
  }, [t.displayFont]);

  const handleOrder = () => {
    const el = document.querySelector('#order');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handlePick = (tier) => {
    setPresetTier(tier);
    setTimeout(handleOrder, 60);
  };

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav onOrder={handleOrder} />
      <Hero variant={t.hero} eyebrowStyle={t.eyebrowStyle} />
      <Marquee />
      <Pillars />
      <ProductShowcase />
      {t.showComparison && <Comparison />}
      {t.showNutrition && <Nutrition />}
      <Pricing onPick={handlePick} />
      <OrderForm presetTier={presetTier} />
      <PickupMap />
      <Payment />
      <Founder />
      <Reviews />
      <FAQ />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.hero}
          options={['editorial', 'split', 'centered']}
          onChange={(v) => setTweak('hero', v)} />
        <TweakRadio label="Eyebrow" value={t.eyebrowStyle}
          options={['mono', 'diamond', 'none']}
          onChange={(v) => setTweak('eyebrowStyle', v)} />

        <TweakSection label="Theme" />
        <TweakRadio label="Palette" value={t.palette}
          options={['cream', 'cocoa', 'forest']}
          onChange={(v) => setTweak('palette', v)} />
        <TweakSelect label="Display font" value={t.displayFont}
          options={['Instrument Serif', 'Playfair Display', 'DM Serif Display']}
          onChange={(v) => setTweak('displayFont', v)} />

        <TweakSection label="Sections" />
        <TweakToggle label="Show vs gels" value={t.showComparison}
          onChange={(v) => setTweak('showComparison', v)} />
        <TweakToggle label="Show nutrition" value={t.showNutrition}
          onChange={(v) => setTweak('showNutrition', v)} />
      </TweaksPanel>
    </>
  );
}

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