// Hero — full-bleed institutional headline, background crossfades through
// 4 brand photos (Ken Burns-free, simple fade loop). Click play → modal.
const HERO_SLIDES = [
  '../../assets/photos/banco-2026/praia-produto-ipanema.jpg',
  '../../assets/photos/banco-2026/fachada-ipanema-toldo.jpg',
  '../../assets/photos/banco-2026/interior-detalhe-p.jpg',
  '../../assets/photos/banco-2026/croissant-forno-fresco.jpg',
];
function Hero() {
  return (
    <header className="hero" id="top">
      {HERO_SLIDES.map((src, i) => (
        <div key={src} className="hero-bg-slide" style={{ backgroundImage: `url('${src}')`, animationDelay: (i * 6) + 's' }}></div>
      ))}
      <div className="wrap hero-content">
        <span className="eyebrow" style={{ color: 'var(--trigo)' }}>Panetteria</span>
        <h1>Mais que padaria.</h1>
        <p className="lead">
          Aqui, o dia começa no forno. Pães de fermentação natural, café de verdade
          e uma mesa que convida a ficar. Conheça a casa antes de provar.
        </p>
      </div>
      <div className="scroll-cue"><span>Role</span><span className="line"></span></div>
    </header>
  );
}
window.Hero = Hero;