// Burger House — main app (production: single-page navigable site)

const TWEAK_DEFAULTS = { theme: 'cream', dark: false };

const THEMES = [
  { id: 'cream',  label: 'Cream',  swatch: '#c1410f' },
  { id: 'forest', label: 'Forest', swatch: '#2d5a3d' },
  { id: 'butter', label: 'Butter', swatch: '#b6892a' },
];

const TweaksPanel = ({ tweaks, setTweak }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button
        onClick={() => setOpen(o => !o)}
        aria-label="Open theme tweaks"
        style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 999,
          width: 48, height: 48, borderRadius: '50%',
          background: 'var(--ink)', color: 'var(--bg)',
          border: 0, cursor: 'pointer',
          boxShadow: '0 12px 30px -10px rgba(0,0,0,.35)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'fixed', bottom: 84, right: 24, zIndex: 1000,
          background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 16,
          width: 280, padding: 20, boxShadow: '0 24px 48px -12px rgba(0,0,0,.2)',
          fontFamily: 'var(--font-sans)', color: 'var(--ink)',
        }}>
          <div className="row between" style={{ marginBottom: 16 }}>
            <span className="eyebrow">Tweaks</span>
            <button onClick={() => setOpen(false)} style={{ background: 'none', border: 0, cursor: 'pointer', color: 'var(--ink-3)', fontSize: 16 }}>✕</button>
          </div>
          <div style={{ marginBottom: 18 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 10, letterSpacing: '.06em', textTransform: 'uppercase' }}>Theme</div>
            <div className="row gap-8">
              {THEMES.map(th => (
                <button key={th.id} onClick={() => setTweak('theme', th.id)} style={{
                  all: 'unset', cursor: 'pointer', flex: 1,
                  padding: '8px 10px', borderRadius: 10,
                  border: tweaks.theme === th.id ? '1.5px solid var(--ink)' : '1px solid var(--line)',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                }}>
                  <span style={{ width: 18, height: 18, borderRadius: 4, background: th.swatch }} />
                  <span style={{ fontSize: 11 }}>{th.label}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="row between" style={{ alignItems: 'center' }}>
            <span style={{ fontSize: 13 }}>Dark mode</span>
            <button onClick={() => setTweak('dark', !tweaks.dark)} style={{
              all: 'unset', cursor: 'pointer',
              width: 40, height: 22, borderRadius: 999,
              background: tweaks.dark ? 'var(--accent)' : 'var(--line)',
              position: 'relative', transition: 'background .2s',
            }}>
              <span style={{
                position: 'absolute', top: 2, left: tweaks.dark ? 20 : 2,
                width: 18, height: 18, borderRadius: '50%',
                background: '#fff', transition: 'left .2s',
              }} />
            </button>
          </div>
        </div>
      )}
    </>
  );
};

const App = () => {
  const [tweaks, setT] = React.useState(TWEAK_DEFAULTS);
  const setTweak = (k, v) => setT(s => ({ ...s, [k]: v }));

  React.useEffect(() => {
    const theme = tweaks.dark ? 'charcoal' : tweaks.theme;
    document.documentElement.setAttribute('data-theme', theme);
  }, [tweaks.theme, tweaks.dark]);

  const [page, setPage] = React.useState('home');
  const [picked, setPicked] = React.useState(PRODUCTS[0]);

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page, picked]);

  const onPick = (p) => { setPicked(p); setPage('product'); };
  const onPickCategory = () => setPage('category');

  return (
    <>
      <NavBar onNav={setPage} current={page} />
      {page === 'home'     && <HomePage onNav={setPage} onPick={onPick} />}
      {page === 'menu'     && <MenuLandingPage onPickCategory={onPickCategory} />}
      {page === 'category' && <CategoryPage onPick={onPick} onNav={setPage} />}
      {page === 'product'  && <ProductPage p={picked} onNav={setPage} />}
      {page === 'locations' && <LocationsPage />}
      {page === 'rewards'   && <RewardsPage />}
      {page === 'order'     && <OrderPage />}
      <TweaksPanel tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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