// ─── 3D Campus Visual — signature hero centerpiece ────────
// Isometric campus on a disc, with animated connection paths,
// orbiting satellite nodes (parents, buses, gateways), and pulses.

function Campus3D({ size = 560 }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2200);
    return () => clearInterval(id);
  }, []);

  // Buildings on the campus disc (isometric coords)
  const buildings = [
    { id: 'academic', x: -80, y: -40, w: 95, h: 55, height: 42, color: 'var(--navy)', label: 'Academic Block' },
    { id: 'primary', x: 35, y: -70, w: 80, h: 45, height: 28, color: '#273056', label: 'Primary Wing' },
    { id: 'lab', x: 60, y: 30, w: 70, h: 45, height: 32, color: '#3a4472', label: 'Science Labs' },
    { id: 'assembly', x: -60, y: 60, w: 95, h: 55, height: 12, color: '#4a5586', label: 'Assembly' },
    { id: 'library', x: -140, y: 20, w: 55, h: 40, height: 24, color: '#2e385d', label: 'Library' },
  ];

  // Satellite/orbit nodes — parents, buses, gateways beyond campus edge
  const satellites = [
    { id: 's1', angle: 0, r: 260, kind: 'bus', label: 'Bus 7A' },
    { id: 's2', angle: 72, r: 260, kind: 'parent', label: 'Parent' },
    { id: 's3', angle: 144, r: 260, kind: 'gateway', label: 'Gateway' },
    { id: 's4', angle: 216, r: 260, kind: 'parent', label: 'Parent' },
    { id: 's5', angle: 288, r: 260, kind: 'bus', label: 'Bus 3B' },
  ];

  const center = size / 2;

  return (
    <div style={{ position: 'relative', width: size, height: size, maxWidth: '100%' }}>
      {/* Outer orbit rings */}
      <svg viewBox={`0 0 ${size} ${size}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <radialGradient id="disc-grad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#fffdf8" />
            <stop offset="60%" stopColor="#f4efdf" />
            <stop offset="100%" stopColor="#e8e0ca" />
          </radialGradient>
          <linearGradient id="bldg-top" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#1a2348" />
            <stop offset="100%" stopColor="#0d1530" />
          </linearGradient>
          <filter id="soft-shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="6" />
            <feOffset dy="10" />
            <feComponentTransfer><feFuncA type="linear" slope="0.2" /></feComponentTransfer>
            <feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
          <radialGradient id="glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(26,92,151,0.35)" />
            <stop offset="100%" stopColor="rgba(26,92,151,0)" />
          </radialGradient>
        </defs>

        {/* Warm glow behind campus */}
        <ellipse cx={center} cy={center} rx={size * 0.45} ry={size * 0.45} fill="url(#glow)" opacity="0.6" />

        {/* Outer orbit rings (dashed) */}
        {[0.38, 0.44, 0.50].map((r, i) => (
          <ellipse
            key={i}
            cx={center} cy={center}
            rx={size * r} ry={size * r * 0.55}
            fill="none"
            stroke="rgba(13,21,48,0.10)"
            strokeWidth="1"
            strokeDasharray={i === 1 ? '2 6' : '1 4'}
          />
        ))}

        {/* Latitude lines on the disc */}
        {[0.18, 0.26, 0.34].map((r, i) => (
          <ellipse
            key={i}
            cx={center} cy={center}
            rx={size * r} ry={size * r * 0.55}
            fill="none"
            stroke="rgba(13,21,48,0.06)"
            strokeWidth="1"
          />
        ))}
      </svg>

      {/* The campus disc — isometric transform */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -50%) rotateX(62deg) rotateZ(-15deg)',
        transformStyle: 'preserve-3d',
        width: size * 0.65, height: size * 0.65,
      }}>
        {/* Ground disc */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 40% 40%, #fffdf8 0%, #f4efdf 55%, #e8e0ca 100%)',
          borderRadius: '50%',
          boxShadow: 'inset 0 0 40px rgba(26,92,151,0.08), 0 0 0 1px rgba(13,21,48,0.08)',
        }} />

        {/* Grid lines on ground */}
        <svg viewBox="-200 -200 400 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <clipPath id="disc-clip"><circle cx="0" cy="0" r="180" /></clipPath>
          </defs>
          <g clipPath="url(#disc-clip)" stroke="rgba(13,21,48,0.10)" strokeWidth="0.6">
            {[-160, -120, -80, -40, 0, 40, 80, 120, 160].map(v => (
              <g key={v}>
                <line x1={v} y1={-180} x2={v} y2={180} />
                <line x1={-180} y1={v} x2={180} y2={v} />
              </g>
            ))}
            {/* Paths between buildings */}
            <path d="M-80 -40 Q-20 -10, 35 -70" fill="none" stroke="rgba(26,92,151,0.5)" strokeWidth="2" strokeDasharray="3 3" />
            <path d="M-80 -40 Q0 30, 60 30" fill="none" stroke="rgba(26,92,151,0.5)" strokeWidth="2" strokeDasharray="3 3" />
            <path d="M60 30 Q0 60, -60 60" fill="none" stroke="rgba(26,92,151,0.5)" strokeWidth="2" strokeDasharray="3 3" />
            <path d="M-140 20 Q-100 -10, -80 -40" fill="none" stroke="rgba(26,92,151,0.5)" strokeWidth="2" strokeDasharray="3 3" />
          </g>
          {/* Disc outline */}
          <circle cx="0" cy="0" r="180" fill="none" stroke="rgba(13,21,48,0.18)" strokeWidth="1.5" />

          {/* Buildings (drawn in SVG, no 3D here — the wrapper does the tilt) */}
          {buildings.map(b => (
            <g key={b.id}>
              {/* Shadow */}
              <rect x={b.x + 3} y={b.y + 3} width={b.w} height={b.h} fill="rgba(13,21,48,0.18)" rx="2" />
              {/* Footprint */}
              <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={b.color} rx="2" />
              {/* Roof highlight */}
              <rect x={b.x} y={b.y} width={b.w} height={b.h * 0.25} fill="rgba(255,255,255,0.15)" rx="2" />
              {/* Window grid */}
              {Array.from({ length: 3 }).map((_, i) =>
                Array.from({ length: Math.floor(b.w / 15) }).map((_, j) => (
                  <rect key={`${i}-${j}`}
                    x={b.x + 4 + j * 14}
                    y={b.y + 8 + i * 10}
                    width="8" height="5"
                    fill={((i + j + Math.floor(tick / 2)) % 5 === 0) ? 'var(--saffron)' : 'rgba(255,255,255,0.3)'}
                    opacity={((i + j) % 5 === 0) ? 0.9 : 0.5}
                  />
                ))
              )}
            </g>
          ))}

          {/* Ping sources on each building */}
          {buildings.map((b, i) => (
            <circle
              key={`ping-${b.id}`}
              cx={b.x + b.w / 2}
              cy={b.y + b.h / 2}
              r="3"
              fill="var(--saffron)"
              style={{
                transformOrigin: `${b.x + b.w / 2}px ${b.y + b.h / 2}px`,
                animation: `blip 2.2s ease-out ${i * 0.4}s infinite`,
              }}
            />
          ))}
        </svg>
      </div>

      {/* Satellite nodes + connection lines (overlay, not tilted) */}
      <svg viewBox={`0 0 ${size} ${size}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        {satellites.map((s, i) => {
          const rad = (s.angle * Math.PI) / 180;
          const sx = center + Math.cos(rad) * (size * 0.42);
          const sy = center + Math.sin(rad) * (size * 0.42) * 0.6;
          return (
            <g key={s.id}>
              {/* Line from center-ish to satellite */}
              <path
                d={`M ${center} ${center} Q ${(center + sx) / 2} ${(center + sy) / 2 - 20}, ${sx} ${sy}`}
                fill="none"
                stroke="var(--saffron)"
                strokeWidth="1.2"
                strokeDasharray="4 6"
                opacity="0.5"
                style={{ animation: `dash-flow ${4 + i * 0.4}s linear infinite` }}
              />
              {/* Satellite dot */}
              <circle cx={sx} cy={sy} r="6" fill="var(--bg-1)" stroke="var(--navy)" strokeWidth="1.5" />
              <circle cx={sx} cy={sy} r="3" fill={s.kind === 'bus' ? 'var(--saffron)' : s.kind === 'parent' ? 'var(--green)' : 'var(--navy)'} />
            </g>
          );
        })}
      </svg>

      {/* Floating label chips */}
      {satellites.map((s, i) => {
        const rad = (s.angle * Math.PI) / 180;
        const sx = 50 + Math.cos(rad) * 42;
        const sy = 50 + Math.sin(rad) * 42 * 0.6;
        const iconMap = { bus: Icon.Bus, parent: Icon.Users, gateway: Icon.Pin };
        const IconC = iconMap[s.kind];
        return (
          <div key={s.id} style={{
            position: 'absolute',
            left: `${sx}%`, top: `${sy}%`,
            transform: 'translate(12px, -50%)',
            background: 'var(--bg-1)',
            border: '1px solid var(--line-strong)',
            borderRadius: 100,
            padding: '4px 10px 4px 6px',
            fontFamily: 'var(--font-mono)',
            fontSize: 10,
            letterSpacing: '0.08em',
            color: 'var(--ink-1)',
            display: 'flex', alignItems: 'center', gap: 5,
            boxShadow: 'var(--shadow-sm)',
            whiteSpace: 'nowrap',
            animation: `fade-up 1s ${0.4 + i * 0.15}s backwards`,
          }}>
            <IconC style={{ width: 11, height: 11, color: 'var(--saffron)' }} />
            {s.label}
          </div>
        );
      })}


    </div>
  );
}

Object.assign(window, { Campus3D });