function MomentsVideo() {
  const ref = React.useRef(null);
  const [playing, setPlaying] = React.useState(true);
  const toggle = () => {
    const v = ref.current;
    if (!v) return;
    if (v.paused) { v.play(); setPlaying(true); } else { v.pause(); setPlaying(false); }
  };
  return (
    <div onClick={toggle} style={{ position: 'relative', width: '100%', height: '100%', cursor: 'pointer' }}>
      <video ref={ref} src="assets/images/moments-video.mp4" autoPlay={true} loop={true} muted={true} playsInline={true} preload="auto" style={{ width: '100%', height: '100%', borderRadius: 'var(--radius-lg)', objectFit: 'cover', display: 'block', background: 'var(--color-negro)' }} />
      {!playing && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: '56px', height: '56px', borderRadius: '9999px', background: 'rgba(35,31,32,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 0, height: 0, borderTop: '9px solid transparent', borderBottom: '9px solid transparent', borderLeft: '14px solid #fff', marginLeft: '3px' }} />
          </div>
        </div>
      )}
    </div>
  );
}

function Moments() {
  const { Reveal, HoverImage, CircleFrame } = window;

  return (
    <section style={{ background: 'var(--color-bg-card)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="calmaeta-container" style={{ maxWidth: '1160px', margin: '0 auto' }}>

        <Reveal>
          <div style={{
            fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--color-azul)', marginBottom: '12px',
          }}>Momentos</div>
          <h2 style={{
            fontFamily: 'var(--font-primary)', fontSize: 'clamp(32px, 6vw, 48px)', fontWeight: 300,
            letterSpacing: '-0.02em', lineHeight: 1.15,
            color: 'var(--color-negro)', margin: '0 0 56px 0', maxWidth: '520px',
          }}>Cada taza, hecha con cuidado.</h2>
        </Reveal>

        <div className="calmaeta-moments-grid">
          <Reveal delay={0} style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
            <MomentsVideo />
          </Reveal>
          <Reveal delay={80} style={{ gridColumn: 'span 2' }}>
            <HoverImage src="assets/images/espresso-extraction.webp" alt="Extracción de espresso" style={{ width: '100%', height: '100%', borderRadius: 'var(--radius-lg)' }} />
          </Reveal>
          <Reveal delay={140}>
            <HoverImage src="assets/images/latte-art-cup.webp" alt="Latte art en Calmaeta" style={{ width: '100%', height: '100%', borderRadius: 'var(--radius-lg)' }} />
          </Reveal>
          <Reveal delay={200}>
            <HoverImage src="assets/images/menu-board-counter.webp" alt="Carta y mostrador de Calmaeta" style={{ width: '100%', height: '100%', borderRadius: 'var(--radius-lg)' }} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Moments });
