// CardapioDestaques — a taste of the real menu (real items, real prices), with
// a CTA to the full cardápio page. Not the whole menu — just the highlights.
function CardapioDestaques() {
  const itens = [
    { img: '../../assets/photos/banco-2026/croissant-forno-fresco.jpg', name: 'Croissant com ovos e bacon', desc: 'Croissant tradicional, dois ovos, bacon, catupiry e fio de mel.', price: 'R$ 27', flag: 'Novo' },
    { img: '../../assets/photos/banco-2026/destaque-pizza-marguerita.jpg', name: 'Marguerita', desc: 'Molho de tomate, mussarela, fatias de tomate, orégano e manjericão.', price: 'R$ 69', flag: null },
    { img: '../../assets/photos/banco-2026/destaque-pizza-delicia-picante.jpg', name: 'Delícia picante', desc: 'Mussarela, mussarela de búfala, queijo brie, presunto de Parma e geleia de pimenta.', price: 'R$ 110', flag: 'Premium' },
    { img: '../../assets/photos/banco-2026/destaque-pizza-doce-nutella.jpg', name: 'Nutella', desc: 'Creme de leite, nutella e morango. Média ou individual.', price: 'R$ 95', flag: null },
  ];
  return (
    <section className="sec wrap" id="cardapio-destaques">
      <div className="sec-head center">
        <span className="eyebrow">Do nosso cardápio</span>
        <h2>Alguns favoritos da casa.</h2>
      </div>
      <div className="show-grid">
        {itens.map((p) => (
          <article className="pcard" key={p.name}>
            <div className="ph">
              {p.flag && <span className="flag">{p.flag}</span>}
              <img src={p.img} alt={p.name} />
            </div>
            <div className="b">
              <h3>{p.name}</h3>
              <p className="desc">{p.desc}</p>
              <div className="pfoot">
                <span className="price">{p.price}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 36 }}>
        <a className="ghost-btn" href="../../cardapio/index.html">
          Ver cardápio completo
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
      </div>
    </section>
  );
}
window.CardapioDestaques = CardapioDestaques;