const Flywheel = () => {
  const nodes = [['Strategy', -90, 'var(--ink)'], ['Creative Strategy', 0, 'var(--accent)'], ['Acquisition', 90, 'var(--blue-800)'], ['CRO', 180, 'var(--ink)']];
  const R = 180, cx = 320, cy = 250;
  return (
    <div className="card flywheel" data-reveal>
      <svg viewBox="0 0 640 500" className="flywheel-svg" aria-hidden="true">
        <defs><radialGradient id="fwGlow" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="var(--blue-300)" stopOpacity="0.45"></stop><stop offset="100%" stopColor="var(--blue-300)" stopOpacity="0"></stop></radialGradient></defs>
        <circle cx={cx} cy={cy} r={R + 60} fill="url(#fwGlow)"></circle>
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="var(--ink)" strokeOpacity="0.18" strokeDasharray="2 6"></circle>
        <g className="fw-spin"><circle cx={cx} cy={cy} r={R - 40} fill="none" stroke="var(--accent)" strokeWidth="1" strokeDasharray="4 14" strokeOpacity="0.5"></circle></g>
        <g className="fw-orbit"><circle cx={cx + R} cy={cy} r="4" fill="var(--accent)"></circle></g>
        <g className="fw-orbit fw-orbit-2"><circle cx={cx + R} cy={cy} r="3" fill="var(--blue-800)"></circle></g>
        <g className="fw-orbit fw-orbit-3"><circle cx={cx + R} cy={cy} r="2.5" fill="var(--ink)"></circle></g>
        {nodes.map(([label, a, c]) => {
          const rad = a * Math.PI / 180, x = cx + Math.cos(rad) * R, y = cy + Math.sin(rad) * R;
          return (
            <g key={label}>
              <circle cx={x} cy={y} r="18" fill="#fff" stroke={c} strokeWidth="2"></circle>
              <circle cx={x} cy={y} r="6" fill={c}></circle>
              <text x={x} y={y + (a === -90 ? -38 : a === 90 ? 44 : 5)} dx={a === 0 && label.includes(' ') ? 0 : a === 0 ? 28 : a === 180 ? -28 : 0} textAnchor={a === 0 ? 'start' : a === 180 ? 'end' : 'middle'} fontFamily="var(--mono)" fontSize="13" fill="var(--ink)" letterSpacing="0.05em">{a === 0 && label.includes(' ') ? label.toUpperCase().split(' ').map((w, i) => <tspan key={w} x={x + 28} dy={i ? 16 : -3}>{w}</tspan>) : label.toUpperCase()}</text>
            </g>
          );
        })}
        <circle cx={cx} cy={cy} r="48" fill="var(--ink)"></circle>
        <text x={cx} y={cy - 4} textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="var(--blue-300)" letterSpacing="0.15em">AGENTS</text>
        <text x={cx} y={cy + 13} textAnchor="middle" fontFamily="var(--sans)" fontSize="18" fontWeight="600" fill="#fff">flywheel</text>
      </svg>
      <div className="flywheel-cap">
        <span className="label">The compounding loop</span>
        <p>Each acquisition motion feeds the next. Strategy informs creative. Creative drives acquisition. Acquisition data tunes CRO. CRO learnings reshape strategy. Our agents close the loop in days, not quarters.</p>
      </div>
    </div>
  );
};

const Machine = () => {
  return (
    <section className="sec sec-tint grid-bg" id="machine">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <span className="label eyebrow">Creative Flywheel</span>
          <h2 className="h2">Creative strategy is the growth lever.</h2>
          <p className="lede">Our agentic workflows identify top-performing creative, <strong>catch fatigue before it hurts performance</strong>, and trigger new creative built on what's winning. Your paid social always runs on optimal creative, and revenue follows.</p>
        </div>
        <Flywheel />
      </div>
    </section>
  );
};

Object.assign(window, { Machine });