// Bu Hafta - episode is live + elimination countdown + a watch screen.

function Episode() {
  const { h, m, s } = useCountdown(ELIM_TARGET);
  const cells = [[h, 'SAAT'], [m, 'DAKİKA'], [s, 'SANİYE']];

  return (
    <section id="episode" data-screen-label="02 Episode" className="relative py-32 overflow-hidden">
      {/* faint backdrop */}
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-1/3 w-[620px] h-[620px] rounded-full blur-[150px] opacity-25"
             style={{background:'radial-gradient(closest-side, rgba(138,60,184,0.6), transparent 70%)'}}/>
      </div>

      <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8">
        {/* header: title left, elimination countdown right */}
        <Reveal className="flex flex-col gap-7 md:flex-row md:items-end md:justify-between">
          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-3 font-mono text-[11px] tracking-[0.32em] text-amber-300/90">
              <span className="inline-block w-2.5 h-2.5 bg-amber-400 mc-chip" />
              <span>BU HAFTA</span>
            </div>
            <h2 className="text-bone font-mc leading-[1.08]"
                style={{fontSize:'clamp(26px, 3.3vw, 42px)'}}>
              3. Bölüm <span className="text-amber-400">Yayında</span>
            </h2>
          </div>

          {/* elimination countdown */}
          <div className="shrink-0">
            <div className="flex items-center gap-2 font-mono text-[10px] tracking-[0.28em] text-amber-300/85 mb-2.5">
              <span className="w-1.5 h-1.5 rounded-full bg-danger live-dot" /> ELEMEYE SON
            </div>
            <div className="flex items-center gap-2.5 font-mono text-bone tabular-nums">
              {cells.map(([v, l], i) => (
                <React.Fragment key={i}>
                  {i > 0 && <span className="text-bone/25 text-3xl font-bold leading-none -mt-3">:</span>}
                  <span className="flex flex-col items-center">
                    <span className="text-4xl md:text-5xl font-bold leading-none">{String(v).padStart(2,'0')}</span>
                    <span className="text-[9px] tracking-[0.2em] text-bone/40 mt-1.5">{l}</span>
                  </span>
                </React.Fragment>
              ))}
            </div>
          </div>
        </Reveal>

        {/* watch screen */}
        <Reveal delay={120} className="mt-10">
          <VideoStage src="assets/video/ambient.mp4"
                      label="BÖLÜM 03 · KIRIK KABLO" autoLoop />
        </Reveal>
      </div>
    </section>
  );
}

function SectionHeader({ kicker, title, subtitle, align='left' }) {
  return (
    <Reveal className={cx('flex flex-col gap-3', align==='center' && 'items-center text-center')}>
      <div className="flex items-center gap-3 font-mono text-[11px] tracking-[0.32em] text-amber-300/90">
        <span className="inline-block w-2.5 h-2.5 bg-amber-400 mc-chip" />
        <span>{kicker}</span>
      </div>
      <h2 className="text-bone font-mc leading-[1.1]" style={{fontSize:'clamp(26px, 3.3vw, 44px)'}}>{title}</h2>
      {subtitle && <p className="text-bone/65 max-w-2xl text-[15.5px] leading-relaxed">{subtitle}</p>}
    </Reveal>
  );
}

window.Episode = Episode;
window.SectionHeader = SectionHeader;