// service-visuals.jsx — animated SVG visuals per service.
// Each visual is keyed by the service id in data.js → serviceGroups[*].items[*].id.

const SV_DEFS = (
  <defs>
    <linearGradient id="svViolet" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stopColor="var(--accent)"/>
      <stop offset="100%" stopColor="color-mix(in oklab, var(--accent) 60%, #000)"/>
    </linearGradient>
    <radialGradient id="svGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.65"/>
      <stop offset="60%" stopColor="var(--accent)" stopOpacity="0.10"/>
      <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
    </radialGradient>
    <filter id="svBlur"><feGaussianBlur stdDeviation="2.5"/></filter>
  </defs>
);

// ─── Individual visuals — each gets a 320×220 canvas ──────────────────────

function VLeadGen() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Lead Gen Agent visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Funnel */}
      <path d="M70 60h180l-40 60v50l-100 30v-80z" fill="none" stroke="var(--accent)" strokeWidth="1.2" opacity="0.9"/>
      {/* Magnet beams */}
      {[0,1,2,3,4,5].map(i => (
        <circle key={i} r="4" fill="var(--accent)" opacity="0.9">
          <animate attributeName="cx" values="40;160;160" keyTimes="0;0.6;1" dur="3s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
          <animate attributeName="cy" values={`${30 + i * 24};110;160`} keyTimes="0;0.6;1" dur="3s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
          <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
        </circle>
      ))}
      <circle cx="160" cy="160" r="22" fill="url(#svViolet)" filter="url(#svBlur)" opacity="0.6"/>
      <circle cx="160" cy="160" r="14" fill="var(--accent)"/>
      <text x="160" y="165" textAnchor="middle" fill="#fff" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.08em">★</text>
    </svg>
  );
}

function VVoice() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Voice Agent visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Mic */}
      <rect x="148" y="50" width="24" height="50" rx="12" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
      <path d="M134 100a26 26 0 0 0 52 0M160 130v18" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      {/* Waveform bars */}
      {Array.from({length: 24}).map((_, i) => {
        const x = 50 + i * 9;
        return (
          <rect key={i} x={x} y="170" width="3" height="10" rx="1.5" fill="var(--accent)">
            <animate attributeName="height" values="6;30;6" dur="1.2s" repeatCount="indefinite" begin={`${i * 0.05}s`}/>
            <animate attributeName="y" values="172;160;172" dur="1.2s" repeatCount="indefinite" begin={`${i * 0.05}s`}/>
          </rect>
        );
      })}
    </svg>
  );
}

function VContent() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Content Agent visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Document */}
      <rect x="80" y="40" width="160" height="140" rx="8" fill="none" stroke="var(--accent)" strokeWidth="1.2" opacity="0.5"/>
      {/* Lines drawing in */}
      {[0,1,2,3,4].map(i => (
        <line key={i} x1="100" y1={64 + i * 22} x2="220" y2={64 + i * 22} stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" opacity="0.7">
          <animate attributeName="x2" values="100;220;220" keyTimes="0;0.7;1" dur="4s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
        </line>
      ))}
      {/* Cursor */}
      <rect x="220" y="148" width="2" height="18" fill="var(--accent)">
        <animate attributeName="opacity" values="1;0;1" dur="0.9s" repeatCount="indefinite"/>
      </rect>
      <text x="156" y="34" textAnchor="middle" fill="var(--accent)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.12em">CONTENT.AI</text>
    </svg>
  );
}

function V360() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="360 Marketing Agent visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Compass rings */}
      <circle cx="160" cy="110" r="78" fill="none" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="3 5" opacity="0.5">
        <animateTransform attributeName="transform" type="rotate" from="0 160 110" to="360 160 110" dur="22s" repeatCount="indefinite"/>
      </circle>
      <circle cx="160" cy="110" r="58" fill="none" stroke="var(--accent)" strokeWidth="0.6" strokeDasharray="1 4" opacity="0.4">
        <animateTransform attributeName="transform" type="rotate" from="360 160 110" to="0 160 110" dur="18s" repeatCount="indefinite"/>
      </circle>
      {/* Orbiting dots */}
      <g>
        {[0, 90, 180, 270].map((deg, i) => (
          <circle key={i} cx={160 + Math.cos(deg*Math.PI/180)*78} cy={110 + Math.sin(deg*Math.PI/180)*78} r="5" fill="var(--accent)">
            <animate attributeName="opacity" values="0.4;1;0.4" dur="2.4s" repeatCount="indefinite" begin={`${i*0.6}s`}/>
          </circle>
        ))}
      </g>
      <circle cx="160" cy="110" r="20" fill="url(#svViolet)"/>
      <text x="160" y="115" textAnchor="middle" fill="#fff" fontFamily="var(--font-display)" fontSize="14" fontWeight="500" letterSpacing="-0.02em">360°</text>
    </svg>
  );
}

function VChat() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="WhatsApp Chatbot visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Bubble L */}
      <g>
        <rect x="40" y="60" width="120" height="40" rx="20" fill="rgba(255,255,255,0.08)" stroke="var(--accent)" strokeWidth="1"/>
        <circle cx="60" cy="80" r="3" fill="var(--accent)"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite" begin="0s"/></circle>
        <circle cx="74" cy="80" r="3" fill="var(--accent)"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite" begin="0.3s"/></circle>
        <circle cx="88" cy="80" r="3" fill="var(--accent)"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite" begin="0.6s"/></circle>
      </g>
      {/* Bubble R */}
      <g>
        <rect x="160" y="120" width="120" height="44" rx="22" fill="var(--accent)"/>
        <text x="220" y="146" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="#fff" letterSpacing="0.06em">YES — BOOK IT</text>
      </g>
      <path d="M260 168l8 12-2-12z" fill="var(--accent)"/>
    </svg>
  );
}

function VLoop() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="WhatsApp Automation visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <circle cx="160" cy="110" r="60" fill="none" stroke="var(--accent)" strokeWidth="2" strokeDasharray="280" strokeDashoffset="0" strokeLinecap="round" opacity="0.85">
        <animate attributeName="stroke-dashoffset" from="0" to="-376" dur="3s" repeatCount="indefinite"/>
      </circle>
      <path d="M218 100l8 10-12 8" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M102 120l-8-10 12-8" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <text x="160" y="116" textAnchor="middle" fill="#fff" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.12em">AUTO · ON</text>
    </svg>
  );
}

function VFlow() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="CRM Automation visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* 4 pipeline stages */}
      {[0,1,2,3].map(i => (
        <g key={i}>
          <rect x={30 + i * 70} y="90" width="56" height="40" rx="6" fill="rgba(255,255,255,0.04)" stroke="var(--accent)" strokeWidth="1"/>
          <rect x={30 + i * 70} y="90" width="56" height="40" rx="6" fill="var(--accent)" opacity={0.06 + i*0.12}/>
          <text x={58 + i * 70} y="115" textAnchor="middle" fill="#fff" fontFamily="var(--font-mono)" fontSize="10">S{i+1}</text>
        </g>
      ))}
      {/* Traveling lead */}
      <circle r="5" fill="var(--accent)">
        <animate attributeName="cx" values="58;128;198;268" dur="4s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="110;110;110;110" dur="4s" repeatCount="indefinite"/>
      </circle>
      {[0,1,2].map(i => (
        <path key={i} d={`M${86 + i*70} 110h14`} stroke="var(--accent)" strokeWidth="1.5" markerEnd="url(#arrow)" opacity="0.5"/>
      ))}
    </svg>
  );
}

function VNode() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Workflows visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Node graph */}
      {[[60,60],[260,60],[160,110],[60,170],[260,170]].map(([x,y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r="14" fill="rgba(255,255,255,0.05)" stroke="var(--accent)" strokeWidth="1.2"/>
          <circle cx={x} cy={y} r="4" fill="var(--accent)"/>
        </g>
      ))}
      {/* Connecting lines */}
      <g stroke="var(--accent)" strokeWidth="1" opacity="0.55" fill="none" strokeLinecap="round">
        <line x1="74" y1="60" x2="146" y2="110"/>
        <line x1="246" y1="60" x2="174" y2="110"/>
        <line x1="146" y1="110" x2="74" y2="170"/>
        <line x1="174" y1="110" x2="246" y2="170"/>
      </g>
      {/* Pulses */}
      {[0,1].map(i => (
        <circle key={i} r="3" fill="var(--accent)">
          <animateMotion dur="3s" repeatCount="indefinite" begin={`${i*1.5}s`} path="M74,60 L160,110 L246,170"/>
        </circle>
      ))}
    </svg>
  );
}

function VFunnel() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="GoHighLevel Funnels visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <path d="M70 50h180l-40 60v40l-100 30v-70z" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
      <path d="M70 50h180l-40 60v40l-100 30v-70z" fill="url(#svViolet)" opacity="0.15"/>
      {Array.from({length: 5}).map((_, i) => (
        <circle key={i} r="3" fill="var(--accent)" opacity="0.8">
          <animate attributeName="cx" values={`${80 + i*40};160;160`} keyTimes="0;0.6;1" dur="3s" repeatCount="indefinite" begin={`${i*0.3}s`}/>
          <animate attributeName="cy" values="60;120;180" keyTimes="0;0.6;1" dur="3s" repeatCount="indefinite" begin={`${i*0.3}s`}/>
          <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin={`${i*0.3}s`}/>
        </circle>
      ))}
    </svg>
  );
}

function VStack() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="HubSpot Automation visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {[0,1,2].map(i => (
        <g key={i}>
          <ellipse cx="160" cy={70 + i*30} rx="70" ry="14" fill="none" stroke="var(--accent)" strokeWidth="1.2" opacity={1 - i*0.2}/>
          <ellipse cx="160" cy={70 + i*30} rx="70" ry="14" fill="var(--accent)" opacity={0.08 + i*0.06}/>
        </g>
      ))}
      <circle cx="160" cy="70" r="6" fill="var(--accent)">
        <animate attributeName="cy" values="70;130;70" dur="3s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
}

function VMeta() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Meta Ads visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <path d="M40 130 C80 50, 140 50, 160 110 S 240 170, 280 90" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round">
        <animate attributeName="stroke-dasharray" values="0,500;500,0" dur="3s" repeatCount="indefinite"/>
      </path>
      <path d="M40 130 C80 50, 140 50, 160 110 S 240 170, 280 90" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.4" strokeLinecap="round"/>
      <circle r="5" fill="var(--accent)">
        <animateMotion dur="3s" repeatCount="indefinite" path="M40 130 C80 50, 140 50, 160 110 S 240 170, 280 90"/>
      </circle>
    </svg>
  );
}

function VGoogle() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Google Ads visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {[0,1,2,3].map(i => (
        <circle key={i} cx="160" cy="110" r={20 + i*16} fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity={0.85 - i*0.18}>
          <animate attributeName="r" values={`${20 + i*16};${30 + i*16};${20 + i*16}`} dur="3s" repeatCount="indefinite" begin={`${i*0.25}s`}/>
          <animate attributeName="opacity" values={`${0.85 - i*0.18};0;${0.85 - i*0.18}`} dur="3s" repeatCount="indefinite" begin={`${i*0.25}s`}/>
        </circle>
      ))}
      <circle cx="160" cy="110" r="12" fill="var(--accent)"/>
      <text x="160" y="114" textAnchor="middle" fill="#fff" fontFamily="var(--font-display)" fontSize="14" fontWeight="500">G</text>
    </svg>
  );
}

function VPin() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Pinterest Ads visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {/* Pin */}
      <g>
        <path d="M160 50c-18 0-30 14-30 32 0 22 30 60 30 60s30-38 30-60c0-18-12-32-30-32z" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
        <circle cx="160" cy="82" r="9" fill="var(--accent)"/>
        <animateTransform attributeName="transform" type="translate" values="0,-20;0,0;0,-20" dur="2.4s" repeatCount="indefinite"/>
      </g>
      {/* Ripples */}
      {[0,1].map(i => (
        <ellipse key={i} cx="160" cy="160" rx="6" ry="2" fill="none" stroke="var(--accent)" strokeWidth="1">
          <animate attributeName="rx" values="6;60;6" dur="2.4s" repeatCount="indefinite" begin={`${1.2 + i*0.4}s`}/>
          <animate attributeName="opacity" values="0.8;0;0.8" dur="2.4s" repeatCount="indefinite" begin={`${1.2 + i*0.4}s`}/>
        </ellipse>
      ))}
    </svg>
  );
}

function VChart() {
  const bars = [40, 60, 50, 85, 70, 110, 95, 130];
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Performance Marketing visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      {bars.map((h, i) => (
        <rect key={i} x={40 + i * 32} y={190 - h} width="20" height={h} rx="3" fill="url(#svViolet)">
          <animate attributeName="height" values={`0;${h};${h}`} keyTimes="0;0.6;1" dur="2.4s" repeatCount="indefinite" begin={`${i*0.1}s`}/>
          <animate attributeName="y" values={`190;${190 - h};${190 - h}`} keyTimes="0;0.6;1" dur="2.4s" repeatCount="indefinite" begin={`${i*0.1}s`}/>
        </rect>
      ))}
      <path d="M50 150L82 130L114 140L146 100L178 110L210 70L242 80L274 50" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.9"/>
    </svg>
  );
}

function VSearch() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="AI SEO visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <circle cx="140" cy="90" r="38" fill="none" stroke="var(--accent)" strokeWidth="2"/>
      <line x1="170" y1="120" x2="200" y2="150" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"/>
      {/* Sparkles inside */}
      {[[125,80],[155,75],[140,100],[150,95]].map(([x,y], i) => (
        <g key={i} transform={`translate(${x},${y})`}>
          <path d="M0 -4L1.4 -1.4L4 0L1.4 1.4L0 4L-1.4 1.4L-4 0L-1.4 -1.4Z" fill="var(--accent)">
            <animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" repeatCount="indefinite" begin={`${i*0.4}s`}/>
          </path>
        </g>
      ))}
      <text x="160" y="180" textAnchor="middle" fill="var(--accent)" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.12em">GEO · AEO · EEAT</text>
    </svg>
  );
}

function VShare() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Social Media visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <circle cx="80" cy="110" r="14" fill="var(--accent)"/>
      <circle cx="240" cy="60" r="14" fill="none" stroke="var(--accent)" strokeWidth="1.8"/>
      <circle cx="240" cy="160" r="14" fill="none" stroke="var(--accent)" strokeWidth="1.8"/>
      <line x1="92" y1="104" x2="228" y2="68" stroke="var(--accent)" strokeWidth="1"/>
      <line x1="92" y1="116" x2="228" y2="152" stroke="var(--accent)" strokeWidth="1"/>
      <circle r="4" fill="var(--accent)">
        <animateMotion dur="2.4s" repeatCount="indefinite" path="M92 104 L228 68"/>
      </circle>
      <circle r="4" fill="var(--accent)">
        <animateMotion dur="2.4s" repeatCount="indefinite" begin="1.2s" path="M92 116 L228 152"/>
      </circle>
    </svg>
  );
}

function VShape() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Graphic Design visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <rect x="80" y="50" width="80" height="80" rx="6" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
      <circle cx="200" cy="130" r="42" fill="url(#svViolet)" opacity="0.55"/>
      <path d="M180 60l40 0l-20 35z" fill="var(--accent)"/>
      <circle cx="120" cy="170" r="22" fill="none" stroke="var(--accent)" strokeWidth="2"/>
    </svg>
  );
}

function VPlay() {
  return (
    <svg viewBox="0 0 320 220" className="dj-sv-svg" role="img" aria-label="Video Editing visual">
      {SV_DEFS}
      <circle cx="160" cy="110" r="100" fill="url(#svGlow)"/>
      <rect x="60" y="50" width="200" height="120" rx="10" fill="none" stroke="var(--accent)" strokeWidth="1.4"/>
      <circle cx="160" cy="110" r="32" fill="url(#svViolet)"/>
      <path d="M152 95v30l24-15z" fill="#fff"/>
      {/* Timeline */}
      <rect x="60" y="180" width="200" height="6" rx="3" fill="rgba(255,255,255,0.1)"/>
      <rect x="60" y="180" width="60" height="6" rx="3" fill="var(--accent)">
        <animate attributeName="width" values="20;200;20" dur="4s" repeatCount="indefinite"/>
      </rect>
    </svg>
  );
}

// Map by service id (from data.js)
const SERVICE_VISUALS = {
  "lead-gen":      VLeadGen,
  "voice":         VVoice,
  "content":       VContent,
  "360":           V360,
  "whatsapp-bot":  VChat,
  "whatsapp-auto": VLoop,
  "crm":           VFlow,
  "workflows":     VNode,
  "ghl":           VFunnel,
  "hubspot":       VStack,
  "meta":          VMeta,
  "google":        VGoogle,
  "pinterest":     VPin,
  "perf":          VChart,
  "ai-seo":        VSearch,
  "social":        VShare,
  "design":        VShape,
  "video":         VPlay,
};

function ServiceVisual({ id }) {
  const V = SERVICE_VISUALS[id] || V360;
  return <div className="dj-sv"><V/></div>;
}

Object.assign(window, { ServiceVisual });
