/* global React */
const { useEffect, useRef } = React;

/* Services panel illustrations — abstract, animated SVGs */
function SvcViz({ kind }) {
  if (kind === 'shield') return <ShieldViz />;
  if (kind === 'people') return <PeopleViz />;
  if (kind === 'private') return <PrivateViz />;
  if (kind === 'legacy') return <LegacyViz />;
  return null;
}

function ShieldViz() {
  return (
    <svg viewBox="0 0 400 400" className="svc__viz-svg" style={{ width: '70%', height: '70%' }}>
      <defs>
        <linearGradient id="sg1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.4" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* Concentric shields */}
      {[0,1,2,3].map(i => (
        <path key={i}
          d="M 200 60 L 320 110 L 320 220 Q 320 320 200 360 Q 80 320 80 220 L 80 110 Z"
          fill="none" stroke="var(--bone)" strokeOpacity={0.3 - i*0.06} strokeWidth="1"
          transform={`scale(${1 - i*0.13}) translate(${i*30}, ${i*30})`}
          style={{ transformOrigin: '200px 200px' }}
        >
          <animateTransform attributeName="transform" type="scale" values={`${1 - i*0.13};${1.04 - i*0.13};${1 - i*0.13}`} dur={`${5 + i}s`} repeatCount="indefinite" />
        </path>
      ))}
      <path
        d="M 200 60 L 320 110 L 320 220 Q 320 320 200 360 Q 80 320 80 220 L 80 110 Z"
        fill="url(#sg1)" stroke="var(--accent)" strokeWidth="1.5"
      />
      {/* crosshair */}
      <line x1="200" y1="60" x2="200" y2="360" stroke="var(--bone)" strokeOpacity="0.2" strokeDasharray="2 4" />
      <line x1="80" y1="210" x2="320" y2="210" stroke="var(--bone)" strokeOpacity="0.2" strokeDasharray="2 4" />
      <circle cx="200" cy="210" r="4" fill="var(--accent)" />
    </svg>
  );
}

function PeopleViz() {
  return (
    <svg viewBox="0 0 400 400" className="svc__viz-svg" style={{ width: '80%', height: '80%' }}>
      {/* Network of nodes */}
      {[
        [200,80],[120,160],[280,160],[80,260],[200,240],[320,260],[140,340],[260,340]
      ].map(([cx,cy], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r="6" fill={i===0?'var(--accent)':'var(--bone)'} fillOpacity={i===0?1:0.6} />
          <circle cx={cx} cy={cy} r="20" fill="none" stroke="var(--bone)" strokeOpacity="0.15">
            <animate attributeName="r" values="14;26;14" dur={`${3 + i*0.4}s`} repeatCount="indefinite" />
            <animate attributeName="stroke-opacity" values="0.25;0;0.25" dur={`${3 + i*0.4}s`} repeatCount="indefinite" />
          </circle>
        </g>
      ))}
      {/* Lines */}
      {[
        [200,80,120,160],[200,80,280,160],[120,160,200,240],[280,160,200,240],
        [120,160,80,260],[280,160,320,260],[80,260,140,340],[200,240,140,340],
        [200,240,260,340],[320,260,260,340]
      ].map(([x1,y1,x2,y2], i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
          stroke="var(--bone)" strokeOpacity="0.2" strokeWidth="0.6" />
      ))}
    </svg>
  );
}

function PrivateViz() {
  // Vault rings / private safe
  return (
    <svg viewBox="0 0 400 400" className="svc__viz-svg" style={{ width: '75%', height: '75%' }}>
      {[180, 150, 120, 90, 60].map((r, i) => (
        <circle key={i} cx="200" cy="200" r={r}
          fill="none" stroke={i===2?'var(--accent)':'var(--bone)'}
          strokeOpacity={i===2?0.7:0.2 - i*0.02}
          strokeWidth={i===2?1.4:0.8}
          strokeDasharray={i%2 ? '4 6' : ''}
        >
          <animateTransform attributeName="transform" type="rotate" from={`0 200 200`} to={`${i%2?360:-360} 200 200`} dur={`${30 + i*8}s`} repeatCount="indefinite" />
        </circle>
      ))}
      {/* Tick marks */}
      {[...Array(24)].map((_, i) => {
        const a = (i / 24) * Math.PI * 2;
        const x1 = 200 + Math.cos(a) * 175;
        const y1 = 200 + Math.sin(a) * 175;
        const x2 = 200 + Math.cos(a) * 185;
        const y2 = 200 + Math.sin(a) * 185;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--bone)" strokeOpacity={i%6===0?0.5:0.2} strokeWidth="1" />;
      })}
      <circle cx="200" cy="200" r="6" fill="var(--accent)" />
    </svg>
  );
}

function LegacyViz() {
  // Tree / lineage
  return (
    <svg viewBox="0 0 400 400" className="svc__viz-svg" style={{ width: '85%', height: '85%' }}>
      <line x1="200" y1="40" x2="200" y2="360" stroke="var(--bone)" strokeOpacity="0.3" strokeWidth="1" />
      {[
        [200,80,100,160],[200,80,300,160],
        [100,160,60,240],[100,160,140,240],
        [300,160,260,240],[300,160,340,240],
        [60,240,40,320],[60,240,80,320],
        [140,240,160,320],
        [260,240,240,320],
        [340,240,320,320],[340,240,360,320]
      ].map(([x1,y1,x2,y2], i) => (
        <path key={i} d={`M ${x1} ${y1} Q ${x1} ${(y1+y2)/2} ${x2} ${y2}`}
          fill="none" stroke="var(--bone)" strokeOpacity="0.35" strokeWidth="0.8" />
      ))}
      {[[200,40],[200,80],[100,160],[300,160],[60,240],[140,240],[260,240],[340,240],
        [40,320],[80,320],[160,320],[240,320],[320,320],[360,320]
      ].map(([cx,cy], i) => (
        <circle key={i} cx={cx} cy={cy} r={i===0?6:i===1?5:3.5}
          fill={i<2?'var(--accent)':'var(--bone)'} fillOpacity={i<2?1:0.7} />
      ))}
      <text x="200" y="32" textAnchor="middle" fill="var(--bone)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2">YOU</text>
      <text x="200" y="380" textAnchor="middle" fill="var(--accent)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2">LEGACY</text>
    </svg>
  );
}

/* ============================================================
   Timeline visual — abstract diagram for each stage
   ============================================================ */
function TimelineViz({ stage }) {
  return (
    <svg viewBox="0 0 600 400" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="tlg" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0.6" />
        </linearGradient>
      </defs>
      {/* Grid */}
      {[...Array(12)].map((_, i) => (
        <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2="400" stroke="var(--bone)" strokeOpacity="0.05" />
      ))}
      {[...Array(8)].map((_, i) => (
        <line key={`h${i}`} x1="0" y1={i*50} x2="600" y2={i*50} stroke="var(--bone)" strokeOpacity="0.05" />
      ))}

      {/* Growth curve — different shape per stage */}
      <path
        d={
          stage === 0 ? "M 40 340 Q 200 320 300 280 T 560 240" : // startup: shallow
          stage === 1 ? "M 40 340 Q 200 280 300 220 T 560 140" : // growth: rising
          stage === 2 ? "M 40 340 Q 200 240 300 160 T 560 80" :  // scaling: steeper
          stage === 3 ? "M 40 340 Q 200 200 300 140 T 560 100" : // legacy: plateau
                       "M 40 340 Q 200 180 300 120 T 560 110"    // succession: stable
        }
        fill="none" stroke="var(--accent)" strokeWidth="1.5"
        strokeDasharray="600"
        strokeDashoffset={stage === 0 ? "300" : "0"}
        style={{ transition: 'all 1s var(--ease-out)' }}
      />

      {/* Stage indicator dot */}
      {[
        [80, 320], [180, 270], [300, 200], [420, 140], [540, 110]
      ].map(([cx, cy], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r={i === stage ? 8 : 4}
            fill={i === stage ? 'var(--accent)' : 'var(--bone)'}
            fillOpacity={i === stage ? 1 : 0.4}
            style={{ transition: 'all 0.6s var(--ease-out)' }}
          />
          {i === stage && (
            <circle cx={cx} cy={cy} r="18" fill="none" stroke="var(--accent)" strokeOpacity="0.4">
              <animate attributeName="r" values="14;28;14" dur="2.4s" repeatCount="indefinite" />
              <animate attributeName="stroke-opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite" />
            </circle>
          )}
        </g>
      ))}

      {/* Y-axis label */}
      <text x="20" y="40" fill="var(--muted)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2">RISK SURFACE</text>
      <text x="540" y="390" fill="var(--muted)" fontFamily="var(--mono)" fontSize="9" letterSpacing="2">TIME</text>

      {/* Stage label */}
      <text x="540" y="60" textAnchor="end" fill="var(--accent)" fontFamily="var(--mono)" fontSize="11" letterSpacing="2">
        STAGE 0{stage + 1} / 05
      </text>
    </svg>
  );
}

window.SvcViz = SvcViz;
window.TimelineViz = TimelineViz;