// Eventos — "A casa é palco". A boutique of events: one headliner on top, a
// passing vitrine (auto-scrolling marquee) of event cards below. Light field so
// the running video is the star; text is kept to the minimum (a tag + a name).
//
// Each card is a VIDEO CONTAINER. Set `video` to a file path and a `poster`
// frame:  at rest the poster shows (no download) · on hover the clip plays muted
// inside the card · clicking opens it full-screen with sound. Mark vertical
// reels with `portrait: true`. Keep clips short & compressed (≈720p H.264 .mp4).

function EvIcon({ name }) {
  const p = {
    music: <g><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></g>,
    tv: <g><rect x="2" y="7" width="20" height="15" rx="2"/><polyline points="17 2 12 7 7 2"/></g>,
    gift: <g><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 5 12 8c0-3 2-5 4.5-5a2.5 2.5 0 0 1 0 5"/></g>,
    egg: <g><path d="M12 22c6.23-.05 7.87-5.57 7.5-10C19.14 7.66 15.55 2.04 12 2 8.45 2.04 4.86 7.66 4.5 12c-.37 4.43 1.27 9.95 7.5 10z"/></g>,
    smile: <g><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></g>,
    glass: <g><path d="M8 22h8"/><path d="M12 11v11"/><path d="M5 3h14l-1.5 6a5.5 5.5 0 0 1-11 0L5 3z"/></g>,
  }[name];
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p}</svg>;
}

const FEATURED = {
  icon: 'tv', kicker: 'Copa do Mundo', live: true, title: 'Arena Panetteria Fan Fest',
  date: 'Todos os jogos · na telona', poster: '../../assets/arena/fest-bg.jpg',
  video: null, sub: 'Arena Panetteria Fan Fest', link: 'arena.html',
};

const EVENTS = [
  { icon: 'smile', kicker: 'Dia das Crianças', title: 'Tarde da criançada',
    date: 'Edição especial', poster: '../../assets/events/criancas-poster.jpg',
    video: '../../assets/events/criancas.mp4', sub: 'Tarde da criançada', portrait: true },
  { icon: 'glass', kicker: 'Réveillon', title: 'Ceia de Réveillon',
    date: '31 dez · 21h', poster: '../../assets/photos/banco-2026/funcionaria-uniformizada-a.jpg',
    video: null, sub: 'Ceia de Réveillon' },
  { icon: 'music', kicker: 'Festival', title: 'Panetteria Fest',
    date: 'Sex 27/06', poster: '../../assets/photos/banco-2026/bastidores-forno-chama-grande.jpg',
    video: null, sub: 'Panetteria Fest' },
  { icon: 'gift', kicker: 'Natal', title: 'Natal na casa',
    date: 'Dezembro', poster: '../../assets/photos/banco-2026/doce-macarons-calda-chocolate.jpg',
    video: null, sub: 'Natal na Panetteria' },
  { icon: 'egg', kicker: 'Páscoa', title: 'Páscoa artesanal',
    date: 'Março e abril', poster: '../../assets/photos/banco-2026/maos-croissant-chocolate-2.jpg',
    video: null, sub: 'Páscoa na Panetteria' },
];

// Lazily mount the clip only while hovering, then tear it down — keeps the page
// light (no preloading) and avoids a permanent <video> in the DOM.
function useHoverVideo(ev) {
  const mediaRef = React.useRef(null);
  const vidRef = React.useRef(null);
  const enter = () => {
    if (!ev.video || vidRef.current || !mediaRef.current) return;
    const v = document.createElement('video');
    v.src = ev.video; v.muted = true; v.loop = true; v.playsInline = true;
    v.className = 'ev-media-vid';
    mediaRef.current.appendChild(v);
    vidRef.current = v;
    requestAnimationFrame(() => { v.classList.add('playing'); v.play().catch(() => {}); });
  };
  const leave = () => { if (vidRef.current) { vidRef.current.remove(); vidRef.current = null; } };
  return { mediaRef, enter: ev.video ? enter : undefined, leave: ev.video ? leave : undefined };
}

function Headliner({ ev, onOpen }) {
  const { mediaRef, enter, leave } = useHoverVideo(ev);
  return (
    <button className="ev-feature" onClick={() => onOpen(ev)} onMouseEnter={enter} onMouseLeave={leave}>
      <div className="ev-media" ref={mediaRef}><img className="ev-media-el kenburns" src={ev.poster} alt="" /></div>
      {ev.video && <span className="ev-tag">Vídeo</span>}
      {ev.live && <span className="ev-live"><span className="ev-live-dot"></span>Ao vivo</span>}
      <span className="ev-headline-play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
      <div className="ev-feature-body">
        <span className="ev-kicker"><EvIcon name={ev.icon} />{ev.kicker}</span>
        <h3>{ev.title}</h3>
        <span className="ev-date">{ev.date}</span>
      </div>
    </button>
  );
}

function VitrineCard({ ev, onOpen }) {
  const { mediaRef, enter, leave } = useHoverVideo(ev);
  return (
    <button className="ev-card" onClick={() => onOpen(ev)} onMouseEnter={enter} onMouseLeave={leave}>
      <div className="ev-media" ref={mediaRef}><img className="ev-media-el kenburns" src={ev.poster} alt="" /></div>
      {ev.video && <span className="ev-tag">Vídeo</span>}
      {ev.live && <span className="ev-live"><span className="ev-live-dot"></span>Ao vivo</span>}
      <span className="ev-card-play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
      <div className="ev-card-body">
        <span className="ev-kicker"><EvIcon name={ev.icon} />{ev.kicker}</span>
        <h3>{ev.title}</h3>
      </div>
    </button>
  );
}

function Eventos({ onPlay }) {
  const open = (ev) => {
    if (ev.link) { window.location.href = ev.link; return; }
    onPlay({ title: ev.title, sub: ev.sub, poster: ev.poster, src: ev.video, portrait: ev.portrait });
  };
  const loop = [...EVENTS, ...EVENTS]; // duplicated for a seamless marquee
  // Only run the passing-marquee animation while the vitrine is on screen.
  React.useEffect(() => {
    const el = document.querySelector('.ev-vitrine');
    if (!el || !('IntersectionObserver' in window)) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => el.classList.toggle('run', e.isIntersecting)),
      { threshold: 0.04 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section className="sec eventos" id="eventos">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow">A casa é palco</span>
          <h2>Acontece na Panetteria.</h2>
        </div>
        <Headliner ev={FEATURED} onOpen={open} />
      </div>

      <div className="ev-vitrine">
        <div className="ev-track">
          {loop.map((ev, i) => <VitrineCard key={ev.title + i} ev={ev} onOpen={open} />)}
        </div>
      </div>
    </section>
  );
}
window.Eventos = Eventos;