// home.jsx — Home page. The cinematic centerpiece.

// ─── Real brand logos — full color, recognizable ──────────────────────────
const TOOL_ICONS = {
  meta:
  <svg viewBox="0 0 36 36" fill="none">
      <defs>
        <linearGradient id="metaG" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#0064E1" />
          <stop offset="50%" stopColor="#0082FB" />
          <stop offset="100%" stopColor="#00D4FF" />
        </linearGradient>
      </defs>
      <path d="M6 18c0-5 2.4-8.5 6.2-8.5 2.7 0 4.7 2 6.7 5.8C21 19 22.9 21 25 21c2.1 0 3.5-1.7 3.5-4.4 0-4-2.5-7.7-5-7.7-1.4 0-2.5.8-3.6 2.4 1.2-1 2.4-1.5 3.6-1.5 2.2 0 3.7 1.8 3.7 4.4 0 1.6-.6 2.7-1.6 2.7-1.1 0-1.9-1-3-3.2-1.9-3.8-3.9-6.1-6.9-6.1C9.4 7.6 6 12 6 18c0 6 3.4 10.4 8.7 10.4 1.7 0 3-.4 4.1-1.2-1.5.5-2.7.8-4 .8-3.6 0-5.6-3.4-5.6-7.5-1.2 0-2.5-.7-3.2-2.5z"
    fill="url(#metaG)" />
    </svg>,

  google:
  <svg viewBox="0 0 36 36" fill="none">
      <path d="M32.4 18.4c0-1-.1-2-.3-3H18v5.7h8.1c-.4 1.9-1.4 3.4-3 4.5v3.8h4.8c2.8-2.6 4.5-6.4 4.5-11z" fill="#4285F4" />
      <path d="M18 33c4 0 7.4-1.3 9.9-3.6l-4.8-3.8c-1.3.9-3 1.4-5.1 1.4-3.9 0-7.2-2.6-8.4-6.2H4.6v3.9C7.1 29.6 12.2 33 18 33z" fill="#34A853" />
      <path d="M9.6 20.8c-.3-.9-.5-1.9-.5-2.8s.2-1.9.5-2.8v-3.9H4.6C3.6 13.4 3 15.6 3 18s.6 4.6 1.6 6.7l5-3.9z" fill="#FBBC04" />
      <path d="M18 9c2.2 0 4.2.8 5.7 2.2l4.3-4.3C25.4 4.4 22 3 18 3 12.2 3 7.1 6.4 4.6 11.3l5 3.9C10.8 11.6 14.1 9 18 9z" fill="#EA4335" />
    </svg>,

  whatsapp:
  <svg viewBox="0 0 36 36" fill="none">
      <path d="M3 33l2.3-6.4A14.3 14.3 0 1 1 11 32.2L3 33z" fill="#25D366" />
      <path d="M14 11.5c-.3-.7-.6-.8-.9-.8h-.7c-.3 0-.7.1-1.1.5-.4.4-1.4 1.4-1.4 3.4s1.4 4 1.6 4.3c.2.3 2.8 4.5 6.9 6.1 3.4 1.3 4.1 1.1 4.8 1 .8-.1 2.5-1 2.8-2 .3-1 .3-1.9.2-2-.1-.2-.4-.3-.8-.5l-2.7-1.3c-.4-.1-.7-.2-1 .2l-1.3 1.6c-.2.3-.5.3-.9.1a11 11 0 0 1-3.3-2.1c-1.2-1.1-2-2.5-2.3-2.9-.2-.4 0-.6.2-.8l.7-.8c.2-.3.3-.5.5-.8.1-.3 0-.5 0-.7 0-.2-.9-2.2-1.3-3z"
    fill="white" />
    </svg>,

  instagram:
  <svg viewBox="0 0 36 36" fill="none">
      <defs>
        <linearGradient id="igG" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#FFDD55" />
          <stop offset="30%" stopColor="#FF543E" />
          <stop offset="60%" stopColor="#C837AB" />
          <stop offset="100%" stopColor="#3A5EE0" />
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="28" height="28" rx="8" fill="url(#igG)" />
      <circle cx="18" cy="18" r="6.5" fill="none" stroke="white" strokeWidth="2.2" />
      <circle cx="25.4" cy="10.6" r="1.6" fill="white" />
    </svg>,

  youtube:
  <svg viewBox="0 0 36 36" fill="none">
      <rect x="2" y="8" width="32" height="20" rx="5" fill="#FF0000" />
      <path d="M15 13.5v9l8-4.5z" fill="white" />
    </svg>,

  pinterest:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="15" fill="#E60023" />
      <path d="M17 9c-4.4 0-8 3.2-8 7.4 0 2.3 1 4 2.7 4.7.3.1.5 0 .5-.3l.2-.9c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 2-5 5.3-5 2.9 0 4.5 1.8 4.5 4.1 0 3.1-1.4 5.7-3.4 5.7-1.1 0-2-.9-1.7-2 .3-1.4.9-2.8.9-3.8 0-.9-.5-1.6-1.4-1.6-1.2 0-2.1 1.2-2.1 2.8 0 1 .3 1.7.3 1.7l-1.4 5.6c-.4 1.6-.1 3.7 0 3.8 0 .1.1.2.2.1 0 0 1.8-2.1 2.4-4l.9-3.4c.5.9 1.8 1.6 3.2 1.6 4.2 0 7-3.7 7-8.6 0-3.7-3-6.6-7.5-6.6z"
    fill="white" />
    </svg>,

  hubspot:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="24" cy="22" r="6" fill="#FF7A59" />
      <circle cx="24" cy="22" r="3" fill="white" />
      <circle cx="24" cy="7" r="2.6" fill="none" stroke="#FF7A59" strokeWidth="2.2" />
      <path d="M24 16V9.6" stroke="#FF7A59" strokeWidth="2.2" strokeLinecap="round" />
      <circle cx="9" cy="13" r="3" fill="#FF7A59" />
      <path d="M11.5 14.5l9 5" stroke="#FF7A59" strokeWidth="2" strokeLinecap="round" />
    </svg>,

  klaviyo:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="14" fill="#232B2D" />
      <path d="M11 19c1.5 3.5 4 5.5 7 5.5s5.5-2 7-5.5c-2-1.5-4.5-2.5-7-2.5s-5 1-7 2.5z"
    fill="white" />
      <circle cx="18" cy="15" r="1.8" fill="#232B2D" />
    </svg>,

  chatgpt:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="15" fill="#10A37F" />
      <g fill="white">
        <path d="M18 9.5l-5 2.9v5.7l5 2.9 5-2.9v-5.7l-5-2.9z" opacity="0.3" />
        <path d="M18 9.5v11.5M13 12.4l5 2.9 5-2.9M13 18.1l5 2.9 5-2.9"
      stroke="white" strokeWidth="1.6" strokeLinejoin="round" fill="none" />
      </g>
    </svg>,

  zapier:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="14" fill="#FF4F00" />
      <g stroke="white" strokeWidth="2.6" strokeLinecap="round">
        <path d="M18 8v6M18 22v6M8 18h6M22 18h6" />
        <path d="M11 11l3 3M22 22l3 3M11 25l3-3M22 14l3-3" />
      </g>
      <circle cx="18" cy="18" r="3" fill="white" />
    </svg>,

  n8n:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="14" fill="#EA4B71" />
      <g fill="white">
        <circle cx="10" cy="13" r="2.2" />
        <circle cx="10" cy="23" r="2.2" />
        <circle cx="18" cy="18" r="3" fill="none" stroke="white" strokeWidth="2" />
        <circle cx="26" cy="18" r="2.2" />
        <path d="M12 14l4 3M12 22l4-3M21 18h3" stroke="white" strokeWidth="1.8" strokeLinecap="round" />
      </g>
    </svg>,

  slack:
  <svg viewBox="0 0 36 36" fill="none">
      <rect x="14.5" y="3" width="5" height="14" rx="2.5" fill="#36C5F0" />
      <rect x="3" y="14.5" width="14" height="5" rx="2.5" fill="#2EB67D" />
      <rect x="14.5" y="19" width="5" height="14" rx="2.5" fill="#ECB22E" />
      <rect x="19" y="14.5" width="14" height="5" rx="2.5" fill="#E01E5A" />
    </svg>,

  notion:
  <svg viewBox="0 0 36 36" fill="none">
      <rect x="4" y="4" width="28" height="28" rx="3" fill="#fff" stroke="#0a0a0a" strokeWidth="1.4" />
      <path d="M11 11l14 14M11 11v14M25 11v14" stroke="#0a0a0a" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  make:
  <svg viewBox="0 0 36 36" fill="none">
      <rect width="36" height="36" rx="6" fill="#0a0a0a" />
      <path d="M8 27V9h3l4 9 4-9h3v18h-3V16l-3 7h-2l-3-7v11H8z" fill="#6D00CC" />
    </svg>,

  claude:
  <svg viewBox="0 0 36 36" fill="none">
      <rect x="3" y="3" width="30" height="30" rx="6" fill="#0a0a0a" />
      <path d="M14 24l4-11h0.5l4 11h-2.5l-0.8-2.3h-3.6L14.5 24H14zm2.2-4.1h2.5l-1.2-3.6-1.3 3.6z" fill="#D97757" />
    </svg>,

  openai:
  <svg viewBox="0 0 36 36" fill="none">
      <circle cx="18" cy="18" r="15" fill="#0a0a0a" />
      <path d="M24.5 16.2c.4-1.2.3-2.5-.4-3.6-1-1.8-3.1-2.7-5.1-2.3-1-1.3-2.6-2-4.3-1.7-1.9.3-3.5 1.6-4 3.5-1.3.3-2.5 1.1-3.1 2.3-1 1.8-.8 4 .5 5.6-.4 1.2-.3 2.5.4 3.6 1 1.8 3.1 2.7 5.1 2.3 1 1.3 2.6 2 4.3 1.7 1.9-.3 3.5-1.6 4-3.5 1.3-.3 2.5-1.1 3.1-2.3 1-1.8.8-4-.5-5.6zM19.4 24.4c-.8.5-1.8.7-2.7.4l.2-.1 3.6-2.1.3-.2.1-.4-.1-4 .9.5v4c0 1-.4 1.9-1.3 1.9zm-9-3.9c-.4-.7-.6-1.6-.4-2.4l.1.1 3.7 2.1.3.2.4-.2 4.4-2.6V19l-3.6 2.1c-.9.5-2 .5-2.9 0-.7-.4-1.3-1-1.7-1.6h-.3zm-.6-7.9c.5-.7 1.2-1.3 2-1.6V15.7l.1.4.4.2 4.4 2.6-.9.5L11.4 17c-.9-.5-1.3-1.4-1.3-2.4 0-.7.2-1.4.5-2zm12.4 2.9l-4.4-2.6.9-.5 3.6 2.1c1.4.8 2.1 2.5 1.6 4-.2.7-.6 1.3-1.1 1.7v-4l-.1-.4-.5-.3zm.9-1.4l-.1-.1-3.7-2.1-.3-.2-.4.2-4.4 2.6V13l3.6-2.1c1.5-.8 3.3-.6 4.5.6.5.5.8 1.1.9 1.8h-.1zm-9.7 1.9l-.9-.5v-4c0-1.5 1-2.8 2.5-3.2 1.3-.4 2.6 0 3.4.9l-.2.1-3.7 2.1-.3.2v.4l.2 4z" fill="#fff" />
    </svg>,

  perplexity:
  <svg viewBox="0 0 36 36" fill="none">
      <rect x="3" y="3" width="30" height="30" rx="6" fill="#0a0a0a" />
      <path d="M18 8L8 16h4v8h4v-6h4v6h4v-8h4L18 8z" fill="none" stroke="#20B8CD" strokeWidth="2" strokeLinejoin="round" />
      <path d="M18 8v16" stroke="#20B8CD" strokeWidth="2" />
    </svg>,

  airtable:
  <svg viewBox="0 0 36 36" fill="none">
      <path d="M18 6L4 11.5l5 2v9l9 4 9-4v-9l5-2L18 6z" fill="#FFBF00" />
      <path d="M18 17.5L4 11.5l14-5.5 14 5.5L18 17.5z" fill="#FCB400" />
      <path d="M18 17.5v9L9 22.5v-9l9 4z" fill="#26B5F8" />
      <path d="M18 17.5v9l9-4v-9l-9 4z" fill="#ED3049" />
    </svg>,

  gsheets:
  <svg viewBox="0 0 36 36" fill="none">
      <path d="M22 3H9C7.9 3 7 3.9 7 5v26c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V10l-7-7z" fill="#0F9D58" />
      <path d="M22 3v7h7l-7-7z" fill="#0B8043" />
      <path d="M12 16h12v12H12V16zm2 2v2h3v-2h-3zm5 0v2h3v-2h-3zm-5 4v2h3v-2h-3zm5 0v2h3v-2h-3zm-5 4v0h3v-2h-3v2zm5 0h3v-2h-3v2z" fill="#fff" />
    </svg>,

  shopify:
  <svg viewBox="0 0 36 36" fill="none">
      <path d="M9 8c.7-2.2 2.4-4 4.5-4 1.7 0 3 1 3.5 2.4.6-.2 1.2-.3 1.8-.3 2.3 0 3.4 1.5 3.7 3.6L25 27 9.5 29.5 6.5 11c0-1.8 1.2-3 2.5-3z"
    fill="#95BF47" />
      <path d="M19 6.4c-.4-1.6-1.5-2.4-3-2.4-.2 0-.4 0-.7.1.1.1.3.4.5.7.6 1 1.1 2.5 1.3 4.2l1.9-.6V6.4z"
    fill="#5E8E3E" />
      <path d="M19 13c-1-.5-2-.7-2.7-.7-1.1 0-1.8.7-1.8 1.5 0 2 3.7 1.6 3.7 4 0 1.3-1.2 2.2-2.7 2.2-1 0-2.1-.3-3-.9l.6-2.2c.8.5 1.6.8 2.3.8.6 0 1-.3 1-.7 0-1.6-3.6-1.4-3.6-3.8 0-1.8 1.5-3.5 4.6-3.5 1.1 0 2.1.2 2.7.4L19 13z"
    fill="white" />
    </svg>

};

// Pick which tools appear in the orbit (and on which ring)
const ORBIT_INNER = ["meta", "google", "whatsapp", "instagram", "youtube", "pinterest"];
const ORBIT_OUTER = ["hubspot", "klaviyo", "chatgpt", "zapier", "n8n", "slack", "notion", "shopify"];

// ─── Constellation tools — exactly matching the user's reference image
const CHIP_INNER = [
{ key: "n8n", label: "n8n" },
{ key: "zapier", label: "Zapier" },
{ key: "notion", label: "Notion" },
{ key: "perplexity", label: "Perplexity" }];

const CHIP_OUTER = [
{ key: "slack", label: "Slack" },
{ key: "gsheets", label: "Google Sheets" },
{ key: "airtable", label: "Airtable" },
{ key: "openai", label: "OpenAI" },
{ key: "claude", label: "Claude" },
{ key: "make", label: "Make" }];


function SystemDiagram() {
  const innerR = 150;
  const outerR = 248;
  const size = 640;
  const c = size / 2;

  // Single low-rate counter — no per-frame React re-renders.
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount((n) => n + Math.floor(2 + Math.random() * 6)), 380);
    return () => clearInterval(id);
  }, []);

  // Beam targets — six fixed positions on the inner ring
  const beams = useMemo(() =>
  Array.from({ length: 6 }).map((_, i) => {
    const a = i / 6 * Math.PI * 2;
    return { x: c + Math.cos(a) * innerR, y: c + Math.sin(a) * innerR, i };
  }),
  []);

  return (
    <div className="dj-orbit-wrap" aria-label="Digital Jaao AI agent system">
      <div className="dj-orbit-stars" aria-hidden="true" />
      <div className="dj-orbit-sweep" aria-hidden="true" />

      <svg viewBox={`0 0 ${size} ${size}`} className="dj-orbit" preserveAspectRatio="xMidYMid meet" role="img">
        <defs>
          <radialGradient id="djHubGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.75" />
            <stop offset="40%" stopColor="var(--accent)" stopOpacity="0.18" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="djHubCore" cx="50%" cy="35%" r="65%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.22" />
            <stop offset="55%" stopColor="#1a0e2e" stopOpacity="1" />
            <stop offset="100%" stopColor="#000" stopOpacity="1" />
          </radialGradient>
          <filter id="djSoftGlow">
            <feGaussianBlur stdDeviation="3" result="b" />
            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
          <filter id="djChip" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="2" stdDeviation="2.5" floodColor="#000" floodOpacity="0.35" />
          </filter>
          <path id="djInnerPath" d={`M ${c},${c - innerR} a ${innerR},${innerR} 0 1,1 -0.01,0`} />
          <path id="djOuterPathRev" d={`M ${c},${c - outerR} a ${outerR},${outerR} 0 1,0 0.01,0`} />
        </defs>

        {/* Hub glow */}
        <circle cx={c} cy={c} r="220" fill="url(#djHubGlow)" />

        {/* Orbit rings (concentric, circular) */}
        <circle cx={c} cy={c} r={innerR} fill="none" stroke="var(--line-strong)" strokeDasharray="2 4" opacity="0.65" />
        <circle cx={c} cy={c} r={outerR} fill="none" stroke="var(--line-strong)" strokeDasharray="2 4" opacity="0.45" />

        {/* Status satellites traveling along each ring — pure SMIL */}
        {Array.from({ length: 3 }).map((_, i) =>
        <g key={`sat-i-${i}`} filter="url(#djSoftGlow)">
            <circle r="2.5" fill="var(--accent)">
              <animateMotion dur="9s" repeatCount="indefinite" begin={`${i * 9 / 3}s`}>
                <mpath href="#djInnerPath" />
              </animateMotion>
            </circle>
          </g>
        )}
        {Array.from({ length: 4 }).map((_, i) =>
        <g key={`sat-o-${i}`} filter="url(#djSoftGlow)">
            <circle r="2.5" fill="var(--accent)">
              <animateMotion dur="14s" repeatCount="indefinite" begin={`${i * 14 / 4}s`}>
                <mpath href="#djOuterPathRev" />
              </animateMotion>
            </circle>
          </g>
        )}

        {/* Beams from hub to six positions on the inner ring */}
        {beams.map(({ x, y, i }) =>
        <g key={`beam-${i}`}>
            <line x1={c} y1={c} x2={x} y2={y} stroke="var(--accent)" strokeWidth="0.8" opacity="0.18" />
            <circle r="2.2" fill="var(--accent)" filter="url(#djSoftGlow)">
              <animate attributeName="cx" from={c} to={x} dur="2.6s" repeatCount="indefinite" begin={`${i * 0.4}s`} />
              <animate attributeName="cy" from={c} to={y} dur="2.6s" repeatCount="indefinite" begin={`${i * 0.4}s`} />
              <animate attributeName="opacity" values="0;1;0" dur="2.6s" repeatCount="indefinite" begin={`${i * 0.4}s`} />
            </circle>
          </g>
        )}

        {/* Inner orbit — rotating group, items counter-rotate to stay upright */}
        <g style={{ transformOrigin: `${c}px ${c}px`, animation: "dj-orbit-cw 42s linear infinite" }}>
          {ORBIT_INNER.map((key, i) => {
            const a = i / ORBIT_INNER.length * Math.PI * 2;
            const x = c + Math.cos(a) * innerR;
            const y = c + Math.sin(a) * innerR;
            return (
              <g key={key} transform={`translate(${x},${y})`}>
                <g style={{ transformOrigin: "0 0", animation: "dj-orbit-ccw 42s linear infinite" }}>
                  <circle r="30" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" filter="url(#djChip)" />
                  <circle r="30" fill="none" stroke="var(--accent)" strokeWidth="0.8" opacity="0.55" />
                  <g transform="translate(-19,-19)">
                    <svg width="38" height="38" viewBox="0 0 36 36" style={{ overflow: "visible" }}>
                      {TOOL_ICONS[key]}
                    </svg>
                  </g>
                </g>
              </g>);

          })}
        </g>

        {/* Outer orbit — counter-rotation */}
        <g style={{ transformOrigin: `${c}px ${c}px`, animation: "dj-orbit-ccw 64s linear infinite" }}>
          {ORBIT_OUTER.map((key, i) => {
            const a = i / ORBIT_OUTER.length * Math.PI * 2 + Math.PI / 8;
            const x = c + Math.cos(a) * outerR;
            const y = c + Math.sin(a) * outerR;
            return (
              <g key={key} transform={`translate(${x},${y})`}>
                <g style={{ transformOrigin: "0 0", animation: "dj-orbit-cw 64s linear infinite" }}>
                  <circle r="25" fill="#fff" stroke="var(--line-strong)" strokeWidth="1" filter="url(#djChip)" />
                  <g transform="translate(-16,-16)">
                    <svg width="32" height="32" viewBox="0 0 36 36" style={{ overflow: "visible" }}>
                      {TOOL_ICONS[key]}
                    </svg>
                  </g>
                </g>
              </g>);

          })}
        </g>

        {/* Central hub — large, dramatic, holographic */}
        <g>
          <circle cx={c} cy={c} r="86" fill="url(#djHubCore)" stroke="var(--accent)" strokeWidth="1.8" />
          <circle cx={c} cy={c} r="98" fill="none" stroke="var(--accent)" strokeWidth="0.6" strokeDasharray="3 4" opacity="0.7">
            <animateTransform attributeName="transform" type="rotate" from={`0 ${c} ${c}`} to={`360 ${c} ${c}`} dur="22s" repeatCount="indefinite" />
          </circle>
          <circle cx={c} cy={c} r="110" fill="none" stroke="var(--accent)" strokeWidth="0.4" strokeDasharray="1 6" opacity="0.55">
            <animateTransform attributeName="transform" type="rotate" from={`360 ${c} ${c}`} to={`0 ${c} ${c}`} dur="34s" repeatCount="indefinite" />
          </circle>
          <circle cx={c} cy={c} r="86" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.5">
            <animate attributeName="r" values="86;130;86" dur="3.6s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.45;0;0.45" dur="3.6s" repeatCount="indefinite" />
          </circle>
          <circle cx={c} cy={c} r="86" fill="none" stroke="var(--accent)" strokeWidth="0.8" opacity="0.5">
            <animate attributeName="r" values="86;120;86" dur="3.6s" begin="1.2s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.35;0;0.35" dur="3.6s" begin="1.2s" repeatCount="indefinite" />
          </circle>
          <text x={c} y={c - 10} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="rgba(255,255,255,0.45)">DJ-OS · v4</text>
          <text x={c} y={c + 8} textAnchor="middle" fontFamily="var(--font-display)" fontSize="22" letterSpacing="-0.02em" fontWeight="500" fill="#fff">AI Agents</text>
          <text x={c} y={c + 26} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.16em" fill="var(--accent)">● ACTIVE</text>
        </g>

        {/* Corner telemetry */}
        <g fontFamily="var(--font-mono)" fontSize="9" fill="var(--muted)">
          <text x="20" y="24">SYS · 05.2026</text>
          <text x="20" y="38" fill="var(--accent)">● LIVE</text>
          <text x={size - 20} y="24" textAnchor="end">14 · INTEGRATIONS</text>
          <text x={size - 20} y="38" textAnchor="end">EVT · {String(count).padStart(6, "0")}</text>
          <text x="20" y={size - 14}>LAT · 12ms</text>
          <text x={size - 20} y={size - 14} textAnchor="end">UPTIME · 99.98%</text>
        </g>
      </svg>

      <div className="dj-orbit-ticker" aria-hidden="true">
        <div className="dj-orbit-ticker-track">
          {[...ORBIT_INNER, ...ORBIT_OUTER, ...ORBIT_INNER].map((k, i) =>
          <span key={i} className="dj-orbit-ticker-item">
              <span className="dj-orbit-ticker-dot" />
              {k.charAt(0).toUpperCase() + k.slice(1)}
            </span>
          )}
        </div>
      </div>
    </div>);

}

// ─── Hero variants ─────────────────────────────────────────────────────────

// Page-wide ambient background — aurora mesh + cursor spotlight + drifting dust.
// Designed to feel like a premium AI / SaaS landing page; stays subtle so
// content reads cleanly.
function HomeBackground() {
  const spotRef = useRef(null);
  useEffect(() => {
    let raf = 0, tx = 50, ty = 30, x = 50, y = 30;
    const onMove = (e) => {
      tx = (e.clientX / window.innerWidth) * 100;
      ty = (e.clientY / window.innerHeight) * 100;
    };
    const loop = () => {
      x += (tx - x) * 0.08;
      y += (ty - y) * 0.08;
      if (spotRef.current) {
        spotRef.current.style.setProperty("--mx", x + "%");
        spotRef.current.style.setProperty("--my", y + "%");
      }
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    window.addEventListener("pointermove", onMove);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("pointermove", onMove); };
  }, []);

  // Fixed-seed dust particles (no per-frame React work)
  const dust = useMemo(() =>
    Array.from({ length: 28 }).map((_, i) => ({
      key: i,
      x: (i * 13 + 7) % 100,
      y: (i * 17 + 23) % 100,
      d: 18 + ((i * 7) % 18),
      delay: -(i * 1.3) % 18,
      size: 1 + ((i * 3) % 3),
      o: 0.4 + ((i * 11) % 5) / 10,
    })), []);

  return (
    <div className="dj-home-bg" aria-hidden="true">
      <div className="dj-home-aurora dj-home-aurora-1" />
      <div className="dj-home-aurora dj-home-aurora-2" />
      <div className="dj-home-aurora dj-home-aurora-3" />
      <div className="dj-home-mesh" />
      <div className="dj-home-grain" />
      <div className="dj-home-dust">
        {dust.map(d => (
          <span key={d.key} style={{
            left: d.x + "%", top: d.y + "%",
            width: d.size, height: d.size,
            animationDuration: d.d + "s",
            animationDelay: d.delay + "s",
            opacity: d.o,
          }}/>
        ))}
      </div>
      <div ref={spotRef} className="dj-home-spot" />
    </div>
  );
}

// Ambient AI background — animated grid + drifting orbs + rising particles
function HeroFX() {
  // Fixed seeds so SSR-equivalent first render matches; no per-frame React work.
  const particles = useMemo(() =>
  Array.from({ length: 14 }).map((_, i) => ({
    key: i,
    left: `${(i * 7.3 + 3) % 100}%`,
    dur: 9 + i * 3 % 10,
    delay: i * 1.7 % 12,
    size: 2 + i * 5 % 4
  })), []);
  return (
    <div className="dj-hero-fx" aria-hidden="true">
      <div className="dj-hero-particles">
        {particles.map((p) =>
        <span key={p.key} style={{
          left: p.left,
          width: p.size, height: p.size,
          animationDuration: `${p.dur}s`,
          animationDelay: `${p.delay}s`
        }} />
        )}
      </div>
    </div>);

}

// Headline passthrough — no animation wrapper, just renders children.
function AnimatedHeadline({ children }) {
  return <React.Fragment>{children}</React.Fragment>;
}

// Floating AI status chips around the hero — premium SaaS feel
function HeroFloaters() {
  const items = [
    { x: "8%",  y: "12%", label: "voice.agent",    status: "Live · 12 calls",      dur: 7 },
    { x: "82%", y: "20%", label: "lead.gen",       status: "+4 qualified",         dur: 9 },
    { x: "6%",  y: "62%", label: "whatsapp.auto",  status: "Broadcast · 1,240",    dur: 11 },
    { x: "84%", y: "70%", label: "ai.seo",         status: "AI Overview · pos. 1", dur: 8 },
  ];
  return (
    <div className="dj-hero-floaters" aria-hidden="true">
      {items.map((it, i) => (
        <div key={i} className="dj-floater" style={{
          left: it.x, top: it.y,
          animationDuration: it.dur + "s",
          animationDelay: -(i * 1.8) + "s",
        }}>
          <span className="dj-floater-dot" />
          <span className="dj-floater-key">{it.label}</span>
          <span className="dj-floater-val">{it.status}</span>
        </div>
      ))}
    </div>
  );
}

// Animated violet dot-wave field — waving grid of dots behind the hero
function HeroDotWave() {
  const cols = 36, rows = 12;
  const cellW = 100 / cols;   // % units
  const cellH = 100 / rows;
  return (
    <svg className="dj-dotwave" viewBox="0 0 1440 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <radialGradient id="djDotMask" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#fff" stopOpacity="0"/>
          <stop offset="60%" stopColor="#fff" stopOpacity="1"/>
          <stop offset="100%" stopColor="#fff" stopOpacity="0.6"/>
        </radialGradient>
      </defs>
      {Array.from({ length: rows }).map((_, r) =>
        Array.from({ length: cols }).map((_, c) => {
          const x = (c + 0.5) * (1440 / cols);
          const y = (r + 0.5) * (480 / rows);
          // Sinusoidal wave per-column gives a rolling "wave" look
          const phase = (c / cols + r / rows) * 6.28;
          const delay = ((c * 0.08) + (r * 0.12)) % 4;
          const dotOpacity = 0.18 + (1 - r / rows) * 0.35;
          return (
            <g key={`${r}-${c}`} transform={`translate(${x},${y})`}>
              <circle r="1.6" fill="var(--accent)" opacity={dotOpacity}>
                <animate attributeName="r"
                         values="1.2;2.6;1.2"
                         dur="3.6s"
                         begin={`-${delay}s`}
                         repeatCount="indefinite"/>
                <animate attributeName="opacity"
                         values={`${dotOpacity * 0.4};${dotOpacity};${dotOpacity * 0.4}`}
                         dur="3.6s"
                         begin={`-${delay}s`}
                         repeatCount="indefinite"/>
              </circle>
            </g>
          );
        })
      )}
    </svg>
  );
}

function HeroCentered() {
  return (
    <section className="dj-hero dj-hero-centered" style={{ background: "rgb(0, 0, 0)" }}>
      <HeroFX />
      <div className="dj-container">
        <Reveal>
          <span className="dj-hero-pill">
            <span className="dj-hero-pill-dot" />
            Now taking 3 new partners for Q3 2026
          </span>
        </Reveal>
        <Reveal delay={40}>
          <Eyebrow>Digital Jaao · Jaipur, India</Eyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="dj-h1 dj-hero-h1" style={{ color: "rgb(255, 255, 255)" }}>
            <AnimatedHeadline>AI-powered growth systems</AnimatedHeadline><br />
            <em><AnimatedHeadline>for modern brands.</AnimatedHeadline></em>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="dj-hero-sub">
            We design and operate the engine — AI agents, automation, performance media, and content — that turns your brand into a compounding revenue system.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div className="dj-hero-ctas">
            <Button to="book" kind="primary" size="lg">Book a 1-on-1 consult</Button>
            <Button to="case-studies" kind="ghost" size="lg" icon={false}>See case studies →</Button>
          </div>
        </Reveal>
        <Reveal delay={320}>
          <div className="dj-hero-diagram">
            <SystemDiagram />
          </div>
        </Reveal>
      </div>
    </section>);

}

function HeroSplit() {
  return (
    <section className="dj-hero dj-hero-split">
      <HeroFX />
      <div className="dj-container dj-hero-split-grid">
        <div className="dj-hero-split-left">
          <Reveal>
            <span className="dj-hero-pill">
              <span className="dj-hero-pill-dot" />
              Now taking 3 new partners for Q3 2026
            </span>
          </Reveal>
          <Reveal delay={40}><Eyebrow>Digital Jaao · Jaipur, India</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h1 className="dj-h1 dj-hero-h1">
              AI-powered<br />growth systems<br /><em>for modern brands.</em>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="dj-hero-sub">
              We design and operate the engine — AI agents, automation, performance media, content — that turns your brand into a compounding revenue system.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="dj-hero-ctas">
              <Button to="book" kind="primary" size="lg">Book a 1-on-1</Button>
              <Button to="case-studies" kind="ghost" size="lg" icon={false}>See case studies →</Button>
            </div>
          </Reveal>
        </div>
        <Reveal delay={280} className="dj-hero-split-right">
          <SystemDiagram />
        </Reveal>
      </div>
    </section>);

}

function HeroMarquee() {
  return (
    <section className="dj-hero dj-hero-marquee">
      <HeroFX />
      <div className="dj-container">
        <Reveal>
          <h1 className="dj-h1 dj-hero-h1 dj-hero-mq-h1">
            AI-powered growth systems
          </h1>
        </Reveal>
      </div>
      <Marquee items={["for modern brands.", "for ambitious founders.", "for D2C & SaaS.", "for India & beyond.", "for the AI-first era."]} speed={28} className="dj-hero-mq-tape" />
      <div className="dj-container">
        <Reveal delay={120}>
          <p className="dj-hero-sub dj-hero-sub-mq">
            We design and operate the engine — AI agents, automation, performance media, and content — that turns your brand into a compounding revenue system.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div className="dj-hero-ctas">
            <Button to="book" kind="primary" size="lg">Book a 1-on-1 consult</Button>
            <Button to="case-studies" kind="ghost" size="lg" icon={false}>See case studies →</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div className="dj-hero-diagram"><SystemDiagram /></div>
        </Reveal>
      </div>
    </section>);

}

// ─── Trust strip ──────────────────────────────────────────────────────────
function TrustStrip() {
  return (
    <section className="dj-trust">
      <div className="dj-container">
        <Reveal>
          <div className="dj-trust-row">
            <span className="dj-trust-lbl">Trusted by 240+ brands across 20 niches</span>
            <span className="dj-trust-dot" />
          </div>
        </Reveal>
      </div>
      <Marquee items={dj.clients} speed={42} className="dj-trust-tape" />
    </section>);

}

// ─── Stats bar ────────────────────────────────────────────────────────────
function StatsBar() {
  return (
    <section className="dj-stats">
      <div className="dj-container">
        <div className="dj-stats-grid">
          {dj.stats.map((s, i) =>
          <Reveal key={i} delay={i * 80} className="dj-stat">
              <div className="dj-stat-num">
                <Counter value={s.value} suffix={s.suffix} decimals={s.decimals || 0} />
              </div>
              <div className="dj-stat-lbl">{s.label}</div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ─── Services preview ────────────────────────────────────────────────────
function ServicesPreview() {
  return (
    <section className="dj-section">
      <div className="dj-container">
        <SectionHead
          eyebrow="What we build"
          title={<React.Fragment>One team. <em>Four systems.</em> All operated like a product.</React.Fragment>}
          intro="Most agencies sell hours. We ship engines — AI agents, automation, performance media, and content — designed to compound revenue over quarters, not days." />
        
        <div className="dj-svc-grid">
          {dj.serviceGroups.map((g, i) =>
          <Reveal key={g.id} delay={i * 100}>
              <Link to="services" className="dj-svc-card">
                <div className="dj-svc-card-top">
                  <span className="dj-svc-num">0{i + 1}</span>
                  <span className="dj-svc-arrow">→</span>
                </div>
                <h3 className="dj-svc-name">{g.label}</h3>
                <p className="dj-svc-tag">{g.tagline}</p>
                <ul className="dj-svc-list">
                  {g.items.slice(0, 4).map((it) =>
                <li key={it.id}><span className="dj-svc-dot" />{it.name}</li>
                )}
                  {g.items.length > 4 && <li className="dj-svc-more">+ {g.items.length - 4} more</li>}
                </ul>
              </Link>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ─── Featured case studies ────────────────────────────────────────────────
function FeaturedCases() {
  const featured = dj.caseStudies.slice(0, 3);
  return (
    <section className="dj-section dj-section-dark">
      <div className="dj-container">
        <SectionHead
          eyebrow="Case studies"
          title={<React.Fragment>Real systems. <em>Real numbers.</em></React.Fragment>}
          intro="A small selection of recent work. Click any to read the full story." />
        
        <div className="dj-cases-grid">
          {featured.map((c, i) =>
          <Reveal key={c.id} delay={i * 100}>
              <Link to={`case/${c.id}`} className="dj-case-card">
                <div className="dj-case-color" style={{ background: c.color }}>
                  <span className="dj-case-niche">{c.niche}{c.region ? ` · ${c.region}` : ""}</span>
                  {c.logo ?
                <img src={c.logo} alt={`${c.brand} logo`} className={`dj-case-feat-logo ${c.logoInvert ? "is-invert" : ""}`} /> :

                <span className="dj-case-brand-mark">{c.brand.split(" ").map((w) => w[0]).join("")}</span>
                }
                </div>
                <div className="dj-case-body">
                  <h3 className="dj-case-brand">{c.brand}</h3>
                  <p className="dj-case-goal">{c.goal}</p>
                  <div className="dj-case-stats">
                    {c.stats.map((s) =>
                  <div key={s.k} className="dj-case-stat">
                        <span className="dj-case-stat-v">{s.v}</span>
                        <span className="dj-case-stat-k">{s.k}</span>
                      </div>
                  )}
                  </div>
                  <span className="dj-case-cta">Read the case study →</span>
                </div>
              </Link>
            </Reveal>
          )}
        </div>
        <Reveal>
          <div className="dj-section-foot">
            <Button to="case-studies" kind="ghost" size="lg" icon>See all case studies</Button>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ─── Process ──────────────────────────────────────────────────────────────
function ProcessSection() {
  return (
    <section className="dj-section">
      <div className="dj-container">
        <SectionHead
          eyebrow="How we work"
          title={<React.Fragment>A method that <em>compounds.</em></React.Fragment>}
          intro="Every engagement runs the same four-stage rhythm. Predictable, transparent, measurable." />
        
        <div className="dj-proc-grid">
          {dj.process.map((p, i) =>
          <Reveal key={p.n} delay={i * 100}>
              <div className="dj-proc-card">
                <span className="dj-proc-n">{p.n}</span>
                <h3 className="dj-proc-name">{p.name}</h3>
                <p className="dj-proc-body">{p.body}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ─── Client reels ────────────────────────────────────────────────────────
function ClientReels() {
  return (
    <section className="dj-section dj-section-cream">
      <div className="dj-container">
        <SectionHead
          eyebrow="On camera"
          title={<React.Fragment>Hear it from <em>the founders.</em></React.Fragment>}
          intro="Short, honest videos from clients we've worked with across India and beyond." />
        
        <div className="dj-reels-grid">
          {[0, 1, 2, 3].map((i) => {
            const t = dj.testimonials[i];
            return (
              <Reveal key={i} delay={i * 80}>
                <div className="dj-reel">
                  <MediaSlot label={`reel · ${t.niche}`} ratio="9 / 16" color={`hsl(${i * 70} 12% 14%)`}>
                    <span className="dj-reel-play">▶</span>
                  </MediaSlot>
                  <p className="dj-reel-quote">"{t.quote.slice(0, 72)}{t.quote.length > 72 ? "…" : ""}"</p>
                  <p className="dj-reel-who">{t.who}</p>
                </div>
              </Reveal>);

          })}
        </div>
        <Reveal>
          <div className="dj-section-foot">
            <Button to="testimonials" kind="ghost" size="lg">All client feedback</Button>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ─── Certifications ──────────────────────────────────────────────────────
function CertStrip() {
  return (
    <section className="dj-certs">
      <div className="dj-container">
        <Reveal>
          <div className="dj-certs-row">
            <span className="dj-certs-lbl">Certified & partnered</span>
            <ul className="dj-certs-list">
              {dj.certifications.map((c) =>
              <li key={c} className="dj-certs-item">{c}</li>
              )}
            </ul>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ─── FAQ ─────────────────────────────────────────────────────────────────
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="dj-section">
      <div className="dj-container dj-container-narrow">
        <SectionHead
          eyebrow="Questions, answered"
          title={<React.Fragment>The things you'll <em>probably ask.</em></React.Fragment>} />
        
        <ul className="dj-faq-list">
          {dj.faq.map((f, i) =>
          <Reveal key={i} delay={i * 60} as="li">
              <button
              className={`dj-faq-row ${open === i ? "is-open" : ""}`}
              onClick={() => setOpen(open === i ? -1 : i)}>
              
                <span className="dj-faq-q">{f.q}</span>
                <span className="dj-faq-plus" aria-hidden>{open === i ? "−" : "+"}</span>
              </button>
              <div className={`dj-faq-a ${open === i ? "is-open" : ""}`}>
                <div className="dj-faq-a-inner">{f.a}</div>
              </div>
            </Reveal>
          )}
        </ul>
      </div>
    </section>);

}

// ─── Bento portfolio (editorial mixed-size grid) ───────────────────────────
function BentoPortfolio() {
  const items = dj.portfolio.slice(0, 8);
  const pattern = ["w", "s", "s", "t", "s", "w", "s", "s"];
  return (
    <section className="dj-section">
      <div className="dj-container">
        <header className="dj-bento-head">
          <Reveal>
            <Eyebrow>(0{Math.min(items.length, 9)}) selected work</Eyebrow>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="dj-h2 dj-bento-h2">
              A few projects <em>we're proud of.</em>
            </h2>
          </Reveal>
          <Reveal delay={140} className="dj-bento-cta">
            <Button to="portfolio" kind="ghost" size="md" icon>View portfolio</Button>
          </Reveal>
        </header>

        <div className="dj-bento-grid">
          {items.map((p, i) => {
            const span = pattern[i] || "s";
            const target = p.caseId ? `case/${p.caseId}` : "portfolio";
            const inner =
            <React.Fragment>
                {p.logo ?
              <img src={p.logo} alt={p.brand} className="dj-bento-art" loading="lazy" decoding="async" /> :

              <span className="dj-bento-mark">{p.brand.split(" ").map((w) => w[0]).slice(0, 2).join("")}</span>
              }
                <div className="dj-bento-meta">
                  <span className="dj-bento-niche">{p.niche}{p.tag ? " · " + p.tag.split("·")[0].trim() : ""}</span>
                  <h3 className="dj-bento-brand">{p.brand}</h3>
                </div>
                <span className="dj-bento-arrow" aria-hidden>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7h7M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
              </React.Fragment>;

            return (
              <Reveal key={`${p.brand}-${i}`} delay={i % 4 * 70} className={`dj-bento-cell dj-bento-${span}`}>
                <Link to={target} className="dj-bento-card" style={{ background: p.color }}>{inner}</Link>
              </Reveal>);

          })}
        </div>
      </div>
    </section>);

}

// ─── Page ────────────────────────────────────────────────────────────────
function HomePage({ heroVariant = "centered" }) {
  const Hero = heroVariant === "split" ? HeroSplit : heroVariant === "marquee" ? HeroMarquee : HeroCentered;
  return (
    <React.Fragment>
      <HomeBackground />
      <Hero />
      <TrustStrip />
      <StatsBar />
      <ServicesPreview />
      <FeaturedCases />
      <BentoPortfolio />
      <ProcessSection />
      <ClientReels />
      <CertStrip />
      <FAQSection />
    </React.Fragment>);

}

Object.assign(window, { HomePage, BentoPortfolio });