/* Berlin Döner Rauma — menu page app */
const THEME_URL = (document.getElementById('berlin-doner-menu-js')?.src.replace('/assets/menu-app.jsx', '').split('?')[0])
  || 'https://berlin2.demowpsite.com/wp-content/themes/berlin-doner-rauma';

const { useState } = React;

function fmtEUR(n) {
  return n.toFixed(2).replace('.', ',');
}

function MenuItem({ item, num, compact }) {
  const tagClass = item.tag === 'Hot' ? 'hot' : item.tag === 'Light' ? 'veg' : '';
  return (
    <div className="menu-item">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span className="menu-item-num">N°{String(num).padStart(2, '0')}</span>
        {item.tag && !compact && <span className={`menu-item-tag ${tagClass}`} style={{ position: 'static' }}>{item.tag}</span>}
      </div>
      <div className="menu-item-img-wrap">
        <div className="menu-item-img" style={{ backgroundImage: `url(${THEME_URL}/${item.img})` }}></div>
      </div>
      <div>
        <div className="menu-item-name">{item.name}</div>
        <div className="menu-item-desc" style={{ marginTop: 8 }}>{item.desc}</div>
      </div>
      <div className="menu-item-foot">
        <div className="menu-item-price"><span className="cur">€</span>{fmtEUR(item.price)}</div>
      </div>
    </div>
  );
}

function MenuSection() {
  const [tab, setTab] = useState('signature');
  const groups = {
    signature: { title: 'Signature Döners', items: MENU.signature, num: '01' },
    meals:     { title: 'Combo Meals',       items: MENU.meals,     num: '02' },
    drinks:    { title: 'Drinks',            items: MENU.drinks,    num: '03' },
  };
  const g = groups[tab];

  return (
    <section id="menu" className="menu">
      <div className="menu-head">
        <div>
          <div className="section-eyebrow">
            <span className="num">{g.num} /</span>
            <span className="line"></span>
            <span>The Menu</span>
          </div>
          <h2 className="display menu-title">
            <span className="accent">{g.title}.</span>
          </h2>
        </div>
        <div className="menu-tabs">
          {Object.entries(groups).map(([k, v]) => (
            <button key={k} className={`menu-tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>
              {v.title.split(' ')[0]}
            </button>
          ))}
        </div>
      </div>

      <div className={`menu-grid ${tab === 'drinks' ? 'drinks' : ''}`}>
        {g.items.map((item, i) => (
          <MenuItem key={item.id} item={item} num={i + 1} compact={tab === 'drinks'} />
        ))}
      </div>
    </section>
  );
}

const menuEl = document.getElementById('menu-root');
if (menuEl) ReactDOM.createRoot(menuEl).render(<MenuSection />);