// Faz 2 - Minecraft "GigaFiber komuta haritası" (blocky Türkiye) + Top 5 klan leaderboard.

const TR_PATH = "M56.5 1 L48.5 5.2 L39.4 6.7 L32.5 12.7 L24.6 17 L22.7 24.4 L30.5 29.3 L35.5 35.7 L34.9 44.9 L29 51.6 L21 56.1 L18.1 62.7 L18.5 71.9 L14.5 80 L8 86.6 L3.3 94.3 L10.7 98.2 L19.8 99.3 L28.9 98.4 L37.5 95.4 L40.8 100.5 L32.3 104.1 L24.1 108.4 L16.1 113.1 L11.4 119.8 L9.4 128.8 L11 131.4 L17.8 125.2 L24.9 119.3 L31.9 113.3 L39.4 108.1 L47.9 104.4 L56.5 101.5 L63.6 95.8 L71.1 90.7 L77 83.5 L82.3 76.3 L91.4 74.6 L100.2 77.2 L108.1 73.7 L117.1 72.2 L126.1 73.9 L134.5 77.8 L143.5 79.4 L152.7 78.5 L160.5 80.8 L167.3 87 L174.2 93.1 L182.3 96.3 L191.5 97.1 L198.6 98.5 L189.3 98.2 L180.1 98.7 L171.1 100.6 L162 102.2 L153.1 104.6 L147.4 110.9 L155.2 114.9 L162 118 L154.5 120.7 L145.3 119.8 L136.1 119.2 L126.9 118.8 L117.6 118.7 L108.4 118.5 L100.7 116.4 L103 110.4 L94.1 107.8 L91.4 112.5 L93.3 120.2 L84.1 121 L74.9 120.3 L67.4 115.3 L60.5 111.8 L51.5 114.1 L42.4 113.5 L33.8 115.4 L26.8 121.4 L19.4 126.7 L16.3 135.4 L8.3 139 L4.6 147.2 L3.3 156.4 L2.2 165.5 L0 174.5 L7.6 175 L16.6 173.2 L25.7 171.8 L34.9 171 L43.4 173.1 L38.1 180 L29.9 183.7 L30.6 190.4 L35.2 198.2 L38.6 206.3 L38.2 213.3 L46.8 215.7 L41.9 222.6 L34.6 226.6 L29.7 229.1 L33.6 236.9 L36.9 245.2 L45.2 249.3 L45.5 252.2 L36.4 252.5 L27.8 249.3 L25.1 253.4 L22.8 244.8 L20.6 236.3 L14 230.6 L11.1 236.9 L12.1 246.1 L9.5 251.9 L3.5 257.2 L11.2 261.5 L18.2 267.5 L25.1 264.4 L33.1 266.7 L35.4 275.4 L44.1 277.7 L52.5 281.6 L56.2 289.7 L50.4 296.2 L42.5 300.4 L48.6 306.6 L50.2 315.7 L51.4 324.6 L58.8 320.2 L61 325.1 L67.1 330 L69.2 337.7 L61.1 340.4 L52.6 341.4 L53.2 349 L62.1 349.3 L71.3 349.5 L80.5 349 L89.7 348.5 L99 348.2 L107.6 349.3 L99.5 353.3 L93 358.2 L86.2 361.8 L77 362 L67.9 363.3 L59.2 366.5 L62.5 370.2 L71.7 369.6 L79.3 364.8 L88.4 366.3 L96 366.3 L92.5 371.2 L88.4 377.9 L95.6 376.1 L102.8 370.4 L108.5 364.5 L117.7 363.8 L124.7 368.6 L131.7 374.2 L138.7 376.1 L143.4 370.2 L148.4 376.5 L150.2 384.1 L150.6 393.3 L156.2 400.1 L163.9 405 L172.1 408.4 L180.4 411.4 L188.4 410.9 L197 408 L205.4 404.2 L213.7 403.9 L222 406.8 L224.8 398 L228.3 389.5 L229.8 380.4 L230.9 371.3 L236.9 364.9 L245.8 367 L255.1 367.4 L264.3 368.1 L272.7 371.7 L280.7 375.8 L288.5 380.7 L296.6 385.1 L304.9 389.3 L312.4 394.5 L318.2 401.7 L323.4 409.3 L329.2 416.5 L337 420.9 L345.4 424.7 L354.3 423.3 L363.1 422.5 L370.6 419.4 L379.8 419.2 L389 418.9 L397.4 417 L404.6 412.4 L411.8 410.4 L417.2 407.7 L420.5 400.3 L426.9 393.7 L433.7 387.4 L441 381.8 L448.6 376.7 L457.8 375.4 L466.2 378.1 L474.1 382.7 L481.7 387.9 L490.2 391.4 L499.2 389.9 L505.7 384.8 L509 377.2 L516.8 372.6 L523.8 366.7 L531.5 371.1 L534.9 379.4 L533.5 388.4 L527 394.8 L519.7 400.4 L514.9 407.6 L518.5 416.1 L521.7 424.7 L521 433.8 L526.4 439.6 L534.9 438.6 L540.7 432 L544.8 424.4 L545 415.3 L554.2 415.8 L562.2 413.5 L558.9 408.3 L554.9 400.3 L556.1 391.1 L557.9 382.1 L562.7 374.8 L571.3 378.1 L578.9 381.4 L583.6 387.6 L592.7 386.1 L601.9 385.8 L609.9 381.6 L618.8 379.2 L627.3 375.7 L635.4 371.3 L644.2 368.5 L653.2 369.6 L661.3 374 L667.9 380.5 L676.7 381.6 L685.9 381.5 L695.1 381.5 L704.4 381.3 L713.6 380.7 L722.7 379.5 L731.6 376.8 L740.1 373.2 L748.6 369.6 L756.8 365.4 L764.1 359.7 L771.9 354.9 L780.5 352.5 L789.7 351.1 L798.8 352.1 L808 353.4 L817.2 353.4 L826.1 350.8 L835.1 349.1 L843.9 346.3 L851.6 341.4 L859.4 336.6 L866.2 342 L871.4 347.2 L879.6 343.5 L884.2 335.6 L890.6 329.6 L899.4 331.9 L908.3 329.5 L917.4 331.3 L926 334.2 L934.6 336.7 L943.8 336.9 L952.1 333.7 L960.4 331.7 L968.2 335.6 L967.1 344.1 L971.9 351.5 L977.9 345.5 L986 341.1 L994.1 337.1 L1000 330.7 L993.2 324.8 L987.9 317.2 L986 308.2 L984.7 299.1 L977.7 293.9 L969.1 291.2 L966.2 284 L970.2 275.9 L973.7 267.5 L976.7 258.9 L969.2 254.7 L967 245.8 L966 236.6 L965.3 227.4 L960.4 220.3 L958.9 211.4 L957.6 202.5 L953.2 195.3 L953.4 187.1 L962.4 187.8 L970.3 183.2 L971.2 174.1 L973.4 165.2 L979.5 158.3 L974.6 151 L968.3 144.2 L959.6 143 L950.4 142.9 L941.2 142 L932.2 139.8 L928.8 132.8 L925 124.4 L921.9 115.8 L926.2 107.8 L929.5 99.2 L927.9 90.3 L925 81.7 L917.8 76 L913.3 68.4 L905.3 65.4 L898.5 60.6 L892.3 54.8 L886 48.1 L879 43.3 L871.1 40.1 L864 44.9 L858.7 49.6 L849.5 48.3 L840.3 47.6 L831.4 47.6 L824.5 50.6 L815.6 48.6 L808.2 52.9 L801.7 59.5 L793.4 63.3 L785.7 68.4 L776.9 70.7 L768.7 74.7 L761.2 80.1 L752.7 82.9 L744.7 87.6 L736.2 88 L727.1 86.8 L718.2 84.2 L709.7 80.7 L700.8 79.1 L691.6 80.1 L682.6 82 L673.7 84.5 L664.9 87.3 L656 89.7 L646.8 90.4 L637.7 89.3 L628.6 87.5 L620.9 83.5 L615.5 78.1 L608 81.7 L599.3 79 L590.3 76.8 L581.9 73.7 L576.4 66.4 L567.9 63 L558.7 62.2 L551.9 68.3 L543.6 66.1 L537.4 59.8 L533.1 53.7 L531.5 44.6 L524.6 39.4 L515.4 40 L506.4 41.6 L497.2 40.9 L489 36.7 L482.9 29.8 L479.7 21.3 L475.3 13.2 L468 15.6 L460 19.7 L450.8 20.3 L441.6 20.3 L432.3 20 L423.4 18 L414.2 17.2 L405 16.2 L395.8 15.1 L386.6 15.1 L377.7 17.3 L369.3 21.1 L360.9 24.7 L351.8 26.3 L343 29.2 L334.8 33.4 L326.9 38 L318.9 42.6 L310.8 46.8 L303.3 52.3 L295.2 56.8 L286.9 60.7 L282.5 68.6 L275.6 74.2 L266.4 75.1 L257.2 74.9 L248 74.3 L239.4 71 L231 67.2 L222.2 68.3 L213.4 70.8 L204.2 70.2 L195.1 68.6 L186.2 66.4 L177.1 64.7 L167.9 64.3 L162.8 60.9 L154.3 60.1 L146 56 L137.8 51.7 L129.8 47.1 L122.4 41.5 L116 34.9 L111.9 26.7 L108.9 18.1 L110 10.6 L101.5 7.9 L93.6 11.4 L85.7 13.1 L80.2 5.8 L73 0 L64.5 0.9 Z";

function Phase2() {
  const ref = useRef(null);
  const inView = useInView(ref);

  return (
    <section id="phase2" data-screen-label="05 Phase 2" ref={ref} className="relative py-32 overflow-hidden">
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1100px] h-[640px] rounded-full blur-[180px] opacity-20"
             style={{background:'radial-gradient(closest-side, rgba(245,166,35,0.45), transparent 70%)'}}/>
      </div>

      <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8">
        {/* header */}
        <Reveal>
          <h2 className="text-bone font-mc leading-[1.1]" style={{fontSize:'clamp(24px, 2.9vw, 40px)'}}>
            Türkiye'ye <span className="text-amber-400">GigaFiber</span><br/>getirmeye hazır mısın?
          </h2>
        </Reveal>

        {/* map + leaderboard */}
        <div className="mt-12 grid grid-cols-1 lg:grid-cols-12 gap-5 items-stretch">
          <Reveal className="lg:col-span-8">
            <MapPanel animate={inView} />
          </Reveal>
          <Reveal delay={150} className="lg:col-span-4">
            <Leaderboard />
          </Reveal>
        </div>

        {/* stats strip */}
        <Reveal delay={200} className="mt-5 grid grid-cols-3 gap-px bg-bone/8 rounded-xl overflow-hidden border border-aubergine-800/60">
          <MapStat label="Bağlı şehir" value={<><CountUp end={8}/><span className="text-bone/30 mx-1">/</span>81</>} accent />
          <MapStat label="Toplam fiber" value={<><CountUp end={2847}/><span className="text-bone/50 text-base ml-1">km</span></>} />
          <MapStat label="Aktif klan" value={<CountUp end={47}/>} />
        </Reveal>
      </div>
    </section>
  );
}

function MapStat({ label, value, accent }) {
  return (
    <div className={cx('bg-ink-900/80 px-6 py-5', accent && 'bg-amber-400/[0.05]')}>
      <div className="text-[10px] tracking-[0.22em] font-mono text-bone/45 uppercase">{label}</div>
      <div className={cx('mt-2 text-3xl font-bold tabular-nums', accent ? 'text-amber-300' : 'text-bone')}>{value}</div>
    </div>
  );
}

function MapPanel({ animate }) {
  return (
    <div className="relative h-full rounded-2xl border border-aubergine-800/70 bg-gradient-to-b from-[#0e0a18] to-[#0a0510] overflow-hidden shadow-[0_40px_120px_-50px_rgba(0,0,0,0.9)]">
      {/* header strip */}
      <div className="flex items-center justify-between px-5 py-3.5 border-b border-aubergine-800/70 bg-ink-900/50 gap-4">
        <div className="flex items-center gap-3 min-w-0">
          <span className="font-mono text-[10px] tracking-[0.22em] text-amber-300/85 px-2 py-1 rounded bg-amber-400/10 border border-amber-400/30 shrink-0">FAZ 02</span>
          <span className="text-bone/75 text-[15px] font-medium truncate">Canlı ağ haritası</span>
        </div>
        <span className="flex items-center gap-2 text-[13px] text-danger shrink-0">
          <span className="w-1.5 h-1.5 rounded-full bg-danger live-dot"/>21:42
        </span>
      </div>

      <div className="relative">
        <TurkeyMap animate={animate} />
        {/* floating progress HUD */}
        <div className="absolute bottom-5 left-5 px-4 py-3 rounded-xl bg-ink-900/70 backdrop-blur border border-amber-300/20">
          <div className="font-mono text-[9px] tracking-[0.28em] text-bone/45">ŞEHİR BAĞLANTISI</div>
          <div className="mt-1 flex items-baseline gap-1">
            <span className="text-3xl font-bold text-amber-300 tabular-nums leading-none"><CountUp end={8}/></span>
            <span className="text-bone/40 text-lg font-bold">/81</span>
          </div>
          <div className="mt-2 w-32 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: animate ? '10%' : '0%'}}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function TurkeyMap({ animate }) {
  const GIGAKOY = { x: 472, y: 266 };
  const W = 1000, H = 558;

  return (
    <div className="relative w-full" style={{aspectRatio: '1920 / 1071'}}>
      {/* rendered Minecraft Türkiye map */}
      <img src="assets/img/turkey-map.jpg" alt="GigaKöy - Türkiye haritası" loading="lazy"
           className="absolute inset-0 w-full h-full object-cover" />
      {/* subtle grade so overlays read */}
      <div className="absolute inset-0 pointer-events-none" style={{background:'radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(10,5,16,0.45) 100%)'}} />

      {/* overlay: routes + cities + hub (1000x558 maps 1:1 to the image) */}
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="absolute inset-0 w-full h-full">
        <defs>
          <linearGradient id="fiberline" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stopColor="#ff9028"/>
            <stop offset="100%" stopColor="#ffd17a"/>
          </linearGradient>
          <radialGradient id="cityglow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor="rgba(255,210,120,0.95)"/>
            <stop offset="100%" stopColor="rgba(255,210,120,0)"/>
          </radialGradient>
        </defs>

        {/* fiber routes from GigaKöy to connected cities */}
        {CITIES_CONNECTED.map((c, i) => {
          const dx = c.x - GIGAKOY.x, dy = c.y - GIGAKOY.y;
          const mx = GIGAKOY.x + dx/2 + (dy * 0.12);
          const my = GIGAKOY.y + dy/2 - (dx * 0.08);
          const path = `M ${GIGAKOY.x} ${GIGAKOY.y} Q ${mx} ${my} ${c.x} ${c.y}`;
          return (
            <g key={c.id}>
              <path d={path} fill="none" stroke="rgba(0,0,0,0.35)" strokeWidth="3.5"/>
              <path d={path} fill="none" stroke="rgba(245,166,35,0.3)" strokeWidth="2.5"/>
              <path d={path} fill="none" stroke="url(#fiberline)" strokeWidth="2.5"
                    strokeDasharray="8 200" strokeLinecap="round" className="fiber-line"
                    style={{animationDelay: `${i*0.55}s`}}/>
            </g>
          );
        })}

        {/* pending cities */}
        {CITIES_PENDING.map(c => (
          <g key={c.id}>
            <rect x={c.x-3} y={c.y-3} width="6" height="6" fill="#d8ccc0" stroke="#0a0510" strokeWidth="1"/>
            <text x={c.x+10} y={c.y+4} fill="rgba(255,255,255,0.85)" fontSize="13"
                  fontFamily="Monocraft, VT323, monospace" stroke="#0a0510" strokeWidth="3" strokeLinejoin="round" paintOrder="stroke">{c.name}</text>
          </g>
        ))}

        {/* connected cities (glowing beacons) */}
        {CITIES_CONNECTED.map(c => (
          <g key={c.id}>
            <circle cx={c.x} cy={c.y} r="16" fill="url(#cityglow)" className="city-glow"/>
            <rect x={c.x-5} y={c.y-5} width="10" height="10" fill="#ffc15a" stroke="#fff8e6" strokeWidth="1.4"/>
            <text x={c.la==='l' ? c.x-13 : c.x+13} y={c.y+5} textAnchor={c.la==='l' ? 'end' : 'start'} fill="#ffffff" fontSize="16"
                  fontFamily="Monocraft, VT323, monospace" stroke="#0a0510" strokeWidth="3.6" strokeLinejoin="round" paintOrder="stroke">{c.name}</text>
          </g>
        ))}

        {/* GigaKöy hub */}
        <g>
          <circle cx={GIGAKOY.x} cy={GIGAKOY.y} r="12" fill="none" stroke="#ff9028" strokeWidth="2">
            <animate attributeName="r" values="12;48" dur="2.6s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.7;0" dur="2.6s" repeatCount="indefinite"/>
          </circle>
          <circle cx={GIGAKOY.x} cy={GIGAKOY.y} r="12" fill="none" stroke="#ffd17a" strokeWidth="1.5">
            <animate attributeName="r" values="12;48" dur="2.6s" begin="1.3s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.55;0" dur="2.6s" begin="1.3s" repeatCount="indefinite"/>
          </circle>
          <circle cx={GIGAKOY.x} cy={GIGAKOY.y} r="24" fill="rgba(255,144,40,0.2)" className="city-glow"/>
          <polygon points={`${GIGAKOY.x},${GIGAKOY.y-11} ${GIGAKOY.x+10},${GIGAKOY.y-4} ${GIGAKOY.x+10},${GIGAKOY.y+7} ${GIGAKOY.x},${GIGAKOY.y+14} ${GIGAKOY.x-10},${GIGAKOY.y+7} ${GIGAKOY.x-10},${GIGAKOY.y-4}`}
                   fill="#ff9028" stroke="#fff8e6" strokeWidth="1.6"/>
          <text x={GIGAKOY.x} y={GIGAKOY.y-22} textAnchor="middle" fill="#ffd9a0" fontSize="16" fontFamily="Monocraft, VT323, monospace"
                stroke="#0a0510" strokeWidth="3.6" strokeLinejoin="round" paintOrder="stroke">GİGAKÖY</text>
        </g>
      </svg>
    </div>
  );
}

function Leaderboard() {
  const ref = useRef(null);
  const inView = useInView(ref);

  return (
    <div ref={ref} className="rounded-2xl border border-aubergine-800/70 bg-ink-800/70 overflow-hidden h-full flex flex-col">
      <div className="px-6 py-3.5 border-b border-aubergine-800/70 bg-ink-900/50 flex items-center justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
          <IconShield size={16} className="text-amber-300 shrink-0" />
          <span className="font-mono text-[11px] tracking-[0.22em] text-bone/70 whitespace-nowrap">KLAN · TOP 5</span>
        </div>
        <span className="flex items-center gap-2 font-mono text-[10px] tracking-widest text-danger"><span className="w-1.5 h-1.5 rounded-full bg-danger live-dot"/>CANLI</span>
      </div>

      <div className="p-4 flex flex-col gap-2.5 flex-1">
        {CLANS.map((c, i) => (
          <ClanRow key={c.name} c={c} idx={i} animate={inView}/>
        ))}
      </div>

      <div className="px-6 pb-5 pt-1 flex items-center justify-between border-t border-aubergine-800/50">
        <span className="font-mono text-[11px] tracking-widest text-bone/45">
          Toplam <CountUp end={47}/> klan
        </span>
        <a href="#" className="inline-flex items-center gap-1.5 text-amber-300 hover:text-amber-200 text-[13px] font-medium">
          Tüm sıralama <IconArrowR size={13}/>
        </a>
      </div>
    </div>
  );
}

function ClanRow({ c, idx, animate }) {
  const [filled, setFilled] = useState(false);
  useEffect(() => {
    if (!animate) return;
    const id = setTimeout(() => setFilled(true), 200 + idx * 140);
    return () => clearTimeout(id);
  }, [animate, idx]);

  const trendColor = c.trend > 0 ? 'text-amber-300' : c.trend < 0 ? 'text-danger' : 'text-bone/40';
  const trendArrow = c.trend > 0 ? '▲' : c.trend < 0 ? '▼' : '◆';

  return (
    <div className={cx(
      'group relative flex items-center gap-3 p-3 rounded-lg transition-colors',
      idx === 0 ? 'bg-amber-400/[0.07] border border-amber-400/30' : 'bg-ink-900/40 border border-aubergine-800/50 hover:border-aubergine-700'
    )}>
      <div className={cx(
        'w-8 h-8 grid place-items-center rounded font-pixel text-[18px] tracking-wider shrink-0',
        idx === 0 ? 'bg-amber-400 text-aubergine-900' : 'bg-aubergine-800 text-bone/80'
      )}>{c.rank}</div>

      <div className="w-10 h-10 rounded grid place-items-center shrink-0"
           style={{background: `linear-gradient(135deg, ${c.color}33, ${c.color}11)`, border: `1px solid ${c.color}55`}}>
        <ClanCrest idx={idx} color={c.color}/>
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-baseline justify-between gap-2">
          <span className="text-bone font-semibold flex-1 min-w-0 truncate">{c.name}</span>
          <span className={cx('font-mono text-[11px] shrink-0 whitespace-nowrap', trendColor)}>{trendArrow}{c.trend !== 0 && Math.abs(c.trend)}</span>
        </div>
        <div className="flex items-center gap-3 mt-1.5">
          <div className="flex-1 h-1.5 rounded-full bg-bone/8 overflow-hidden">
            <div className="h-full bar-fill rounded-full"
                 style={{ width: filled ? `${(c.cities/14)*100}%` : '0%', background: `linear-gradient(90deg, ${c.color}, #ffd17a)` }}/>
          </div>
          <span className="font-mono text-[11px] tracking-widest text-bone/55 tabular-nums shrink-0 whitespace-nowrap">
            {c.cities} ŞHR
          </span>
        </div>
      </div>
    </div>
  );
}

function ClanCrest({ idx, color }) {
  const shapes = [
    <svg key="0" viewBox="0 0 12 12" className="w-6 h-6" shapeRendering="crispEdges">
      <rect x="2" y="3" width="2" height="2" fill={color}/><rect x="8" y="3" width="2" height="2" fill={color}/>
      <rect x="3" y="4" width="6" height="5" fill={color}/><rect x="4" y="6" width="1" height="1" fill="#0a050e"/>
      <rect x="7" y="6" width="1" height="1" fill="#0a050e"/><rect x="5" y="8" width="2" height="1" fill="#0a050e"/>
    </svg>,
    <svg key="1" viewBox="0 0 12 12" className="w-6 h-6" shapeRendering="crispEdges">
      <rect x="3" y="3" width="6" height="5" fill={color}/><rect x="4" y="5" width="1" height="1" fill="#0a050e"/>
      <rect x="7" y="5" width="1" height="1" fill="#0a050e"/><rect x="4" y="8" width="4" height="2" fill={color}/>
      <rect x="5" y="9" width="1" height="1" fill="#0a050e"/>
    </svg>,
    <svg key="2" viewBox="0 0 12 12" className="w-6 h-6" shapeRendering="crispEdges">
      <rect x="2" y="3" width="8" height="1" fill={color}/><rect x="2" y="3" width="1" height="6" fill={color}/>
      <rect x="9" y="3" width="1" height="6" fill={color}/><rect x="2" y="8" width="8" height="1" fill={color}/>
      <rect x="5" y="5" width="2" height="2" fill={color}/>
    </svg>,
    <svg key="3" viewBox="0 0 12 12" className="w-6 h-6" shapeRendering="crispEdges">
      <rect x="5" y="2" width="2" height="8" fill={color}/><rect x="3" y="5" width="6" height="2" fill={color}/>
      <rect x="4" y="4" width="1" height="1" fill={color}/><rect x="7" y="4" width="1" height="1" fill={color}/>
      <rect x="4" y="7" width="1" height="1" fill={color}/><rect x="7" y="7" width="1" height="1" fill={color}/>
    </svg>,
    <svg key="4" viewBox="0 0 12 12" className="w-6 h-6" shapeRendering="crispEdges">
      <rect x="5" y="2" width="2" height="8" fill={color}/><rect x="5" y="2" width="2" height="1" fill="#f6ecdc"/>
      <rect x="5" y="5" width="2" height="1" fill="#f6ecdc"/><rect x="5" y="8" width="2" height="1" fill="#f6ecdc"/>
    </svg>,
  ];
  return shapes[idx % shapes.length];
}

window.Phase2 = Phase2;