// Bastidores — full-bleed behind-the-scenes moment.
// onPlay é opcional: passe {title, sub, poster, src} se algum dia houver um
// vídeo específico de bastidores; sem ele, o botão de play simplesmente some.
function Bastidores({ onPlay, video }) {
  return (
    <section className="bastidores" id="bastidores">
      <div className="bg" style={{ backgroundImage: "url('../../assets/photos/banco-2026/bastidores-cozinheiro-retirando-forno.jpg')" }}></div>
      <div className="wrap inner">
        <span className="eyebrow" style={{ color: 'var(--trigo)' }}>Nos bastidores</span>
        <h2>Quem faz<br/>faz com as mãos.</h2>
        <p>
          Antes do sol, a equipe já está em pé. Massa pesada, fermento vivo, farinha no
          avental. Não tem atalho, tem ofício. Venha ver de perto como o pão nasce.
        </p>
        <a className="ghost-btn" href="#">
          Visite a padaria
          <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>
      {onPlay && (
        <button className="ev-headline-play" aria-label="Assistir vídeo" onClick={() => onPlay(video)}>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </button>
      )}
    </section>
  );
}
window.Bastidores = Bastidores;