const { Icon, Button } = window.AIProductionStudioDesignSystem_16a811;
// 1. Global entry gateway — split hero reel
const PF_REEL_VIDEO = null; // set to a video URL for a full-width background loop
const A = 'assets/';
const PF_SIDE_VIDEO = {
  left: [{ src: A + 'ugc-jewel-h264.mp4', poster: A + 'ugc-jewel-1.jpg' }, { img: A + 'kissflow-thumb.png', vimeo: '1240356853' }, { img: A + 'ugc-jewel-2.jpg', play: A + 'ugc-jewel-h264.mp4' }],
  right: [{ src: A + 'rig-removal-h264.mp4', crop: true }, { src: A + 'wire-removal-h264.mp4' }, { src: A + 'set-extension-h264.mp4' }, { src: A + 'beauty-fix-redwipe-h264.mp4' }, { src: A + 'thuglife-comp-h264.mp4' }],
}; // crop: clip has baked-in letterbox bars
const PF_CLIP_MS = 5000;

function PfGateway({ onPick, onReel }) {
  const [side, setSide] = React.useState(null);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const t = setInterval(() => setTick((n) => n + 1), PF_CLIP_MS); return () => clearInterval(t); }, []);
  const half = (s) => ({ position: 'absolute', top: 0, bottom: 0, width: '50%', left: s === 'left' ? 0 : '50%' });
  const dim = (s) => (side && side !== s ? .66 : 0);
  const lineGlow = side === 'left' ? `0 0 18px ${PF_GOLD}.9),0 0 48px ${PF_GOLD}.5)` : side === 'right' ? `0 0 18px ${PF_BLUE}.9),0 0 48px ${PF_BLUE}.5)` : '0 0 14px rgba(255,255,255,.6)';
  const lineColor = side === 'left' ? `${PF_GOLD}1)` : side === 'right' ? `${PF_BLUE}1)` : 'rgba(255,255,255,.8)';
  const Side = ({ s, disc, n }) => {
    const active = side === s;
    const glow = s === 'left' ? `0 0 28px ${PF_GOLD}.55)` : 'none';
    return (
      <button data-gold onMouseEnter={() => setSide(s)} onFocus={() => setSide(s)} onClick={() => onPick(disc)}
        style={{ ...half(s), background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: s === 'left' ? 'left' : 'right', color: 'var(--white)' }}>
        <div style={{ position: 'absolute', bottom: 'var(--space-16)', [s === 'left' ? 'left' : 'right']: 'max(var(--page-pad), calc((100vw - var(--page-max)) / 2 + var(--page-pad)))', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: s === 'left' ? 'flex-start' : 'flex-end' }}>
          <span className="u-label" style={{ color: active ? (s === 'left' ? `${PF_GOLD}1)` : `${PF_BLUE}1)`) : 'var(--mono-300)', transition: 'color var(--dur-base)' }}>{n} — Discipline</span>
          <span className="u-display" style={{ fontSize: 'clamp(40px,4.4vw,72px)', lineHeight: 1.02, textShadow: active ? glow : 'none', transition: 'text-shadow var(--dur-slow)', textWrap: 'balance' }}>{PF_DISC[disc].label}</span>
          <span style={{ fontSize: 'var(--type-md)', color: 'var(--mono-200)' }}>{PF_DISC[disc].sub}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--type-sm)', letterSpacing: '.04em', opacity: active ? 1 : 0, transform: active ? 'none' : 'translateY(6px)', transition: 'all var(--dur-base) var(--ease-standard)' }}>Filter the work <Icon name="arrow-down" size={14} /></span>
        </div>
      </button>
    );
  };
  return (
    <div onMouseLeave={() => setSide(null)} style={{ position: 'relative', height: '100vh', minHeight: 680, overflow: 'hidden', background: 'var(--black)', marginTop: 'calc((0px + 58px) * -1)' }}>
      {/* cinematic background: each side cycles its clips every 5 s, inside black film bands */}
      {['left', 'right'].map((k) => {
        const list = PF_SIDE_VIDEO[k];
        const cur = tick % list.length;
        return (
          <div key={k} aria-hidden style={{ ...half(k), overflow: 'hidden', background: '#000' }}>
            <div style={{ position: 'absolute', left: 0, right: 0, top: '16%', bottom: '16%', overflow: 'hidden', filter: side === k ? 'brightness(.72) saturate(1.05)' : side ? 'brightness(.3) saturate(.8)' : 'brightness(.4) saturate(.9)', transform: side === k ? 'scale(1.03)' : 'scale(1)', transition: 'filter var(--dur-slow) var(--ease-standard), transform 1.4s var(--ease-standard)' }}>
              {list.map((v, i) => v.img ? (
                <img key={v.img} src={v.img} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: i === cur ? 1 : 0, transform: i === cur ? 'scale(1.06)' : 'scale(1)', transition: 'opacity 700ms var(--ease-standard), transform 5.5s linear' }} />
              ) : (
                <video key={v.src} src={v.src} poster={v.poster} muted loop playsInline preload="auto"
                  ref={(el) => { if (!el) return; if (i === cur) { if (el.dataset.on !== '1') { el.dataset.on = '1'; try { el.currentTime = 0; } catch (e) {} } el.play().catch(() => {}); } else { el.dataset.on = '0'; el.pause(); } }}
                  style={{ position: 'absolute', left: 0, width: '100%', top: v.crop ? '-18%' : 0, height: v.crop ? '136%' : '100%', objectFit: 'cover', opacity: i === cur ? 1 : 0, transition: 'opacity 700ms var(--ease-standard)' }} />
              ))}
            </div>
            <div style={{ position: 'absolute', left: 0, right: 0, top: '16%', height: 1, background: 'rgba(255,255,255,.12)' }} />
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: '16%', height: 1, background: 'rgba(255,255,255,.12)' }} />
          </div>
        );
      })}
      <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(5,5,6,.2) 0%,rgba(5,5,6,0) 40%,rgba(5,5,6,.85) 100%)' }} />
      {/* left: organic gold bloom */}
      <div aria-hidden style={{ ...half('left'), opacity: side === 'left' ? 1 : 0, transition: 'opacity var(--dur-slow) var(--ease-standard)', background: `radial-gradient(70% 60% at 40% 58%,${PF_GOLD}.34) 0%,${PF_GOLD}.10) 40%,rgba(0,0,0,0) 72%)` }} />
      {/* right: tracking grid, laser-blue outlines, markers */}
      <div aria-hidden style={{ ...half('right'), opacity: side === 'right' ? 1 : 0, transition: 'opacity var(--dur-slow) var(--ease-standard)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${PF_BLUE}.22) 1px,transparent 1px),linear-gradient(90deg,${PF_BLUE}.22) 1px,transparent 1px)`, backgroundSize: '64px 64px', WebkitMaskImage: 'radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%)', maskImage: 'radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 80%)' }} />
        <div style={{ position: 'absolute', left: '22%', top: '24%', width: '44%', height: '38%', border: `1px solid ${PF_BLUE}.9)`, boxShadow: `0 0 16px ${PF_BLUE}.4),inset 0 0 16px ${PF_BLUE}.2)` }}>
          <span className="u-mono" style={{ position: 'absolute', top: -20, left: 0, fontSize: 11, color: `${PF_BLUE}1)` }}>TRK_04 · 0.998</span>
        </div>
        {[['18%', '70%'], ['74%', '18%'], ['80%', '64%'], ['36%', '82%']].map(([x, y], i) => <PfMarker key={i} x={x} y={y} color={`${PF_BLUE}1)`} size={18} />)}
      </div>
      <div aria-hidden style={{ ...half('left'), background: '#050506', opacity: dim('left'), transition: 'opacity var(--dur-slow) var(--ease-standard)', pointerEvents: 'none' }} />
      <div aria-hidden style={{ ...half('right'), background: '#050506', opacity: dim('right'), transition: 'opacity var(--dur-slow) var(--ease-standard)', pointerEvents: 'none' }} />
      <Side s="left" disc="ai" n="01" />
      <Side s="right" disc="vfx" n="02" />
      {/* the dividing line */}
      <div aria-hidden style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, transform: 'translateX(-50%)', background: `linear-gradient(180deg,rgba(0,0,0,0) 0%,${lineColor} 30%,${lineColor} 70%,rgba(0,0,0,0) 100%)`, boxShadow: lineGlow, transition: 'box-shadow var(--dur-slow), background var(--dur-slow)', pointerEvents: 'none' }} />
      {/* center: master showreel */}
      <button data-gold onClick={onReel} onMouseEnter={() => setSide(null)} aria-label="Play master showreel"
        style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 148, height: 148, borderRadius: '50%', cursor: 'pointer', color: 'var(--white)', border: '1px solid rgba(255,255,255,.32)', background: 'rgba(5,5,6,.35)', backdropFilter: 'blur(10px) saturate(115%)', WebkitBackdropFilter: 'blur(10px) saturate(115%)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, boxShadow: '0 0 0 10px rgba(255,255,255,.03)' }}>
        <Icon name="play" size={26} />
        <span className="u-label" style={{ color: 'var(--white)', fontSize: 10 }}>Master showreel</span>
      </button>
    </div>
  );
}

Object.assign(window, { PfGateway });