// Sonhos — a compact showcase of the house's most famous item, with a
// discreet badge noting its BBB fame (kept generic, no specific edition/claim).
function Sonhos({ onPlay }) {
  const video = {
    title: 'Sonho famoso',
    sub: 'O momento em que o sonho da Panetteria apareceu no BBB.',
    poster: '../../assets/photos/banco-2026/sonho-kitkat.jpg',
    src: '../../assets/videos/banco-2026/sonho-bbb.mp4',
  };
  const fotos = [
    { img: '../../assets/photos/banco-2026/doce-creme-pistache-a.jpg', nome: 'Pistache' },
    { img: '../../assets/photos/banco-2026/sonho-rosa-morango.jpg', nome: 'Morango' },
    { img: '../../assets/photos/banco-2026/sonho-chocolate-macaron.jpg', nome: 'Chocolate com avelã' },
    { img: '../../assets/photos/banco-2026/sonho-kitkat.jpg', nome: 'KitKat' },
    { img: '../../assets/photos/banco-2026/sonho-morango-marshmallow.jpg', nome: 'Morango com marshmallow' },
    { img: '../../assets/photos/banco-2026/sonho-romeu-julieta.jpg', nome: 'Romeu e Julieta' },
    { img: '../../assets/photos/banco-2026/sonho-coco-chocolate-branco.jpg', nome: 'Coco com chocolate branco' },
  ];
  return (
    <section className="sec wrap" id="sonhos">
      <div className="sec-head center">
        <span className="eyebrow">O clássico da casa</span>
        <h2>O sonho que virou fama.</h2>
        <p>Recheio farto, casquinha macia e aquele carinho de padaria. Sete sabores pra escolher — tão bom que já virou assunto fora daqui.</p>
        <button onClick={() => onPlay && onPlay(video)}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 12, background: 'var(--oliva-deep)', color: '#fff', fontSize: '.68rem', fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', padding: '7px 16px', border: 'none', borderRadius: 999, cursor: 'pointer' }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          Sonho famoso · já apareceu no BBB
        </button>
      </div>
      <div className="show-grid">
        {fotos.map((f) => (
          <article className="pcard" key={f.img}>
            <div className="ph"><img src={f.img} alt={'Sonho de ' + f.nome} /></div>
            <div className="b"><h3>{f.nome}</h3></div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.Sonhos = Sonhos;