// Showcase — desire-first commerce. Soft "leve para casa".
function Showcase({ onAdd }) {
  const prods = [
    { img: '../../assets/photos/banco-2026/doce-creme-pistache-b.jpg', name: 'Sonho de pistache', desc: 'Recheio cremoso de pistache, polvilhado na hora.', price: 'R$ 19', flag: 'Do forno' },
    { img: '../../assets/photos/strawberry-tart.jpg', name: 'Tortinha de morango', desc: 'Massa amanteigada e morangos frescos.', price: 'R$ 16', flag: null },
    { img: '../../assets/photos/banco-2026/bolo-chocolate-escorrendo.jpg', name: 'Trança de chocolate', desc: 'Folhada, com fio generoso de chocolate.', price: 'R$ 18', flag: 'Novo' },
    { img: '../../assets/photos/bruschetta-oj.jpg', name: 'Bruschetta da casa', desc: 'Tomate, azeite e pão de fermentação natural.', price: 'R$ 22', flag: null },
  ];
  return (
    <section className="sec wrap" id="cardapio">
      <div className="sec-head center">
        <span className="eyebrow">Leve um pouco da Panetteria</span>
        <h2>Para a sua mesa, em casa.</h2>
      </div>
      <div className="show-grid">
        {prods.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>
                <button className="add" aria-label={'Adicionar ' + p.name} onClick={() => onAdd(p.name)}>+</button>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.Showcase = Showcase;