export type ProcessArt = 'consultation' | 'study' | 'design' | 'installation' | 'monitoring';

const C = {
  sun: '#F0A868',
  sunDeep: '#C97331',
  graphite: '#14284B',
  graphiteDeep: '#0B1220',
  volt: '#5FD3D9',
  paper: '#F7F5F0'
};

function Sun({ cx, cy }: { cx: number; cy: number }) {
  return (
    <g>
      {Array.from({ length: 8 }).map((_, i) => {
        const a = (i * Math.PI) / 4;
        const x1 = cx + Math.cos(a) * 20;
        const y1 = cy + Math.sin(a) * 20;
        const x2 = cx + Math.cos(a) * 25;
        const y2 = cy + Math.sin(a) * 25;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={C.sunDeep} strokeWidth={2} strokeLinecap="round" />;
      })}
      <circle cx={cx} cy={cy} r={16} fill="url(#sun-core)" />
    </g>
  );
}

function Sparkle({ x, y }: { x: number; y: number }) {
  return <path d={`M${x} ${y - 5} V${y + 5} M${x - 5} ${y} H${x + 5}`} stroke={C.sunDeep} strokeWidth={1.6} strokeLinecap="round" />;
}

export function IllustrationArt({ art }: { art: ProcessArt }) {
  return (
    <svg viewBox="0 0 200 200" className="h-48 w-full sm:h-52" aria-hidden="true">
      <defs>
        <radialGradient id="sun-core" cx="35%" cy="35%" r="70%">
          <stop offset="0%" stopColor={C.paper} />
          <stop offset="60%" stopColor={C.sun} />
          <stop offset="100%" stopColor={C.sunDeep} />
        </radialGradient>
        <linearGradient id="surface" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFF4E2" />
          <stop offset="100%" stopColor="#F1DCBC" />
        </linearGradient>
      </defs>

      <rect width="200" height="200" fill="url(#surface)" />

      {art === 'consultation' && (
        <g>
          <Sun cx={150} cy={40} />
          <path
            d="M28 44 h70 a14 14 0 0 1 14 14 v2 a14 14 0 0 1 -14 14 h-44 l-6 10 v-10 h-6 a14 14 0 0 1 -14 -14 v-2 a14 14 0 0 1 14 -14 z"
            fill="none"
            stroke={C.graphite}
            strokeWidth={2}
            opacity={0.35}
          />
          <path d="M106 74 a24 24 0 0 0 14 22 a24 24 0 0 1 -12 -44" fill="none" stroke={C.graphite} strokeWidth={2} />
          <path d="M104 78 a22 22 0 0 0 16 20 a22 22 0 0 1 -14 -20 z" fill="#ffffe0" stroke={C.graphite} strokeWidth={1.6} />
          <circle cx={130} cy={74} r={22} fill="#ffffe0" stroke={C.graphite} strokeWidth={1.6} />
          <path d="M130 62 v24 M118 74 h24" stroke={C.volt} strokeWidth={2.5} strokeLinecap="round" />
          <circle cx={51} cy={71} r={11} fill={C.sun} />
          <path d="M51 60 a11 11 0 0 1 11 11 a11 11 0 0 1 -11 11 a11 11 0 0 1 -11 -11 a11 11 0 0 1 11 -11 z" fill="none" stroke={C.graphite} strokeWidth={1.4} />
          <path d="M51 68 l5 3 l-7 4" fill="none" stroke={C.graphite} strokeWidth={1.4} strokeLinecap="round" strokeLinejoin="round" />
          <path d="M34 132 l-3 14 12 -7" fill={C.graphite} stroke={C.graphite} strokeWidth={1.2} />
          <Sparkle x={172} y={150} />
          <Sparkle x={36} y={154} />
        </g>
      )}

      {art === 'study' && (
        <g>
          <Sun cx={148} cy={42} />
          <rect x={132} y={50} width={58} height={48} rx={6} fill={C.paper} stroke={C.graphite} strokeWidth={2} />
          <rect x={138} y={44} width={22} height={8} rx={3} fill={C.sunDeep} />
          <g fill="none" stroke={C.graphite} strokeWidth={1.6} strokeLinecap="round">
            <path d="M140 68 h44" />
            <path d="M140 78 h30" opacity={0.5} />
            <path d="M140 88 h44" opacity={0.3} />
          </g>
          <circle cx={68} cy={84} r={36} fill="#FFFFFF" opacity={0.9} stroke={C.graphite} strokeWidth={2.5} />
          <path d="M86 96 v14 a4 4 0 0 1 -4 4 h-8 a4 4 0 0 1 -4 -4 v-14" fill="none" stroke={C.graphite} strokeWidth={2} strokeLinecap="round" />
          <path d="M96 134 l14 -6" stroke={C.graphite} strokeWidth={8} strokeLinecap="round" />
          <path d="M108 126 l16 -22" stroke={C.sunDeep} strokeWidth={4} strokeLinecap="round" />
          <Sparkle x={46} y={46} />
          <Sparkle x={170} y={132} />
        </g>
      )}

      {art === 'design' && (
        <g>
          <Sun cx={150} cy={40} />
          <line x1={44} y1={60} x2={162} y2={60} stroke={C.graphite} strokeWidth={1.6} />
          <path d="M44 60 l-7 -4 M44 60 l-7 4 M162 60 l7 -4 M162 60 l7 4" stroke={C.graphite} strokeWidth={1.6} fill="none" strokeLinecap="round" />
          <path d="M46 78 l14 6 l-14 10 z" fill={C.sunDeep} />
          <rect x={34} y={92} width={30} height={24} fill={C.sun} />
          <rect x={46} y={88} width={4} height={4} fill={C.graphiteDeep} />
          <path d="M8 40 v30 M128 40 v30" stroke={C.graphite} strokeWidth={2} strokeLinecap="round" strokeDasharray="2 6" />
          <rect x={120} y={66} width={34} height={30} rx={3} fill={C.paper} stroke={C.graphite} strokeWidth={2} />
          <path d="M120 74 l8 -6 6 6 10 -8 10 8" fill="none" stroke={C.volt} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
          <path d="M92 128 h88 v6 h-88 z" fill={C.graphite} opacity={0.1} />
          <Sparkle x={176} y={148} />
        </g>
      )}

      {art === 'installation' && (
        <g>
          <Sun cx={34} cy={34} />
          <line x1={104} y1={124} x2={104} y2={70} stroke={C.graphite} strokeWidth={4} strokeLinecap="round" />
          <circle cx={108} cy={62} r={10} fill={C.sun} stroke={C.graphite} strokeWidth={2} />
          <path d="M92 80 a16 16 0 0 1 32 0 z" fill={C.graphite} />
          <rect x={96} y={92} width={24} height={26} rx={6} fill={C.paper} stroke={C.graphite} strokeWidth={2} />
          <path d="M86 88 v6 M130 88 v6" stroke={C.graphite} strokeWidth={2} strokeLinecap="round" />
          <line x1={104} y1={108} x2={132} y2={116} stroke={C.graphite} strokeWidth={11} strokeLinecap="round" />
          <line x1={136} y1={118} x2={150} y2={132} stroke={C.sunDeep} strokeWidth={4} strokeLinecap="round" />
          <rect x={120} y={146} width={46} height={28} rx={6} fill={C.graphite} />
          <path d="M143 146 v-6 a6 6 0 0 1 12 0 v6" fill="none" stroke={C.paper} strokeWidth={3} />
          <path d="M128 160 h8 l5 5 l8 -14 l6 9 h8" fill="none" stroke={C.volt} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
          <Sparkle x={170} y={70} />
          <Sparkle x={58} y={148} />
        </g>
      )}

      {art === 'monitoring' && (
        <g>
          <Sun cx={152} cy={36} />
          <path d="M40 128 A 60 60 0 0 1 160 128" fill="none" stroke={C.graphite} strokeWidth={12} strokeLinecap="round" opacity={0.16} />
          <path d="M40 128 A 60 60 0 0 1 160 128" fill="none" stroke={C.sunDeep} strokeWidth={12} strokeLinecap="round" strokeDasharray="56 200" />
          <path d="M158 128 v-4 M126 128 v-4 M100 128 v-4 M74 128 v-4 M44 128 v-4" stroke={C.graphite} strokeWidth={2} opacity={0.45} />
          <path d="M100 128 L 70 92" stroke={C.graphite} strokeWidth={5} strokeLinecap="round" />
          <circle cx={100} cy={128} r={7} fill={C.paper} stroke={C.graphite} strokeWidth={2.5} />
          <path d="M70 86 a13 13 0 1 1 -18 4" fill="none" stroke={C.volt} strokeWidth={2.5} strokeLinecap="round" />
          <path d="M96 46 l-6 10 h7 l-5 12 14 -14 h-8 l6 -10 z" fill={C.sunDeep} />
          <g stroke={C.volt} strokeWidth={2.5} strokeLinecap="round" fill="none">
            <line x1={30} y1={156} x2={52} y2={156} />
            <line x1={52} y1={156} x2={52} y2={140} />
            <line x1={52} y1={140} x2={70} y2={140} />
          </g>
        </g>
      )}
    </svg>
  );
}