// Main app shell
const { useState: useStateAP, useEffect: useEffectAP } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "terracotta",
  "theme": "light",
  "heroVariant": "typographic",
  "servicesLayout": "equal"
}/*EDITMODE-END*/;

const ACCENTS = {
  terracotta: { '--accent': '#B8542A', '--accent-deep': '#8f3e1d' },
  saffron:    { '--accent': '#C98A1F', '--accent-deep': '#9a6a17' },
  olive:      { '--accent': '#6e7a35', '--accent-deep': '#4f5824' },
  cherry:     { '--accent': '#A83449', '--accent-deep': '#7c2633' },
  midnight:   { '--accent': '#2c5f7a', '--accent-deep': '#1f4558' },
};

function App() {
  const [values, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [openModal, setOpenModal] = useStateAP(null); // null | takeaway | reservation | delivery

  useEffectAP(() => {
    const colors = ACCENTS[values.accent] || ACCENTS.terracotta;
    const root = document.documentElement;
    Object.entries(colors).forEach(([k, v]) => root.style.setProperty(k, v));
    root.setAttribute('data-theme', values.theme);
  }, [values.accent, values.theme]);

  return (
    <>
      <TopNav
        onOpenReserve={() => setOpenModal('reservation')}
        onOpenTakeaway={() => setOpenModal('takeaway')}
        onOpenDelivery={() => setOpenModal('delivery')}
      />
      <Hero
        variant={values.heroVariant}
        onOpenReserve={() => setOpenModal('reservation')}
        onOpenTakeaway={() => setOpenModal('takeaway')}
        onOpenDelivery={() => setOpenModal('delivery')}
      />
      <Services
        layout={values.servicesLayout}
        onOpenReserve={() => setOpenModal('reservation')}
        onOpenTakeaway={() => setOpenModal('takeaway')}
        onOpenDelivery={() => setOpenModal('delivery')}
      />
      <MenuPreview onOpenTakeaway={() => setOpenModal('takeaway')} />
      <Visit />
      <Footer />

      <TakeawayModal open={openModal === 'takeaway'} onClose={() => setOpenModal(null)} />
      <ReservationModal open={openModal === 'reservation'} onClose={() => setOpenModal(null)} />
      <DeliveryModal open={openModal === 'delivery'} onClose={() => setOpenModal(null)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Accent"
          value={values.accent}
          options={[
            { value: 'terracotta', label: 'Clay' },
            { value: 'saffron',    label: 'Saffron' },
            { value: 'olive',      label: 'Olive' },
            { value: 'cherry',     label: 'Cherry' },
            { value: 'midnight',   label: 'Night' },
          ]}
          onChange={v => setTweak('accent', v)}
        />
        <TweakToggle
          label="Dark mode"
          value={values.theme === 'dark'}
          onChange={v => setTweak('theme', v ? 'dark' : 'light')}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero"
          value={values.heroVariant}
          options={[
            { value: 'typographic', label: 'Editorial' },
            { value: 'split',       label: 'Split' },
          ]}
          onChange={v => setTweak('heroVariant', v)}
        />
        <TweakRadio
          label="Services"
          value={values.servicesLayout}
          options={[
            { value: 'equal',     label: '3 equal' },
            { value: 'prominent', label: '1 hero' },
          ]}
          onChange={v => setTweak('servicesLayout', v)}
        />
      </TweaksPanel>
    </>
  );
}

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