// Menu.jsx — full menu with filter chips
const MENU_DATA = [
  {
    cat: 'breakfast',
    scriptLabel: 'Popular Breakfast',
    title: 'Breakfast',
    note: '6" breakfast sandwiches — all toasted. Add lettuce, tomato, or mayo +$0.50 each.',
    items: [
      { name: 'Breakfast Quesadilla', dish: 'quesadilla', desc: 'Cheddar cheese, scrambled eggs, sausage, bacon crumble. Served with maple syrup dipping sauce.', price: '12.00', tags: ['Popular'] },
      { name: 'Egg & Cheese', dish: 'egg', desc: '2 eggs, melted cheese on toasted 6".', price: '8.00' },
      { name: 'Meat, Egg & Cheese', dish: 'meat', desc: 'Sausage, ham, or bacon. Turkey +$0.50 · turkey bacon +$1.00.', price: '9.00' },
      { name: 'Cubanito', dish: 'cubanito', desc: 'Slow roasted pork, ham, white American cheese. Add egg +$1.25.', price: '10.00', tags: ['Signature'] },
    ],
  },
  {
    cat: 'sandwiches',
    scriptLabel: 'Classic Sandwiches',
    title: 'Classic Sandwiches',
    note: 'Includes lettuce, tomato, mayo, onions, peppers, pickles, oil & vinegar. Cold or toasted.',
    items: [
      { name: 'B.L.T', dish: 'blt', desc: 'Bacon, lettuce, tomato, mayo. Turkey bacon +$2.', half: '12.00', price: '16.00' },
      { name: 'Ham', dish: 'ham', desc: 'Ham & yellow American cheese.', half: '12.50', price: '16.50' },
      { name: 'Turkey', dish: 'turkey', desc: 'Turkey & white American cheese.', half: '13.00', price: '17.50' },
      { name: 'Chicken Bacon Ranch', dish: 'chicken', desc: 'Chicken breast, bacon, ranch, lettuce, tomato.', half: '13.00', price: '17.50' },
    ],
  },
  {
    cat: 'sandwiches',
    scriptLabel: 'Signature Sandwiches',
    title: 'Signature Sandwiches',
    items: [
      { name: 'Pernil', dish: 'pernil', desc: 'Slow roasted pork, Swiss cheese, potato sticks, mustard, lettuce, tomato, mayo.', half: '13.50', price: '18.00', tags: ['Signature', 'Slow Roasted'] },
      { name: 'Cuban', dish: 'cuban', desc: 'Slow roasted pork, ham, Swiss cheese, pickles, mustard, lettuce, tomato, mayo.', half: '13.50', price: '18.00', tags: ['Hot Pressed'] },
    ],
  },
  {
    cat: 'sides',
    scriptLabel: 'On the Side',
    title: 'Sides',
    items: [
      { name: 'Fries', dish: 'fries', desc: 'Golden crispy fries. Add cheese, bacon, or seasoning +$0.50 each.', price: '4.50' },
      { name: 'Loaf with Butter', dish: 'loaf', desc: 'Half $3.00 · whole $5.00.', price: '5.00' },
    ],
  },
  {
    cat: 'drinks',
    scriptLabel: 'To Drink',
    title: 'Drinks',
    items: [
      { name: 'Snapple', dish: 'snapple', price: '3.00' },
      { name: 'Water', dish: 'water', price: '2.00' },
      { name: 'Can Soda', dish: 'soda', price: '2.00' },
      { name: 'Coffee', dish: 'coffee', desc: 'Small $2.00 · large $3.50.', price: '3.50' },
    ],
  },
];

const FILTERS = [
  { id: 'all', label: 'All Menu' },
  { id: 'breakfast', label: 'Breakfast' },
  { id: 'sandwiches', label: 'Sandwiches' },
  { id: 'sides', label: 'Sides' },
  { id: 'drinks', label: 'Drinks' },
];

const Menu = () => {
  const [filter, setFilter] = React.useState('all');
  const [openItem, setOpenItem] = React.useState(null);
  const sections = filter === 'all' ? MENU_DATA : MENU_DATA.filter(s => s.cat === filter);

  React.useEffect(() => {
    if (!openItem) return;
    document.body.style.overflow = 'hidden';
    const onKey = e => { if (e.key === 'Escape') setOpenItem(null); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [openItem]);

  return (
    <React.Fragment>
      <section id="menu" className="psd-section psd-section--menu">
        <div className="psd-section-head psd-reveal">
          <div className="psd-script psd-section-script">Our Menu</div>
          <h2 className="psd-section-title">Hot off the press.</h2>
          <p className="psd-section-lede">From slow-roasted pernil to a quick egg-and-cheese — pressed fresh, served fast.</p>
        </div>
        <div className="psd-filter-row psd-reveal" role="tablist">
          {FILTERS.map(f => (
            <button
              key={f.id}
              role="tab"
              aria-selected={filter === f.id}
              className={'psd-chip' + (filter === f.id ? ' psd-chip--active' : '')}
              onClick={() => setFilter(f.id)}
            >{f.label}</button>
          ))}
        </div>
        <div className="psd-menu-sections">
          {sections.map((s, i) => <MenuSection key={i} {...s} onItemClick={setOpenItem} />)}
        </div>
      </section>

      {openItem && (
        <div
          className="psd-modal-backdrop"
          onClick={() => setOpenItem(null)}
          role="dialog"
          aria-modal="true"
          aria-label={openItem.name}
        >
          <div className="psd-modal psd-modal--item" onClick={e => e.stopPropagation()}>
            {openItem.img
              ? <img src={openItem.img} alt={openItem.name} className="psd-modal-dish-img" />
              : <div className="psd-modal-dish-placeholder">
                {openItem.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
              </div>
            }
            <div className="psd-modal-content">
              <h2 className="psd-modal-title">{openItem.name}</h2>
              {openItem.desc && <p className="psd-modal-body">{openItem.desc}</p>}
              {openItem.tags && openItem.tags.length > 0 && (
                <div className="psd-menu-tags psd-modal-tags">
                  {openItem.tags.map(t => <span key={t} className="psd-menu-tag">{t}</span>)}
                </div>
              )}
              {(openItem.half || openItem.price) && (
                <div className="psd-modal-prices">
                  {openItem.half && <span className="psd-menu-half">Half ${openItem.half}</span>}
                  {openItem.price && <span className="psd-menu-price">${openItem.price}</span>}
                </div>
              )}
              <div className="psd-modal-actions">
                <button className="psd-btn psd-btn--ghost" onClick={() => setOpenItem(null)}>Close</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

window.Menu = Menu;