/* GANG MAP - radial constellation */

function GangMap() {
  const wrapRef = useRef(null);
  const [hover, setHover] = useState(null);
  const [rot, setRot] = useState(0);

  // gentle constant rotation
  useEffect(() => {
    let raf;
    let t = 0;
    const tick = () => {
      t += 0.04;
      setRot(t);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const rings = [
    { r: 130, count: 5, kind: 'core', label: 'Core gang', color: '#16E07A' },
    { r: 220, count: 9, kind: 'member', label: 'Members', color: '#8B5CF6' },
    { r: 310, count: 12, kind: 'partner', label: 'Partners & alpha', color: '#FFC700' },
  ];

  const coreCrew = [
    { label: '@0xileri',         bio: 'Founder · opens the door, calls the motion.', img: '/assets/avatars/0xileri.jpg' },
    { label: '@blexy_cryptt',    bio: 'Co-founder · keeps the community warm.',      img: '/assets/avatars/blexy_cryptt.jpg' },
    { label: '@poe_crypt',       bio: 'Creator running things smoothly.',             img: '/assets/avatars/poe_crypt.jpg' },
    { label: '@subomiscott',     bio: 'Writer · moderator · keeps signal high.',      img: '/assets/avatars/subomiscott.jpg' },
    { label: '@IdaraAkpabio882', bio: 'Artist · first to the community tasks.',       img: '/assets/avatars/IdaraAkpabio882.jpg' },
  ];

  const nodes = [];
  rings.forEach((ring, ri) => {
    for (let i = 0; i < ring.count; i++) {
      const angle = (i / ring.count) * Math.PI * 2 + (ri * 0.4);
      const core = ring.kind === 'core' ? coreCrew[i] : null;
      nodes.push({
        ring: ri,
        x: Math.cos(angle + rot * (ri === 0 ? 0.6 : ri === 1 ? -0.4 : 0.25)) * ring.r,
        y: Math.sin(angle + rot * (ri === 0 ? 0.6 : ri === 1 ? -0.4 : 0.25)) * ring.r,
        color: ring.color,
        kind: ring.kind,
        size: ring.kind === 'core' ? 22 : ring.kind === 'member' ? 7 : 5,
        img: core ? core.img : null,
        label: core ? core.label : `${ring.kind} · ${String(i+1).padStart(2,'0')}`,
        bio: core ? core.bio
          : ring.kind === 'member'
          ? 'In motion. Ships weekly.'
          : 'Co-signed partner / fresh alpha drop.',
      });
    }
  });

  return (
    <section className="map section-pad" id="map">
      <div className="light-pool green" style={{ width: 800, height: 800, left: '50%', top: '50%', transform: 'translate(-50%,-50%)', opacity: .25 }}/>
      <div className="container">
        <Reveal className="map-head">
          <div>
            <span className="eyebrow">- gang map · the ecosystem</span>
            <h2 className="h-display map-title">
              The <span className="gradient-text italic">winner's circle.</span>
            </h2>
          </div>
          <div className="map-legend">
            {rings.map((r, i) => (
              <div className="leg-item" key={i}>
                <span className="leg-dot" style={{ background: r.color, boxShadow: `0 0 12px ${r.color}` }}></span>
                <span>{r.label} · {r.count}</span>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={1} className="map-stage" ref={wrapRef}>
          <svg viewBox="-400 -400 800 800" className="map-svg">
            <defs>
              <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#8B5CF6" stopOpacity=".5"/>
                <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0"/>
              </radialGradient>
              <radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#16E07A" stopOpacity=".25"/>
                <stop offset="100%" stopColor="#16E07A" stopOpacity="0"/>
              </radialGradient>
            </defs>

            {/* glow */}
            <circle cx="0" cy="0" r="180" fill="url(#coreGlow)"/>
            <circle cx="0" cy="0" r="80" fill="url(#centerGlow)"/>

            {/* concentric rings */}
            {rings.map((r, i) => (
              <circle key={i} cx="0" cy="0" r={r.r}
                      fill="none"
                      className="map-ring"
                      strokeWidth="1"
                      strokeDasharray="2 6"/>
            ))}

            {/* connections from each node back to centre */}
            {nodes.map((n, i) => (
              <line key={`l${i}`}
                    x1="0" y1="0" x2={n.x} y2={n.y}
                    className="map-spoke"
                    stroke={hover === i ? n.color : undefined}
                    strokeWidth={hover === i ? 1.5 : 0.5}
                    style={{ transition: 'stroke .25s, stroke-width .25s' }}/>
            ))}

            {/* center logo */}
            <g transform="translate(0,0)">
              <polygon
                points="0,-40 35,-20 35,20 0,40 -35,20 -35,-20"
                fill="none"
                stroke="url(#mapGrad)"
                strokeWidth="2"/>
              <defs>
                <linearGradient id="mapGrad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#16E07A"/>
                  <stop offset="100%" stopColor="#8B5CF6"/>
                </linearGradient>
              </defs>
              <clipPath id="centerClip">
                <polygon points="0,-38 33,-19 33,19 0,38 -33,19 -33,-19"/>
              </clipPath>
              <image href="/assets/avatars/webesgng.jpg"
                     x="-38" y="-38" width="76" height="76"
                     preserveAspectRatio="xMidYMid slice"
                     clipPath="url(#centerClip)"/>
              <text y="65"
                    textAnchor="middle"
                    className="map-center-label"
                    fontFamily="Clash Display, sans-serif"
                    fontWeight="700"
                    fontSize="14"
                    letterSpacing=".24em">GNG</text>
            </g>

            {/* nodes */}
            {nodes.map((n, i) => (
              <g key={i}
                 transform={`translate(${n.x},${n.y})`}
                 onMouseEnter={() => setHover(i)}
                 onMouseLeave={() => setHover(null)}
                 className="map-node hot"
                 style={{ cursor: 'none' }}>
                <circle r={n.size + 8}
                        fill={n.color}
                        opacity={hover === i ? .25 : .08}/>
                {n.img ? (
                  <>
                    <defs>
                      <clipPath id={`clip-${i}`}>
                        <circle r={n.size} cx="0" cy="0"/>
                      </clipPath>
                    </defs>
                    <image href={n.img} x={-n.size} y={-n.size}
                           width={n.size * 2} height={n.size * 2}
                           preserveAspectRatio="xMidYMid slice"
                           clipPath={`url(#clip-${i})`}
                           style={{
                             filter: hover === i ? `drop-shadow(0 0 14px ${n.color})` : 'none',
                             transition: 'filter .25s',
                           }}/>
                    <circle r={n.size} fill="none" stroke={n.color}
                            strokeWidth={hover === i ? 2.5 : 1.5}
                            style={{ transition: 'stroke-width .25s' }}/>
                  </>
                ) : (
                  <circle r={n.size}
                          fill={n.color}
                          style={{
                            filter: hover === i ? `drop-shadow(0 0 12px ${n.color})` : 'none',
                            transition: 'filter .25s',
                          }}/>
                )}
              </g>
            ))}
          </svg>

          {hover != null && (
            <div className="map-tip">
              <div className="map-tip-label">{nodes[hover].label}</div>
              <div className="map-tip-bio">{nodes[hover].bio}</div>
            </div>
          )}
        </Reveal>
      </div>

      <style>{`
        .map { position: relative; overflow: hidden; }
        .map-head {
          display: flex; justify-content: space-between; align-items: flex-end;
          margin-bottom: 32px; gap: 24px; flex-wrap: wrap;
        }
        .map-title { font-size: clamp(44px, 6.5vw, 90px); }
        .map-legend { display: flex; flex-direction: column; gap: 8px; }
        .leg-item {
          display: flex; align-items: center; gap: 10px;
          font-size: 12px; color: var(--muted);
          letter-spacing: .12em; text-transform: uppercase;
        }
        .leg-dot { width: 10px; height: 10px; border-radius: 50%; }

        .map-stage {
          position: relative;
          width: 100%;
          aspect-ratio: 1;
          max-height: 720px;
          margin: 0 auto;
          display: grid; place-items: center;
        }
        .map-svg { width: 100%; height: 100%; max-width: 720px; }
        .map-ring { stroke: var(--ln-06); }
        .map-spoke { stroke: var(--ln-04); }
        .map-center-label { fill: var(--text); }

        .map-tip {
          position: absolute;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%);
          padding: 14px 22px;
          background: var(--glass-strong);
          border: 1px solid var(--ln-1);
          backdrop-filter: blur(12px);
          border-radius: 12px;
          min-width: 220px;
          text-align: center;
        }
        .map-tip-label {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: .2em;
          color: var(--text);
          margin-bottom: 4px;
        }
        .map-tip-bio { color: var(--muted); font-size: 13px; }
      `}</style>
    </section>
  );
}

window.GangMap = GangMap;