/** Side illustration for platform services — marketplace + orchestration layers. */
export function PlatformStackGraphic({ className = '' }: { className?: string }) {
  const layers = [
    { label: 'Voice & messaging', color: '#fbbf24' },
    { label: 'Transaction orchestrator', color: '#fb923c' },
    { label: 'Wallet registry', color: '#f97316' },
    { label: 'Identity service', color: '#ea580c' },
    { label: 'Phoenix ledger', color: '#c2410c' },
  ];

  return (
    <div className={`relative ${className}`} aria-hidden>
      <svg viewBox="0 0 280 320" className="h-auto w-full max-w-xs" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="stack-shine" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.08" />
            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
          </linearGradient>
        </defs>
        {layers.map((layer, i) => {
          const y = 24 + i * 52;
          const width = 200 - i * 12;
          const x = (280 - width) / 2;
          return (
            <g key={layer.label} transform={`translate(${x} ${y})`}>
              <rect
                width={width}
                height={40}
                rx="8"
                fill="#111827"
                stroke={layer.color}
                strokeOpacity="0.5"
                strokeWidth="1"
              />
              <rect width={width} height={40} rx="8" fill="url(#stack-shine)" />
              <rect x="0" y="0" width={width} height="3" rx="1.5" fill={layer.color} opacity="0.8" />
              <text x={width / 2} y="24" textAnchor="middle" fill="#e5e7eb" fontSize="10" fontWeight="500">
                {layer.label}
              </text>
            </g>
          );
        })}
        <text x="140" y="310" textAnchor="middle" fill="#6b7280" fontSize="9">
          Phoenix marketplace stack
        </text>
      </svg>
    </div>
  );
}
