// Animated demos — strict to brand: short, linear, no bounce.
// Five motifs; each runs independently in a stage.

function MotionMarkPulse() {
  // Vertices brighten on a 1600ms tick — the brand's one allowed flourish.
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const phase = (offset) => 0.4 + 0.6 * (0.5 + 0.5 * Math.cos((t + offset) * 1.4));
  return (
    <svg viewBox="0 0 200 200" style={{width: '100%', height: '100%'}}>
      {/* back edges */}
      <line x1="40" y1="74" x2="100" y2="124" stroke="#5B8DEF" strokeOpacity="0.55" strokeWidth="1.4"/>
      <line x1="160" y1="74" x2="100" y2="124" stroke="#5B8DEF" strokeOpacity="0.55" strokeWidth="1.4"/>
      <line x1="100" y1="174" x2="100" y2="124" stroke="#5B8DEF" strokeOpacity="0.55" strokeWidth="1.4"/>
      {/* front edges */}
      <line x1="40" y1="74" x2="160" y2="74" stroke="#F7F9FC" strokeWidth="2"/>
      <line x1="40" y1="74" x2="100" y2="174" stroke="#F7F9FC" strokeWidth="2"/>
      <line x1="160" y1="74" x2="100" y2="174" stroke="#F7F9FC" strokeWidth="2"/>
      {/* vertices pulse */}
      <circle cx="40" cy="74" r="5" fill="#F7F9FC" opacity={phase(0)}/>
      <circle cx="160" cy="74" r="5" fill="#F7F9FC" opacity={phase(0.5)}/>
      <circle cx="100" cy="174" r="5" fill="#F7F9FC" opacity={phase(1.0)}/>
      <circle cx="100" cy="124" r="4" fill="#5B8DEF" opacity={phase(1.5)}/>
    </svg>
  );
}

function MotionLedgerTicks() {
  // Mono ticks that draw on like a printer. Linear, never reset.
  const lines = [
    "10:42:01 UTC  tx_0x4f2a  €12,480.00  BTC ⇄ EUR  12.4s  confirmed",
    "10:42:14 UTC  tx_0xa1c8  $980.00     USDC ⇄ USD  8.1s  confirmed",
    "10:42:29 UTC  tx_0x3d77  £2,040.00   ETH ⇄ GBP  14.9s confirmed",
    "10:42:48 UTC  tx_0x8e02  €56,200.00  EUR ⇄ EUR   0.4s confirmed",
    "10:43:02 UTC  tx_0xb472  $320.00     BTC ⇄ USD  11.2s pending",
  ];
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % (lines.length + 2)), 800);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{padding: 18, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7, letterSpacing: '0.04em', color: 'var(--ths-bone)', height: '100%', overflow: 'hidden'}}>
      {lines.slice(0, Math.min(step, lines.length)).map((l, i) => (
        <div key={i} style={{display: 'flex', gap: 8, opacity: 1}}>
          <span style={{color: 'var(--ths-signal-soft)'}}>›</span>
          <span style={{color: l.includes('confirmed') ? 'var(--ths-signal)' : 'var(--ths-signal-soft)'}}>{l}</span>
        </div>
      ))}
      {step < lines.length && (
        <div style={{display: 'flex', gap: 8}}>
          <span style={{color: 'var(--ths-signal-soft)'}}>›</span>
          <span style={{color: 'var(--ths-bone)'}}>_<span style={{opacity: (Math.floor(Date.now()/400) % 2) ? 1 : 0}}>█</span></span>
        </div>
      )}
    </div>
  );
}

function MotionWaveform() {
  // Settlement latency bars rolling left-to-right.
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const N = 32;
  return (
    <svg viewBox="0 0 320 180" style={{width: '100%', height: '100%'}}>
      {Array.from({length: N}).map((_, i) => {
        const x = i * 10 + 4;
        const seed = Math.sin(i * 1.3 + t * 0.6) * Math.cos(i * 0.7);
        const h = 40 + Math.abs(seed) * 90;
        const isPeak = h > 100;
        return (
          <rect key={i}
                x={x} y={(180 - h) / 2}
                width="6" height={h}
                fill={isPeak ? '#2563EB' : '#5B8DEF'}
                opacity={isPeak ? 1 : 0.55}/>
        );
      })}
      <line x1="0" y1="90" x2="320" y2="90" stroke="#5B8DEF" strokeOpacity="0.20" strokeWidth="1" strokeDasharray="2 4"/>
    </svg>
  );
}

function MotionNetworkGraph() {
  // Four-node closed-loop graph: signals travel between vertices.
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const nodes = [
    { x: 60,  y: 60,  label: 'BTC' },
    { x: 260, y: 60,  label: 'EUR' },
    { x: 160, y: 150, label: 'LEDGER' },
    { x: 160, y: 100, label: 'USDC' },
  ];
  const edges = [[0,1],[0,2],[1,2],[0,3],[1,3],[2,3]];
  return (
    <svg viewBox="0 0 320 200" style={{width: '100%', height: '100%'}}>
      {edges.map(([a,b], i) => (
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
              stroke="#5B8DEF" strokeOpacity="0.30" strokeWidth="1"/>
      ))}
      {/* travelling pulses */}
      {edges.map(([a,b], i) => {
        const phase = ((t * 0.4 + i * 0.16) % 1);
        const x = nodes[a].x + (nodes[b].x - nodes[a].x) * phase;
        const y = nodes[a].y + (nodes[b].y - nodes[a].y) * phase;
        return <circle key={'p'+i} cx={x} cy={y} r="2.5" fill="#2563EB"/>;
      })}
      {nodes.map((n, i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r={i === 2 ? 6 : 4} fill={i === 2 ? '#2563EB' : '#F7F9FC'}/>
          <text x={n.x + 10} y={n.y + 4} fill="#F7F9FC" opacity="0.7"
                style={{fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em'}}>
            {n.label}
          </text>
        </g>
      ))}
    </svg>
  );
}

function MotionShowcase() {
  return (
    <section className="section">
      <div className="container">
        <div className="motion-grid">
          <MotionCard label="// 01 · Mark pulse" title="Vertex pulse"
                      desc="The mark's four vertices brighten on a 1600ms cycle. The brand's one sanctioned flourish.">
            <MotionMarkPulse />
          </MotionCard>
          <MotionCard label="// 02 · Ledger tick" title="Settlement readout"
                      desc="Mono ticks draw on like a printer. Linear pacing — no eased bounce, no character reveal.">
            <MotionLedgerTicks />
          </MotionCard>
          <MotionCard label="// 03 · Latency wave" title="Settlement waveform"
                      desc="Per-transaction latency bars. Signal-blue marks anomalies above the 100ms mean line.">
            <MotionWaveform />
          </MotionCard>
          <MotionCard label="// 04 · Closed loop" title="Four points · one ledger"
                      desc="A four-node network graph. Signals traverse every edge in continuous time. Closed-loop, by construction.">
            <MotionNetworkGraph />
          </MotionCard>
        </div>
      </div>
    </section>
  );
}

function MotionCard({ label, title, desc, children }) {
  return (
    <div className="motion-card">
      <div className="label">{label}</div>
      <h3>{title}</h3>
      <p>{desc}</p>
      <div className="stage">{children}</div>
    </div>
  );
}

window.MotionShowcase = MotionShowcase;