// radar.jsx — animated tech stack radar

function Radar({ t, lang }) {
  const data = window.RADAR_DATA[lang];
  const [active, setActive] = React.useState(null);
  const [time, setTime] = React.useState(0);

  React.useEffect(() => {
    let raf, start;
    const tick = (ts) => {
      if (!start) start = ts;
      setTime((ts - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const size = 600;
  const cx = size / 2, cy = size / 2;
  const maxR = size / 2 - 110;
  const sweepAngle = (time * 35) % 360;

  const polar = (r, theta) => {
    const rad = (theta - 90) * Math.PI / 180;
    return [cx + r * maxR * Math.cos(rad), cy + r * maxR * Math.sin(rad)];
  };

  return (
    <section className="section" data-screen-label="03 Radar">
      <div className="section-tag">{t.radar.tag}</div>
      <h2 className="section-title">{t.radar.title} <em>{t.radar.titleEm}</em></h2>
      <p className="section-sub">{t.radar.sub}</p>

      <div className="radar-wrap">
        <div className="radar-canvas">
          <svg viewBox={`-40 0 ${size + 80} ${size}`} width="100%" height="100%">
            <defs>
              <radialGradient id="sweepGrad">
                <stop offset="0%" stopColor="oklch(82% 0.12 220)" stopOpacity="0.45"/>
                <stop offset="100%" stopColor="oklch(82% 0.12 220)" stopOpacity="0"/>
              </radialGradient>
              <radialGradient id="centerGlow">
                <stop offset="0%" stopColor="oklch(82% 0.12 220)" stopOpacity="0.5"/>
                <stop offset="100%" stopColor="oklch(82% 0.12 220)" stopOpacity="0"/>
              </radialGradient>
            </defs>

            {/* concentric rings */}
            {[1, 2, 3, 4].map(i => (
              <circle key={i} cx={cx} cy={cy} r={(maxR * i) / 4}
                fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
            ))}
            {/* ring labels */}
            {["Adopt", "Trial", "Assess", "Hold"].map((lbl, i) => (
              <text key={lbl} x={cx + 4} y={cy - (maxR * (i+1)) / 4 + 4}
                fill="rgba(255,255,255,0.25)" fontSize="9"
                fontFamily="JetBrains Mono, monospace" letterSpacing="1">
                {lbl.toUpperCase()}
              </text>
            ))}
            {/* quadrant separators */}
            <line x1={cx} y1={cy - maxR} x2={cx} y2={cy + maxR} stroke="rgba(255,255,255,0.10)"/>
            <line x1={cx - maxR} y1={cy} x2={cx + maxR} y2={cy} stroke="rgba(255,255,255,0.10)"/>

            {/* sweep wedge */}
            <g transform={`rotate(${sweepAngle} ${cx} ${cy})`}>
              <path d={`M ${cx} ${cy} L ${cx + maxR} ${cy} A ${maxR} ${maxR} 0 0 0 ${cx + maxR * Math.cos(-Math.PI/3)} ${cy + maxR * Math.sin(-Math.PI/3)} Z`}
                fill="url(#sweepGrad)" opacity="0.7"/>
            </g>
            {/* sweep beam line */}
            <g transform={`rotate(${sweepAngle - 90} ${cx} ${cy})`}>
              <line x1={cx} y1={cy} x2={cx} y2={cy - maxR}
                stroke="oklch(82% 0.12 220)" strokeWidth="1.5" opacity="0.7"/>
            </g>

            {/* center */}
            <circle cx={cx} cy={cy} r={20} fill="url(#centerGlow)"/>
            <circle cx={cx} cy={cy} r={3} fill="oklch(82% 0.12 220)"/>

            {/* quadrant labels */}
            {data.map((q, qi) => {
              const midAngle = (q.angle[0] + q.angle[1]) / 2;
              const rad = (midAngle - 90) * Math.PI / 180;
              const lx = cx + Math.cos(rad) * (maxR + 22);
              const ly = cy + Math.sin(rad) * (maxR + 22);
              const anchor = Math.abs(Math.cos(rad)) < 0.3 ? "middle" : (lx < cx ? "end" : "start");
              return (
                <text key={q.name} x={lx} y={ly}
                  fill={q.color} fontSize="10"
                  fontFamily="JetBrains Mono, monospace"
                  textAnchor={anchor}
                  dominantBaseline="middle"
                  letterSpacing="1.2"
                  opacity={active === null || active === qi ? 1 : 0.3}>
                  {q.name.toUpperCase()}
                </text>
              );
            })}

            {/* dots */}
            {data.map((q, qi) => q.items.map((item, ii) => {
              const [px, py] = polar(item.r, item.theta);
              const distFromSweep = ((item.theta - sweepAngle + 720) % 360);
              const glow = distFromSweep < 60 ? 1 - distFromSweep / 60 : 0;
              const dimmed = active !== null && active !== qi;
              return (
                <g key={`${qi}-${ii}`} opacity={dimmed ? 0.2 : 1}
                  onMouseEnter={() => setActive(qi)}
                  onMouseLeave={() => setActive(null)}
                  style={{ cursor: "pointer" }}>
                  <circle cx={px} cy={py} r={4 + glow * 4} fill={q.color} opacity={0.25 + glow * 0.5}/>
                  <circle cx={px} cy={py} r={3} fill={q.color}/>
                  <text x={px + 8} y={py + 3} fill="rgba(255,255,255,0.85)"
                    fontSize="10" fontFamily="JetBrains Mono, monospace">
                    {item.label}
                  </text>
                </g>
              );
            }))}
          </svg>
        </div>

        <div className="radar-legend">
          {data.map((q, qi) => (
            <div key={q.name}
              className={`quadrant ${active === qi ? "active" : ""}`}
              onMouseEnter={() => setActive(qi)}
              onMouseLeave={() => setActive(null)}
              style={active === qi ? { borderLeftColor: q.color } : {}}>
              <h4>
                <span className="swatch" style={{ background: q.color }}></span>
                {q.name}
              </h4>
              <ul>
                {q.items.map(i => <li key={i.label}>{i.label}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Radar = Radar;