// Hero - clean cinematic intro. Big title on the left, live video on the right.

function HeroBackdrop() {
  return (
    <div aria-hidden="true" className="absolute inset-0 overflow-hidden">
      <div className="absolute inset-0"
           style={{background:'radial-gradient(120% 75% at 62% 8%, #34134a 0%, #1a0a26 42%, #08040c 100%)'}} />
      <div className="absolute -top-48 -left-40 w-[1000px] h-[1000px] rounded-full blur-[140px] opacity-50 aurora-a"
           style={{background:'radial-gradient(closest-side, rgba(138,60,184,0.85), transparent 70%)'}} />
      <div className="absolute top-1/4 -right-56 w-[860px] h-[860px] rounded-full blur-[160px] opacity-45 aurora-b"
           style={{background:'radial-gradient(closest-side, rgba(245,166,35,0.5), transparent 70%)'}} />
      <div className="absolute inset-0 block-grid opacity-40" />
      <div className="absolute inset-0"
           style={{background:'radial-gradient(120% 85% at 50% 45%, transparent 40%, rgba(0,0,0,0.55) 100%)'}} />
      <div className="absolute bottom-0 inset-x-0 h-44 bg-gradient-to-b from-transparent to-ink-900" />
      <div className="absolute inset-0 scanlines opacity-15" />
    </div>
  );
}

/* big crisp animated word reveal - words rise in waves */
function WordReveal({ text, delay = 0, className = '' }) {
  const words = text.split(' ');
  return (
    <span className={className}>
      {words.map((w, i) => (
        <span key={i} className="inline-block overflow-hidden align-top mr-[0.22em]">
          <span className="word-in inline-block" style={{ animationDelay: `${delay + i * 80}ms` }}>{w}</span>
        </span>
      ))}
    </span>
  );
}

/* ----------------------------------------------------------------
   VideoStage - reusable framed video player.
   autoLoop=true  -> muted ambient loop that plays on its own (hero mood)
   autoLoop=false -> shows a play button; click to start (watch screen)
   A mute toggle is always available so sound is one tap away.
---------------------------------------------------------------- */
function VideoStage({ src, label = 'FRAGMAN', autoLoop = true, poster, className = '' }) {
  const vref = useRef(null);
  const [muted, setMuted] = useState(true);
  const [playing, setPlaying] = useState(autoLoop);

  const togglePlay = () => {
    const v = vref.current; if (!v) return;
    if (v.paused) { v.play().catch(() => {}); setPlaying(true); }
    else { v.pause(); setPlaying(false); }
  };
  const toggleMute = (e) => {
    e.stopPropagation();
    const v = vref.current; if (!v) return;
    v.muted = !v.muted;
    if (!v.muted && v.paused) { v.play().catch(() => {}); setPlaying(true); }
    setMuted(v.muted);
  };

  return (
    <div className={cx(
      'group relative aspect-video rounded-2xl overflow-hidden bg-ink-800',
      'border border-amber-300/15 shadow-[0_50px_130px_-45px_rgba(0,0,0,0.9)]',
      'ring-1 ring-inset ring-white/5',
      className
    )}>
      <video
        ref={vref}
        src={src}
        poster={poster}
        className="absolute inset-0 w-full h-full object-cover"
        autoPlay={autoLoop}
        loop={autoLoop}
        muted
        playsInline
        preload="metadata"
        onClick={togglePlay}
      />

      {/* brand grade: faint scanlines + soft vignette so it reads cinematic, not flat */}
      <div className="absolute inset-0 pointer-events-none scanlines opacity-10" />
      <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-ink-900/55 via-transparent to-ink-900/15" />

      {/* top-left tag */}
      <div className="absolute top-4 left-4 flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink-900/55 backdrop-blur border border-bone/10">
        <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
        <span className="font-mono text-[10px] tracking-[0.24em] text-bone/80">{label}</span>
      </div>

      {/* center play (when paused) */}
      {!playing && (
        <button onClick={togglePlay} aria-label="Oynat"
                className="absolute inset-0 grid place-items-center">
          <span className="relative">
            <span className="block w-20 h-20 rounded-full bg-amber-400 text-aubergine-900 grid place-items-center shadow-glow-amber transition-transform group-hover:scale-105 active:scale-95">
              <IconPlay size={28} />
            </span>
            <span className="absolute inset-0 rounded-full border border-amber-300/40 animate-ping" />
          </span>
        </button>
      )}

      {/* bottom-right controls */}
      <div className="absolute bottom-4 right-4 flex items-center gap-2">
        {playing && (
          <button onClick={(e)=>{e.stopPropagation();togglePlay();}} aria-label="Duraklat"
                  className="w-10 h-10 grid place-items-center rounded-full bg-ink-900/60 backdrop-blur border border-bone/15 text-bone hover:border-amber-300/50 transition-colors active:scale-95">
            <IconPause size={15} />
          </button>
        )}
        <button onClick={toggleMute} aria-label={muted ? 'Sesi aç' : 'Sesi kapat'}
                className="w-10 h-10 grid place-items-center rounded-full bg-ink-900/60 backdrop-blur border border-bone/15 text-bone hover:border-amber-300/50 transition-colors active:scale-95">
          {muted ? <IconMute size={16} /> : <IconSound size={16} />}
        </button>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section id="hero" data-screen-label="01 Hero"
             className="relative min-h-[100dvh] flex items-center pt-28 pb-16 overflow-hidden">
      <HeroBackdrop />

      <div className="relative w-full max-w-[1280px] mx-auto px-5 sm:px-8 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
        {/* LEFT: title + CTAs */}
        <div className="lg:col-span-5 relative z-20">
          <h1 className="font-sans font-bold text-bone leading-[0.92] tracking-[-0.03em]"
              style={{fontSize:'clamp(40px, 11vw, 88px)'}}>
            <div className="block"><WordReveal text="Yeni bir" delay={120}/></div>
            <div className="block"><WordReveal text="Minecraft" delay={240}/></div>
            <div className="block"><WordReveal text="evreni." delay={360} className="text-amber-400"/></div>
          </h1>

          <p className="reveal in mt-7 max-w-[420px] font-mono text-[13.5px] leading-relaxed tracking-wide text-bone/60"
             style={{transitionDelay:'900ms'}}>
            12 oyuncu · 1 imposter · bir köyü dünyaya bağlama hikayesi.
          </p>

          <div className="reveal in mt-9 flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-3" style={{transitionDelay:'1100ms'}}>
            <a href="#episode"
               className="mc-bevel group inline-flex items-center justify-center gap-3 w-full sm:w-auto pl-5 pr-6 py-4 rounded-lg bg-amber-400 text-aubergine-900 font-bold tracking-tight shadow-glow-amber transition-transform hover:-translate-y-0.5 active:scale-95">
              <span className="grid place-items-center w-7 h-7 rounded-sm bg-aubergine-900/90 text-amber-300"><IconPlay size={13}/></span>
              <span className="text-[16px]">3. Bölümü İzle</span>
            </a>
            <a href="#vote"
               className="inline-flex items-center justify-center gap-3 w-full sm:w-auto px-5 py-4 rounded-lg border border-bone/20 text-bone hover:border-amber-300/60 hover:text-amber-200 transition-all active:scale-95 text-[16px]">
              <IconVote size={17}/>
              <span>İmposter'a oy ver</span>
            </a>
          </div>
        </div>

        {/* RIGHT: cinematic video */}
        <div className="lg:col-span-7 relative z-10">
          <VideoStage src="assets/video/hero.mp4" label="GIGACRAFT · FRAGMAN" autoLoop />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.WordReveal = WordReveal;
window.VideoStage = VideoStage;