// App shell — Tweaks panel + main composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ivory",
  "displayFont": "Cormorant Garamond",
  "heroVariant": "storefront",
  "showPrices": true
}/*EDITMODE-END*/;

const PALETTE_OPTS = [
  { id: 'ivory', label: 'Ivory' },
  { id: 'champagne', label: 'Champagne' },
  { id: 'ink', label: 'Ink' },
];
const FONT_OPTS = ['Cormorant Garamond', 'Playfair Display', 'Cinzel', 'EB Garamond'];
const HERO_OPTS = [
  { id: 'storefront', label: 'Storefront' },
  { id: 'interior', label: 'Boutique Interior' },
  { id: 'jewel', label: 'Macro Detail' },
];

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [prefill, setPrefill] = React.useState(null);

  // apply tweaks
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.palette);
    document.documentElement.style.setProperty('--display', `"${t.displayFont}", "EB Garamond", Georgia, serif`);
  }, [t.palette, t.displayFont]);

  // load extra font on demand
  React.useEffect(() => {
    if (t.displayFont === 'Cormorant Garamond') return;
    const id = 'mm-extra-font';
    let link = document.getElementById(id);
    if (!link) { link = document.createElement('link'); link.id = id; link.rel = 'stylesheet'; document.head.appendChild(link); }
    const fam = t.displayFont.replace(/ /g, '+');
    link.href = `https://fonts.googleapis.com/css2?family=${fam}:ital,wght@0,400;0,500;0,600;1,400&display=swap`;
  }, [t.displayFont]);

  const openBooking = (pre) => { setPrefill(pre || null); setBookingOpen(true); };

  return (
    <React.Fragment>
      <Nav onBook={() => openBooking()} />
      <Hero variant={t.heroVariant} onBook={() => openBooking()} />
      <TrustStrip />
      <Collections onProductOpen={(it) => openBooking({ interest: it.shape === 'Round' && it.sku.startsWith('TB') ? 'gift' : 'engagement' })} onBook={() => openBooking()} />
      <Diamonds onBook={() => openBooking()} />
      <Bespoke onBook={() => openBooking({ interest: 'bespoke' })} />
      <Boutiques onBook={() => openBooking()} />
      <Testimonials />
      <Heritage />
      <Footer />
      <WhatsAppFab />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} prefill={prefill} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio value={t.palette} onChange={v => setTweak('palette', v)}
                      options={PALETTE_OPTS.map(o => ({ value: o.id, label: o.label }))} />
        </TweakSection>
        <TweakSection title="Display font">
          <TweakSelect value={t.displayFont} onChange={v => setTweak('displayFont', v)}
                       options={FONT_OPTS.map(f => ({ value: f, label: f }))} />
        </TweakSection>
        <TweakSection title="Hero image">
          <TweakSelect value={t.heroVariant} onChange={v => setTweak('heroVariant', v)}
                       options={HERO_OPTS.map(o => ({ value: o.id, label: o.label }))} />
        </TweakSection>
        <TweakSection title="Actions">
          <TweakButton label="Open booking flow" onClick={() => openBooking()} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

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