// Bespoke SVG artwork for Rocketberry's Digital Services line
// (complementary to the AI product families in solution-art.jsx)

const ServiceArt = {
  // 01 — Web Development
  // Visual: browser window with code editor + live preview, brand-red accent
  WebDev: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="wd-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(#wd-bg)"/>

      {/* Browser frame */}
      <g>
        <rect x="20" y="20" width="280" height="124" rx="8" fill="var(--surface)" stroke="var(--border)"/>
        {/* Title bar */}
        <rect x="20" y="20" width="280" height="20" rx="8" fill="var(--surface)" stroke="var(--border)"/>
        <rect x="20" y="34" width="280" height="6" fill="var(--surface)"/>
        <line x1="20" y1="40" x2="300" y2="40" stroke="var(--border)"/>
        {/* Traffic lights */}
        <circle cx="32" cy="30" r="3" fill="#D6248C"/>
        <circle cx="42" cy="30" r="3" fill="#A14BCC"/>
        <circle cx="52" cy="30" r="3" fill="#7027A8"/>
        {/* URL pill */}
        <rect x="74" y="24" width="120" height="12" rx="6" fill="var(--bg)" stroke="var(--border)"/>
        <text x="80" y="33" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)">www.rocketberry.co</text>
      </g>

      {/* Split: left = code, right = preview */}
      {/* Code column */}
      <g>
        <rect x="20" y="40" width="120" height="104" fill="var(--bg)"/>
        <line x1="140" y1="40" x2="140" y2="144" stroke="var(--border)"/>
        {/* Line numbers + code */}
        {[
          { y: 56, n: '1', a: 30, b: 22 },
          { y: 67, n: '2', a: 50, b: 14 },
          { y: 78, n: '3', a: 24, b: 36 },
          { y: 89, n: '4', a: 60, b: 0 },
          { y: 100, n: '5', a: 18, b: 28 },
          { y: 111, n: '6', a: 44, b: 22 },
          { y: 122, n: '7', a: 36, b: 18 },
          { y: 133, n: '8', a: 0, b: 0 },
        ].map((l, i) => (
          <g key={i}>
            <text x="28" y={l.y} fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" opacity="0.5">{l.n}</text>
            <rect x="38" y={l.y - 5} width={l.a} height="3" rx="1" fill={color} opacity="0.7"/>
            {l.b > 0 && <rect x={40 + l.a} y={l.y - 5} width={l.b} height="3" rx="1" fill="var(--border)"/>}
          </g>
        ))}
        {/* Bracket / closing */}
        <text x="38" y="138" fontSize="9" fontFamily="Geist Mono" fill={color}>{'</>'}</text>
      </g>

      {/* Preview column */}
      <g>
        <rect x="140" y="40" width="160" height="104" fill="#fff"/>
        {/* Hero bar */}
        <rect x="148" y="50" width="80" height="6" rx="2" fill={color}/>
        <rect x="148" y="60" width="120" height="3" rx="1.5" fill="#000" opacity="0.15"/>
        <rect x="148" y="66" width="100" height="3" rx="1.5" fill="#000" opacity="0.15"/>
        {/* CTA button */}
        <rect x="148" y="76" width="40" height="12" rx="3" fill={color}/>
        <rect x="190" y="76" width="40" height="12" rx="3" fill="none" stroke="#000" strokeOpacity="0.2"/>
        {/* 3 image cards */}
        <rect x="148" y="98" width="44" height="36" rx="3" fill="#000" fillOpacity="0.06"/>
        <rect x="196" y="98" width="44" height="36" rx="3" fill="#000" fillOpacity="0.06"/>
        <rect x="244" y="98" width="44" height="36" rx="3" fill="#000" fillOpacity="0.06"/>
        <line x1="156" y1="120" x2="184" y2="120" stroke={color} strokeWidth="0.8"/>
        <line x1="204" y1="120" x2="228" y2="120" stroke={color} strokeWidth="0.8"/>
        <line x1="252" y1="120" x2="280" y2="120" stroke={color} strokeWidth="0.8"/>
      </g>

      {/* Lighthouse-style score */}
      <g transform="translate(286 56)">
        <circle r="11" fill="var(--surface)" stroke="#7027A8" strokeWidth="2"/>
        <text fontSize="8" fontFamily="Geist Mono" fontWeight="600" fill="#7027A8" textAnchor="middle" y="3">98</text>
      </g>
    </svg>
  ),

  // 02 — Digital Marketing
  // Visual: funnel with audience → conversions, growth chart + channel chips
  Marketing: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="dm-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>
        <linearGradient id="dm-funnel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.15"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.55"/>
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill="url(#dm-bg)"/>

      {/* Channel chips floating in (audience top) */}
      <g>
        {[
          { x: 30,  y: 24, l: 'SEO',     c: '#7027A8' },
          { x: 80,  y: 18, l: 'Ads',     c: '#D6248C' },
          { x: 130, y: 26, l: 'Social',  c: '#1F2754' },
          { x: 184, y: 18, l: 'Email',   c: '#A14BCC' },
          { x: 240, y: 24, l: 'Content', c: '#1F2754' },
        ].map((ch, i) => (
          <g key={i}>
            <rect x={ch.x} y={ch.y} width="42" height="14" rx="7" fill="var(--surface)" stroke={ch.c} strokeWidth="1"/>
            <text x={ch.x + 21} y={ch.y + 9.5} fontSize="7" fontFamily="Geist Mono" fill={ch.c} textAnchor="middle">{ch.l}</text>
          </g>
        ))}
      </g>

      {/* Convergence arrows down to funnel */}
      <g stroke={color} strokeWidth="1" opacity="0.45" strokeDasharray="2 3">
        <line x1="51" y1="40" x2="120" y2="58"/>
        <line x1="101" y1="34" x2="140" y2="58"/>
        <line x1="151" y1="42" x2="160" y2="58"/>
        <line x1="205" y1="34" x2="180" y2="58"/>
        <line x1="261" y1="40" x2="200" y2="58"/>
      </g>

      {/* Funnel */}
      <g>
        <polygon points="100,60 220,60 200,90 120,90" fill="url(#dm-funnel)" stroke={color} strokeWidth="1"/>
        <polygon points="120,92 200,92 184,118 136,118" fill="url(#dm-funnel)" stroke={color} strokeWidth="1" opacity="0.85"/>
        <polygon points="136,120 184,120 172,142 148,142" fill={color} stroke={color} strokeWidth="1"/>
        {/* Stage labels */}
        <text x="92" y="78" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="end">Reach</text>
        <text x="92" y="108" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="end">Engage</text>
        <text x="92" y="134" fontSize="7" fontFamily="Geist Mono" fill={color} textAnchor="end" fontWeight="600">Convert</text>

        <text x="228" y="78" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)">128k</text>
        <text x="228" y="108" fontSize="7" fontFamily="Geist Mono" fill="var(--muted)">14k</text>
        <text x="228" y="134" fontSize="7" fontFamily="Geist Mono" fill={color} fontWeight="600">2.4k</text>
      </g>

      {/* Growth sparkline (right) */}
      <g transform="translate(244 100)">
        <text fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">ROAS</text>
        <text x="56" fontSize="9" fontFamily="Geist Mono" fontWeight="600" fill={color} textAnchor="end">3.4×</text>
        <path d="M0 32 L 8 28 L 16 30 L 24 22 L 32 24 L 40 16 L 48 12 L 56 6"
              fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
        <circle cx="56" cy="6" r="2" fill={color}/>
      </g>
    </svg>
  ),

  // 03 — Graphic Design
  // Visual: brand sheet — logo mark, palette swatches, type sample
  GraphicDesign: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="gd-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(#gd-bg)"/>

      {/* Sheet */}
      <rect x="20" y="20" width="280" height="124" rx="6" fill="var(--surface)" stroke="var(--border)"/>

      {/* Top stripe */}
      <rect x="20" y="20" width="280" height="6" rx="6" fill={color}/>
      <rect x="20" y="22" width="280" height="4" fill={color}/>

      {/* Left: logo lockup */}
      <g transform="translate(36 50)">
        {/* Mark — concentric arcs (logo-y) */}
        <g>
          <circle r="22" fill="none" stroke={color} strokeWidth="1.5"/>
          <path d="M -16 0 A 16 16 0 0 1 16 0" fill="none" stroke="#A14BCC" strokeWidth="2.5" strokeLinecap="round"/>
          <path d="M 0 -10 A 10 10 0 0 0 0 10" fill="none" stroke="#1F2754" strokeWidth="2.5" strokeLinecap="round"/>
          <circle r="3.5" fill={color}/>
        </g>
        <text x="34" y="-3" fontSize="11" fontFamily="Geist" fontWeight="700" fill="var(--text)">brand</text>
        <text x="34" y="11" fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1.5">IDENTITY</text>
      </g>

      {/* Middle: type stack */}
      <g transform="translate(116 38)">
        <text fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">DISPLAY</text>
        <text x="0" y="14" fontSize="20" fontFamily="Geist" fontWeight="700" fill="var(--text)" letterSpacing="-0.05em">Aa</text>
        <text x="32" y="14" fontSize="20" fontFamily="Geist" fontWeight="400" fill={color} letterSpacing="-0.05em">Bb</text>
        <text x="0" y="34" fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">BODY</text>
        <text x="0" y="48" fontSize="11" fontFamily="Geist" fontWeight="500" fill="var(--text)">Quick fox jumps.</text>
        {/* Spec lines */}
        <g stroke="var(--border)" strokeDasharray="2 2">
          <line x1="0" y1="22" x2="80" y2="22"/>
          <line x1="0" y1="56" x2="80" y2="56"/>
        </g>
      </g>

      {/* Right: palette swatches */}
      <g transform="translate(220 38)">
        <text fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="1">PALETTE</text>
        <g transform="translate(0 8)">
          {[
            { c: '#D6248C', name: 'R/05' },
            { c: '#A14BCC', name: 'Y/03' },
            { c: '#7027A8', name: 'G/06' },
            { c: '#1F2754', name: 'B/04' },
          ].map((s, i) => {
            const row = Math.floor(i / 2), col = i % 2;
            return (
              <g key={i} transform={`translate(${col * 36} ${row * 32})`}>
                <rect width="32" height="22" rx="3" fill={s.c}/>
                <text x="0" y="30" fontSize="6" fontFamily="Geist Mono" fill="var(--muted)">{s.name}</text>
              </g>
            );
          })}
        </g>
      </g>

      {/* Cropmarks — corners */}
      <g stroke={color} strokeWidth="0.8">
        <line x1="14" y1="20" x2="20" y2="20"/><line x1="20" y1="14" x2="20" y2="20"/>
        <line x1="306" y1="20" x2="300" y2="20"/><line x1="300" y1="14" x2="300" y2="20"/>
        <line x1="14" y1="144" x2="20" y2="144"/><line x1="20" y1="150" x2="20" y2="144"/>
        <line x1="306" y1="144" x2="300" y2="144"/><line x1="300" y1="150" x2="300" y2="144"/>
      </g>
    </svg>
  ),

  // 04 — eCommerce & CMS
  // Visual: product grid + storefront with CMS edit handles
  Ecommerce: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ec-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(#ec-bg)"/>

      {/* Storefront frame */}
      <rect x="20" y="20" width="220" height="124" rx="6" fill="var(--surface)" stroke="var(--border)"/>
      {/* Header */}
      <line x1="20" y1="36" x2="240" y2="36" stroke="var(--border)"/>
      <text x="28" y="30" fontSize="8" fontFamily="Geist" fontWeight="700" fill={color}>store/</text>
      <g transform="translate(180 24)">
        <rect width="50" height="10" rx="2" fill="var(--bg)" stroke="var(--border)"/>
        <text x="25" y="7.5" fontSize="6" fontFamily="Geist Mono" fill="var(--muted)" textAnchor="middle">search…</text>
      </g>

      {/* Product cards 2x3 */}
      {[0, 1, 2, 3, 4, 5].map((i) => {
        const col = i % 3, row = Math.floor(i / 3);
        const x = 28 + col * 70, y = 46 + row * 48;
        const onSale = i === 1 || i === 4;
        return (
          <g key={i} transform={`translate(${x} ${y})`}>
            <rect width="64" height="42" rx="4" fill="var(--bg)" stroke="var(--border)"/>
            {/* Product silhouette */}
            <rect x="6" y="6" width="52" height="22" rx="2" fill={i % 2 === 0 ? color : 'var(--border)'} opacity={i % 2 === 0 ? 0.55 : 1}/>
            {/* Title + price */}
            <rect x="6" y="32" width="34" height="2" fill="var(--border)"/>
            <text x="58" y="34" fontSize="6.5" fontFamily="Geist Mono" fontWeight="600" fill={color} textAnchor="end">${(i+1)*9}</text>
            {/* Sale badge */}
            {onSale && (
              <g>
                <rect x="42" y="6" width="20" height="9" rx="2" fill="#D6248C"/>
                <text x="52" y="13" fontSize="6" fontFamily="Geist Mono" fill="#fff" textAnchor="middle">SALE</text>
              </g>
            )}
          </g>
        );
      })}

      {/* CMS edit panel (right side) */}
      <g transform="translate(252 30)">
        <rect width="48" height="114" rx="6" fill={color} opacity="0.08"/>
        <rect width="48" height="114" rx="6" fill="none" stroke={color} strokeDasharray="3 2"/>
        <text x="24" y="14" fontSize="6.5" fontFamily="Geist Mono" fontWeight="600" fill={color} textAnchor="middle" letterSpacing="1">CMS</text>
        {/* Field rows */}
        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
          <g key={i} transform={`translate(6 ${24 + i * 12})`}>
            <rect width="36" height="8" rx="1.5" fill="var(--surface)" stroke={color} strokeOpacity="0.3"/>
            <line x1="3" y1="4" x2={6 + (i % 4) * 6} y2="4" stroke={color} strokeWidth="1.2" opacity="0.7"/>
          </g>
        ))}
      </g>

      {/* Cart pill */}
      <g transform="translate(204 124)">
        <rect width="32" height="14" rx="7" fill={color}/>
        <text x="16" y="9.5" fontSize="6.5" fontFamily="Geist Mono" fontWeight="600" fill="#fff" textAnchor="middle">CART · 3</text>
      </g>
    </svg>
  ),

  // 05 — All IT Service Bundle
  // Visual: stack of service tiles with the bundle wrapper highlighting them
  ITBundle: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="it-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(#it-bg)"/>

      {/* Bundle wrapper */}
      <rect x="14" y="16" width="292" height="128" rx="10" fill="none" stroke={color} strokeWidth="1.4" strokeDasharray="6 4"/>
      <g transform="translate(160 11)">
        <rect x="-30" y="0" width="60" height="14" rx="7" fill={color}/>
        <text x="0" y="9.5" fontSize="7" fontFamily="Geist Mono" fontWeight="600" fill="#fff" textAnchor="middle" letterSpacing="1">BUNDLE · 9</text>
      </g>

      {/* 9 service tiles in a 3x3 grid */}
      {[
        { l: 'Web',     c: '#D6248C', i: 'web'   },
        { l: 'Mobile',  c: '#A14BCC', i: 'mob'   },
        { l: 'Cloud',   c: '#1F2754', i: 'cloud' },
        { l: 'AI',      c: '#D6248C', i: 'ai'    },
        { l: 'Data',    c: '#7027A8', i: 'data'  },
        { l: 'DevOps',  c: '#1F2754', i: 'dev'   },
        { l: 'Sec',     c: '#7027A8', i: 'sec'   },
        { l: 'Support', c: '#A14BCC', i: 'sup'   },
        { l: 'Growth',  c: '#D6248C', i: 'gro'   },
      ].map((t, idx) => {
        const col = idx % 3, row = Math.floor(idx / 3);
        const x = 36 + col * 84, y = 36 + row * 36;
        return (
          <g key={idx} transform={`translate(${x} ${y})`}>
            <rect width="74" height="28" rx="5" fill="var(--surface)" stroke="var(--border)"/>
            <rect x="0" y="0" width="3" height="28" rx="5" fill={t.c}/>
            {/* Mini glyph */}
            <g transform="translate(12 14)" stroke={t.c} strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round">
              {t.i === 'web'   && <><rect x="-5" y="-5" width="10" height="10" rx="1.5"/><line x1="-5" y1="-2" x2="5" y2="-2"/></>}
              {t.i === 'mob'   && <><rect x="-3" y="-6" width="6" height="12" rx="1.5"/><circle cx="0" cy="4" r="0.8" fill={t.c}/></>}
              {t.i === 'cloud' && <path d="M -5 2 a 3 3 0 0 1 1 -5 a 4 4 0 0 1 7 1 a 3 3 0 0 1 0 4 z"/>}
              {t.i === 'ai'    && <><circle cx="0" cy="0" r="4"/><circle cx="-1.2" cy="-0.5" r="0.6" fill={t.c}/><circle cx="1.2" cy="-0.5" r="0.6" fill={t.c}/></>}
              {t.i === 'data'  && <><rect x="-5" y="-3" width="10" height="2"/><rect x="-5" y="0" width="10" height="2"/><rect x="-5" y="3" width="10" height="2"/></>}
              {t.i === 'dev'   && <><circle cx="-3" cy="0" r="1.5"/><circle cx="3" cy="0" r="1.5"/><line x1="-3" y1="0" x2="3" y2="0"/></>}
              {t.i === 'sec'   && <path d="M 0 -5 L 4 -3 V 1 Q 4 4 0 5 Q -4 4 -4 1 V -3 Z"/>}
              {t.i === 'sup'   && <><circle cx="0" cy="0" r="4.5"/><line x1="0" y1="-1" x2="0" y2="1"/><circle cx="0" cy="2.5" r="0.5" fill={t.c}/></>}
              {t.i === 'gro'   && <><path d="M -4 3 L -1 0 L 1 2 L 4 -3"/><path d="M 1 -3 L 4 -3 L 4 0"/></>}
            </g>
            <text x="26" y="13" fontSize="8" fontFamily="Geist" fontWeight="600" fill="var(--text)">{t.l}</text>
            <text x="26" y="22" fontSize="6.5" fontFamily="Geist Mono" fill="var(--muted)" letterSpacing="0.5">24/7</text>
          </g>
        );
      })}
    </svg>
  ),

  // 06 — Mobile App Development
  // Visual: phone mockup + tablet + responsive layouts
  MobileApp: ({ color }) => (
    <svg viewBox="0 0 320 160" className="w-full h-full" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="mb-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(#mb-bg)"/>

      {/* Tablet (back) */}
      <g>
        <rect x="40" y="30" width="120" height="116" rx="10" fill="var(--surface)" stroke="var(--border)" strokeWidth="1.5"/>
        <rect x="46" y="36" width="108" height="92" rx="3" fill="var(--bg)"/>
        {/* Tablet content */}
        <rect x="50" y="40" width="100" height="14" rx="2" fill={color} opacity="0.85"/>
        <rect x="50" y="58" width="48" height="32" rx="2" fill="var(--surface)" stroke="var(--border)"/>
        <rect x="102" y="58" width="48" height="32" rx="2" fill="var(--surface)" stroke="var(--border)"/>
        <rect x="50" y="94" width="100" height="6" rx="1.5" fill="var(--border)"/>
        <rect x="50" y="104" width="74" height="6" rx="1.5" fill="var(--border)"/>
        <rect x="50" y="114" width="86" height="6" rx="1.5" fill="var(--border)"/>
        <circle cx="100" cy="138" r="3" fill="none" stroke="var(--muted)"/>
      </g>

      {/* Phone (front, overlapping right) */}
      <g>
        <rect x="180" y="20" width="64" height="124" rx="10" fill="var(--surface)" stroke="var(--border)" strokeWidth="1.5"/>
        {/* Notch */}
        <rect x="200" y="22" width="24" height="3" rx="1.5" fill="var(--border)"/>
        {/* Screen */}
        <rect x="184" y="30" width="56" height="100" rx="3" fill="var(--bg)"/>
        {/* Status */}
        <text x="190" y="38" fontSize="5" fontFamily="Geist Mono" fill="var(--muted)">9:41</text>
        {/* Header card */}
        <rect x="188" y="42" width="48" height="20" rx="2" fill={color}/>
        <rect x="192" y="48" width="20" height="3" rx="1" fill="#fff"/>
        <rect x="192" y="54" width="32" height="2" rx="1" fill="#fff" opacity="0.6"/>
        {/* List items */}
        {[68, 80, 92, 104].map((y, i) => (
          <g key={i}>
            <rect x="188" y={y} width="48" height="10" rx="2" fill="var(--surface)" stroke="var(--border)"/>
            <circle cx="194" cy={y + 5} r="2" fill={color} opacity="0.7"/>
            <rect x="200" y={y + 3} width={14 + (i % 2) * 10} height="1.6" rx="0.8" fill="var(--border)"/>
            <rect x="200" y={y + 6.5} width={10 + (i % 3) * 6} height="1.4" rx="0.7" fill="var(--border)"/>
          </g>
        ))}
        {/* Bottom nav */}
        <line x1="184" y1="120" x2="240" y2="120" stroke="var(--border)"/>
        {[0, 1, 2, 3].map((i) => (
          <circle key={i} cx={194 + i * 12} cy="126" r="1.5" fill={i === 0 ? color : 'var(--border)'}/>
        ))}
        {/* Home indicator */}
        <rect x="200" y="138" width="24" height="2" rx="1" fill="var(--border)"/>
      </g>

      {/* Floating tags */}
      <g transform="translate(266 38)">
        <rect width="42" height="14" rx="7" fill="var(--surface)" stroke={color}/>
        <text x="21" y="9.5" fontSize="6.5" fontFamily="Geist Mono" fill={color} textAnchor="middle">iOS · AND</text>
      </g>
      <g transform="translate(20 130)">
        <rect width="44" height="14" rx="7" fill={color}/>
        <text x="22" y="9.5" fontSize="6.5" fontFamily="Geist Mono" fontWeight="600" fill="#fff" textAnchor="middle">RESPONSIVE</text>
      </g>
    </svg>
  ),
};

window.ServiceArt = ServiceArt;
