// Bespoke SVG artwork for each Webever product family.
// Each illustration is a self-contained scene — abstract, brand-colored,
// suggestive of the product's actual mechanic (chat thread, pipeline, doc,
// flow graph, people, ledger).
// Palette stays consistent: primary = it.color; supports = brand red/yellow/green/blue.

const SolutionArt = {
  // 01 — AI Chatbots & Conversational AI
  // Visual: chat bubbles + waveform, message threads from many sources converging into an agent
  Chatbots: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="chat-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#chat-bg)"/>

      {/* Incoming bubbles (left, neutral) */}
      <g fill="var(--surface)" stroke="var(--border)" strokeWidth="1">
        <path d="M16 30 h 90 a 8 8 0 0 1 8 8 v 14 a 8 8 0 0 1 -8 8 h -78 l -12 8 v -30 a 8 8 0 0 1 0 -8 z"/>
        <path d="M16 70 h 70 a 8 8 0 0 1 8 8 v 12 a 8 8 0 0 1 -8 8 h -58 l -10 6 v -26 a 8 8 0 0 1 -2 -8 z"/>
        <path d="M16 112 h 102 a 8 8 0 0 1 8 8 v 14 a 8 8 0 0 1 -8 8 h -90 l -12 8 v -30 a 8 8 0 0 1 0 -8 z"/>
      </g>
      {/* Bubble content lines */}
      <g stroke="var(--border)" strokeWidth="1" strokeLinecap="round">
        <line x1="26" y1="42" x2="74" y2="42"/>
        <line x1="26" y1="50" x2="62" y2="50"/>
        <line x1="26" y1="82" x2="60" y2="82"/>
        <line x1="26" y1="124" x2="86" y2="124"/>
        <line x1="26" y1="132" x2="70" y2="132"/>
      </g>

      {/* Agent reply (right, brand) */}
      <g fill={color}>
        <path d="M180 50 h 110 a 8 8 0 0 1 8 8 v 22 a 8 8 0 0 1 -8 8 h -100 l -10 8 v -38 a 8 8 0 0 1 0 -8 z" opacity="0.95"/>
      </g>
      <g fill="#fff" opacity="0.95">
        <circle cx="200" cy="62" r="2"/>
        <circle cx="208" cy="62" r="2"/>
        <circle cx="216" cy="62" r="2"/>
      </g>
      <g stroke="#fff" strokeWidth="1.2" strokeLinecap="round" opacity="0.7">
        <line x1="198" y1="74" x2="282" y2="74"/>
        <line x1="198" y1="82" x2="262" y2="82"/>
      </g>

      {/* Waveform across bottom — conversational AI signature */}
      <g stroke={color} strokeWidth="1.6" strokeLinecap="round" fill="none" opacity="0.9">
        <path d="M180 122 v 8 M188 118 v 16 M196 114 v 24 M204 120 v 12 M212 116 v 20 M220 110 v 32 M228 118 v 16 M236 122 v 8 M244 116 v 20 M252 120 v 12 M260 114 v 24 M268 118 v 16 M276 122 v 8 M284 116 v 20"/>
      </g>

      {/* Live dot */}
      <circle cx="304" cy="20" r="3" fill="#14A04A"/>
      <text x="298" y="22" fontSize="7" fontFamily="Geist Mono" fill="#14A04A" textAnchor="end">live</text>
    </svg>
  ),

  // 02 — Startup Management Systems (CRM + Ops)
  // Visual: pipeline kanban columns with deals + a sparkline header
  StartupOps: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ops-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.12"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#ops-bg)"/>

      {/* Sparkline header */}
      <g>
        <path d="M16 36 L 40 30 L 64 34 L 88 24 L 112 28 L 136 18 L 160 22 L 184 12"
              fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/>
        <circle cx="184" cy="12" r="3" fill={color}/>
        <text x="192" y="16" fontSize="9" fontFamily="Geist Mono" fill={color}>+34%</text>
      </g>
      <line x1="16" y1="48" x2="304" y2="48" stroke="var(--border)"/>

      {/* Kanban columns */}
      {[
        { x: 18,  label: 'Lead',     count: 14 },
        { x: 90,  label: 'Qualify',  count: 8  },
        { x: 162, label: 'Propose',  count: 5  },
        { x: 234, label: 'Won',      count: 3  },
      ].map((col, i) => (
        <g key={i}>
          <text x={col.x} y={62} fontSize="8" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">
            {col.label.toUpperCase()}
          </text>
          <text x={col.x + 64} y={62} fontSize="8" fontFamily="Geist Mono" fill={color} textAnchor="end">{col.count}</text>
        </g>
      ))}

      {/* Cards */}
      <g fill="var(--surface)" stroke="var(--border)">
        <rect x="18"  y="68"  width="68" height="22" rx="4"/>
        <rect x="18"  y="94"  width="68" height="22" rx="4"/>
        <rect x="18"  y="120" width="68" height="22" rx="4"/>

        <rect x="90"  y="68"  width="68" height="22" rx="4"/>
        <rect x="90"  y="94"  width="68" height="22" rx="4"/>

        <rect x="162" y="68"  width="68" height="22" rx="4"/>
      </g>
      {/* Won cards highlighted */}
      <g>
        <rect x="234" y="68"  width="68" height="22" rx="4" fill={color} opacity="0.95"/>
        <rect x="234" y="94"  width="68" height="22" rx="4" fill={color} opacity="0.7"/>
        <rect x="234" y="120" width="68" height="22" rx="4" fill={color} opacity="0.45"/>
      </g>

      {/* Card content lines */}
      <g stroke="var(--border)" strokeLinecap="round" strokeWidth="1">
        <line x1="24" y1="76" x2="64" y2="76"/>
        <line x1="24" y1="83" x2="50" y2="83"/>
        <line x1="24" y1="102" x2="68" y2="102"/>
        <line x1="24" y1="109" x2="44" y2="109"/>
        <line x1="24" y1="128" x2="60" y2="128"/>
        <line x1="24" y1="135" x2="48" y2="135"/>
        <line x1="96" y1="76" x2="140" y2="76"/>
        <line x1="96" y1="83" x2="124" y2="83"/>
        <line x1="96" y1="102" x2="146" y2="102"/>
        <line x1="168" y1="76" x2="218" y2="76"/>
        <line x1="168" y1="83" x2="200" y2="83"/>
      </g>
    </svg>
  ),

  // 03 — Smart Document Processing
  // Visual: stack of documents with extraction box highlighting fields
  Documents: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="doc-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#doc-bg)"/>

      {/* Stack of 3 documents - back, mid, front */}
      <g>
        {/* Back doc */}
        <rect x="50" y="22" width="120" height="130" rx="6" fill="var(--surface)" stroke="var(--border)" transform="rotate(-7 110 87)"/>
        {/* Mid doc */}
        <rect x="64" y="18" width="120" height="130" rx="6" fill="var(--surface)" stroke="var(--border)" transform="rotate(-3 124 83)"/>
        {/* Front doc */}
        <g>
          <rect x="80" y="14" width="124" height="134" rx="6" fill="var(--surface)" stroke="var(--border)"/>
          {/* Folded corner */}
          <path d="M188 14 L 204 14 L 204 30 Z" fill={color} opacity="0.15"/>
          <path d="M188 14 L 204 30" stroke="var(--border)"/>

          {/* Header */}
          <rect x="90" y="24" width="50" height="6" rx="2" fill={color} opacity="0.9"/>
          <rect x="90" y="34" width="80" height="3" rx="1.5" fill="var(--border)"/>

          {/* Body lines */}
          {[50, 60, 70, 80, 100, 110, 120].map((y, i) => (
            <rect key={i} x="90" y={y} width={i === 3 ? 70 : i === 6 ? 50 : 100} height="2.5" rx="1" fill="var(--border)"/>
          ))}

          {/* Extraction highlight: total amount */}
          <rect x="86" y="92" width="112" height="14" rx="2" fill="none" stroke={color} strokeWidth="1.5" strokeDasharray="3 2"/>
          <rect x="156" y="95" width="38" height="8" rx="1" fill={color} opacity="0.25"/>

          {/* Bottom signature line */}
          <line x1="90" y1="138" x2="140" y2="138" stroke="var(--border)"/>
        </g>
      </g>

      {/* Extraction → JSON output */}
      <g>
        <path d="M212 90 Q 240 90 240 70 L 240 50" fill="none" stroke={color} strokeWidth="1.4" strokeDasharray="3 3"/>
        <polygon points="240,46 237,52 243,52" fill={color}/>
      </g>

      {/* JSON badge */}
      <g>
        <rect x="232" y="22" width="76" height="26" rx="4" fill={color}/>
        <text x="240" y="33" fontSize="7" fontFamily="Geist Mono" fill="#fff" letterSpacing="0.5">EXTRACTED</text>
        <text x="240" y="43" fontSize="9" fontFamily="Geist Mono" fontWeight="600" fill="#fff">$ 12,480.00</text>
      </g>

      {/* Confidence ring */}
      <g transform="translate(290 130)">
        <circle r="14" fill="var(--surface)" stroke="var(--border)"/>
        <circle r="14" fill="none" stroke="#14A04A" strokeWidth="2" strokeDasharray="86.4" strokeDashoffset="2" transform="rotate(-90)"/>
        <text fontSize="8" fontFamily="Geist Mono" fontWeight="600" fill="#14A04A" textAnchor="middle" y="3">98%</text>
      </g>
    </svg>
  ),

  // 04 — Business Workflow Automation
  // Visual: node graph with branching flow + triggers
  Workflow: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="wf-bg" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#wf-bg)"/>

      {/* Connecting lines */}
      <g fill="none" stroke={color} strokeWidth="1.4" opacity="0.55">
        <path d="M52 80 L 116 80"/>
        <path d="M152 80 C 180 80, 180 40, 208 40"/>
        <path d="M152 80 L 208 80"/>
        <path d="M152 80 C 180 80, 180 120, 208 120"/>
        <path d="M244 40 C 268 40, 268 80, 290 80"/>
        <path d="M244 80 L 290 80"/>
        <path d="M244 120 C 268 120, 268 80, 290 80"/>
      </g>
      {/* Animated dashed overlay on connections */}
      <g fill="none" stroke={color} strokeWidth="1.4" strokeDasharray="3 5" opacity="0.9">
        <path d="M52 80 L 116 80"/>
        <path d="M152 80 L 208 80"/>
        <path d="M244 80 L 290 80"/>
      </g>

      {/* Trigger node (left) */}
      <g>
        <rect x="20" y="62" width="36" height="36" rx="8" fill={color}/>
        <path d="M30 80 L 38 72 L 38 78 L 46 78 L 46 82 L 38 82 L 38 88 Z" fill="#fff"/>
        <text x="38" y="110" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">TRIGGER</text>
      </g>

      {/* Decision diamond (center) */}
      <g>
        <polygon points="134,62 152,80 134,98 116,80" fill="var(--surface)" stroke={color} strokeWidth="1.5"/>
        <text x="134" y="83" fontSize="8" fontFamily="Geist Mono" fill={color} textAnchor="middle" fontWeight="600">if</text>
        <text x="134" y="112" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">DECIDE</text>
      </g>

      {/* 3 branches */}
      <g>
        {/* Top branch (auto-approve) */}
        <rect x="208" y="24" width="36" height="32" rx="6" fill="var(--surface)" stroke={color}/>
        <circle cx="226" cy="40" r="6" fill="#14A04A"/>
        <path d="M222 40 L 225 43 L 230 38" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>

        {/* Middle branch (escalate) */}
        <rect x="208" y="64" width="36" height="32" rx="6" fill="var(--surface)" stroke={color}/>
        <g transform="translate(226 80)">
          <circle r="6" fill="#F5C518"/>
          <line x1="0" y1="-3" x2="0" y2="1" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/>
          <circle cx="0" cy="3" r="0.8" fill="#fff"/>
        </g>

        {/* Bottom branch (notify human) */}
        <rect x="208" y="104" width="36" height="32" rx="6" fill="var(--surface)" stroke={color}/>
        <g transform="translate(226 120)" fill="none" stroke="#1B7BD6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="0" cy="-2" r="2.5"/>
          <path d="M-5 6 Q 0 1 5 6"/>
        </g>
      </g>

      {/* Output / commit (right) */}
      <g>
        <rect x="290" y="62" width="20" height="36" rx="4" fill={color} opacity="0.2"/>
        <rect x="290" y="62" width="20" height="36" rx="4" fill="none" stroke={color} strokeWidth="1.5"/>
        <line x1="294" y1="74" x2="306" y2="74" stroke={color} strokeWidth="1.4"/>
        <line x1="294" y1="82" x2="304" y2="82" stroke={color} strokeWidth="1.4"/>
        <line x1="294" y1="90" x2="306" y2="90" stroke={color} strokeWidth="1.4"/>
      </g>
    </svg>
  ),

  // 05 — HRMS — AI Employee Lifecycle
  // Visual: pipeline of people avatars across lifecycle stages with progress
  HRMS: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#hr-bg)"/>

      {/* Lifecycle track */}
      <line x1="32" y1="80" x2="288" y2="80" stroke="var(--border)" strokeWidth="2"/>
      <line x1="32" y1="80" x2="208" y2="80" stroke={color} strokeWidth="2"/>

      {/* Stages */}
      {[
        { x: 32,  label: 'HIRE',     state: 'done' },
        { x: 96,  label: 'ONBOARD',  state: 'done' },
        { x: 160, label: 'GROW',     state: 'done' },
        { x: 224, label: 'RETAIN',   state: 'active' },
        { x: 288, label: 'EXIT',     state: 'pending' },
      ].map((s, i) => {
        const fill = s.state === 'pending' ? 'var(--surface)' : color;
        const ringOpacity = s.state === 'active' ? 0.4 : 0;
        return (
          <g key={i}>
            {s.state === 'active' && <circle cx={s.x} cy="80" r="14" fill={color} opacity={ringOpacity}/>}
            <circle cx={s.x} cy="80" r="8" fill={fill} stroke={s.state === 'pending' ? 'var(--border)' : color} strokeWidth="1.5"/>
            {s.state === 'done' && (
              <path d={`M${s.x-3} 80 L ${s.x-1} 82 L ${s.x+3} 78`}
                    stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            )}
            <text x={s.x} y="106" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle" letterSpacing="1">
              {s.label}
            </text>
          </g>
        );
      })}

      {/* Top row: candidate avatars (heads) */}
      {[
        { x: 32, c: '#E63329' }, { x: 96, c: '#F5C518' },
        { x: 160, c: '#14A04A' }, { x: 224, c: '#1B7BD6' }, { x: 288, c: 'var(--muted)' },
      ].map((p, i) => (
        <g key={i} transform={`translate(${p.x} 36)`}>
          <rect x="-16" y="-16" width="32" height="32" rx="6" fill="var(--surface)" stroke="var(--border)"/>
          <circle cx="0" cy="-3" r="4" fill={p.c} opacity={i === 4 ? 0.4 : 0.85}/>
          <path d="M-8 8 Q 0 0 8 8" stroke={p.c} strokeWidth="1.5" fill="none" opacity={i === 4 ? 0.4 : 0.85}/>
        </g>
      ))}

      {/* Stat callouts */}
      <g>
        <text x="32" y="138" fontSize="7" fontFamily="Geist Mono" fill={color} textAnchor="middle">12 hired</text>
        <text x="160" y="138" fontSize="7" fontFamily="Geist Mono" fill={color} textAnchor="middle">+8% perf</text>
        <text x="224" y="138" fontSize="7" fontFamily="Geist Mono" fill={color} textAnchor="middle" fontWeight="600">94% retain</text>
      </g>

      {/* Top label */}
      <text x="160" y="14" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle" letterSpacing="1.5">EMPLOYEE LIFECYCLE</text>
    </svg>
  ),

  // 06 — AI-Enabled ERP
  // Visual: ledger / 3D cube layers (finance, inventory, ops) + forecast line
  ERP: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="erp-bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="erp-fcst" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={color} stopOpacity="0.6"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#erp-bg)"/>

      {/* Ledger card stack on left */}
      <g transform="translate(20 22)">
        {/* Stack shadows */}
        <rect x="6" y="6" width="120" height="116" rx="6" fill="var(--surface)" stroke="var(--border)"/>
        <rect x="3" y="3" width="120" height="116" rx="6" fill="var(--surface)" stroke="var(--border)"/>
        {/* Front ledger */}
        <rect x="0" y="0" width="120" height="116" rx="6" fill="var(--surface)" stroke="var(--border)"/>

        {/* Header */}
        <rect x="0" y="0" width="120" height="20" rx="6" fill={color} opacity="0.95"/>
        <text x="8" y="13" fontSize="7" fontFamily="Geist Mono" fontWeight="600" fill="#fff" letterSpacing="1">GENERAL LEDGER</text>

        {/* Rows */}
        {[
          { y: 30, k: 'A/R',       v: '+ 412.8K',  c: '#14A04A' },
          { y: 46, k: 'A/P',       v: '− 188.2K',  c: '#E63329' },
          { y: 62, k: 'Inventory', v: '  926.0K',  c: 'var(--text)' },
          { y: 78, k: 'COGS',      v: '− 244.4K',  c: '#E63329' },
          { y: 94, k: 'Net',       v: '+ 906.2K',  c: '#14A04A', bold: true },
        ].map((r, i) => (
          <g key={i}>
            {r.bold && <rect x="4" y={r.y - 10} width="112" height="14" rx="2" fill={color} opacity="0.10"/>}
            <text x="8"   y={r.y} fontSize="8" fontFamily="Geist Mono" fill="var(--muted)">{r.k}</text>
            <text x="112" y={r.y} fontSize="8" fontFamily="Geist Mono" fontWeight={r.bold ? 600 : 400} fill={r.c} textAnchor="end">{r.v}</text>
            {!r.bold && <line x1="8" y1={r.y + 3} x2="112" y2={r.y + 3} stroke="var(--border)"/>}
          </g>
        ))}
      </g>

      {/* Right: forecast chart panel */}
      <g transform="translate(160 22)">
        <rect x="0" y="0" width="140" height="116" rx="6" fill="var(--surface)" stroke="var(--border)"/>

        {/* Title */}
        <text x="8" y="14" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">AI FORECAST · 90D</text>
        <circle cx="128" cy="11" r="2" fill="#14A04A"/>

        {/* Axis baseline */}
        <line x1="8" y1="92" x2="132" y2="92" stroke="var(--border)"/>

        {/* Historical bars */}
        {[40, 56, 48, 70, 60, 78].map((h, i) => (
          <rect key={i} x={10 + i*10} y={92 - h * 0.6} width="6" height={h * 0.6} rx="1" fill="var(--border)"/>
        ))}

        {/* Forecast area */}
        <path d="M70 70 L 80 60 L 90 56 L 100 48 L 110 44 L 120 38 L 130 30 L 130 92 L 70 92 Z"
              fill="url(#erp-fcst)" opacity="0.6"/>
        {/* Forecast line */}
        <path d="M70 70 L 80 60 L 90 56 L 100 48 L 110 44 L 120 38 L 130 30"
              fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
        {/* Forecast endpoint */}
        <circle cx="130" cy="30" r="3" fill={color}/>
        <circle cx="130" cy="30" r="6" fill={color} opacity="0.25"/>

        {/* Anomaly marker */}
        <g transform="translate(50 56)">
          <circle r="5" fill="none" stroke="#E63329" strokeWidth="1.4" strokeDasharray="2 2"/>
          <circle r="1.6" fill="#E63329"/>
        </g>
        <text x="40" y="46" fontSize="6.5" fontFamily="Geist Mono" fill="#E63329">anomaly</text>

        {/* Bottom legend */}
        <g transform="translate(8 106)">
          <rect width="6" height="3" fill="var(--border)"/>
          <text x="10" y="3" fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)">actual</text>
          <rect x="50" width="6" height="3" fill={color}/>
          <text x="60" y="3" fontSize="6.5" fontFamily="Geist Mono" fill={color}>predicted</text>
        </g>
      </g>
    </svg>
  ),
};

window.SolutionArt = SolutionArt;
