/* global React, T, Eyebrow, Reveal */
const { useState: useES1 } = React;

// =============== The biggest in Europe ===============
function EuropaShowcase() {
  const [playing, setPlaying] = useES1(false);

  return (
    <section id="europa" style={{
      position: 'relative',
      background: `linear-gradient(180deg, #eef1ff 0%, #f4f6ff 60%, #eef1ff 100%)`,
      padding: '140px 56px 130px',
      overflow: 'hidden',
      borderTop: '1px solid rgba(75,107,251,0.10)',
      borderBottom: '1px solid rgba(75,107,251,0.10)',
    }}>
      {/* Soft blue glow washes */}
      <div className="gw-drift" style={{
        position: 'absolute', top: '-15%', right: '-10%', width: '55%', height: '70%',
        background: `radial-gradient(ellipse, rgba(107,138,255,0.25), transparent 65%)`,
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
      <div className="gw-drift2" style={{
        position: 'absolute', bottom: '-20%', left: '-10%', width: '55%', height: '70%',
        background: `radial-gradient(ellipse, rgba(184,155,255,0.20), transparent 65%)`,
        filter: 'blur(90px)', pointerEvents: 'none',
      }}/>

      {/* Decorative thin curves drifting around the headline */}
      <svg viewBox="0 0 1440 600" preserveAspectRatio="none" aria-hidden
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          pointerEvents: 'none', opacity: 0.45, mixBlendMode: 'multiply',
        }}>
        <path d="M-50,360 C260,300 540,420 780,340 C1000,270 1240,360 1500,300"
          stroke={T.blueLight} strokeWidth="1" fill="none"/>
        <path d="M-50,420 C260,360 540,480 780,400 C1000,330 1240,420 1500,360"
          stroke={T.violet} strokeWidth="1" fill="none" opacity="0.6"/>
        <path d="M-50,480 C260,420 540,540 780,460 C1000,390 1240,480 1500,420"
          stroke={T.green} strokeWidth="1" fill="none" opacity="0.5"/>
      </svg>

      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1280, margin: '0 auto', textAlign: 'center',
      }}>
        {/* Eyebrow */}
        <Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: T.mono, fontSize: 12, fontWeight: 500,
            letterSpacing: '0.22em', textTransform: 'uppercase', color: T.blue,
            marginBottom: 36,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.blue }}/>
            // The biggest in Europe
          </div>
        </Reveal>

        {/* Huge headline */}
        <Reveal delay={80}>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(48px, 7.2vw, 124px)',
            lineHeight: 0.96, letterSpacing: '-0.035em',
            color: T.ink, margin: '0 auto', textWrap: 'balance',
            maxWidth: 1180,
          }}>
            Uno degli eventi più grandi d'
            <em style={{ fontStyle: 'italic', color: T.blue }}>Europa</em>
            {' '}per chi fa{' '}
            <em style={{ fontStyle: 'italic', color: T.blue }}>business</em>
            {' '}nel mercato digitale.
          </h2>
        </Reveal>

        {/* Subtitle */}
        <Reveal delay={160}>
          <p style={{
            fontFamily: T.sans, fontWeight: 400,
            fontSize: 'clamp(17px, 1.45vw, 21px)', lineHeight: 1.55,
            color: 'rgba(8,13,26,0.62)',
            margin: '32px auto 0', maxWidth: 880,
          }}>
            Migliaia di persone ogni anno partecipano al Marketers World per acquisire
            le migliori strategie di{' '}
            <strong style={{ color: T.ink }}>Marketing</strong>,{' '}
            <strong style={{ color: T.ink }}>Business</strong> e{' '}
            <strong style={{ color: T.ink }}>AI</strong>. Partecipa alla prossima edizione.
          </p>
        </Reveal>

        {/* Video frame */}
        <Reveal delay={250}>
          <div style={{
            position: 'relative', marginTop: 64,
            aspectRatio: '16/9',
            borderRadius: 24, overflow: 'hidden',
            background: '#000', border: '1px solid rgba(8,13,26,0.10)',
            boxShadow:
              '0 40px 100px rgba(8,13,26,0.30),' +
              ' 0 12px 30px rgba(8,13,26,0.15)',
          }}>
            {playing ? (
              <video
                src="https://video.gumlet.io/69981ad857a7b7f9b0ff7333/6998377f71f7bf393af72c5a/download.mp4"
                controls
                autoPlay
                playsInline
                controlsList="nodownload"
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%', objectFit: 'cover',
                  background: '#000',
                }}
              />
            ) : (
              <div onClick={() => setPlaying(true)} style={{
                position: 'absolute', inset: 0, cursor: 'pointer',
              }}>
                <img
                  src={window.mwAsset('assets/europa-stage.jpg', 'assets/europa-stage.jpg')}
                  alt="Marketers World · main stage"
                  style={{
                    position: 'absolute', inset: 0,
                    width: '100%', height: '100%', objectFit: 'cover',
                    filter: 'brightness(0.92) saturate(1.04) contrast(1.03)',
                  }}
                  onError={e => {
                    e.currentTarget.src = (window.MW && window.MW.cover) || '';
                  }}
                />
                <div style={{
                  position: 'absolute', inset: 0,
                  background:
                    'linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%)',
                }}/>

                {/* Top HUD strip */}
                <div style={{
                  position: 'absolute', top: 22, left: 28, right: 28,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: T.mono, fontSize: 12, letterSpacing: '0.20em',
                  color: 'rgba(255,255,255,0.92)', textTransform: 'uppercase',
                }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                    <span style={{
                      width: 8, height: 8, borderRadius: '50%', background: '#FF4444',
                      animation: 'pulse 2s ease infinite',
                    }}/>
                    REC · MW · OFFICIAL
                  </span>
                  <span style={{ color: 'rgba(255,255,255,0.92)' }}>HD · 1080p</span>
                </div>

                {/* Play button */}
                <button onClick={(e) => { e.stopPropagation(); setPlaying(true); }} style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 120, height: 120, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.14)',
                  backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
                  border: '2px solid rgba(255,255,255,0.9)', color: '#fff',
                  cursor: 'pointer', transition: 'all 0.25s',
                  display: 'grid', placeItems: 'center',
                  boxShadow: '0 12px 36px rgba(0,0,0,0.4)',
                }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = T.blue;
                    e.currentTarget.style.borderColor = T.blue;
                    e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1.08)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(255,255,255,0.14)';
                    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.9)';
                    e.currentTarget.style.transform = 'translate(-50%,-50%) scale(1)';
                  }}
                  aria-label="Riproduci video">
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"
                    style={{ marginLeft: 6 }}>
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </button>

                {/* Bottom timecode / caption */}
                <div style={{
                  position: 'absolute', bottom: 22, left: 28, right: 28,
                  display: 'flex', alignItems: 'flex-end',
                  justifyContent: 'space-between', gap: 16,
                }}>
                  <div>
                    <div style={{
                      fontFamily: T.mono, fontSize: 11, letterSpacing: '0.2em',
                      textTransform: 'uppercase', color: T.blueLight, marginBottom: 6,
                    }}>· Trailer ufficiale</div>
                    <div style={{
                      fontFamily: T.serif, fontWeight: 800, fontStyle: 'italic',
                      fontSize: 'clamp(20px, 2vw, 28px)', color: '#fff', lineHeight: 1.2,
                      letterSpacing: '-0.01em',
                      textShadow: '0 2px 14px rgba(0,0,0,0.55)',
                      maxWidth: '70%',
                    }}>"Tutto quello che succede a Rimini."</div>
                  </div>
                  <span style={{
                    fontFamily: T.mono, fontSize: 12, letterSpacing: '0.18em',
                    color: 'rgba(255,255,255,0.85)',
                  }}>02:14</span>
                </div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { EuropaShowcase });