// Imposter oylama - "Şüpheli Panosu" interrogation board. Asymmetric, tense, red-accent.

function Imposter() {
  const ref = useRef(null);
  const inView = useInView(ref);
  const { h, m } = useCountdown(ELIM_TARGET);
  const lead = SUSPECTS[0];
  const rest = SUSPECTS.slice(1);
  const pct = (n) => n.toFixed(1).replace('.', ',');

  return (
    <section id="vote" data-screen-label="03 Imposter" ref={ref} className="relative py-32 overflow-hidden">
      {/* interrogation backdrop: red spotlight + evidence grid + vignette */}
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-0" style={{background:'radial-gradient(75% 55% at 50% -5%, rgba(255,59,107,0.16), transparent 60%)'}}/>
        <div className="absolute bottom-0 left-0 w-[700px] h-[700px] rounded-full blur-[150px] opacity-25"
             style={{background:'radial-gradient(closest-side, rgba(138,60,184,0.55), transparent 70%)'}}/>
        <div className="absolute inset-0 block-grid opacity-30" />
        <div className="absolute inset-0 scanlines opacity-[0.08]" />
        <div className="absolute inset-0" style={{background:'radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,0.6) 100%)'}}/>
      </div>

      <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8">
        {/* header: title + live stakes */}
        <Reveal className="flex flex-col md:flex-row md:items-end md:justify-between gap-7">
          <h2 className="text-bone font-mc leading-[1.05]" style={{fontSize:'clamp(30px, 4vw, 54px)'}}>
            İmposter<br/><span className="text-danger">sence kim?</span>
          </h2>
          <div className="flex items-center gap-6 shrink-0">
            <div>
              <div className="font-mono text-[10px] tracking-[0.28em] text-bone/45">TOPLAM OY</div>
              <div className="text-3xl font-bold tabular-nums text-bone mt-1"><CountUp end={12847} duration={1800}/></div>
            </div>
            <div className="h-11 w-px bg-bone/15" />
            <div>
              <div className="font-mono text-[10px] tracking-[0.28em] text-danger/85 flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-danger live-dot"/>ELEMEYE SON</div>
              <div className="text-3xl font-bold text-bone mt-1 tabular-nums">{String(h).padStart(2,'0')}<span className="text-bone/40 text-xl">s</span> {String(m).padStart(2,'0')}<span className="text-bone/40 text-xl">d</span></div>
            </div>
          </div>
        </Reveal>

        {/* asymmetric suspect board */}
        <div className="mt-12 grid grid-cols-1 lg:grid-cols-12 gap-5 items-stretch">
          {/* PRIME suspect */}
          <Reveal className="lg:col-span-7">
            <PrimeSuspect s={lead} pct={pct} animate={inView} />
          </Reveal>

          {/* others + actions */}
          <div className="lg:col-span-5 flex flex-col gap-4">
            {rest.map((s, i) => (
              <Reveal key={s.name} delay={140 + i * 120}>
                <MiniSuspect s={s} rank={i + 2} pct={pct} animate={inView} />
              </Reveal>
            ))}

            <Reveal delay={420}>
              <button className="group w-full flex items-center justify-between px-5 py-4 rounded-xl border border-bone/10 bg-ink-800/40 hover:border-danger/40 transition-colors">
                <span className="flex items-center gap-3">
                  <span className="font-mono text-[12px] tracking-widest text-bone/40">04-12</span>
                  <span className="text-bone/70 text-[14px]">Diğer 9 şüpheli</span>
                </span>
                <span className="flex items-center gap-2">
                  <span className="font-mono text-[12px] text-bone/55">%37,8</span>
                  <IconChevR size={14} className="text-bone/40 group-hover:text-danger transition-colors"/>
                </span>
              </button>
            </Reveal>

            <Reveal delay={500}>
              <a href="#" className="w-full inline-flex items-center justify-center gap-3 py-4 rounded-xl bg-danger text-bone font-bold tracking-tight shadow-[0_18px_50px_-16px_rgba(255,59,107,0.7)] hover:bg-danger/85 transition-all active:scale-[0.98]">
                <IconVote size={18}/> Tam listede oyla
              </a>
            </Reveal>
          </div>
        </div>

        <Reveal delay={560}>
          <p className="mt-6 font-mono text-[11px] tracking-[0.22em] text-bone/35 text-center">
            HER HESAP HAFTADA 1 OY · FİNALDE GERÇEK İMPOSTER AÇIKLANIR
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- prime suspect: big dramatic mugshot ---- */
function PrimeSuspect({ s, pct, animate }) {
  const [filled, setFilled] = useState(false);
  useEffect(() => {
    if (!animate) return;
    const id = setTimeout(() => setFilled(true), 350);
    return () => clearTimeout(id);
  }, [animate]);

  return (
    <div className="group relative h-full rounded-2xl overflow-hidden border border-danger/45 bg-gradient-to-br from-danger/12 via-aubergine-900/50 to-ink-900/80 shadow-[0_45px_130px_-45px_rgba(255,59,107,0.55)]">
      <div className="absolute inset-0 scanlines opacity-[0.07] pointer-events-none" />
      {/* stamp row */}
      <div className="relative flex items-center justify-between px-6 pt-5">
        <span className="font-mono text-[11px] tracking-[0.3em] text-danger flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-danger live-dot"/>EN ÇOK ŞÜPHELENİLEN
        </span>
        <span className="font-pixel text-danger/70 text-[28px] leading-none">01</span>
      </div>

      <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-4 items-end px-6 pb-6 pt-1">
        {/* skin */}
        <div className="relative h-[230px] sm:h-[300px]">
          <div className="absolute inset-x-4 bottom-6 top-10 rounded-xl"
               style={{background:'radial-gradient(70% 60% at 50% 35%, rgba(255,59,107,0.25), transparent 70%)'}}/>
          <img src={s.body} alt={s.name}
               className="absolute inset-0 w-full h-full object-contain object-bottom drop-shadow-[0_22px_34px_rgba(0,0,0,0.65)] transition-transform duration-500 group-hover:scale-[1.04]"
               style={{imageRendering:'pixelated'}}/>
        </div>

        {/* info */}
        <div className="pb-1">
          <div className="flex items-baseline gap-2 flex-wrap">
            <h3 className="text-3xl font-bold text-bone leading-none">{s.name}</h3>
            <span className="font-mono text-[12px] tracking-widest text-bone/45">{s.handle}</span>
          </div>
          <p className="mt-3 text-[14px] text-bone/65 leading-relaxed border-l-2 border-danger/50 pl-3">{s.vibe}</p>

          <div className="mt-6 flex items-end gap-1">
            <span className="text-[64px] leading-[0.8] font-bold text-bone tabular-nums">%{pct(s.pct)}</span>
            <span className="mb-2 font-mono text-[11px] tracking-widest text-bone/40">ŞÜPHE OYU</span>
          </div>
          <div className="mt-3 h-2.5 rounded-full bg-bone/10 overflow-hidden">
            <div className="h-full rounded-full bg-gradient-to-r from-danger to-amber-400 bar-fill"
                 style={{ width: filled ? `${s.pct}%` : '0%' }} />
          </div>

          <button className="mt-5 w-full py-3.5 rounded-lg bg-danger text-bone font-bold flex items-center justify-center gap-2 shadow-[0_16px_44px_-16px_rgba(255,59,107,0.8)] hover:bg-danger/85 transition-all active:scale-[0.98]">
            <IconVote size={16}/> Şüpheliyim
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---- compact suspect row ---- */
function MiniSuspect({ s, rank, pct, animate }) {
  const [filled, setFilled] = useState(false);
  useEffect(() => {
    if (!animate) return;
    const id = setTimeout(() => setFilled(true), 350 + rank * 150);
    return () => clearTimeout(id);
  }, [animate, rank]);

  return (
    <div className="group relative rounded-xl border border-aubergine-800/70 bg-ink-800/55 p-4 flex items-center gap-4 hover:border-danger/40 transition-colors">
      <span className="font-pixel text-amber-300 text-[22px] w-6 text-center shrink-0">{String(rank).padStart(2,'0')}</span>
      <img src={s.face} alt={s.name}
           className="w-14 h-14 rounded-md border border-bone/10 shrink-0"
           style={{imageRendering:'pixelated', background:'linear-gradient(135deg,#3d1659,#1a0a25)'}}/>
      <div className="flex-1 min-w-0">
        <div className="flex items-baseline gap-2">
          <h4 className="text-bone font-semibold whitespace-nowrap">{s.name}</h4>
          <span className="font-mono text-[10px] tracking-widest text-bone/40 truncate">{s.handle}</span>
        </div>
        <div className="mt-2 flex items-center gap-3">
          <div className="flex-1 h-1.5 rounded-full bg-bone/10 overflow-hidden">
            <div className="h-full rounded-full bg-gradient-to-r from-amber-400 to-fiber bar-fill"
                 style={{ width: filled ? `${s.pct}%` : '0%' }} />
          </div>
          <span className="font-mono text-sm font-semibold text-bone tabular-nums w-12 text-right">%{pct(s.pct)}</span>
        </div>
      </div>
      <button className="shrink-0 px-3.5 py-2 rounded-md bg-bone/10 text-bone text-[13px] font-semibold hover:bg-danger transition-colors active:scale-95 whitespace-nowrap">
        Şüpheliyim
      </button>
    </div>
  );
}

window.Imposter = Imposter;
