/* Bespoke SVG illustrations, diagrams, and abstract graphics for Auctera */

/* 1. Hero architecture — flowing unified engine */
function HeroArchitecture() {
  // central node + orbit rings
  const cx = 300, cy = 300;
  const coreR = 72;        // central node radius
  const haloR = 90;        // dashed halo around the core
  const innerOrbit = 150;  // orbit the nodes sit on
  const midOrbit = 210;
  const outerOrbit = 270;
  const nodeR = 18;

  // 6 nodes evenly distributed on the inner orbit
  const nodes = [
    { angle: -90, label: "DSP" },
    { angle: -30, label: "Affiliate" },
    { angle:  30, label: "Retarget" },
    { angle:  90, label: "Measure" },
    { angle: 150, label: "Fraud" },
    { angle: 210, label: "Reporting" },
  ].map(n => {
    const rad = (n.angle * Math.PI) / 180;
    return { ...n, x: cx + innerOrbit * Math.cos(rad), y: cy + innerOrbit * Math.sin(rad), rad };
  });

  return (
    <svg viewBox="0 0 600 600" className="hero-arch" style={{width:"100%", height:"auto"}}>
      <defs>
        <radialGradient id="core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.9"/>
          <stop offset="45%" stopColor="#A7701F" stopOpacity="0.7"/>
          <stop offset="100%" stopColor="#0E1410" stopOpacity="1"/>
        </radialGradient>
      </defs>

      {/* orbit grid — concentric on (cx, cy) */}
      <g stroke="rgba(14,20,16,0.15)" strokeWidth="1" fill="none">
        <circle cx={cx} cy={cy} r={outerOrbit}/>
        <circle cx={cx} cy={cy} r={midOrbit}/>
        <circle cx={cx} cy={cy} r={innerOrbit}/>
      </g>

      {/* crosshair through the center */}
      <g stroke="rgba(14,20,16,0.08)" strokeWidth="1">
        <line x1={cx - outerOrbit} y1={cy} x2={cx + outerOrbit} y2={cy}/>
        <line x1={cx} y1={cy - outerOrbit} x2={cx} y2={cy + outerOrbit}/>
      </g>

      {/* radial connectors — from edge of central halo to edge of each node */}
      <g stroke="#0E1410" strokeWidth="1.2" strokeLinecap="round" opacity="0.85" fill="none">
        {nodes.map((n, i) => {
          const x1 = cx + haloR * Math.cos(n.rad);
          const y1 = cy + haloR * Math.sin(n.rad);
          const x2 = n.x - nodeR * Math.cos(n.rad);
          const y2 = n.y - nodeR * Math.sin(n.rad);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}/>;
        })}
      </g>

      {/* travelling pulses along the same radial lines */}
      <g fill="#C98B3A">
        {nodes.map((n, i) => {
          const x1 = cx + haloR * Math.cos(n.rad);
          const y1 = cy + haloR * Math.sin(n.rad);
          const x2 = n.x - nodeR * Math.cos(n.rad);
          const y2 = n.y - nodeR * Math.sin(n.rad);
          return (
            <circle key={i} r="2.5" opacity="0.85">
              <animate attributeName="cx" from={x1} to={x2} dur="3.6s" begin={`${i * 0.5}s`} repeatCount="indefinite"/>
              <animate attributeName="cy" from={y1} to={y2} dur="3.6s" begin={`${i * 0.5}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0;0.9;0" dur="3.6s" begin={`${i * 0.5}s`} repeatCount="indefinite"/>
            </circle>
          );
        })}
      </g>

      {/* node constellation — sits exactly on the inner orbit */}
      {nodes.map((n, i) => {
        // label radial offset, outside the node, away from center
        const lx = n.x + (nodeR + 18) * Math.cos(n.rad);
        const ly = n.y + (nodeR + 18) * Math.sin(n.rad) + 3;
        const anchor = Math.cos(n.rad) > 0.3 ? "start" : Math.cos(n.rad) < -0.3 ? "end" : "middle";
        return (
          <g key={i}>
            <circle cx={n.x} cy={n.y} r={nodeR} fill="#F6F2EC" stroke="#0E1410" strokeWidth="1.2"/>
            <circle cx={n.x} cy={n.y} r="4" fill="#C98B3A" className="pulse-dot" style={{transformOrigin: `${n.x}px ${n.y}px`, animationDelay: `${i*0.3}s`}}/>
            <text x={lx} y={ly} fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor={anchor} fill="#0E1410" letterSpacing="1.4">{n.label.toUpperCase()}</text>
          </g>
        );
      })}

      {/* central core */}
      <circle cx={cx} cy={cy} r={coreR} fill="url(#core)"/>
      <circle cx={cx} cy={cy} r={coreR} fill="none" stroke="#0E1410" strokeWidth="1"/>
      <circle cx={cx} cy={cy} r={haloR} fill="none" stroke="#C98B3A" strokeWidth="1" strokeDasharray="3 6" opacity="0.8"/>
      <text x={cx} y={cy - 4} fontFamily="Instrument Serif, serif" fontSize="18" textAnchor="middle" fill="#F6F2EC" fontStyle="italic">Auctera</text>
      <text x={cx} y={cy + 16} fontFamily="JetBrains Mono, monospace" fontSize="8" textAnchor="middle" fill="rgba(246,242,236,0.6)" letterSpacing="1.6">D-REVX ENGINE</text>

      {/* corner annotations */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.55)" letterSpacing="1.2">
        <text x="40" y="56">LAT · 40.7128° N</text>
        <text x="560" y="56" textAnchor="end">LONG · 74.0060° W</text>
        <text x="40" y="580">NODES · 247</text>
        <text x="560" y="580" textAnchor="end">LATENCY · &lt;10MS</text>
      </g>
    </svg>
  );
}

/* 2. Fragmented vs Unified diagram */
function FragmentedVsUnified() {
  return (
    <svg viewBox="0 0 800 420" style={{width:"100%", height:"auto"}}>
      <defs>
        <pattern id="dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="1" fill="rgba(14,20,16,0.18)"/>
        </pattern>
      </defs>

      {/* LEFT — fragmented */}
      <g>
        <text x="20" y="36" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">FRAGMENTED STACK</text>
        <rect x="20" y="56" width="340" height="340" fill="url(#dots)" stroke="rgba(14,20,16,0.18)" strokeDasharray="4 6" rx="14"/>
        {[
          [60, 100, "DSP_API"],
          [230, 100, "Tracker.js"],
          [60, 200, "AffiliateNet"],
          [230, 200, "DMP_Sync"],
          [140, 310, "DATA LOSS"],
        ].map(([x,y,l], i) => (
          <g key={i}>
            <rect x={x} y={y} width="100" height="52" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1"/>
            <text x={x+50} y={y+32} fontFamily="JetBrains Mono, monospace" fontSize="10" textAnchor="middle" fill="#0E1410">{l}</text>
          </g>
        ))}
        {/* broken connectors */}
        <g stroke="#B5471C" strokeWidth="1.2" fill="none" strokeDasharray="3 4">
          <path d="M160,126 L230,126"/>
          <path d="M110,152 L110,200"/>
          <path d="M280,152 L280,200"/>
          <path d="M110,252 L150,310"/>
          <path d="M280,252 L240,310"/>
        </g>
        <g fill="#B5471C">
          <circle cx="160" cy="126" r="3"/>
          <circle cx="230" cy="126" r="3"/>
          <circle cx="110" cy="200" r="3"/>
        </g>
      </g>

      {/* arrow */}
      <g transform="translate(380, 210)" fill="#0E1410">
        <path d="M0 10 L30 10 L30 4 L44 14 L30 24 L30 18 L0 18 Z"/>
      </g>

      {/* RIGHT — unified */}
      <g>
        <text x="440" y="36" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">UNIFIED PLATFORM</text>
        <rect x="440" y="56" width="340" height="340" fill="#0E1410" rx="14"/>
        <circle cx="610" cy="226" r="62" fill="none" stroke="#C98B3A" strokeWidth="1" strokeDasharray="3 5"/>
        <circle cx="610" cy="226" r="36" fill="#C98B3A" opacity="0.12"/>
        <circle cx="610" cy="226" r="14" fill="#C98B3A"/>
        <text x="610" y="320" fontFamily="Instrument Serif, serif" fontSize="14" textAnchor="middle" fontStyle="italic" fill="#F6F2EC">One data layer</text>
        <text x="610" y="338" fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(246,242,236,0.6)" letterSpacing="1.4">ONE TRUTH · ONE ENGINE</text>

        {/* unified spokes */}
        {[
          [500, 100],[720, 100],[500, 352],[720, 352]
        ].map(([x,y], i) => (
          <g key={i}>
            <line x1="610" y1="226" x2={x} y2={y} stroke="rgba(246,242,236,0.35)" strokeWidth="1"/>
            <circle cx={x} cy={y} r="6" fill="#F6F2EC"/>
          </g>
        ))}
        {/* node labels */}
        <g fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.2" fill="rgba(246,242,236,0.72)">
          <text x="500" y="88" textAnchor="middle">DSP</text>
          <text x="720" y="88" textAnchor="middle">AFFILIATE</text>
          <text x="500" y="378" textAnchor="middle">RETARGET</text>
          <text x="720" y="378" textAnchor="middle">MEASURE</text>
        </g>
      </g>
    </svg>
  );
}

/* 3. Latency / sub-50ms visualization */
function LatencyViz() {
  return (
    <svg viewBox="0 0 420 240" style={{width:"100%", height:"auto"}}>
      <defs>
        <linearGradient id="sweep" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0"/>
          <stop offset="80%" stopColor="#C98B3A" stopOpacity="1"/>
        </linearGradient>
      </defs>
      <g stroke="rgba(14,20,16,0.12)" strokeWidth="1">
        {[40,80,120,160,200].map((y,i)=>(<line key={i} x1="20" y1={y} x2="400" y2={y}/>))}
      </g>
      <path d="M20,180 L60,160 L100,170 L140,110 L180,120 L220,90 L260,70 L300,80 L340,50 L400,40"
        fill="none" stroke="#0E1410" strokeWidth="1.5"/>
      <path d="M20,180 L60,160 L100,170 L140,110 L180,120 L220,90 L260,70 L300,80 L340,50 L400,40"
        fill="none" stroke="url(#sweep)" strokeWidth="2.5"/>
      <g fill="#0E1410">
        {[[60,160],[140,110],[220,90],[300,80],[400,40]].map(([x,y], i)=>(<circle key={i} cx={x} cy={y} r="3"/>))}
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="20" y="220">T+0</text>
        <text x="210" y="220" textAnchor="middle">T+25MS</text>
        <text x="400" y="220" textAnchor="end">T+50MS — BID WON</text>
      </g>
    </svg>
  );
}

/* 4. Globe/liquidity — arcs over world */
function LiquidityGlobe() {
  return (
    <svg viewBox="0 0 600 600" style={{width:"100%", height:"auto"}}>
      <circle cx="300" cy="300" r="240" fill="#0E1410"/>
      <circle cx="300" cy="300" r="240" fill="none" stroke="rgba(246,242,236,0.25)"/>
      {/* meridians */}
      <g stroke="rgba(246,242,236,0.15)" fill="none">
        {[-60,-30,0,30,60].map((a,i)=>(
          <ellipse key={i} cx="300" cy="300" rx={240 * Math.cos(a*Math.PI/180)} ry="240"/>
        ))}
        {[-60,-30,0,30,60].map((a,i)=>(
          <line key={i} x1="60" y1={300 + a*2.5} x2="540" y2={300 + a*2.5} strokeDasharray="1 4"/>
        ))}
      </g>
      {/* arcs */}
      <g fill="none" stroke="#C98B3A" strokeWidth="1.2">
        <path d="M130,240 Q300,60 470,240" className="flow-path"/>
        <path d="M110,340 Q300,540 490,340" className="flow-path" style={{animationDelay: "-4s"}}/>
        <path d="M160,180 Q420,220 480,420" className="flow-path" style={{animationDelay: "-8s"}}/>
      </g>
      {/* nodes */}
      {[[130,240],[470,240],[110,340],[490,340],[300,60],[300,540],[160,180],[480,420]].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="6" fill="#F6F2EC"/>
          <circle cx={x} cy={y} r="3" fill="#C98B3A" className="pulse-dot" style={{transformOrigin: `${x}px ${y}px`, animationDelay: `${i*0.2}s`}}/>
        </g>
      ))}
      <text x="300" y="306" fontFamily="Instrument Serif, serif" fontSize="20" fontStyle="italic" textAnchor="middle" fill="#F6F2EC">247 nodes</text>
      <text x="300" y="328" fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(246,242,236,0.6)" letterSpacing="1.6">ROUTING ACTIVE</text>
    </svg>
  );
}

/* 5. Flow diagram (6 steps) */
function FlowSix() {
  const labels = ["Connect","Goals","Audience","Launch","AI","Measure"];
  return (
    <svg viewBox="0 0 900 180" style={{width:"100%", height:"auto"}}>
      <line x1="60" y1="90" x2="840" y2="90" stroke="rgba(14,20,16,0.2)" strokeWidth="1" strokeDasharray="4 6"/>
      {labels.map((l,i)=>{
        const x = 60 + i * 156;
        return (
          <g key={i}>
            <circle cx={x} cy="90" r="26" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1.2"/>
            <text x={x} y="95" fontFamily="Instrument Serif, serif" fontSize="18" textAnchor="middle" fontStyle="italic" fill="#0E1410">{i+1}</text>
            <text x={x} y="146" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.4" textAnchor="middle" fill="rgba(14,20,16,0.65)">{l.toUpperCase()}</text>
          </g>
        );
      })}
      <circle cx="840" cy="90" r="4" fill="#C98B3A"/>
    </svg>
  );
}

/* 6. Abstract product panel — used as hero aside */
function BidNodePanel() {
  return (
    <div className="bidnode-panel" style={{
      background: "var(--ink)", color: "var(--paper)", borderRadius: "18px",
      padding: "28px", border: "1px solid var(--ink-3)", fontFamily: "var(--font-mono)",
      display: "grid", gap: 18
    }}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)"}}>
        <span>BID_NODE · ALPHA</span>
        <span style={{display:"inline-flex", alignItems:"center", gap:8}}>
          <span style={{width:6, height:6, borderRadius:"50%", background:"var(--ochre)"}} className="pulse-dot"/> OPTIMIZED
        </span>
      </div>
      <div style={{fontFamily:"var(--font-display)", fontSize:48, lineHeight:1, color:"var(--paper)"}}>
        &lt;50ms
      </div>
      <div style={{fontSize:12, color:"rgba(246,242,236,0.7)", letterSpacing:"0.04em"}}>
        avg execution · pre-bid filter · IVT scored
      </div>
      <div style={{height:1, background:"rgba(246,242,236,0.12)"}}/>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, fontSize:12, color:"rgba(246,242,236,0.7)"}}>
        <div><div style={{fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase", opacity:0.6}}>Target CPA</div><div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)", marginTop:4}}>$45.00</div></div>
        <div><div style={{fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase", opacity:0.6}}>Signal</div><div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)", marginTop:4}}>1P Verified</div></div>
        <div><div style={{fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase", opacity:0.6}}>Requests/s</div><div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)", marginTop:4}}>1.7M</div></div>
        <div><div style={{fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase", opacity:0.6}}>IVT Rate</div><div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)", marginTop:4}}>0.01%</div></div>
      </div>
    </div>
  );
}

/* 7. Dashboard tile */
function DashboardTile() {
  return (
    <div style={{background:"#F6F2EC", border:"1px solid var(--line)", borderRadius:18, padding:24, display:"grid", gap:18}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--muted)"}}>Unified performance · wk 17</div>
        <span className="pill pill-dot">LIVE</span>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:20}}>
        {[["$2.14M","Spend"],["7.4x","Blended ROAS"],["12,840","Conversions"]].map(([v,l],i)=>(
          <div key={i}>
            <div style={{fontFamily:"var(--font-display)", fontSize:30, lineHeight:1, letterSpacing:"-0.01em"}}>{v}</div>
            <div style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.16em", textTransform:"uppercase", color:"var(--muted)", marginTop:6}}>{l}</div>
          </div>
        ))}
      </div>
      <svg viewBox="0 0 400 120" style={{width:"100%"}}>
        <defs>
          <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.35"/>
            <stop offset="100%" stopColor="#C98B3A" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <g stroke="rgba(14,20,16,0.08)">
          {[30,60,90].map((y,i)=>(<line key={i} x1="0" y1={y} x2="400" y2={y}/>))}
        </g>
        <path d="M0,90 L40,80 L80,75 L120,60 L160,62 L200,48 L240,40 L280,32 L320,22 L360,18 L400,10 L400,120 L0,120 Z" fill="url(#area)"/>
        <path d="M0,90 L40,80 L80,75 L120,60 L160,62 L200,48 L240,40 L280,32 L320,22 L360,18 L400,10" fill="none" stroke="#0E1410" strokeWidth="1.5"/>
        {/* second series */}
        <path d="M0,100 L40,96 L80,88 L120,90 L160,82 L200,78 L240,72 L280,66 L320,60 L360,54 L400,52" fill="none" stroke="#C98B3A" strokeWidth="1.5" strokeDasharray="3 4"/>
      </svg>
      <div style={{display:"flex", gap:18, fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--muted)"}}>
        <span style={{display:"flex", alignItems:"center", gap:6}}><span style={{width:10, height:1.5, background:"#0E1410"}}/>Unified</span>
        <span style={{display:"flex", alignItems:"center", gap:6}}><span style={{width:10, height:1.5, background:"#C98B3A", border:"1px dashed"}}/>Legacy stack</span>
      </div>
    </div>
  );
}

/* 8. Retarget ring */
function RetargetRing() {
  return (
    <svg viewBox="0 0 420 420" style={{width:"100%"}}>
      <defs>
        <radialGradient id="rgrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="210" cy="210" r="170" fill="url(#rgrad)"/>
      <circle cx="210" cy="210" r="170" fill="none" stroke="rgba(14,20,16,0.18)" strokeDasharray="3 6"/>
      <circle cx="210" cy="210" r="120" fill="none" stroke="rgba(14,20,16,0.12)"/>
      <circle cx="210" cy="210" r="70" fill="none" stroke="rgba(14,20,16,0.2)"/>
      <circle cx="210" cy="210" r="24" fill="#0E1410"/>
      <circle cx="210" cy="210" r="8" fill="#C98B3A"/>
      {[
        [210, 40, "Display"], [370, 140, "Native"], [340, 320, "CTV"],
        [210, 380, "Video"], [80, 320, "Social"], [50, 140, "Email"],
      ].map(([x,y,l],i)=>(
        <g key={i}>
          <line x1="210" y1="210" x2={x} y2={y} stroke="rgba(14,20,16,0.15)"/>
          <circle cx={x} cy={y} r="14" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1"/>
          <circle cx={x} cy={y} r="3" fill="#C98B3A"/>
          <text x={x} y={y+28} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" textAnchor="middle" fill="rgba(14,20,16,0.7)">{l.toUpperCase()}</text>
        </g>
      ))}
    </svg>
  );
}

/* 9. Marketplace two-sided */
function TwoSidedDiagram() {
  return (
    <svg viewBox="0 0 700 320" style={{width:"100%"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">
        <text x="40" y="32">ADVERTISERS</text>
        <text x="660" y="32" textAnchor="end">PUBLISHERS</text>
      </g>
      {[0,1,2,3].map(i=>{
        const y = 80 + i*56;
        return <rect key={"a"+i} x="40" y={y} width="140" height="38" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1" rx="4"/>;
      })}
      {[0,1,2,3].map(i=>{
        const y = 80 + i*56;
        return <rect key={"p"+i} x="520" y={y} width="140" height="38" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1" rx="4"/>;
      })}
      {/* center hub */}
      <rect x="280" y="130" width="140" height="80" fill="#0E1410" rx="10"/>
      <text x="350" y="166" fontFamily="Instrument Serif, serif" fontSize="20" fontStyle="italic" textAnchor="middle" fill="#F6F2EC">Auctera</text>
      <text x="350" y="186" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" textAnchor="middle" fill="rgba(246,242,236,0.6)">MATCHING LAYER</text>
      {/* crossing lines */}
      <g stroke="rgba(14,20,16,0.25)" fill="none">
        {[0,1,2,3].map(i=>(<line key={"la"+i} x1="180" y1={99+i*56} x2="280" y2={170}/>))}
        {[0,1,2,3].map(i=>(<line key={"lp"+i} x1="520" y1={99+i*56} x2="420" y2={170}/>))}
      </g>
      {/* dots on lines */}
      <g fill="#C98B3A">
        {[0,1,2,3].map(i=>(<circle key={"da"+i} cx="230" cy={134 + i*10} r="2"/>))}
      </g>
    </svg>
  );
}

/* 10. Journey timeline */
function JourneyTimeline({ points }) {
  return (
    <svg viewBox={`0 0 ${Math.max(760, points.length * 160)} 160`} style={{width:"100%"}}>
      <line x1="40" y1="80" x2={points.length*160 - 40} y2="80" stroke="rgba(14,20,16,0.2)" strokeDasharray="4 6"/>
      {points.map((p, i) => {
        const x = 40 + i*160;
        return (
          <g key={i}>
            <circle cx={x} cy="80" r="20" fill="#F6F2EC" stroke="#0E1410"/>
            <circle cx={x} cy="80" r="4" fill="#C98B3A"/>
            <text x={x} y="42" fontFamily="Instrument Serif, serif" fontSize="18" textAnchor="middle" fontStyle="italic" fill="#0E1410">{p.top}</text>
            <text x={x} y="128" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.4" textAnchor="middle" fill="rgba(14,20,16,0.7)">{p.bottom?.toUpperCase()}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* Expose */
/* Aliases used by platform pages */
const RetargetGraphPanel = RetargetRing;
const NetworkPanel = TwoSidedDiagram;
const FlowPanel = FlowSix;

/* =============================================================
 *  ADDITIONAL ILLUSTRATIONS — Solutions / Capabilities / About
 *  Each renders a distinct abstract diagram to keep the library
 *  visually varied across the new pages.
 * ============================================================= */

/* Targeting — concentric audience rings with nested precision dot */
function AudiencePrecision() {
  return (
    <svg viewBox="0 0 500 500" style={{width:"100%", height:"auto"}}>
      <defs>
        <radialGradient id="tgt-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.35"/>
          <stop offset="60%" stopColor="#C98B3A" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="500" height="500" fill="url(#tgt-glow)" opacity="0.7"/>
      <g stroke="rgba(14,20,16,0.15)" strokeDasharray="3 6" fill="none">
        {[80,140,200,260].map((r,i)=>(<circle key={i} cx="250" cy="250" r={r}/>))}
      </g>
      <g stroke="rgba(14,20,16,0.35)" fill="none">
        <line x1="20" y1="250" x2="480" y2="250"/>
        <line x1="250" y1="20" x2="250" y2="480"/>
      </g>
      {/* scattered audience dots */}
      {[
        [120,140,3],[180,110,2],[320,150,3],[400,200,2.5],[140,360,2.5],[200,400,3],[370,380,3],[410,330,2],
        [220,180,2],[290,200,2.5],[180,270,2],[330,280,2.5],[230,340,2.5],[100,220,2]
      ].map(([x,y,r],i)=>(<circle key={i} cx={x} cy={y} r={r} fill="rgba(14,20,16,0.3)"/>))}
      {/* target cluster */}
      <g>
        <circle cx="250" cy="250" r="60" fill="rgba(201,139,58,0.1)" stroke="#C98B3A" strokeWidth="1"/>
        {[[240,240],[260,245],[245,260],[265,265],[250,250]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r="3.5" fill="#B37824"/>
        ))}
        <circle cx="250" cy="250" r="8" fill="#0E1410"/>
        <circle cx="250" cy="250" r="3" fill="#C98B3A"/>
      </g>
      {/* annotations */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.6)" letterSpacing="1.4">
        <text x="20" y="40">FIRST-PARTY · DEVICE GRAPH</text>
        <text x="20" y="490">LOOKALIKES · CONTEXTUAL</text>
        <text x="480" y="40" textAnchor="end">MATCH RATE 60–80%</text>
      </g>
      <g transform="translate(330 250)">
        <line x1="-70" y1="0" x2="-8" y2="0" stroke="#C98B3A" strokeWidth="1"/>
        <text x="0" y="4" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#B37824" letterSpacing="1.4">SEED</text>
      </g>
    </svg>
  );
}

/* Fraud shield — layered shield with filter gates */
function FraudShield() {
  return (
    <svg viewBox="0 0 460 500" style={{width:"100%", height:"auto"}}>
      <defs>
        <linearGradient id="fs-shield" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#0E1410"/>
          <stop offset="100%" stopColor="#1A2520"/>
        </linearGradient>
      </defs>
      {/* traffic column */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.2">
        <text x="20" y="32">INCOMING TRAFFIC</text>
      </g>
      {[40,70,100,130,160].map((y,i)=>(
        <g key={i}>
          <rect x="20" y={y} width="80" height="18" fill={i%3===0?"rgba(201,139,58,0.15)":"rgba(14,20,16,0.06)"} stroke="rgba(14,20,16,0.2)"/>
          <line x1="100" y1={y+9} x2="130" y2={y+9} stroke="rgba(14,20,16,0.35)" strokeWidth="1"/>
          <polygon points={`130,${y+9} 126,${y+6} 126,${y+12}`} fill="rgba(14,20,16,0.35)"/>
        </g>
      ))}
      {/* shield */}
      <g transform="translate(230 250)">
        <path d="M0,-140 L110,-100 Q110,40 0,140 Q-110,40 -110,-100 Z" fill="url(#fs-shield)" stroke="#C98B3A" strokeWidth="1.2"/>
        <path d="M0,-140 L110,-100 Q110,40 0,140 Q-110,40 -110,-100 Z" fill="none" stroke="rgba(201,139,58,0.4)" strokeWidth="1" strokeDasharray="2 4" transform="scale(0.88)"/>
        <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(246,242,236,0.8)" letterSpacing="1.4" textAnchor="middle">
          <text y="-55">IVT FILTER</text>
          <text y="-20">BOT DETECTION</text>
          <text y="15">DEVICE GRAPH</text>
          <text y="50">BEHAVIORAL ML</text>
        </g>
        <text y="95" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" fill="#C98B3A" textAnchor="middle">&lt;0.5%</text>
        <text y="112" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(246,242,236,0.5)" letterSpacing="1.4" textAnchor="middle">IVT RATE</text>
      </g>
      {/* blocked stream */}
      <g transform="translate(380 130)">
        <text fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.2">BLOCKED</text>
        {[0,20,40,60].map((dy,i)=>(
          <g key={i} transform={`translate(0 ${dy+12})`}>
            <line x1="0" y1="0" x2="60" y2="0" stroke="rgba(14,20,16,0.22)" strokeDasharray="2 3"/>
            <circle cx="0" cy="0" r="3" fill="none" stroke="rgba(14,20,16,0.35)" strokeWidth="1"/>
            <line x1="-2" y1="-2" x2="2" y2="2" stroke="rgba(14,20,16,0.5)"/>
            <line x1="-2" y1="2" x2="2" y2="-2" stroke="rgba(14,20,16,0.5)"/>
          </g>
        ))}
      </g>
      {/* clean stream */}
      <g transform="translate(340 350)">
        <text fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#B37824" letterSpacing="1.2">CLEAN DELIVERY</text>
        {[0,20,40,60,80].map((dy,i)=>(
          <g key={i} transform={`translate(0 ${dy+16})`}>
            <line x1="0" y1="0" x2="80" y2="0" stroke="#C98B3A" strokeWidth="1"/>
            <polygon points="80,0 76,-3 76,3" fill="#C98B3A"/>
          </g>
        ))}
      </g>
    </svg>
  );
}

/* Creative grid — dynamic creative optimization */
function CreativeGrid() {
  const palette = ["#0E1410","#C98B3A","#F6F2EC","#A7701F","#1A2520"];
  return (
    <svg viewBox="0 0 460 460" style={{width:"100%", height:"auto"}}>
      <g>
        {[...Array(16)].map((_, i) => {
          const col = i % 4, row = Math.floor(i / 4);
          const x = 30 + col * 100, y = 30 + row * 100;
          const fill = palette[(i * 3) % palette.length];
          const best = i === 9;
          return (
            <g key={i}>
              <rect x={x} y={y} width="90" height="90" fill={fill} stroke={best ? "#C98B3A" : "rgba(14,20,16,0.15)"} strokeWidth={best ? 2 : 1} rx="6"/>
              {/* tiny headline bars */}
              <rect x={x+10} y={y+12} width={30 + (i*7)%40} height="4" fill={fill==="#F6F2EC"?"#0E1410":"rgba(246,242,236,0.85)"} opacity="0.8"/>
              <rect x={x+10} y={y+22} width={20 + (i*5)%30} height="3" fill={fill==="#F6F2EC"?"rgba(14,20,16,0.5)":"rgba(246,242,236,0.4)"}/>
              {/* image zone */}
              <rect x={x+10} y={y+34} width="70" height="30" fill={fill==="#F6F2EC"?"rgba(14,20,16,0.08)":"rgba(246,242,236,0.12)"}/>
              {/* CTA */}
              <rect x={x+10} y={y+72} width="28" height="8" fill={best ? "#C98B3A" : (fill==="#F6F2EC"?"#0E1410":"#C98B3A")} rx="2" opacity="0.9"/>
              {best && <circle cx={x+85} cy={y+5} r="5" fill="#C98B3A"/>}
            </g>
          );
        })}
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="30" y="448">16 VARIANTS · AUTO-TESTED</text>
        <text x="430" y="448" textAnchor="end" fill="#B37824">WINNER ↑ 3.2× CTR</text>
      </g>
    </svg>
  );
}

/* Conversion funnel — step pyramid with drop-offs */
function ConversionFunnel() {
  const rows = [
    ["IMPRESSION","1,200,000",460],
    ["CLICK","84,000",360],
    ["VISIT","62,000",280],
    ["ADD TO CART","9,800",180],
    ["CONVERT","2,340",100],
  ];
  return (
    <svg viewBox="0 0 520 440" style={{width:"100%", height:"auto"}}>
      {rows.map(([label,val,w],i)=>{
        const y = 30 + i * 70;
        const x = (520 - w) / 2;
        return (
          <g key={i}>
            <rect x={x} y={y} width={w} height="48" fill={i === rows.length - 1 ? "#C98B3A" : (i === 0 ? "#0E1410" : "rgba(14,20,16,0.85)")} rx="4"/>
            <text x={x + 12} y={y + 28} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={i === rows.length - 1 ? "#0E1410" : "rgba(246,242,236,0.9)"} letterSpacing="1.6">{label}</text>
            <text x={x + w - 12} y={y + 28} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" fill={i === rows.length - 1 ? "#0E1410" : "#F6F2EC"} textAnchor="end">{val}</text>
            {i < rows.length - 1 && (
              <g transform={`translate(${520/2} ${y+48})`}>
                <line x1="0" y1="0" x2="0" y2="22" stroke="rgba(14,20,16,0.35)" strokeWidth="1"/>
                <polygon points="0,22 -3,18 3,18" fill="rgba(14,20,16,0.5)"/>
              </g>
            )}
          </g>
        );
      })}
    </svg>
  );
}

/* Brand safety — layered "stack" of protection barriers */
function BrandSafetyStack() {
  const layers = [
    { label: "PRE-BID FILTERING", sub: "Category & URL exclusion" },
    { label: "CONTEXTUAL ANALYSIS", sub: "NLP content classification" },
    { label: "VERIFICATION PARTNERS", sub: "IAS · DoubleVerify" },
    { label: "POST-BID MONITORING", sub: "Continuous brand audits" },
  ];
  return (
    <svg viewBox="0 0 480 440" style={{width:"100%", height:"auto"}}>
      {layers.map((l,i)=>{
        const y = 40 + i * 90;
        return (
          <g key={i}>
            <rect x="40" y={y} width="400" height="70" fill={i%2===0?"var(--paper)":"#F9F5EE"} stroke="rgba(14,20,16,0.2)" rx="10"/>
            <circle cx="72" cy={y+35} r="16" fill="rgba(201,139,58,0.12)" stroke="#C98B3A"/>
            <text x="72" y={y+39} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#B37824" textAnchor="middle">0{i+1}</text>
            <text x="104" y={y+29} fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#0E1410" letterSpacing="1.6">{l.label}</text>
            <text x="104" y={y+50} fontFamily="Inter Tight, sans-serif" fontSize="13" fill="rgba(14,20,16,0.55)">{l.sub}</text>
            <g transform={`translate(410 ${y+35})`}>
              <circle r="6" fill="#C98B3A"/>
              <path d="M-3,0 L-1,2 L3,-2" stroke="#0E1410" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            </g>
          </g>
        );
      })}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.45)" letterSpacing="1.4">
        <text x="40" y="30">SAFETY STACK</text>
        <text x="440" y="30" textAnchor="end">4 LAYERS</text>
      </g>
    </svg>
  );
}

/* Attribution diagram — multi-touch journey collapsing to a single outcome */
function AttributionFlow() {
  const touches = [
    { t: "Display", x: 40 },
    { t: "Search", x: 130 },
    { t: "Email", x: 220 },
    { t: "Retarget", x: 310 },
    { t: "Affiliate", x: 400 },
  ];
  return (
    <svg viewBox="0 0 500 360" style={{width:"100%", height:"auto"}}>
      {/* timeline */}
      <line x1="30" y1="110" x2="470" y2="110" stroke="rgba(14,20,16,0.2)"/>
      {touches.map((t,i)=>(
        <g key={i}>
          <circle cx={t.x+20} cy="110" r="10" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1.2"/>
          <circle cx={t.x+20} cy="110" r="3" fill="#C98B3A"/>
          <text x={t.x+20} y="88" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#0E1410" textAnchor="middle" letterSpacing="1.4">{t.t.toUpperCase()}</text>
          <text x={t.x+20} y="135" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="12" fill="rgba(14,20,16,0.6)" textAnchor="middle">t{i+1}</text>
          {/* paths to conversion */}
          <path d={`M${t.x+20},120 Q${t.x+20},200 250,280`} stroke="#C98B3A" strokeWidth="1" fill="none" opacity={0.35+i*0.12}/>
        </g>
      ))}
      {/* conversion */}
      <g>
        <circle cx="250" cy="290" r="26" fill="#0E1410"/>
        <circle cx="250" cy="290" r="32" fill="none" stroke="#C98B3A" strokeDasharray="2 4"/>
        <text x="250" y="286" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="13" fill="#F6F2EC" textAnchor="middle">conversion</text>
        <text x="250" y="300" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(246,242,236,0.6)" textAnchor="middle" letterSpacing="1.4">$127 AOV</text>
      </g>
      {/* credit split */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="30" y="30">MULTI-TOUCH CREDIT</text>
        <text x="470" y="30" textAnchor="end">DATA-DRIVEN MODEL</text>
        <text x="60" y="340">8%</text>
        <text x="150" y="340">18%</text>
        <text x="240" y="340">12%</text>
        <text x="330" y="340">34%</text>
        <text x="420" y="340">28%</text>
      </g>
    </svg>
  );
}

/* Marketplace mesh — interconnected exchange grid */
function MarketplaceMesh() {
  const buyers = [[60,80],[60,180],[60,280],[60,380]];
  const sellers = [[420,80],[420,180],[420,280],[420,380]];
  const hub = [240, 230];
  return (
    <svg viewBox="0 0 480 460" style={{width:"100%", height:"auto"}}>
      {/* connections */}
      <g stroke="rgba(14,20,16,0.15)" fill="none">
        {buyers.map((b,i)=> sellers.map((s,j)=>(
          <line key={`${i}-${j}`} x1={b[0]} y1={b[1]} x2={s[0]} y2={s[1]}/>
        )))}
      </g>
      {/* hub overlay */}
      <g>
        <circle cx={hub[0]} cy={hub[1]} r="60" fill="rgba(201,139,58,0.08)"/>
        <circle cx={hub[0]} cy={hub[1]} r="32" fill="#0E1410"/>
        <circle cx={hub[0]} cy={hub[1]} r="40" fill="none" stroke="#C98B3A" strokeDasharray="3 5"/>
        <text x={hub[0]} y={hub[1]-2} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#F6F2EC" textAnchor="middle">marketplace</text>
        <text x={hub[0]} y={hub[1]+14} fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(246,242,236,0.6)" textAnchor="middle" letterSpacing="1.4">D-REVX</text>
      </g>
      {/* nodes */}
      {buyers.map((b,i)=>(
        <g key={`b${i}`}>
          <circle cx={b[0]} cy={b[1]} r="14" fill="var(--paper)" stroke="#0E1410"/>
          <circle cx={b[0]} cy={b[1]} r="3" fill="#C98B3A"/>
          <text x={b[0]-24} y={b[1]+4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.6)" textAnchor="end" letterSpacing="1.2">BUYER</text>
        </g>
      ))}
      {sellers.map((s,i)=>(
        <g key={`s${i}`}>
          <circle cx={s[0]} cy={s[1]} r="14" fill="var(--paper)" stroke="#0E1410"/>
          <circle cx={s[0]} cy={s[1]} r="3" fill="#C98B3A"/>
          <text x={s[0]+24} y={s[1]+4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.6)" letterSpacing="1.2">PUBLISHER</text>
        </g>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="30" y="30">OPEN EXCHANGE</text>
        <text x="450" y="450" textAnchor="end">247 NODES</text>
      </g>
    </svg>
  );
}

/* Retention cycle — looping return arrows */
function RetentionLoop() {
  return (
    <svg viewBox="0 0 460 460" style={{width:"100%", height:"auto"}}>
      <defs>
        <linearGradient id="rl-arc" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#C98B3A"/>
          <stop offset="100%" stopColor="rgba(201,139,58,0.3)"/>
        </linearGradient>
      </defs>
      {/* outer ring */}
      <circle cx="230" cy="230" r="180" fill="none" stroke="rgba(14,20,16,0.15)" strokeDasharray="4 6"/>
      {/* inner ring arc */}
      <circle cx="230" cy="230" r="130" fill="none" stroke="url(#rl-arc)" strokeWidth="2"/>
      {/* stages */}
      {[
        {a:-90, t:"FIRST PURCHASE"},
        {a:0, t:"REPEAT"},
        {a:90, t:"LOYALTY"},
        {a:180, t:"ADVOCATE"},
      ].map((s,i)=>{
        const r = 130;
        const rad = s.a * Math.PI / 180;
        const x = 230 + Math.cos(rad) * r;
        const y = 230 + Math.sin(rad) * r;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="22" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1.2"/>
            <text x={x} y={y+3} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" fill="#0E1410" textAnchor="middle">0{i+1}</text>
            <text x={x} y={y + (s.a === 90 ? 46 : -34)} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#0E1410" textAnchor="middle" letterSpacing="1.4">{s.t}</text>
          </g>
        );
      })}
      {/* center */}
      <g>
        <circle cx="230" cy="230" r="58" fill="#0E1410"/>
        <circle cx="230" cy="230" r="68" fill="none" stroke="#C98B3A" strokeDasharray="2 4"/>
        <text x="230" y="226" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#F6F2EC" textAnchor="middle">LTV</text>
        <text x="230" y="244" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(246,242,236,0.6)" textAnchor="middle" letterSpacing="1.4">3.2×</text>
      </g>
      {/* arrows between */}
      <g stroke="#C98B3A" fill="none" strokeWidth="1.2" opacity="0.8">
        <path d="M320,130 Q360,230 320,330" strokeDasharray="2 4"/>
        <path d="M320,330 Q230,370 140,330" strokeDasharray="2 4"/>
        <path d="M140,330 Q100,230 140,130" strokeDasharray="2 4"/>
        <path d="M140,130 Q230,90 320,130" strokeDasharray="2 4"/>
      </g>
    </svg>
  );
}

/* Answer engine — citation block */
function AnswerEngine() {
  return (
    <svg viewBox="0 0 460 420" style={{width:"100%", height:"auto"}}>
      {/* query bar */}
      <g>
        <rect x="30" y="30" width="400" height="44" fill="var(--paper)" stroke="rgba(14,20,16,0.2)" rx="22"/>
        <circle cx="60" cy="52" r="10" fill="none" stroke="rgba(14,20,16,0.5)" strokeWidth="1.2"/>
        <text x="80" y="58" fontFamily="Inter Tight, sans-serif" fontSize="14" fill="rgba(14,20,16,0.7)" fontStyle="italic">best performance marketing platform for ecommerce?</text>
      </g>
      {/* answer block */}
      <g>
        <rect x="30" y="100" width="400" height="220" fill="#F9F5EE" stroke="rgba(14,20,16,0.18)" rx="14"/>
        <text x="50" y="128" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">AI ANSWER</text>
        {/* text lines */}
        {[148,168,188,208,228].map((y,i)=>(
          <rect key={i} x="50" y={y} width={340 - i*20} height="6" fill="rgba(14,20,16,0.18)" rx="2"/>
        ))}
        {/* citation chip */}
        <g transform="translate(50 258)">
          <rect width="140" height="28" fill="var(--paper)" stroke="#C98B3A" strokeWidth="1.2" rx="14"/>
          <circle cx="18" cy="14" r="6" fill="#C98B3A"/>
          <text x="32" y="18" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0E1410" letterSpacing="1.4">[1] AUCTERA</text>
        </g>
        <g transform="translate(200 258)">
          <rect width="96" height="28" fill="var(--paper)" stroke="rgba(14,20,16,0.3)" rx="14"/>
          <text x="14" y="18" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.6)" letterSpacing="1.4">[2] SOURCE</text>
        </g>
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="30" y="360">ANSWER ENGINE · AEO</text>
        <text x="430" y="360" textAnchor="end" fill="#B37824">CITATION +1</text>
        <text x="30" y="390">INDEXED · LLM-READY</text>
        <text x="430" y="390" textAnchor="end">RANK / 1</text>
      </g>
    </svg>
  );
}

/* Offer ladder — tier blocks with performance deltas */
function OfferLadder() {
  const tiers = [
    ["TIER A · HERO", "$50 CPA", 100, "#0E1410"],
    ["TIER B · FAST", "$38 CPA", 80, "rgba(14,20,16,0.8)"],
    ["TIER C · LONG-TAIL", "$22 CPA", 60, "#C98B3A"],
    ["TIER D · TEST", "—", 40, "rgba(201,139,58,0.5)"],
  ];
  return (
    <svg viewBox="0 0 480 440" style={{width:"100%", height:"auto"}}>
      {tiers.map(([t,c,w,fill],i)=>{
        const y = 60 + i * 80;
        return (
          <g key={i}>
            <rect x="30" y={y} width={w*3.6} height="60" fill={fill} rx="8"/>
            <text x="44" y={y+26} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={i > 1 ? "#0E1410" : "#F6F2EC"} letterSpacing="1.4">{t}</text>
            <text x="44" y={y+48} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" fill={i > 1 ? "#0E1410" : "#F6F2EC"}>{c}</text>
            <text x={w*3.6 + 50} y={y+36} fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">{w}% traffic</text>
          </g>
        );
      })}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="30" y="38">OFFER PERFORMANCE</text>
        <text x="450" y="38" textAnchor="end">AUTO-REDIRECT</text>
      </g>
    </svg>
  );
}

/* ROI index — upward slope graph */
function RoiSlope() {
  return (
    <svg viewBox="0 0 480 320" style={{width:"100%", height:"auto"}}>
      <defs>
        <linearGradient id="roi-area" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(201,139,58,0.35)"/>
          <stop offset="100%" stopColor="rgba(201,139,58,0)"/>
        </linearGradient>
      </defs>
      <g stroke="rgba(14,20,16,0.1)">
        {[60,120,180,240].map((y,i)=>(<line key={i} x1="30" y1={y} x2="460" y2={y}/>))}
      </g>
      <path d="M30,240 L90,220 L150,200 L210,170 L270,140 L330,100 L390,70 L460,40 L460,260 L30,260 Z" fill="url(#roi-area)"/>
      <path d="M30,240 L90,220 L150,200 L210,170 L270,140 L330,100 L390,70 L460,40" fill="none" stroke="#0E1410" strokeWidth="2"/>
      <g fill="#C98B3A">
        {[[30,240],[90,220],[150,200],[210,170],[270,140],[330,100],[390,70],[460,40]].map(([x,y],i)=>(<circle key={i} cx={x} cy={y} r="3"/>))}
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="30" y="24">ROAS INDEX · 12 MONTHS</text>
        <text x="460" y="24" textAnchor="end" fill="#B37824">+58%</text>
        <text x="30" y="290">M1</text><text x="460" y="290" textAnchor="end">M12</text>
      </g>
    </svg>
  );
}

/* Agency multi-account panel */
function AgencyAccounts() {
  const rows = [
    ["Beacon Retail","ACTIVE","$42k","+12%"],
    ["Northwind DTC","ACTIVE","$28k","+8%"],
    ["Atlas Sport","PAUSED","—","—"],
    ["Luma Beauty","ACTIVE","$61k","+22%"],
    ["Pinehurst","ACTIVE","$18k","+4%"],
  ];
  return (
    <svg viewBox="0 0 500 440" style={{width:"100%", height:"auto"}}>
      <rect x="20" y="20" width="460" height="400" fill="var(--paper)" stroke="rgba(14,20,16,0.2)" rx="14"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="40" y="52">AGENCY · 5 CLIENTS</text>
        <text x="460" y="52" textAnchor="end">Q1 2026</text>
      </g>
      <line x1="40" y1="68" x2="460" y2="68" stroke="rgba(14,20,16,0.2)"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.4)" letterSpacing="1.4">
        <text x="40" y="88">CLIENT</text><text x="240" y="88">STATUS</text><text x="340" y="88">MTD SPEND</text><text x="440" y="88" textAnchor="end">Δ ROAS</text>
      </g>
      {rows.map(([name, status, spend, delta], i) => {
        const y = 120 + i * 56;
        return (
          <g key={i}>
            <rect x="40" y={y - 22} width="420" height="48" fill={i%2===0?"transparent":"rgba(14,20,16,0.025)"} rx="8"/>
            <circle cx="52" cy={y} r="5" fill={status === "PAUSED" ? "rgba(14,20,16,0.25)" : "#C98B3A"}/>
            <text x="68" y={y+4} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" fill="#0E1410">{name}</text>
            <text x="240" y={y+4} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={status==="PAUSED"?"rgba(14,20,16,0.45)":"#B37824"} letterSpacing="1.4">{status}</text>
            <text x="340" y={y+4} fontFamily="JetBrains Mono, monospace" fontSize="11" fill="#0E1410">{spend}</text>
            <text x="460" y={y+4} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="11" fill={delta.startsWith("+") ? "#B37824" : "rgba(14,20,16,0.4)"}>{delta}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* Brand awareness — reach ripple */
function BrandRipple() {
  return (
    <svg viewBox="0 0 460 460" style={{width:"100%", height:"auto"}}>
      {[40,90,140,190].map((r,i)=>(
        <circle key={i} cx="230" cy="230" r={r} fill="none" stroke="#C98B3A" strokeWidth="1" opacity={0.6 - i*0.12} strokeDasharray={i===0?"":"3 5"}/>
      ))}
      <circle cx="230" cy="230" r="22" fill="#0E1410"/>
      <text x="230" y="234" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#F6F2EC" textAnchor="middle">brand</text>
      {/* scattered impressions */}
      {[
        [80,120],[380,100],[90,320],[380,330],[170,60],[300,60],
        [60,230],[400,230],[160,400],[300,400],[130,200],[330,260]
      ].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="6" fill="rgba(201,139,58,0.25)"/>
          <circle cx={x} cy={y} r="2" fill="#B37824"/>
        </g>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="30" y="30">REACH · 180+ MARKETS</text>
        <text x="430" y="30" textAnchor="end">FREQUENCY CAPPED</text>
        <text x="30" y="440">TOP-OF-FUNNEL</text>
        <text x="430" y="440" textAnchor="end">BRAND LIFT +14pt</text>
      </g>
    </svg>
  );
}

/* Publisher yield — rate card */
function PublisherYield() {
  const cells = [
    ["DISPLAY","$4.20"],["VIDEO","$12.50"],["NATIVE","$6.80"],
    ["CTV","$22.00"],["MOBILE","$3.90"],["HOUSE","—"],
  ];
  return (
    <svg viewBox="0 0 480 420" style={{width:"100%", height:"auto"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="30" y="32">YIELD · ECPM</text>
        <text x="450" y="32" textAnchor="end" fill="#B37824">+34% vs Q4</text>
      </g>
      {cells.map(([label, rate], i) => {
        const col = i % 3, row = Math.floor(i / 3);
        const x = 30 + col * 150, y = 60 + row * 150;
        const high = label === "CTV";
        return (
          <g key={i}>
            <rect x={x} y={y} width="130" height="130" fill={high ? "#0E1410" : "var(--paper)"} stroke={high ? "#C98B3A" : "rgba(14,20,16,0.2)"} strokeWidth={high ? 1.5 : 1} rx="10"/>
            <text x={x+14} y={y+30} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={high ? "rgba(246,242,236,0.6)" : "rgba(14,20,16,0.55)"} letterSpacing="1.4">{label}</text>
            <text x={x+14} y={y+90} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="34" fill={high ? "#C98B3A" : "#0E1410"}>{rate}</text>
            <text x={x+14} y={y+110} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={high ? "rgba(246,242,236,0.5)" : "rgba(14,20,16,0.4)"} letterSpacing="1.4">eCPM · 7D</text>
          </g>
        );
      })}
    </svg>
  );
}

/* Team / about — abstract constellation of contributor nodes */
function TeamConstellation() {
  const nodes = [
    [100, 140],[180, 80],[260, 140],[340, 100],[420, 150],
    [80, 240],[200, 260],[320, 240],[400, 260],
    [140, 360],[240, 380],[340, 360],[420, 350]
  ];
  return (
    <svg viewBox="0 0 500 440" style={{width:"100%", height:"auto"}}>
      <g stroke="rgba(14,20,16,0.12)" fill="none" strokeDasharray="2 4">
        {nodes.map((n,i)=>nodes.slice(i+1).map((m,j)=>{
          const d = Math.hypot(n[0]-m[0], n[1]-m[1]);
          if (d > 160) return null;
          return <line key={`${i}-${j}`} x1={n[0]} y1={n[1]} x2={m[0]} y2={m[1]}/>;
        }))}
      </g>
      {nodes.map((n,i)=>(
        <g key={i}>
          <circle cx={n[0]} cy={n[1]} r="10" fill="var(--paper)" stroke="#0E1410" strokeWidth="1"/>
          <circle cx={n[0]} cy={n[1]} r="3" fill={i%3===0?"#C98B3A":"#0E1410"}/>
        </g>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="30" y="30">DISTRIBUTED · 3 REGIONS</text>
        <text x="470" y="30" textAnchor="end">ASYNC-FIRST</text>
        <text x="30" y="420">AMERICAS · EMEA · APAC</text>
        <text x="470" y="420" textAnchor="end">BUILT, NOT BOUGHT</text>
      </g>
    </svg>
  );
}

/* === New illustrations for replacing reused FragmentedVsUnified instances === */

/* DataLeakDiagram — pipes with leaking droplets (for solutions-advertisers) */
function DataLeakDiagram() {
  return (
    <svg viewBox="0 0 800 420" style={{width:"100%", height:"auto"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="20" y="32">FRAGMENTED PIPELINE · DATA LOSS</text>
        <text x="780" y="32" textAnchor="end" fill="#B5471C">~20% LEAK</text>
      </g>
      {/* horizontal pipes (broken) */}
      {[80, 160, 240, 320].map((y,i)=>(
        <g key={i}>
          <rect x="40" y={y-12} width="220" height="24" fill="#F6F2EC" stroke="rgba(14,20,16,0.3)" rx="3"/>
          <rect x="300" y={y-12} width="220" height="24" fill="#F6F2EC" stroke="rgba(14,20,16,0.3)" rx="3"/>
          <rect x="560" y={y-12} width="200" height="24" fill="#F6F2EC" stroke="rgba(14,20,16,0.3)" rx="3"/>
          {/* gap markers */}
          <line x1="260" y1={y} x2="300" y2={y} stroke="#B5471C" strokeWidth="1.2" strokeDasharray="3 4"/>
          <line x1="520" y1={y} x2="560" y2={y} stroke="#B5471C" strokeWidth="1.2" strokeDasharray="3 4"/>
          {/* labels inside pipe */}
          <text x="50" y={y+4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.6)" letterSpacing="1.2">{["DSP","AFFILIATE","RETARGET","ANALYTICS"][i]}</text>
          <text x="310" y={y+4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.6)" letterSpacing="1.2">PIXEL</text>
          <text x="570" y={y+4} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.6)" letterSpacing="1.2">REPORT</text>
          {/* leak droplets */}
          <g fill="#B5471C">
            <circle cx="280" cy={y+22} r="2.5"/>
            <circle cx="284" cy={y+30} r="1.8" opacity="0.6"/>
            <circle cx="540" cy={y+22} r="2.5"/>
            <circle cx="544" cy={y+30} r="1.8" opacity="0.6"/>
          </g>
        </g>
      ))}
      {/* puddle at bottom */}
      <g>
        <ellipse cx="400" cy="385" rx="180" ry="10" fill="rgba(181,71,28,0.18)"/>
        <ellipse cx="400" cy="385" rx="120" ry="6" fill="rgba(181,71,28,0.32)"/>
        <text x="400" y="410" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#B5471C" letterSpacing="1.6">CONVERSIONS LOST IN HANDOFF</text>
      </g>
    </svg>
  );
}

/* SixProductsConstellation — for platform-overview (one engine, six orbits) */
function SixProductsConstellation() {
  const products = [
    { a: -90, label: "DSP" },
    { a: -30, label: "AFFILIATE" },
    { a: 30,  label: "RETARGET" },
    { a: 90,  label: "MEASURE" },
    { a: 150, label: "REPORTING" },
    { a: 210, label: "FRAUD" },
  ];
  const cx = 400, cy = 230, r = 150;
  return (
    <svg viewBox="0 0 800 460" style={{width:"100%", height:"auto"}}>
      <defs>
        <radialGradient id="spc-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.95"/>
          <stop offset="55%" stopColor="#A7701F" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="#0E1410" stopOpacity="1"/>
        </radialGradient>
      </defs>
      {/* orbit rings */}
      <g stroke="rgba(14,20,16,0.14)" fill="none">
        <circle cx={cx} cy={cy} r={r}/>
        <circle cx={cx} cy={cy} r={r-50} strokeDasharray="3 5"/>
        <circle cx={cx} cy={cy} r={r+40} strokeDasharray="2 8"/>
      </g>
      {/* spokes */}
      {products.map((p,i)=>{
        const x = cx + Math.cos(p.a*Math.PI/180)*r;
        const y = cy + Math.sin(p.a*Math.PI/180)*r;
        return (
          <g key={i}>
            <line x1={cx} y1={cy} x2={x} y2={y} stroke="rgba(14,20,16,0.16)"/>
          </g>
        );
      })}
      {/* core */}
      <circle cx={cx} cy={cy} r="62" fill="url(#spc-core)"/>
      <circle cx={cx} cy={cy} r="62" fill="none" stroke="#0E1410" strokeWidth="1"/>
      <circle cx={cx} cy={cy} r="78" fill="none" stroke="#C98B3A" strokeDasharray="3 5"/>
      <text x={cx} y={cy-2} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" textAnchor="middle" fill="#F6F2EC">one engine</text>
      <text x={cx} y={cy+18} fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(246,242,236,0.6)" letterSpacing="1.6">SHARED DATA LAYER</text>
      {/* product nodes */}
      {products.map((p,i)=>{
        const x = cx + Math.cos(p.a*Math.PI/180)*r;
        const y = cy + Math.sin(p.a*Math.PI/180)*r;
        const lx = cx + Math.cos(p.a*Math.PI/180)*(r+40);
        const ly = cy + Math.sin(p.a*Math.PI/180)*(r+40);
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="20" fill="#F6F2EC" stroke="#0E1410" strokeWidth="1.2"/>
            <text x={x} y={y+4} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" textAnchor="middle" fill="#0E1410">0{i+1}</text>
            <text x={lx} y={ly+3} fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(14,20,16,0.7)" letterSpacing="1.4">{p.label}</text>
          </g>
        );
      })}
      {/* corner labels */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.55)" letterSpacing="1.4">
        <text x="20" y="32">SIX PRODUCTS · ONE PLATFORM</text>
        <text x="780" y="32" textAnchor="end">ZERO HANDOFFS</text>
      </g>
    </svg>
  );
}

/* TruthLedger — for blog (rows of conflicting numbers reconciling to one) */
function TruthLedger() {
  const rows = [
    ["DSP","12,840","13,201","12,710"],
    ["AFFILIATE","2,118","1,944","2,205"],
    ["RETARGET","6,402","6,800","6,200"],
    ["TOTAL","21,360","21,945","21,115"],
  ];
  return (
    <svg viewBox="0 0 800 420" style={{width:"100%", height:"auto"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="20" y="32">CONFLICTING SOURCES</text>
        <text x="780" y="32" textAnchor="end" fill="#B37824">→ ONE TRUTH</text>
      </g>
      {/* left ledger - 3 sources disagreeing */}
      <rect x="20" y="60" width="440" height="320" fill="#F9F5EE" stroke="rgba(14,20,16,0.18)" rx="10"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">
        <text x="40" y="92">CHANNEL</text>
        <text x="200" y="92">PLATFORM A</text>
        <text x="290" y="92">PLATFORM B</text>
        <text x="380" y="92">PLATFORM C</text>
      </g>
      <line x1="40" y1="100" x2="440" y2="100" stroke="rgba(14,20,16,0.18)"/>
      {rows.map((r,i)=>{
        const y = 130 + i*50;
        const isTotal = i === rows.length - 1;
        return (
          <g key={i}>
            {isTotal && <line x1="40" y1={y-22} x2="440" y2={y-22} stroke="rgba(14,20,16,0.25)"/>}
            <text x="40" y={y} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={isTotal?"#0E1410":"rgba(14,20,16,0.7)"} letterSpacing="1.4">{r[0]}</text>
            <text x="200" y={y} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" fill={isTotal?"#0E1410":"rgba(14,20,16,0.6)"}>{r[1]}</text>
            <text x="290" y={y} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" fill={isTotal?"#0E1410":"rgba(14,20,16,0.6)"}>{r[2]}</text>
            <text x="380" y={y} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" fill={isTotal?"#0E1410":"rgba(14,20,16,0.6)"}>{r[3]}</text>
            {!isTotal && <line x1="180" y1={y-12} x2="430" y2={y-12} stroke="#B5471C" strokeDasharray="2 4" opacity="0.45"/>}
          </g>
        );
      })}
      {/* arrow */}
      <g transform="translate(490 220)" fill="#0E1410">
        <path d="M0 -6 L40 -6 L40 -14 L62 0 L40 14 L40 6 L0 6 Z"/>
      </g>
      {/* right unified */}
      <rect x="580" y="60" width="200" height="320" fill="#0E1410" rx="10"/>
      <text x="680" y="92" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(246,242,236,0.55)" textAnchor="middle">UNIFIED LEDGER</text>
      <line x1="600" y1="108" x2="760" y2="108" stroke="rgba(246,242,236,0.2)"/>
      {[["DSP","12,840"],["AFFILIATE","2,118"],["RETARGET","6,402"],["TOTAL","21,360"]].map(([k,v],i)=>{
        const y = 140 + i*52;
        const isTotal = i === 3;
        return (
          <g key={i}>
            {isTotal && <line x1="600" y1={y-22} x2="760" y2={y-22} stroke="#C98B3A" strokeDasharray="2 4" opacity="0.5"/>}
            <text x="600" y={y} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={isTotal?"#C98B3A":"rgba(246,242,236,0.55)"} letterSpacing="1.4">{k}</text>
            <text x="760" y={y} textAnchor="end" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="20" fill={isTotal?"#C98B3A":"#F6F2EC"}>{v}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* StackBlocks — for platform-how-it-works "Integrates with your stack" */
function StackBlocks({ tools }) {
  const items = tools || ["Google Analytics","Segment","Shopify","Salesforce","Snowflake","BigQuery","HubSpot","Marketo"];
  return (
    <svg viewBox="0 0 920 420" style={{width:"100%", height:"auto"}}>
      <defs>
        <radialGradient id="sb-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.95"/>
          <stop offset="100%" stopColor="#0E1410"/>
        </radialGradient>
      </defs>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="20" y="32">YOUR STACK · 50+ INTEGRATIONS</text>
        <text x="900" y="32" textAnchor="end">PIXEL · API · SDK · S2S</text>
      </g>
      {/* central engine */}
      <g>
        <circle cx="460" cy="220" r="62" fill="url(#sb-core)"/>
        <circle cx="460" cy="220" r="62" fill="none" stroke="#0E1410"/>
        <circle cx="460" cy="220" r="76" fill="none" stroke="#C98B3A" strokeDasharray="3 5"/>
        <text x="460" y="216" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="16" textAnchor="middle" fill="#F6F2EC">Auctera</text>
        <text x="460" y="234" fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(246,242,236,0.6)" letterSpacing="1.4">D-REVX ENGINE</text>
      </g>
      {/* tool blocks orbiting */}
      {items.map((label,i)=>{
        const a = (i / items.length) * Math.PI * 2 - Math.PI/2;
        const r = 170;
        const cx = 460 + Math.cos(a)*r;
        const cy = 220 + Math.sin(a)*r;
        return (
          <g key={i}>
            <line x1="460" y1="220" x2={cx} y2={cy} stroke="rgba(14,20,16,0.18)" strokeDasharray="2 4"/>
            <rect x={cx-72} y={cy-22} width="144" height="44" fill="#F6F2EC" stroke="#0E1410" rx="6"/>
            <text x={cx} y={cy+5} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" textAnchor="middle" fill="#0E1410">{label}</text>
          </g>
        );
      })}
    </svg>
  );
}

/* StackPlugin — for platform-measurement (more "data flowing in" feel) */
function StackPlugin() {
  const tools = ["Google Analytics","Segment","Snowflake","BigQuery","Tableau","Looker","dbt","Fivetran"];
  return (
    <svg viewBox="0 0 920 480" style={{width:"100%", height:"auto"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="20" y="32">WAREHOUSE · BI · ANALYTICS</text>
        <text x="900" y="32" textAnchor="end">BIDIRECTIONAL · REAL-TIME</text>
      </g>
      {/* left: tool list */}
      {tools.map((t,i)=>{
        const col = i % 2;
        const row = Math.floor(i/2);
        const x = 40 + col*150;
        const y = 80 + row*80;
        return (
          <g key={i}>
            <rect x={x} y={y} width="140" height="56" fill="#F6F2EC" stroke="rgba(14,20,16,0.25)" rx="8"/>
            <circle cx={x+18} cy={y+28} r="8" fill="rgba(201,139,58,0.18)" stroke="#C98B3A"/>
            <text x={x+34} y={y+25} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">SOURCE 0{i+1}</text>
            <text x={x+34} y={y+43} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#0E1410">{t}</text>
            {/* connector line */}
            <path d={`M${x+140},${y+28} C${x+220},${y+28} 460,200 540,240`} stroke="rgba(201,139,58,0.4)" fill="none" strokeWidth="1"/>
            <circle cx={x+140} cy={y+28} r="2.5" fill="#C98B3A"/>
          </g>
        );
      })}
      {/* central convergence */}
      <g>
        <rect x="540" y="150" width="340" height="180" fill="#0E1410" rx="14"/>
        <text x="560" y="180" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(246,242,236,0.5)">UNIFIED MEASUREMENT</text>
        <line x1="560" y1="194" x2="860" y2="194" stroke="rgba(246,242,236,0.15)"/>
        <text x="560" y="232" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="32" fill="#F6F2EC">One source.</text>
        <text x="560" y="266" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="32" fill="#C98B3A">All channels.</text>
        <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(246,242,236,0.55)" letterSpacing="1.4">
          <text x="560" y="300">ATTRIBUTION · INCREMENTALITY · LIFT</text>
          <text x="560" y="316">REAL-TIME · QUERYABLE · API</text>
        </g>
        {/* output beam */}
        <g>
          <path d="M880,240 L900,240" stroke="#C98B3A" strokeWidth="2"/>
          <polygon points="900,240 894,236 894,244" fill="#C98B3A"/>
        </g>
      </g>
      <text x="900" y="430" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(14,20,16,0.5)" letterSpacing="1.4">→ DASHBOARDS · WAREHOUSE EXPORT</text>
    </svg>
  );
}

/* ChannelOrbit — for retargeting "Reach Users Everywhere" (dark bg) */
function ChannelOrbit() {
  const channels = ["Display","Native","Social","Video","CTV","Email"];
  const cx = 400, cy = 230, r = 165;
  return (
    <svg viewBox="0 0 800 460" style={{width:"100%", height:"auto"}}>
      <defs>
        <radialGradient id="co-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.5"/>
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx={cx} cy={cy} r="200" fill="url(#co-glow)"/>
      <g stroke="rgba(246,242,236,0.18)" fill="none">
        <circle cx={cx} cy={cy} r={r}/>
        <circle cx={cx} cy={cy} r={r-50} strokeDasharray="3 5"/>
      </g>
      {/* user core */}
      <circle cx={cx} cy={cy} r="34" fill="#0E1410" stroke="#C98B3A" strokeWidth="1.2"/>
      <text x={cx} y={cy-2} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" textAnchor="middle" fill="#F6F2EC">one user</text>
      <text x={cx} y={cy+14} fontFamily="JetBrains Mono, monospace" fontSize="8" textAnchor="middle" fill="rgba(246,242,236,0.55)" letterSpacing="1.4">ID: u_8472</text>
      {/* channel nodes */}
      {channels.map((label,i)=>{
        const a = (i/channels.length)*Math.PI*2 - Math.PI/2;
        const x = cx + Math.cos(a)*r;
        const y = cy + Math.sin(a)*r;
        return (
          <g key={i}>
            <line x1={cx} y1={cy} x2={x} y2={y} stroke="rgba(246,242,236,0.18)"/>
            <circle cx={x} cy={y} r="22" fill="#1A2520" stroke="#C98B3A"/>
            <text x={x} y={y+4} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="13" textAnchor="middle" fill="#F6F2EC">{label}</text>
            {/* pulse */}
            <circle cx={x} cy={y} r="22" fill="none" stroke="#C98B3A" opacity="0.5" strokeDasharray="2 4"/>
          </g>
        );
      })}
      {/* corner annotations */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(246,242,236,0.55)">
        <text x="20" y="32">CROSS-CHANNEL FREQUENCY · CAPPED</text>
        <text x="780" y="32" textAnchor="end" fill="#C98B3A">SAME AUDIENCE</text>
        <text x="20" y="440">DETERMINISTIC + PROBABILISTIC ID</text>
        <text x="780" y="440" textAnchor="end">6 SURFACES · 1 USER</text>
      </g>
    </svg>
  );
}

/* AffiliateNetworkPanel — for affiliate hero (richer than TwoSidedDiagram) */
function AffiliateNetworkPanel() {
  return (
    <div style={{display:"grid", gap:14}}>
      <div style={{
        background:"var(--ink)", color:"var(--paper)", borderRadius:18,
        padding:24, fontFamily:"var(--font-mono)", display:"grid", gap:16
      }}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)"}}>
          <span>PARTNER LEDGER · LIVE</span>
          <span style={{display:"inline-flex", alignItems:"center", gap:8}}>
            <span style={{width:6, height:6, borderRadius:"50%", background:"var(--ochre)"}} className="pulse-dot"/> SETTLING
          </span>
        </div>
        <div style={{height:1, background:"rgba(246,242,236,0.12)"}}/>
        {[
          ["beacon.media","CONTENT · US","$8,420","+12%"],
          ["northwave.io","COUPONS · EU","$5,108","+4%"],
          ["pulseaff.co","INFLUENCER","$11,240","+18%"],
          ["lumen-traffic","CASHBACK · APAC","$2,910","+6%"],
        ].map(([n,t,v,d],i)=>(
          <div key={i} style={{display:"grid", gridTemplateColumns:"1.4fr 1fr auto auto", gap:12, alignItems:"center", fontSize:12}}>
            <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:18, color:"var(--paper)"}}>{n}</div>
            <div style={{color:"rgba(246,242,236,0.5)", fontSize:10, letterSpacing:"0.14em"}}>{t}</div>
            <div style={{fontFamily:"var(--font-display)", fontSize:16, color:"var(--paper)"}}>{v}</div>
            <div style={{color:"var(--ochre)", fontSize:11}}>{d}</div>
          </div>
        ))}
        <div style={{height:1, background:"rgba(246,242,236,0.12)"}}/>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14}}>
          {[["Net-7","Payout"],["<0.3%","Fraud"],["180+","GEOs"]].map(([v,l],i)=>(
            <div key={i}>
              <div style={{fontFamily:"var(--font-display)", fontSize:22, color:"var(--paper)"}}>{v}</div>
              <div style={{fontSize:9, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)", marginTop:4}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* VerticalsMatrix — affiliate "Active Verticals" replacement */
function VerticalsMatrix() {
  const cells = [
    { label:"E-commerce", offers:412, payout:"$28" },
    { label:"Finance", offers:186, payout:"$140", hot:true },
    { label:"Gaming", offers:298, payout:"$45" },
    { label:"Health & Wellness", offers:204, payout:"$62" },
    { label:"Technology", offers:172, payout:"$95" },
    { label:"Travel", offers:118, payout:"$78" },
    { label:"Insurance", offers:96, payout:"$220", hot:true },
    { label:"Education", offers:144, payout:"$88" },
    { label:"Subscriptions", offers:268, payout:"$48" },
    { label:"Lifestyle", offers:156, payout:"$36" },
  ];
  return (
    <svg viewBox="0 0 1100 540" style={{width:"100%", height:"auto"}}>
      <g fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="1.8" fill="rgba(14,20,16,0.55)">
        <text x="20" y="36">VERTICAL · OFFERS LIVE · AVG PAYOUT</text>
        <text x="1080" y="36" textAnchor="end" fill="#B37824">◆ HIGH-DEMAND</text>
      </g>
      {cells.map((c,i)=>{
        const col = i % 5, row = Math.floor(i/5);
        const x = 20 + col*215;
        const y = 70 + row*220;
        return (
          <g key={i}>
            <rect x={x} y={y} width="200" height="200" fill={c.hot?"#0E1410":"#F6F2EC"} stroke={c.hot?"#C98B3A":"rgba(14,20,16,0.2)"} strokeWidth={c.hot?1.5:1} rx="14"/>
            <text x={x+18} y={y+30} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c.hot?"rgba(246,242,236,0.5)":"rgba(14,20,16,0.45)"} letterSpacing="1.4">VERTICAL · {String(i+1).padStart(2,"0")}</text>
            <text x={x+18} y={y+78} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="26" fill={c.hot?"#F6F2EC":"#0E1410"}>{c.label}</text>
            <line x1={x+18} y1={y+102} x2={x+182} y2={y+102} stroke={c.hot?"rgba(246,242,236,0.2)":"rgba(14,20,16,0.15)"}/>
            <text x={x+18} y={y+128} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c.hot?"rgba(246,242,236,0.5)":"rgba(14,20,16,0.5)"} letterSpacing="1.4">OFFERS</text>
            <text x={x+18} y={y+162} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="32" fill={c.hot?"#C98B3A":"#0E1410"}>{c.offers}</text>
            <text x={x+182} y={y+128} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c.hot?"rgba(246,242,236,0.5)":"rgba(14,20,16,0.5)"} letterSpacing="1.4">AVG CPA</text>
            <text x={x+182} y={y+162} textAnchor="end" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill={c.hot?"#F6F2EC":"#0E1410"}>{c.payout}</text>
            {c.hot && <circle cx={x+186} cy={y+18} r="4" fill="#C98B3A"/>}
          </g>
        );
      })}
    </svg>
  );
}

/* HowItWorksHero — replacement for FlowSix on platform-how-it-works hero */
function HowItWorksHero() {
  return (
    <div style={{display:"grid", gap:14}}>
      <div style={{
        background:"var(--ink)", color:"var(--paper)", borderRadius:18,
        padding:24, fontFamily:"var(--font-mono)", display:"grid", gap:14
      }}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)"}}>
          <span>ROLLOUT TIMELINE</span>
          <span>30 DAYS · END-TO-END</span>
        </div>
        <div style={{height:1, background:"rgba(246,242,236,0.12)"}}/>
        {[
          ["DAY 1","Connect tracking","DONE"],
          ["DAY 3","Configure goals","DONE"],
          ["DAY 5","Audience built","DONE"],
          ["DAY 7","Campaigns live","ACTIVE"],
          ["DAY 14","AI optimizing","ACTIVE"],
          ["DAY 30","Full attribution","→"],
        ].map(([d,t,s],i)=>{
          const isActive = s === "ACTIVE";
          const isDone = s === "DONE";
          return (
            <div key={i} style={{display:"grid", gridTemplateColumns:"60px 1fr auto", gap:14, alignItems:"center"}}>
              <div style={{fontSize:10, letterSpacing:"0.18em", color:"rgba(246,242,236,0.45)"}}>{d}</div>
              <div style={{display:"flex", alignItems:"center", gap:12}}>
                <div style={{width:14, height:14, borderRadius:"50%",
                  background: isDone ? "var(--ochre)" : (isActive ? "transparent" : "transparent"),
                  border: isDone ? "none" : `1.5px solid ${isActive ? "var(--ochre)" : "rgba(246,242,236,0.3)"}`,
                  display:"grid", placeItems:"center"
                }}>
                  {isActive && <span style={{width:6, height:6, borderRadius:"50%", background:"var(--ochre)"}} className="pulse-dot"/>}
                </div>
                <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:20, color:"var(--paper)"}}>{t}</div>
              </div>
              <div style={{fontSize:10, letterSpacing:"0.16em", color: isActive ? "var(--ochre)" : "rgba(246,242,236,0.45)"}}>{s}</div>
            </div>
          );
        })}
        <div style={{height:1, background:"rgba(246,242,236,0.12)"}}/>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}>
          <div>
            <div style={{fontFamily:"var(--font-display)", fontSize:28, color:"var(--paper)"}}>1 wk</div>
            <div style={{fontSize:9, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)", marginTop:4}}>To live campaigns</div>
          </div>
          <div>
            <div style={{fontFamily:"var(--font-display)", fontSize:28, color:"var(--ochre)"}}>30 d</div>
            <div style={{fontSize:9, letterSpacing:"0.18em", textTransform:"uppercase", color:"rgba(246,242,236,0.55)", marginTop:4}}>To AI-optimized</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   NEW HERO ILLUSTRATIONS — added April 2026
   - PlatformProductMosaic — replaces SixProductsConstellation as
     platform-overview hero. Larger, mosaic of six product tiles
     wired to a shared data spine.
   - AcquisitionEngine — replaces DataLeakDiagram as solutions-
     advertisers hero. A unified acquisition engine with three
     channel feeds and a conversion meter.
   - PremiumReachLift — replaces BrandRipple as solutions-brand-
     awareness hero. Premium reach panels + brand-lift index curve.
   ============================================================ */

function PlatformProductMosaic() {
  const products = [
    { code:"01", name:"DSP",        sub:"Programmatic media" },
    { code:"02", name:"Affiliate",  sub:"Performance partners" },
    { code:"03", name:"Retarget",   sub:"Cross-device cloud" },
    { code:"04", name:"Measure",    sub:"Multi-touch attribution" },
    { code:"05", name:"Reporting",  sub:"Real-time dashboards" },
    { code:"06", name:"Fraud",      sub:"Pre-bid IVT shield" },
  ];
  const cols = 3;
  const tileW = 196, tileH = 130, gap = 16;
  const startX = 30, startY = 86;
  return (
    <svg viewBox="0 0 700 540" style={{width:"100%", height:"auto"}} role="img" aria-label="One platform, six products, one shared data layer">
      <defs>
        <linearGradient id="ppm-spine" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.0"/>
          <stop offset="50%" stopColor="#C98B3A" stopOpacity="0.9"/>
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0.0"/>
        </linearGradient>
      </defs>

      {/* top mono header */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="30" y="36">ONE PLATFORM · SIX PRODUCTS</text>
        <text x="670" y="36" textAnchor="end">SHARED DATA LAYER</text>
      </g>
      <line x1="30" y1="56" x2="670" y2="56" stroke="rgba(14,20,16,0.18)"/>

      {/* product tiles */}
      {products.map((p, i) => {
        const col = i % cols, row = Math.floor(i / cols);
        const x = startX + col * (tileW + gap);
        const y = startY + row * (tileH + gap);
        return (
          <g key={i}>
            <rect x={x} y={y} width={tileW} height={tileH} fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
            {/* product code top-right */}
            <text x={x + tileW - 14} y={y + 22} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(14,20,16,0.45)">PRODUCT · {p.code}</text>
            {/* serif italic name */}
            <text x={x + 18} y={y + 60} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="30" fill="#0E1410">{p.name}</text>
            {/* subtitle */}
            <text x={x + 18} y={y + 84} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">{p.sub.toUpperCase()}</text>
            {/* status row */}
            <line x1={x + 18} y1={y + tileH - 30} x2={x + tileW - 18} y2={y + tileH - 30} stroke="rgba(14,20,16,0.12)"/>
            <circle cx={x + 24} cy={y + tileH - 16} r="3.5" fill="#C98B3A" className="pulse-dot" style={{transformOrigin:`${x+24}px ${y+tileH-16}px`, animationDelay:`${i*0.25}s`}}/>
            <text x={x + 36} y={y + tileH - 13} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">SYNCED</text>
            <text x={x + tileW - 18} y={y + tileH - 13} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.45)">v4.{i+1}</text>
            {/* short descender into spine */}
            <line x1={x + tileW/2} y1={y + tileH} x2={x + tileW/2} y2={y + tileH + (row === 0 ? gap + tileH + 18 : 18)} stroke="rgba(14,20,16,0.18)" strokeDasharray="2 4"/>
          </g>
        );
      })}

      {/* shared spine bar */}
      {(() => {
        const spineY = startY + 2*tileH + gap + 36;
        return (
          <g>
            <rect x="30" y={spineY - 22} width="640" height="44" fill="#0E1410" rx="10"/>
            <rect x="30" y={spineY - 22} width="640" height="44" fill="url(#ppm-spine)" opacity="0.35" rx="10"/>
            <text x="48" y={spineY + 4} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="20" fill="#F6F2EC">Auctera <tspan fill="#C98B3A">D-REVX</tspan> data layer</text>
            <text x="652" y={spineY + 4} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(246,242,236,0.6)">ONE LOGIN · ONE LEDGER · ONE TRUTH</text>
            {/* connector dots where descenders meet the spine */}
            {Array.from({length: 6}).map((_, i) => {
              const col = i % cols;
              const x = startX + col * (tileW + gap) + tileW/2;
              return <circle key={i} cx={x} cy={spineY - 22} r="3.5" fill="#C98B3A"/>;
            })}
          </g>
        );
      })()}

      {/* bottom audit row */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.5)">
        <text x="30" y="528">UNIFIED ATTRIBUTION · CROSS-CHANNEL FREQUENCY · GLOBAL EXCLUSIONS</text>
        <text x="670" y="528" textAnchor="end" fill="#B37824">0 DUPLICATE CONVERSIONS</text>
      </g>
    </svg>
  );
}

function AcquisitionEngine() {
  const channels = [
    { code:"01", name:"DSP",       label:"Programmatic prospecting" },
    { code:"02", name:"Affiliate", label:"Performance partners" },
    { code:"03", name:"Retarget",  label:"Cross-device return" },
  ];
  const cx = 470, cy = 270; // engine center
  return (
    <svg viewBox="0 0 700 540" style={{width:"100%", height:"auto"}} role="img" aria-label="Three channels feeding one acquisition engine">
      <defs>
        <radialGradient id="ae-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.95"/>
          <stop offset="55%" stopColor="#A7701F" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="#0E1410"/>
        </radialGradient>
        <linearGradient id="ae-feed" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="rgba(14,20,16,0.05)"/>
          <stop offset="100%" stopColor="rgba(201,139,58,0.45)"/>
        </linearGradient>
      </defs>

      {/* top header */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="30" y="36">ACQUISITION ENGINE · UNIFIED</text>
        <text x="670" y="36" textAnchor="end">DSP + AFFILIATE + RETARGETING</text>
      </g>
      <line x1="30" y1="56" x2="670" y2="56" stroke="rgba(14,20,16,0.18)"/>

      {/* three channel feeders on the left */}
      {channels.map((c, i) => {
        const y = 110 + i * 110;
        return (
          <g key={i}>
            {/* channel card */}
            <rect x="30" y={y} width="200" height="80" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
            <text x="46" y={y + 26} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(14,20,16,0.45)">CHANNEL · {c.code}</text>
            <text x="46" y={y + 54} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="24" fill="#0E1410">{c.name}</text>
            <text x="46" y={y + 72} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">{c.label.toUpperCase()}</text>
            {/* feed line into engine */}
            <path d={`M230 ${y + 40} C 310 ${y + 40} 360 ${cy} ${cx - 70} ${cy}`} fill="none" stroke="url(#ae-feed)" strokeWidth="2.4"/>
            {/* travelling pulse along feed */}
            <circle r="3.5" fill="#C98B3A">
              <animateMotion dur="3.2s" begin={`${i * 0.5}s`} repeatCount="indefinite"
                path={`M230 ${y + 40} C 310 ${y + 40} 360 ${cy} ${cx - 70} ${cy}`}/>
            </circle>
          </g>
        );
      })}

      {/* central engine */}
      <g>
        <circle cx={cx} cy={cy} r="92" fill="none" stroke="rgba(14,20,16,0.18)" strokeDasharray="2 6"/>
        <circle cx={cx} cy={cy} r="68" fill="url(#ae-core)"/>
        <circle cx={cx} cy={cy} r="68" fill="none" stroke="#0E1410" strokeWidth="1"/>
        <circle cx={cx} cy={cy} r="84" fill="none" stroke="#C98B3A" strokeDasharray="3 5"/>
        <text x={cx} y={cy - 6} fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="20" textAnchor="middle" fill="#F6F2EC">acquisition</text>
        <text x={cx} y={cy + 14} fontFamily="JetBrains Mono, monospace" fontSize="9" textAnchor="middle" fill="rgba(246,242,236,0.65)" letterSpacing="1.6">D-REVX ENGINE</text>
        <text x={cx} y={cy + 32} fontFamily="JetBrains Mono, monospace" fontSize="8" textAnchor="middle" fill="rgba(246,242,236,0.45)" letterSpacing="1.6">SHARED ATTRIBUTION</text>
      </g>

      {/* output: conversion meter */}
      <g>
        <line x1={cx + 92} y1={cy} x2="640" y2={cy} stroke="#0E1410" strokeWidth="1.5"/>
        <polygon points={`640,${cy-6} 652,${cy} 640,${cy+6}`} fill="#0E1410"/>
        <rect x="540" y={cy - 70} width="120" height="44" fill="#0E1410" rx="8"/>
        <text x="552" y={cy - 50} fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(246,242,236,0.6)">REAL CAC</text>
        <text x="650" y={cy - 38} textAnchor="end" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#C98B3A">−34%</text>
        <rect x="540" y={cy + 24} width="120" height="44" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="8"/>
        <text x="552" y={cy + 44} fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">NEW CUSTOMERS</text>
        <text x="650" y={cy + 56} textAnchor="end" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#0E1410">2.4×</text>
      </g>

      {/* bottom audit row */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.5)">
        <text x="30" y="500">CROSS-CHANNEL FREQUENCY · UNIFIED EXCLUSIONS · ONE BUDGET</text>
        <text x="670" y="500" textAnchor="end" fill="#B37824">SHARED IDENTITY GRAPH</text>
        <line x1="30" y1="514" x2="670" y2="514" stroke="rgba(14,20,16,0.12)"/>
        <text x="30" y="532">ATTRIBUTION · MULTI-TOUCH</text>
        <text x="670" y="532" textAnchor="end">FRAUD · PRE-BID FILTERED</text>
      </g>
    </svg>
  );
}

function PremiumReachLift() {
  // brand-lift curve points (pre → post)
  const curve = [
    {x:50,  y:230, label:"PRE"},
    {x:130, y:222},
    {x:210, y:206},
    {x:300, y:178},
    {x:390, y:140},
    {x:470, y:104},
    {x:540, y:80,  label:"POST"},
  ];
  const path = curve.reduce((acc, p, i) => acc + (i===0?`M${p.x} ${p.y}`:` L${p.x} ${p.y}`), "");

  return (
    <svg viewBox="0 0 700 540" style={{width:"100%", height:"auto"}} role="img" aria-label="Premium reach panels and brand-lift index">
      <defs>
        <linearGradient id="prl-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0"/>
        </linearGradient>
      </defs>

      {/* top header */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="1.6" fill="rgba(14,20,16,0.55)">
        <text x="30" y="36">PREMIUM REACH · MEASURED LIFT</text>
        <text x="670" y="36" textAnchor="end">UPPER FUNNEL</text>
      </g>
      <line x1="30" y1="56" x2="670" y2="56" stroke="rgba(14,20,16,0.18)"/>

      {/* === LEFT: premium inventory tiles === */}
      <g>
        <text x="30" y="84" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">PREMIUM INVENTORY MIX</text>
        {/* CTV (large dark) */}
        <rect x="30" y="96" width="160" height="180" fill="#0E1410" rx="10"/>
        <text x="46" y="118" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(246,242,236,0.55)">CTV</text>
        <text x="46" y="178" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="40" fill="#C98B3A">$22</text>
        <text x="46" y="198" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(246,242,236,0.55)">eCPM · 7D</text>
        {/* play glyph */}
        <g transform="translate(126 232)" fill="#C98B3A" opacity="0.85">
          <circle r="20" fill="none" stroke="#C98B3A" opacity="0.5"/>
          <polygon points="-6,-9 10,0 -6,9"/>
        </g>
        {/* Online video */}
        <rect x="30" y="290" width="160" height="80" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
        <text x="46" y="312" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">ONLINE VIDEO</text>
        <text x="46" y="350" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="26" fill="#0E1410">$12.50</text>
        {/* Display */}
        <rect x="30" y="384" width="76" height="66" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
        <text x="42" y="404" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">DISPLAY</text>
        <text x="42" y="436" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="20" fill="#0E1410">$4.20</text>
        {/* Native */}
        <rect x="114" y="384" width="76" height="66" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
        <text x="126" y="404" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">NATIVE</text>
        <text x="126" y="436" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="20" fill="#0E1410">$6.80</text>
      </g>

      {/* === RIGHT: brand-lift chart === */}
      <g transform="translate(220 96)">
        <rect x="0" y="0" width="450" height="330" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="10"/>
        {/* labels */}
        <text x="20" y="24" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">BRAND-LIFT INDEX · 90D</text>
        <text x="430" y="24" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.6" fill="#B37824">+14 PT</text>
        {/* axis y */}
        <g fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.4" fill="rgba(14,20,16,0.4)">
          <line x1="40" y1="60" x2="40" y2="280" stroke="rgba(14,20,16,0.18)"/>
          <text x="32" y="64" textAnchor="end">100</text>
          <text x="32" y="124" textAnchor="end">75</text>
          <text x="32" y="184" textAnchor="end">50</text>
          <text x="32" y="244" textAnchor="end">25</text>
          <text x="32" y="284" textAnchor="end">0</text>
          {/* gridlines */}
          {[60,124,184,244].map((y,i)=>(<line key={i} x1="40" y1={y} x2="430" y2={y} stroke="rgba(14,20,16,0.08)" strokeDasharray="2 5"/>))}
        </g>
        {/* axis x */}
        <line x1="40" y1="280" x2="430" y2="280" stroke="rgba(14,20,16,0.18)"/>
        <g fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.4" fill="rgba(14,20,16,0.4)">
          <text x="50" y="298">WK 0</text>
          <text x="220" y="298" textAnchor="middle">WK 6</text>
          <text x="430" y="298" textAnchor="end">WK 12</text>
        </g>
        {/* chart shifted */}
        <g transform="translate(40 50)">
          {/* fill under curve */}
          <path d={`${path} L 540 280 L 50 280 Z`} fill="url(#prl-fill)" opacity="0.7"/>
          {/* curve */}
          <path d={path} fill="none" stroke="#0E1410" strokeWidth="1.6"/>
          {/* points */}
          {curve.map((p,i)=>(
            <g key={i}>
              <circle cx={p.x} cy={p.y} r={i === curve.length-1 ? 6 : 3.5} fill={i === curve.length-1 ? "#C98B3A" : "#0E1410"}/>
              {p.label && (
                <text x={p.x} y={p.y - 14} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.4" fill="rgba(14,20,16,0.55)">{p.label}</text>
              )}
            </g>
          ))}
          {/* delta callout */}
          <line x1="540" y1="80" x2="540" y2="232" stroke="#B37824" strokeDasharray="2 4"/>
          <text x="548" y="156" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="18" fill="#B37824">+14</text>
        </g>
      </g>

      {/* === BOTTOM: signal row (SOV + frequency + safety) === */}
      <g transform="translate(220 446)">
        <rect x="0" y="0" width="142" height="62" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="8"/>
        <text x="14" y="20" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">SHARE OF VOICE</text>
        <text x="14" y="48" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#0E1410">38<tspan fontSize="14" fill="rgba(14,20,16,0.55)">%</tspan></text>
        {/* mini bars */}
        <g transform="translate(86 28)">
          {[12,22,8,18].map((h,i)=>(<rect key={i} x={i*10} y={20-h} width="6" height={h} fill={i===1?"#C98B3A":"rgba(14,20,16,0.35)"}/>))}
        </g>

        <rect x="154" y="0" width="142" height="62" fill="#F9F5EE" stroke="rgba(14,20,16,0.22)" rx="8"/>
        <text x="168" y="20" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(14,20,16,0.5)">FREQUENCY · CAPPED</text>
        <text x="168" y="48" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#0E1410">3.2<tspan fontSize="12" fill="rgba(14,20,16,0.55)"> /wk</tspan></text>

        <rect x="308" y="0" width="142" height="62" fill="#0E1410" rx="8"/>
        <text x="322" y="20" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.6" fill="rgba(246,242,236,0.55)">BRAND SAFETY</text>
        <text x="322" y="48" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="22" fill="#C98B3A">99.6<tspan fontSize="12" fill="rgba(246,242,236,0.55)">%</tspan></text>
      </g>

      {/* foot mono row */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" fill="rgba(14,20,16,0.5)">
        <text x="30" y="528">REACH · 180+ MARKETS</text>
        <text x="670" y="528" textAnchor="end" fill="#B37824">LIFT · MEASURED, NOT CLAIMED</text>
      </g>
    </svg>
  );
}

Object.assign(window, {
  AudiencePrecision, FraudShield, CreativeGrid, ConversionFunnel,
  BrandSafetyStack, AttributionFlow, MarketplaceMesh, RetentionLoop,
  AnswerEngine, OfferLadder, RoiSlope, AgencyAccounts, BrandRipple,
  PublisherYield, TeamConstellation,
  DataLeakDiagram, SixProductsConstellation, TruthLedger,
  StackBlocks, StackPlugin, ChannelOrbit, AffiliateNetworkPanel,
  VerticalsMatrix, HowItWorksHero,
  PlatformProductMosaic, AcquisitionEngine, PremiumReachLift
});

Object.assign(window, {
  HeroArchitecture, FragmentedVsUnified, LatencyViz, LiquidityGlobe,
  FlowSix, BidNodePanel, DashboardTile, RetargetRing, TwoSidedDiagram, JourneyTimeline,
  RetargetGraphPanel, NetworkPanel, FlowPanel
});
