// philosophy.jsx — animated diagrams

function PhiloDiagram({ kind }) {
  const t = useDiagramTime();
  const c = "oklch(82% 0.12 220)";
  const w = 320, h = 140;

  if (kind === "dx") {
    // Multiple paths converging into a single golden path
    const paths = [];
    for (let i = 0; i < 5; i++) {
      const y0 = 20 + i * 25;
      const sway = Math.sin(t * 0.6 + i) * 6;
      paths.push(
        <path key={i}
          d={`M 0 ${y0} C 80 ${y0 + sway}, 140 ${70 + (i-2)*4}, ${w} 70`}
          fill="none" stroke={i === 2 ? c : "rgba(255,255,255,0.18)"}
          strokeWidth={i === 2 ? 1.5 : 1}
          strokeDasharray={i === 2 ? "0" : "3 3"} />
      );
    }
    const dotX = ((t * 60) % w);
    return (
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%">
        {paths}
        <circle cx={dotX} cy={70} r={3} fill={c}>
        </circle>
        <circle cx={dotX} cy={70} r={6} fill={c} opacity="0.3" />
      </svg>
    );
  }

  if (kind === "gitops") {
    // Git node → arrow → cluster nodes; pulse syncs
    const pulse = (t * 0.8) % 1;
    return (
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%">
        {/* git node */}
        <rect x={20} y={55} width={60} height={30} rx={4} fill="none" stroke={c} strokeWidth={1.2}/>
        <text x={50} y={75} fill={c} fontSize="11" fontFamily="JetBrains Mono, monospace" textAnchor="middle">git</text>
        {/* arrow */}
        <line x1={80} y1={70} x2={150} y2={70} stroke="rgba(255,255,255,0.3)" strokeDasharray="3 3"/>
        <polygon points={`${145+pulse*5},66 ${155+pulse*5},70 ${145+pulse*5},74`} fill={c} opacity={1 - pulse}/>
        {/* cluster nodes */}
        {[0, 1, 2].map(i => (
          <g key={i}>
            <rect x={170} y={20 + i*40} width={50} height={26} rx={3}
              fill="none" stroke="rgba(255,255,255,0.3)" strokeWidth={1}/>
            <circle cx={195} cy={33 + i*40} r={3}
              fill={c} opacity={Math.max(0, Math.sin(t*1.2 - i*0.6))}/>
          </g>
        ))}
        {/* sync indicators */}
        {[0, 1, 2].map(i => (
          <circle key={"s"+i} cx={250} cy={33 + i*40} r={4}
            fill="none" stroke={c} strokeWidth="1"
            opacity={Math.max(0, Math.sin(t*1.2 - i*0.6))} />
        ))}
      </svg>
    );
  }

  if (kind === "security") {
    // shield with concentric rings + scanning beam
    const cx = w / 2, cy = h / 2;
    const beamAngle = (t * 60) % 360;
    return (
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%">
        {[1, 2, 3].map(i => (
          <circle key={i} cx={cx} cy={cy} r={i * 22} fill="none"
            stroke="rgba(255,255,255,0.12)" strokeWidth="1" strokeDasharray="2 4"/>
        ))}
        {/* shield */}
        <path d={`M ${cx} ${cy-30} L ${cx+24} ${cy-15} L ${cx+24} ${cy+5} Q ${cx+24} ${cy+22} ${cx} ${cy+34} Q ${cx-24} ${cy+22} ${cx-24} ${cy+5} L ${cx-24} ${cy-15} Z`}
          fill="rgba(125,211,252,0.08)" stroke={c} strokeWidth="1.2"/>
        {/* scanning beam */}
        <g transform={`rotate(${beamAngle} ${cx} ${cy})`}>
          <line x1={cx} y1={cy} x2={cx + 70} y2={cy}
            stroke={c} strokeWidth="1" opacity="0.6" />
        </g>
        {/* checkmarks at intervals */}
        {[0, 90, 180, 270].map(a => {
          const rad = (a) * Math.PI / 180;
          const px = cx + Math.cos(rad) * 60;
          const py = cy + Math.sin(rad) * 60;
          const visible = Math.abs(((beamAngle - a + 540) % 360) - 180) > 90 ? 1 : 0.3;
          return <circle key={a} cx={px} cy={py} r={3} fill={c} opacity={visible}/>;
        })}
      </svg>
    );
  }

  if (kind === "observe") {
    // Three live time-series wave traces
    const series = [0, 1, 2];
    return (
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="100%">
        {/* axis */}
        <line x1={20} y1={h-20} x2={w-10} y2={h-20} stroke="rgba(255,255,255,0.15)"/>
        <line x1={20} y1={20} x2={20} y2={h-20} stroke="rgba(255,255,255,0.15)"/>
        {series.map((s, idx) => {
          const points = [];
          for (let x = 20; x <= w-10; x += 4) {
            const phase = (x - 20) * 0.05 + t * (1 + idx * 0.4);
            const amp = idx === 1 ? 22 : 14;
            const y = h/2 + Math.sin(phase) * amp + Math.sin(phase * 2.3) * (amp/3) - (idx-1)*8;
            points.push(`${x},${y}`);
          }
          const colors = [c, "oklch(82% 0.12 60)", "oklch(72% 0.15 320)"];
          return (
            <polyline key={s}
              points={points.join(" ")}
              fill="none" stroke={colors[idx]} strokeWidth="1.2"
              opacity={idx === 1 ? 1 : 0.5}/>
          );
        })}
        {/* dot at right edge of middle series */}
        <circle cx={w-10} cy={h/2 + Math.sin((w-30)*0.05 + t * 1.4) * 22 - 8} r={3} fill={c}/>
      </svg>
    );
  }

  return null;
}

function useDiagramTime() {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf, start;
    const tick = (ts) => {
      if (!start) start = ts;
      setT((ts - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return t;
}

function Philosophy({ t }) {
  return (
    <section className="section" data-screen-label="02 Philosophie">
      <div className="section-tag">{t.philosophy.tag}</div>
      <h2 className="section-title">{t.philosophy.title} <em>{t.philosophy.titleEm}</em></h2>
      <p className="section-sub">{t.philosophy.sub}</p>
      <div className="philo-grid">
        {t.philosophy.cards.map((c) => (
          <div key={c.n} className="philo-card">
            <div className="num">{c.n}</div>
            <h3>{c.t}</h3>
            <p>{c.d}</p>
            <div className="diagram"><PhiloDiagram kind={c.diagram} /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Philosophy = Philosophy;