// Köy Halkı - 12 oyuncu yatay galerisi. Bel üstü close-up portreler.

function Villagers() {
  return (
    <section id="villagers" data-screen-label="04 Villagers" className="relative py-32 overflow-hidden">
      <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8">
        <div className="flex items-end justify-between gap-8 flex-wrap">
          <SectionHeader
            kicker="KÖY HALKI · 12 OYUNCU"
            title="GigaKöy sakinleri"
            subtitle="On iki Türk creator, sekiz hafta, bir köy. İçlerinden biri imposter."
          />
          <Reveal delay={120} className="flex items-center gap-2">
            <Legend dot="bg-amber-400" label="Aktif" />
            <Legend dot="bg-danger" label="Şüpheli" />
            <Legend dot="bg-bone/35" label="Elenmiş" />
          </Reveal>
        </div>

        {/* horizontal track */}
        <div className="mt-14 relative">
          <div className="villagers-track flex gap-5 overflow-x-auto snap-x snap-mandatory pb-2 pr-8">
            {VILLAGERS.map((v, i) => (
              <Reveal key={v.name} delay={i * 60} className="snap-start shrink-0 w-[252px]">
                <VillagerCard v={v} idx={i} />
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Legend({ dot, label }) {
  return (
    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-ink-800/70 border border-bone/8">
      <span className={cx('w-2 h-2 rounded-full', dot)} />
      <span className="text-[11px] font-mono tracking-widest text-bone/70">{label}</span>
    </div>
  );
}

function VillagerCard({ v, idx }) {
  const isElim = v.status === 'eliminated';
  const isSus = v.status === 'suspect';

  return (
    <div className={cx(
      'group relative rounded-xl overflow-hidden border lift bg-ink-800/70',
      isElim ? 'border-bone/8' : isSus ? 'border-danger/35' : 'border-aubergine-800/70'
    )}>
      {/* portrait: waist-up close-up (body render cropped from the top) */}
      <div className={cx('relative aspect-[4/5] overflow-hidden', isElim && 'grayscale')}>
        <div className="absolute inset-0"
             style={{background: isElim
               ? 'radial-gradient(85% 70% at 50% 25%, #232026 0%, #0a050e 100%)'
               : isSus
               ? 'radial-gradient(85% 70% at 50% 25%, #5a1830 0%, #150813 100%)'
               : 'radial-gradient(85% 70% at 50% 25%, #432063 0%, #0d0712 100%)'}} />
        <img src={v.img} alt={v.name} loading="lazy"
             className="absolute inset-0 w-full h-full object-cover scale-[1.06] transition-transform duration-500 group-hover:scale-[1.12] drop-shadow-[0_18px_30px_rgba(0,0,0,0.55)]"
             style={{imageRendering:'pixelated', objectPosition:'50% 0%'}} />

        {/* status badge */}
        <div className="absolute top-3 left-3">
          {isElim ? (
            <span className="px-2.5 py-1 rounded-full bg-ink-900/80 backdrop-blur font-mono text-[10px] tracking-[0.14em] text-bone/55 uppercase">
              Elendi · B{v.elimEp}
            </span>
          ) : (
            <span className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-ink-900/75 backdrop-blur">
              <span className={cx('w-1.5 h-1.5 rounded-full', isSus ? 'bg-danger' : 'bg-amber-400')} />
              <span className="font-mono text-[10px] tracking-[0.14em] text-bone/90 uppercase">{isSus ? 'Şüpheli' : 'Aktif'}</span>
            </span>
          )}
        </div>

        {/* elimination cross */}
        {isElim && (
          <div className="absolute inset-0 grid place-items-center">
            <svg viewBox="0 0 100 100" className="w-1/2 h-1/2 opacity-80">
              <line x1="22" y1="22" x2="78" y2="78" stroke="#f6ecdc" strokeWidth="3" />
              <line x1="78" y1="22" x2="22" y2="78" stroke="#f6ecdc" strokeWidth="3" />
            </svg>
          </div>
        )}

        {/* bottom fade into info */}
        <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-ink-800 to-transparent" />
      </div>

      {/* info */}
      <div className="px-4 py-3.5 flex items-center justify-between gap-3">
        <div className="min-w-0">
          <h4 className="text-bone font-semibold text-[18px] leading-tight truncate">{v.name}</h4>
          <div className="mt-0.5 text-[13px] text-bone/55">{v.role}</div>
        </div>
        <span className="font-mono text-[13px] text-bone/30 shrink-0">{String(idx+1).padStart(2,'0')}</span>
      </div>
    </div>
  );
}

window.Villagers = Villagers;