// Showreel — student work cinematic showcase
const Showreel = () => {
  const { t } = useI18n();
  const [playing, setPlaying] = React.useState(false);

  // YouTube (não listado, embed externo) — substitui o antigo ficheiro interno.
  // Mantemos a nossa capa + botão; após o clique, reproduz o player do YouTube.
  const YT_ID = 'SGO5QuaWcxM';
  const ytSrc =
    'https://www.youtube-nocookie.com/embed/' + YT_ID +
    '?autoplay=1&rel=0&modestbranding=1&playsinline=1';

  const onPlay = (e) => {
    if (e) e.stopPropagation();
    setPlaying(true);
  };

  return (
    <section className="section" id="showreel" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Ambient glow halo behind the frame */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '50%', left: '50%',
        width: 'min(1100px, 92%)', height: 520, transform: 'translate(-50%, -50%)',
        background:
        'radial-gradient(ellipse at 20% 50%, rgba(124,92,255,0.22), transparent 60%),' +
        'radial-gradient(ellipse at 80% 50%, rgba(255,110,199,0.18), transparent 60%),' +
        'radial-gradient(ellipse at 50% 50%, rgba(79,208,255,0.10), transparent 70%)',
        filter: 'blur(60px)',
        pointerEvents: 'none',
        zIndex: 0
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 48px' }}>
          <h2 className="h-section reveal" style={{ margin: '0 0 14px', textAlign: 'center' }}>
            {t('showreel.titlePre')}<span className="grad-text">{t('showreel.titleGrad')}</span>
          </h2>
          <p className="section-sub reveal" style={{ margin: '0 auto', textAlign: 'center' }}>{t('showreel.sub')}</p>
        </div>

        <div
          className="reveal showreel-frame"
          onClick={!playing ? onPlay : undefined}
          style={{
            position: 'relative',
            maxWidth: 1180,
            margin: '0 auto',
            borderRadius: 22,
            overflow: 'hidden',
            aspectRatio: '16 / 9',
            background: '#0a0a16',
            border: '1px solid rgba(255,255,255,0.08)',
            boxShadow:
            '0 40px 100px rgba(0,0,0,0.5),' +
            '0 0 0 1px rgba(255,255,255,0.04) inset',
            cursor: !playing ? 'pointer' : 'default'
          }}>
          {!playing &&
          <img
            src="assets/showreel-poster.jpg"
            alt="Showreel — frame de capa"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
              display: 'block', userSelect: 'none', pointerEvents: 'none'
            }} />
          }
          {playing &&
          <iframe
            src={ytSrc}
            title={t('showreel.titlePre') + t('showreel.titleGrad')}
            allow="autoplay; encrypted-media; picture-in-picture; web-share"
            allowFullScreen
            frameBorder="0"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              border: 'none', background: '#0a0a16'
            }}></iframe>
          }

          {!playing &&
          <button
            onClick={onPlay}
            aria-label={t('showreel.play')}
            className="showreel-play"
            style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 2,
              width: 84, height: 84, borderRadius: '50%',
              background: 'rgba(255,255,255,0.7)', color: '#0a0a16',
              display: 'grid', placeItems: 'center',
              boxShadow: '0 18px 50px rgba(0,0,0,0.6)',
              backdropFilter: 'blur(8px)',
              WebkitBackdropFilter: 'blur(8px)',
              cursor: 'pointer',
              border: 'none',
              transition: 'transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)'
            }}>
              <RoundedPlayIcon size={34} />
            </button>
          }
          {!playing &&
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%)',
            pointerEvents: 'none'
          }} />
          }
        </div>
      </div>

      <style>{`
        .showreel-frame:hover .showreel-play {
          transform: translate(-50%, -50%) scale(1.06);
        }
        @media (max-width: 720px) {
          .showreel-play { width: 64px !important; height: 64px !important; }
        }
      `}</style>
    </section>);

};

Object.assign(window, { Showreel });