// Engine — rotating core with concentric orbits (L1 data, L2 5-axis scoring, L3 XAI+RAG)
// Inner ring has 5 nodes — one per evaluation axis. Trust Principle line below.

const { useState: useStateEng } = React;

function EngineCore({ axes = [] }) {
  return (
    <>
    <div className="engine__core" aria-hidden="true">
      <svg viewBox="0 0 480 480" style={{ width: '100%', height: '100%', display: 'block' }}>
        <defs>
          <radialGradient id="core-glow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor="#00D4FF" stopOpacity="0.65" />
            <stop offset="0.5" stopColor="#7C3AED" stopOpacity="0.35" />
            <stop offset="1" stopColor="#7C3AED" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="ring-grad" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="#00D4FF" stopOpacity="0.7" />
            <stop offset="1" stopColor="#7C3AED" stopOpacity="0.7" />
          </linearGradient>
        </defs>

        {/* Glow */}
        <circle cx="240" cy="240" r="200" fill="url(#core-glow)" opacity="0.6">
          <animate attributeName="opacity" values="0.4;0.7;0.4" dur="6s" repeatCount="indefinite" />
        </circle>

        {/* L1 outer ring (slowest) — data sources */}
        <g style={{ transformOrigin: '240px 240px', animation: 'spin-cw 60s linear infinite' }}>
          <circle cx="240" cy="240" r="210" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="1" strokeDasharray="2 6" />
          {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, i) => {
            const r = 210;
            const x = 240 + r * Math.cos((deg * Math.PI) / 180);
            const y = 240 + r * Math.sin((deg * Math.PI) / 180);
            return <circle key={i} cx={x} cy={y} r="3" fill="#F5F7FA" opacity="0.55" />;
          })}
          <text x="240" y="38" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(245,247,250,0.5)" letterSpacing="2">L1 · DATA</text>
        </g>

        {/* L2 middle ring — 5 axes (one node per axis) */}
        <g style={{ transformOrigin: '240px 240px', animation: 'spin-ccw 38s linear infinite' }}>
          <circle cx="240" cy="240" r="150" fill="none" stroke="rgba(124,58,237,0.32)" strokeWidth="1" />
          {[0, 72, 144, 216, 288].map((deg, i) => {
            const r = 150;
            const a = (deg - 90) * Math.PI / 180;
            const x = 240 + r * Math.cos(a);
            const y = 240 + r * Math.sin(a);
            return (
              <g key={i}>
                <circle cx={x} cy={y} r="5" fill="#7C3AED" />
                <circle cx={x} cy={y} r="10" fill="none" stroke="#7C3AED" opacity="0.35" />
              </g>
            );
          })}
        </g>

        {/* L3 inner ring (fastest) */}
        <g style={{ transformOrigin: '240px 240px', animation: 'spin-cw 22s linear infinite' }}>
          <circle cx="240" cy="240" r="92" fill="none" stroke="rgba(0,212,255,0.45)" strokeWidth="1" />
          {[45, 135, 225, 315].map((deg, i) => {
            const r = 92;
            const x = 240 + r * Math.cos((deg * Math.PI) / 180);
            const y = 240 + r * Math.sin((deg * Math.PI) / 180);
            return <circle key={i} cx={x} cy={y} r="4" fill="#00D4FF" />;
          })}
        </g>

        {/* Core mass */}
        <circle cx="240" cy="240" r="58" fill="#0A0E1A" stroke="url(#ring-grad)" strokeWidth="1.2" />
        <circle cx="240" cy="240" r="38" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="1" />
        <text x="240" y="237" textAnchor="middle" fontFamily="Inter Tight, sans-serif" fontSize="13" fill="#F5F7FA" letterSpacing="-0.5">UpScore</text>
        <text x="240" y="253" textAnchor="middle" fontFamily="Inter Tight, sans-serif" fontSize="11" fill="rgba(245,247,250,0.55)" letterSpacing="0.5">ENGINE</text>

        {/* Outermost dashed trust ring */}
        <circle cx="240" cy="240" r="232" fill="none" stroke="rgba(0,212,255,0.20)" strokeWidth="0.8" strokeDasharray="1 4" />
      </svg>

      <style>{`
        @keyframes spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
      `}</style>
    </div>
    {axes.length > 0 && (
      <div className="engine__axes">
        {axes.map((a) => <span key={a} className="engine__axis">{a}</span>)}
      </div>
    )}
    </>
  );
}

function Engine({ copy }) {
  const [active, setActive] = useStateEng('L3');
  return (
    <section className="section engine" id="engine" data-screen-label="05 Engine">
      <div className="container">
        <div className="engine__layout">
          <div>
            <Reveal>
              <h2 className="headline">{copy.title}</h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="lede" style={{ marginTop: 28 }}>{copy.sub}</p>
            </Reveal>

            <div className="engine__layers">
              {copy.layers.map((layer, i) => (
                <Reveal key={layer.id} delay={200 + i * 80}>
                  <div
                    className={'engine__layer ' + (active === layer.id ? 'is-active' : '')}
                    onMouseEnter={() => setActive(layer.id)}
                    onFocus={() => setActive(layer.id)}
                    tabIndex={0}
                  >
                    <div className="engine__layer-head">
                      <span className="engine__layer-id">{layer.id}</span>
                      <span className="engine__layer-name">{layer.name}</span>
                    </div>
                    <div className="engine__layer-desc">{layer.desc}</div>
                  </div>
                </Reveal>
              ))}
            </div>

            <Reveal delay={520}>
              <div className="engine__moat">
                <span className="engine__moat-mark" />
                <span>{copy.moat}</span>
              </div>
            </Reveal>
          </div>

          <Reveal delay={200}>
            <EngineCore active={active} axes={copy.axes} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Engine, EngineCore });