// Signature visual: an organic "drijfveren-spectrum" (curved bands of 7 colors)
// Used in hero, results screen, throughout. Two variants: arc + wheel.

function SpectrumArc({ height = 360, animate = true, highlight = null }) {
  // Editorial pillar: 7 thin vertical lines, each with one filled circle at varying heights.
  // Reads like a chart / score / diagram rather than a rainbow.
  const colors = window.COLORS;
  const W = 1200, H = 400;
  const padX = 80;
  const lineY1 = 60, lineY2 = 340;
  const step = (W - padX * 2) / (colors.length - 1);

  // Hand-tuned vertical positions of each circle along its line — composed, not random.
  const positions = [0.62, 0.28, 0.74, 0.18, 0.55, 0.36, 0.82];
  const sizes     = [44,   28,   52,   24,   38,   30,   58];

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      preserveAspectRatio="xMidYMid meet"
      style={{ width: '100%', height: height, display: 'block' }}
      aria-hidden="true"
    >
      {/* baseline */}
      <line x1={padX - 20} y1={lineY2} x2={W - padX + 20} y2={lineY2} stroke="#1A1A1A" strokeOpacity="0.18" strokeWidth="1" />

      {colors.map((c, i) => {
        const x = padX + i * step;
        const cy = lineY1 + (lineY2 - lineY1) * positions[i];
        const r = sizes[i] / 2;
        const dimmed = highlight && highlight !== c.key;
        const op = dimmed ? 0.15 : 1;
        return (
          <g key={c.key} style={{ transition: 'opacity .4s ease' }} opacity={op}>
            {/* vertical guide line */}
            <line x1={x} y1={lineY1} x2={x} y2={lineY2} stroke="#1A1A1A" strokeOpacity="0.12" strokeWidth="1" />
            {/* tick at top */}
            <line x1={x - 6} y1={lineY1} x2={x + 6} y2={lineY1} stroke="#1A1A1A" strokeOpacity="0.25" strokeWidth="1" />
            {/* the dot */}
            <circle cx={x} cy={cy} r={r} fill={c.hex} />
            {/* faint outer ring */}
            <circle cx={x} cy={cy} r={r + 8} fill="none" stroke={c.hex} strokeOpacity="0.18" strokeWidth="1" />
            {/* label */}
            <text
              x={x}
              y={lineY2 + 24}
              textAnchor="middle"
              fontFamily="JetBrains Mono, ui-monospace, monospace"
              fontSize="10"
              letterSpacing="2"
              fill="#6B6A60"
              style={{ textTransform: 'uppercase' }}
            >
              {String(i + 1).padStart(2, '0')} · {c.naam}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// Compact wheel/arc used in nav, footer, cards
function SpectrumMark({ size = 64, gap = 4 }) {
  const colors = window.COLORS;
  const r = size / 2;
  const inner = r - 12;
  const segs = colors.length;
  const angleStep = (Math.PI * 0.95) / segs; // half wheel-ish
  const startA = Math.PI * 1.025;

  return (
    <svg width={size} height={size / 2 + 6} viewBox={`0 0 ${size} ${size / 2 + 6}`} aria-hidden="true">
      {colors.map((c, i) => {
        const a1 = startA + i * angleStep;
        const a2 = a1 + angleStep - 0.04;
        const x1 = r + Math.cos(a1) * inner;
        const y1 = r + Math.sin(a1) * inner;
        const x2 = r + Math.cos(a2) * inner;
        const y2 = r + Math.sin(a2) * inner;
        const xo1 = r + Math.cos(a1) * r;
        const yo1 = r + Math.sin(a1) * r;
        const xo2 = r + Math.cos(a2) * r;
        const yo2 = r + Math.sin(a2) * r;
        const d = `M ${x1} ${y1} L ${xo1} ${yo1} A ${r} ${r} 0 0 1 ${xo2} ${yo2} L ${x2} ${y2} A ${inner} ${inner} 0 0 0 ${x1} ${y1} Z`;
        return <path key={c.key} d={d} fill={c.hex} />;
      })}
    </svg>
  );
}

// Vertical strip of 7 colors used as a visual rule
function SpectrumRule({ orientation = 'h', length = 240, thickness = 6 }) {
  const colors = window.COLORS;
  const isH = orientation === 'h';
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: isH ? 'row' : 'column',
        width: isH ? length : thickness,
        height: isH ? thickness : length,
        gap: 2,
      }}
      aria-hidden="true"
    >
      {colors.map(c => (
        <div key={c.key} style={{ flex: 1, background: c.hex }} />
      ))}
    </div>
  );
}

// Big result visual: organic blob in one color + smaller accents
function SpectrumOrb({ activeKey, size = 320 }) {
  const c = window.colorByKey(activeKey);
  const others = window.COLORS.filter(x => x.key !== activeKey);
  return (
    <svg width={size} height={size} viewBox="0 0 320 320" aria-hidden="true">
      <defs>
        <radialGradient id="orb" cx="40%" cy="35%">
          <stop offset="0%" stopColor={c.hex} stopOpacity="1" />
          <stop offset="100%" stopColor={c.hex} stopOpacity="0.85" />
        </radialGradient>
      </defs>
      {/* organic blob path */}
      <path
        d="M160 30 C 230 35, 290 80, 285 160 C 282 230, 230 285, 160 288 C 95 290, 38 240, 35 170 C 32 100, 90 28, 160 30 Z"
        fill="url(#orb)"
      />
      {/* subtle texture */}
      <circle cx="120" cy="110" r="40" fill={c.hex} opacity="0.25" />
      <circle cx="220" cy="180" r="60" fill="#1A1A1A" opacity="0.05" />

      {/* small dots of other colors orbiting */}
      {others.map((o, i) => {
        const ang = (i / others.length) * Math.PI * 2 + 0.6;
        const x = 160 + Math.cos(ang) * 142;
        const y = 160 + Math.sin(ang) * 142;
        return <circle key={o.key} cx={x} cy={y} r="6" fill={o.hex} opacity="0.55" />;
      })}
    </svg>
  );
}

window.SpectrumArc = SpectrumArc;
window.SpectrumMark = SpectrumMark;
window.SpectrumRule = SpectrumRule;
window.SpectrumOrb = SpectrumOrb;