// Burger House — Menu landing & Category pages

const MenuLandingPage = ({ onPickCategory }) => (
  <>
    <section style={{ padding: '48px 0 24px' }}>
      <div className="container">
        <span className="eyebrow">The menu</span>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 72px)', margin: '16px 0 16px' }}>
          Pick your <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>aisle</em>.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 560 }}>
          Nine categories, one kitchen. Every item shows full nutrition and an ingredient-by-ingredient calorie breakdown.
        </p>
      </div>
    </section>
    <section style={{ padding: '24px 0 64px' }}>
      <div className="container menu-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {CATEGORIES.map(c => <CategoryTile key={c.id} c={c} onClick={() => onPickCategory(c)} />)}
      </div>
    </section>
    <Footer />
  </>
);

const CategoryPage = ({ onPick, onNav }) => {
  const items = PRODUCTS.filter(p => p.category === 'Burgers');
  const [filter, setFilter] = React.useState('all');
  const filters = [
    { id: 'all', label: 'All' },
    { id: 'classic', label: 'Classic' },
    { id: 'spicy', label: 'Spicy' },
    { id: 'vegan', label: 'Vegan' },
    { id: 'cheese', label: 'Extra cheese' },
  ];
  return (
    <>
      <section style={{ padding: '40px 0 16px' }}>
        <div className="container">
          <div className="row gap-8" style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 24 }}>
            <a onClick={() => onNav('home')} style={{ cursor: 'pointer' }}>Home</a>
            <span>/</span>
            <a onClick={() => onNav('menu')} style={{ cursor: 'pointer' }}>Menu</a>
            <span>/</span>
            <span style={{ color: 'var(--ink)' }}>Burgers</span>
          </div>
          <div className="row between category-head" style={{ alignItems: 'flex-end' }}>
            <div>
              <span className="eyebrow">9 items</span>
              <h1 className="display category-h1" style={{ fontSize: 64, margin: '12px 0 0' }}>Burgers.</h1>
            </div>
            <div className="row gap-8">
              <button className="btn btn-ghost btn-sm">
                <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
                Filter
              </button>
              <button className="btn btn-ghost btn-sm">Sort: Popular ↓</button>
            </div>
          </div>
        </div>
      </section>
      <section style={{ padding: '24px 0 0' }}>
        <div className="container">
          <div className="row gap-8" style={{ overflowX: 'auto', paddingBottom: 8 }}>
            {filters.map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                className="pill"
                style={{
                  height: 36, padding: '0 16px', fontSize: 13, cursor: 'pointer',
                  background: filter === f.id ? 'var(--ink)' : 'var(--surface)',
                  color: filter === f.id ? 'var(--bg)' : 'var(--ink-2)',
                  borderColor: filter === f.id ? 'var(--ink)' : 'var(--line)',
                }}>{f.label}</button>
            ))}
          </div>
        </div>
      </section>
      <section style={{ padding: '32px 0 64px' }}>
        <div className="container category-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {items.map(p => <ProductCard key={p.id} p={p} onClick={() => onPick(p)} />)}
        </div>
      </section>
      <Footer />
    </>
  );
};

Object.assign(window, { MenuLandingPage, CategoryPage });