// Visual SVGs: hero orb, neural diagram, work card visuals, about ring

const HeroOrb = () => (
  <svg viewBox="0 0 600 600" fill="none">
    <defs>
      <radialGradient id="orbCore" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#00E5FF" stopOpacity=".55"/>
        <stop offset="50%" stopColor="#8B5CF6" stopOpacity=".4"/>
        <stop offset="100%" stopColor="#0a0e27" stopOpacity="0"/>
      </radialGradient>
      <linearGradient id="ringG" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#22d3ee"/>
        <stop offset="100%" stopColor="#a855f7"/>
      </linearGradient>
      <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="6" result="b"/>
        <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
    <circle cx="300" cy="300" r="240" fill="url(#orbCore)"/>
    {/* concentric rings rotating */}
    <g style={{ transformOrigin: "300px 300px", animation: "spin 40s linear infinite" }}>
      <ellipse cx="300" cy="300" rx="260" ry="90" stroke="url(#ringG)" strokeWidth="1.2" fill="none" opacity=".55"/>
      <ellipse cx="300" cy="300" rx="220" ry="220" stroke="url(#ringG)" strokeWidth="1" fill="none" opacity=".25" strokeDasharray="2 6"/>
    </g>
    <g style={{ transformOrigin: "300px 300px", animation: "spinR 60s linear infinite" }}>
      <ellipse cx="300" cy="300" rx="180" ry="260" stroke="url(#ringG)" strokeWidth="1" fill="none" opacity=".4"/>
      <ellipse cx="300" cy="300" rx="140" ry="140" stroke="#22d3ee" strokeWidth="0.8" fill="none" opacity=".3" strokeDasharray="1 5"/>
    </g>
    {/* infinity symbol echoing logo */}
    <g filter="url(#glow)" opacity=".9">
      <path d="M220 300 C 220 250, 280 250, 300 300 S 380 350, 380 300 S 320 250, 300 300 S 220 350, 220 300 Z"
            stroke="url(#ringG)" strokeWidth="2.5" fill="none"/>
    </g>
    {/* nodes */}
    {[...Array(8)].map((_, i) => {
      const a = (i / 8) * Math.PI * 2;
      const r = 240;
      const x = 300 + Math.cos(a) * r;
      const y = 300 + Math.sin(a) * r * 0.45;
      return <circle key={i} cx={x} cy={y} r="3" fill="#00E5FF" opacity=".9"/>;
    })}
    <style>{`
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes spinR { to { transform: rotate(-360deg); } }
    `}</style>
  </svg>
);

const NeuralDiagram = () => {
  // 3 layers, lines connecting
  const cols = [
    { x: 60, n: 4 },
    { x: 200, n: 6 },
    { x: 340, n: 6 },
    { x: 480, n: 3 },
  ];
  const yFor = (col, i) => {
    const total = col.n;
    const step = 360 / (total + 1);
    return 60 + step * (i + 1);
  };
  return (
    <svg viewBox="0 0 540 480" fill="none">
      <defs>
        <linearGradient id="lineG" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#00E5FF" stopOpacity=".0"/>
          <stop offset="50%" stopColor="#00E5FF" stopOpacity=".7"/>
          <stop offset="100%" stopColor="#8B5CF6" stopOpacity=".0"/>
        </linearGradient>
        <radialGradient id="nodeG">
          <stop offset="0%" stopColor="#fff"/>
          <stop offset="60%" stopColor="#00E5FF"/>
          <stop offset="100%" stopColor="#0a0e27"/>
        </radialGradient>
      </defs>
      {/* lines */}
      {cols.slice(0, -1).map((col, ci) => {
        const next = cols[ci + 1];
        const lines = [];
        for (let i = 0; i < col.n; i++) {
          for (let j = 0; j < next.n; j++) {
            const x1 = col.x, y1 = yFor(col, i);
            const x2 = next.x, y2 = yFor(next, j);
            const op = 0.05 + Math.random() * 0.15;
            lines.push(<line key={`${ci}-${i}-${j}`} x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#lineG)" strokeWidth="1" opacity={op} />);
          }
        }
        return <g key={ci}>{lines}</g>;
      })}
      {/* animated pulse lines */}
      {[0,1,2,3,4,5,6].map(i => {
        const ci = i % 3;
        const col = cols[ci]; const next = cols[ci+1];
        const a = Math.floor(Math.random() * col.n);
        const b = Math.floor(Math.random() * next.n);
        const x1 = col.x, y1 = yFor(col, a);
        const x2 = next.x, y2 = yFor(next, b);
        return (
          <line key={`p${i}`} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#00E5FF" strokeWidth="1.4" opacity=".0">
            <animate attributeName="opacity" values="0;.95;0" dur={`${2 + i * 0.4}s`} repeatCount="indefinite" begin={`${i*0.3}s`}/>
          </line>
        );
      })}
      {/* nodes */}
      {cols.map((col, ci) => (
        <g key={ci}>
          {[...Array(col.n)].map((_, i) => {
            const cx = col.x; const cy = yFor(col, i);
            return (
              <g key={i}>
                <circle cx={cx} cy={cy} r="9" fill="url(#nodeG)" opacity=".9"/>
                <circle cx={cx} cy={cy} r="5" fill="#fff" opacity=".9"/>
                <circle cx={cx} cy={cy} r="14" fill="none" stroke="#22d3ee" strokeWidth=".6" opacity=".35">
                  <animate attributeName="r" values="9;18;9" dur={`${3 + ci*0.5}s`} repeatCount="indefinite" begin={`${i*0.2}s`}/>
                  <animate attributeName="opacity" values=".4;0;.4" dur={`${3 + ci*0.5}s`} repeatCount="indefinite" begin={`${i*0.2}s`}/>
                </circle>
              </g>
            );
          })}
        </g>
      ))}
      {/* labels */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5a5f80" letterSpacing="2">
        <text x="60" y="40" textAnchor="middle">INPUT</text>
        <text x="200" y="40" textAnchor="middle">PROCESS</text>
        <text x="340" y="40" textAnchor="middle">DECIDE</text>
        <text x="480" y="40" textAnchor="middle">OUTPUT</text>
      </g>
    </svg>
  );
};

const WorkVisual = ({ kind }) => {
  if (kind === "ecom") {
    return (
      <svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="ecBg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#0b1437"/>
            <stop offset="100%" stopColor="#1a0a3d"/>
          </linearGradient>
          <linearGradient id="ecAcc" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#00E5FF"/>
            <stop offset="100%" stopColor="#8B5CF6"/>
          </linearGradient>
        </defs>
        <rect width="800" height="450" fill="url(#ecBg)"/>
        {/* phone mockup */}
        <g transform="translate(280 60)">
          <rect x="0" y="0" width="240" height="380" rx="28" fill="#0a0e27" stroke="rgba(255,255,255,.15)"/>
          <rect x="14" y="60" width="212" height="120" rx="10" fill="url(#ecAcc)" opacity=".35"/>
          <rect x="14" y="190" width="100" height="14" rx="4" fill="rgba(255,255,255,.6)"/>
          <rect x="14" y="212" width="160" height="10" rx="3" fill="rgba(255,255,255,.25)"/>
          <rect x="14" y="240" width="98" height="98" rx="10" fill="rgba(255,255,255,.06)"/>
          <rect x="128" y="240" width="98" height="98" rx="10" fill="rgba(255,255,255,.06)"/>
          <rect x="14" y="350" width="212" height="20" rx="10" fill="url(#ecAcc)"/>
        </g>
        {/* floating chips */}
        <g fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#22d3ee">
          <rect x="60" y="100" width="120" height="34" rx="8" fill="rgba(0,229,255,.08)" stroke="rgba(0,229,255,.3)"/>
          <text x="120" y="121" textAnchor="middle">+312% VENTAS</text>
          <rect x="600" y="280" width="140" height="34" rx="8" fill="rgba(139,92,246,.08)" stroke="rgba(139,92,246,.4)" />
          <text x="670" y="301" textAnchor="middle" fill="#a855f7">CHECKOUT 1-CLICK</text>
        </g>
      </svg>
    );
  }
  if (kind === "land") {
    return (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="ldBg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#10003d"/>
            <stop offset="100%" stopColor="#001a3d"/>
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="url(#ldBg)"/>
        <g transform="translate(40 50)">
          <rect width="320" height="200" rx="14" fill="#0a0e27" stroke="rgba(255,255,255,.12)"/>
          <rect x="20" y="30" width="160" height="20" rx="4" fill="rgba(255,255,255,.85)"/>
          <rect x="20" y="58" width="200" height="10" rx="3" fill="rgba(255,255,255,.35)"/>
          <rect x="20" y="74" width="180" height="10" rx="3" fill="rgba(255,255,255,.35)"/>
          <rect x="20" y="100" width="100" height="32" rx="16" fill="#00E5FF"/>
          <rect x="220" y="30" width="80" height="100" rx="8" fill="rgba(139,92,246,.4)"/>
        </g>
      </svg>
    );
  }
  if (kind === "ai") {
    return (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="aiBg" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#1e0a4d"/>
            <stop offset="100%" stopColor="#06081a"/>
          </radialGradient>
        </defs>
        <rect width="400" height="300" fill="url(#aiBg)"/>
        <g transform="translate(200 150)">
          {[0,1,2,3,4,5,6,7].map(i => {
            const a = (i/8)*Math.PI*2;
            return <circle key={i} cx={Math.cos(a)*80} cy={Math.sin(a)*80} r="6" fill="#00E5FF" opacity=".8"/>;
          })}
          {[0,1,2,3,4,5,6,7].map(i => {
            const a = (i/8)*Math.PI*2;
            return <line key={i} x1="0" y1="0" x2={Math.cos(a)*80} y2={Math.sin(a)*80} stroke="#8B5CF6" strokeWidth="1" opacity=".4"/>;
          })}
          <circle r="14" fill="#fff"/>
          <circle r="22" fill="none" stroke="#00E5FF" strokeWidth="1" opacity=".5"/>
        </g>
        <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#22d3ee">
          <text x="20" y="280">{"> agent.run('lead-qualify')"}</text>
        </g>
      </svg>
    );
  }
  if (kind === "app") {
    return (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <rect width="400" height="300" fill="#0a0e27"/>
        <g transform="translate(120 30)">
          <rect width="160" height="240" rx="22" fill="#05060d" stroke="rgba(0,229,255,.3)"/>
          <rect x="10" y="20" width="140" height="50" rx="8" fill="rgba(0,229,255,.1)"/>
          <circle cx="35" cy="45" r="14" fill="#00E5FF"/>
          <rect x="58" y="38" width="80" height="6" rx="2" fill="rgba(255,255,255,.7)"/>
          <rect x="58" y="50" width="50" height="5" rx="2" fill="rgba(255,255,255,.3)"/>
          {[0,1,2].map(i => (
            <rect key={i} x="10" y={86 + i*44} width="140" height="34" rx="6" fill="rgba(255,255,255,.04)" stroke="rgba(255,255,255,.08)"/>
          ))}
          <rect x="10" y="220" width="140" height="14" rx="7" fill="url(#barGr)"/>
          <defs>
            <linearGradient id="barGr" x1="0" x2="1"><stop stopColor="#00E5FF"/><stop offset="1" stopColor="#8B5CF6"/></linearGradient>
          </defs>
        </g>
      </svg>
    );
  }
  if (kind === "mkt") {
    return (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <rect width="400" height="300" fill="#0a0e27"/>
        {/* line chart */}
        <polyline points="20,240 60,200 100,210 140,150 180,170 220,110 260,130 300,80 340,90 380,40"
          fill="none" stroke="#00E5FF" strokeWidth="2.5"/>
        <polyline points="20,260 60,250 100,240 140,210 180,220 220,180 260,190 300,150 340,160 380,120"
          fill="none" stroke="#8B5CF6" strokeWidth="2" opacity=".7"/>
        <g fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#fff">
          <text x="20" y="40">ROAS 6.4x</text>
        </g>
        <circle cx="380" cy="40" r="5" fill="#00E5FF"/>
        <circle cx="380" cy="40" r="10" fill="none" stroke="#00E5FF" opacity=".4"/>
      </svg>
    );
  }
  return null;
};

const AboutRing = () => (
  <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id="arG" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stopColor="#00E5FF"/>
        <stop offset="100%" stopColor="#8B5CF6"/>
      </linearGradient>
    </defs>
    <g transform="translate(200 250)">
      {[60, 100, 140, 180, 220].map((r, i) => (
        <circle key={r} r={r} fill="none" stroke="url(#arG)" strokeWidth="1" opacity={0.15 + i*0.08} strokeDasharray={i % 2 ? "2 8" : "0"}/>
      ))}
      <g style={{ transformOrigin: "0 0", animation: "spin 30s linear infinite" }}>
        <circle cx="220" cy="0" r="4" fill="#00E5FF"/>
        <circle cx="-220" cy="0" r="3" fill="#8B5CF6"/>
      </g>
      {/* infinity */}
      <path d="M-90 0 C -90 -40, -30 -40, 0 0 S 60 40, 90 0 S 30 -40, 0 0 S -60 40, -90 0 Z"
            stroke="url(#arG)" strokeWidth="2" fill="none" opacity=".9"/>
    </g>
    <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
  </svg>
);

window.HeroOrb = HeroOrb;
window.NeuralDiagram = NeuralDiagram;
window.WorkVisual = WorkVisual;
window.AboutRing = AboutRing;
