// "How it works" — the gear-train explainer. ActionBoard services are gears,
// RAOARA is the belt that drives them, the five Lions are the oil.

const gearPath = (R, teeth, depth) => {
  const rI = R - depth, step = 360 / teeth;
  const P = (r, deg) => { const a = (deg - 90) * Math.PI / 180; return `${(r * Math.cos(a)).toFixed(2)},${(r * Math.sin(a)).toFixed(2)}`; };
  let d = '';
  for (let i = 0; i < teeth; i++) {
    const a = i * step;
    d += (i ? 'L' : 'M') + P(rI, a + step * 0.06) + 'L' + P(R, a + step * 0.21) + 'L' + P(R, a + step * 0.41) + 'L' + P(rI, a + step * 0.56);
  }
  return d + 'Z';
};

const Gear = ({ cx, cy, r, teeth, dur = 18, dir = 1, accent = '#3f3f4d', fill = '#15151e', hubFill = '#0a0a0f', spokes }) => (
  <g transform={`translate(${cx} ${cy})`}>
    <g className="lp-gear-spin" style={{ animationDuration: `${dur}s`, animationDirection: dir > 0 ? 'normal' : 'reverse' }}>
      <path d={gearPath(r, teeth, Math.max(4, r * 0.17))} fill={fill} stroke={accent} strokeWidth="1.4" strokeLinejoin="round" />
      <circle r={r * 0.44} fill={hubFill} stroke={accent} strokeWidth="1.2" />
      <circle r={r * 0.12} fill={accent} opacity=".55" />
      {spokes && [0, 72, 144, 216, 288].map(a => (
        <circle key={a} r={r * 0.075} cx={r * 0.68 * Math.cos((a - 90) * Math.PI / 180)} cy={r * 0.68 * Math.sin((a - 90) * Math.PI / 180)} fill={hubFill} stroke={accent} strokeWidth="1" />
      ))}
    </g>
  </g>
);

const GearLabel = ({ x, y, title, sub, anchor = 'middle' }) => (
  <g textAnchor={anchor}>
    <text x={x} y={y} className="lp-gear-lbl">{title}</text>
    {sub && <text x={x} y={y + 15} className="lp-gear-sub">{sub}</text>}
  </g>
);

const BELT_NODES = [
  { l: 'R', name: 'Recognize', x: 330, y: 64, top: true, c: '#a1a1aa' },
  { l: 'A', name: 'Acquire', x: 600, y: 64, top: true, c: '#0284c7' },
  { l: 'O', name: 'Organize', x: 870, y: 64, top: true, c: '#059669' },
  { l: 'A', name: 'Act', x: 870, y: 476, c: '#22c55e' },
  { l: 'R', name: 'Review', x: 600, y: 476, c: '#d97706' },
  { l: 'A', name: 'Adapt', x: 330, y: 476, c: '#a855f7' },
];

// oil points — a Lion sitting on the gear it keeps turning
const OILERS = [
  { x: 447, y: 212, c: '#059669', d: 0 },
  { x: 492, y: 270, c: '#a855f7', d: .6 },
  { x: 607, y: 270, c: '#0284c7', d: 1.2 },
  { x: 724, y: 270, c: '#e11d48', d: 1.8 },
  { x: 834, y: 291, c: '#d97706', d: 2.4 },
];

const GearDiagram = () => (
  <div className="lp-gear-stage">
    <svg viewBox="0 0 1200 540" className="lp-gear-svg" role="img" aria-label="ActionBoard gear train: board interface drives service gears, the RAOARA belt keeps them turning, and they tune the layers of a frontier model.">
      <rect x="46" y="64" width="1108" height="412" rx="190" fill="none" stroke="#1e1e26" strokeWidth="18" />
      <rect x="46" y="64" width="1108" height="412" rx="190" fill="none" stroke="#2b2b36" strokeWidth="1" />
      <rect x="46" y="64" width="1108" height="412" rx="190" fill="none" stroke="#7c3aed" strokeWidth="2.5" strokeDasharray="16 26" className="lp-belt-run" opacity=".9" />

      {BELT_NODES.map(n => (
        <g key={n.name}>
          <circle cx={n.x} cy={n.y} r="20" fill="#0a0a0f" stroke={n.c} strokeWidth="1.6" />
          <text x={n.x} y={n.y + 5} textAnchor="middle" className="lp-gear-node-l" style={{ fill: n.c }}>{n.l}</text>
          <text x={n.x} y={n.top ? n.y - 32 : n.y + 40} textAnchor="middle" className="lp-gear-node-n">{n.name}</text>
        </g>
      ))}
      <text x="1120" y="274" textAnchor="middle" className="lp-gear-sub" transform="rotate(90 1120 274)">RAOARA BELT</text>

      {/* the board — the simple interface the operator actually touches */}
      <g>
        <rect x="104" y="176" width="176" height="188" rx="12" fill="#101017" stroke="#2c2c37" />
        <rect x="104" y="176" width="176" height="30" rx="12" fill="#15151d" />
        <rect x="104" y="194" width="176" height="12" fill="#15151d" />
        <circle cx="120" cy="191" r="3.2" fill="#3f3f4d" /><circle cx="131" cy="191" r="3.2" fill="#3f3f4d" />
        <text x="146" y="195" className="lp-gear-sub" style={{ fill: '#d4d4d8' }}>your board</text>
        {[0, 1, 2, 3].map(i => (
          <g key={i}>
            <rect x="118" y={222 + i * 32} width="148" height="22" rx="6" fill="#16161f" stroke="#26262f" />
            <circle cx="131" cy={233 + i * 32} r="4" fill={i === 0 ? '#7c3aed' : '#3f3f4d'} />
            <rect x="143" y={229 + i * 32} width={i % 2 ? 78 : 100} height="5" rx="2.5" fill="#33333f" />
          </g>
        ))}
        <rect x="118" y="350" width="148" height="1" fill="#26262f" />
      </g>
      <GearLabel x={192} y={398} title="Board + gear picker" sub="drag the ops you need" />
      <path d="M288 270 L 322 270" stroke="#7c3aed" strokeWidth="2" strokeDasharray="5 6" className="lp-belt-run" />

      {/* ActionBoard service gears */}
      <Gear cx={420} cy={270} r={80} teeth={16} dur={26} accent="#7c3aed" spokes />
      <Gear cx={470} cy={168} r={34} teeth={9} dur={11} dir={-1} accent="#059669" />
      <Gear cx={556} cy={270} r={58} teeth={12} dur={19} dir={-1} accent="#0284c7" spokes />
      <Gear cx={654} cy={270} r={42} teeth={9} dur={14} accent="#e11d48" />
      <GearLabel x={420} y={382} title="ActionList service" sub="what runs, in what order" />
      <GearLabel x={470} y={112} title="Knowledge base" sub="context on tap" />
      <GearLabel x={556} y={356} title="Action routing" sub="picks the model + tool" />
      <GearLabel x={660} y={198} title="Tools · MCP" sub="every tool is a gear" />

      {/* drive into the frontier model */}
      <path d="M700 270 L 748 270" stroke="#3f3f4d" strokeWidth="2" strokeDasharray="5 6" className="lp-belt-run" />
      <path d="M742 264 l 8 6 -8 6" fill="none" stroke="#52525b" strokeWidth="2" strokeLinejoin="round" />

      <g>
        <rect x="756" y="150" width="332" height="240" rx="14" fill="#0d0d13" stroke="#2a2a34" />
        <text x="778" y="180" className="lp-gear-lbl">Any frontier model</text>
        <text x="778" y="197" className="lp-gear-sub">thousands of small gears in every layer</text>
        {[0, 1, 2].map(row => (
          <g key={row}>
            <rect x="776" y={216 + row * 54} width="292" height="42" rx="9" fill="#121219" stroke="#22222b" />
            <text x="790" y={241 + row * 54} className="lp-gear-sub" style={{ fontSize: 9 }}>L{row + 1}</text>
            {[0, 1, 2, 3, 4, 5].map(i => (
              <Gear key={i} cx={834 + i * 40} cy={237 + row * 54} r={13} teeth={8} dur={6 + ((i + row) % 4) * 2.5} dir={i % 2 ? -1 : 1} accent={row === 1 ? '#3f3f4d' : '#35353f'} fill="#191922" />
            ))}
          </g>
        ))}
      </g>

      {OILERS.map((o, i) => (
        <g key={i} className="lp-oil" style={{ animationDelay: `${o.d}s` }}>
          <circle cx={o.x} cy={o.y} r="13" fill={o.c} opacity=".16" />
          <circle cx={o.x} cy={o.y} r="6" fill={o.c} stroke="#0a0a0f" strokeWidth="1.5" />
        </g>
      ))}
    </svg>
  </div>
);

const OIL_LIONS = [
  { name: 'Black', c: '#a855f7', job: 'sets the order the gears turn in' },
  { name: 'Green', c: '#059669', job: 'feeds the knowledge gear' },
  { name: 'Blue', c: '#0284c7', job: 'builds new gears on demand' },
  { name: 'Yellow', c: '#d97706', job: 'tunes the model layers' },
  { name: 'Red', c: '#e11d48', job: 'ships the output downstream' },
];

const GEAR_CARDS = [
  { icon: 'Settings', tint: '#a855f7', title: 'Every service is a gear', body: 'ActionList, action routing, tools and MCP, knowledge base, wallet metering — each one is a self-contained gear you snap into the train. Add a tool, add a gear.' },
  { icon: 'Refresh', tint: '#0284c7', title: 'RAOARA is the belt', body: 'The loop is what keeps the gears in time. Recognize through Adapt drives every gear in sequence, so nothing spins free and nothing stalls waiting on a hand-off.' },
  { icon: 'Lion', tint: '#d97706', title: 'Five Lions are the oil', body: 'Frontier models hide thousands of gears in every layer, and someone has to tune them. Five specialist agents ride the train — clearing jams, tuning layers, keeping torque where it counts.' },
];

const GearsSection = () => (
  <LpSection id="how" dark>
    <div className="lp-vg" />
    <div style={{ position: 'relative', zIndex: 1 }}>
      <SectionHead
        center light icon="Settings" eyebrow="HOW IT WORKS"
        title="A drivetrain for your AI operations."
        lead="Big models are a wall of gears you can't reach. ActionBoard puts a simple board in front of them, turns every service into a gear you can snap in, and runs the whole train on one loop." />
      <GearDiagram />
      <div className="lp-oil-row">
        <span className="lp-oil-cap mono">Five Lions keep it oiled</span>
        {OIL_LIONS.map(l => (
          <span className="lp-oil-chip" key={l.name}>
            <span className="lp-oil-dot" style={{ background: l.c }} />
            <b>{l.name}</b> {l.job}
          </span>
        ))}
      </div>
      <div className="lp-gear-cards">
        {GEAR_CARDS.map(c => {
          const Ico = I[c.icon];
          return (
            <article className="lp-gear-card" key={c.title}>
              <span className="lp-gear-ico" style={{ color: c.tint, borderColor: `${c.tint}44`, background: `${c.tint}18` }}><Ico size={16} /></span>
              <h4>{c.title}</h4>
              <p className="text-pretty">{c.body}</p>
            </article>
          );
        })}
      </div>
      <div className="lp-gear-foot">
        <I.Sparkle2 size={13} />
        Build whatever ops interface the job needs — the gears stay the same underneath.
      </div>
    </div>
  </LpSection>
);

// ---- Build your own tuned model: the Voltron tuning drivetrain (light theme) ----

const arcPath = (r, a0, a1) => {
  const p = (deg) => { const a = (deg - 90) * Math.PI / 180; return [(r * Math.cos(a)).toFixed(2), (r * Math.sin(a)).toFixed(2)]; };
  const [x0, y0] = p(a0), [x1, y1] = p(a1);
  return `M${x0} ${y0}A${r} ${r} 0 ${a1 - a0 > 180 ? 1 : 0} 1 ${x1} ${y1}`;
};

const FORMATION = [
  { name: 'Black', c: '#a855f7' }, { name: 'Green', c: '#059669' }, { name: 'Blue', c: '#0284c7' },
  { name: 'Yellow', c: '#d97706' }, { name: 'Red', c: '#e11d48' },
];

const TuneDiagram = () => (
  <div className="lp-tune-stage">
    <svg viewBox="0 0 1200 410" className="lp-gear-svg lp-tune-svg" role="img" aria-label="Tuning drivetrain: run traces feed the Voltron formation gear, which drives the CAST and adaptive reinforcement learning gears to produce your own tuned model.">
      {/* run traces in */}
      <g>
        {[2, 1, 0].map(i => (
          <rect key={i} x={96 + i * 7} y={148 - i * 7} width="148" height="96" rx="10" fill="#fff" stroke="#e4e4e7" />
        ))}
        {[0, 1, 2, 3].map(i => (
          <g key={i}>
            <circle cx="126" cy={172 + i * 20} r="3.5" fill={i === 0 ? '#7c3aed' : '#d4d4d8'} />
            <rect x="138" y={169 + i * 20} width={i % 2 ? 62 : 84} height="5" rx="2.5" fill="#e4e4e7" />
          </g>
        ))}
      </g>
      <GearLabel x={177} y={278} title="Your run traces" sub="every action, captured" />
      <path d="M262 196 L 306 196" stroke="#7c3aed" strokeWidth="2" strokeDasharray="5 6" className="lp-belt-run" />

      {/* voltron formation drive gear */}
      <Gear cx={400} cy={196} r={82} teeth={16} dur={28} accent="#7c3aed" fill="#faf5ff" hubFill="#fff" spokes />
      <g transform="translate(400 196)">
        <g className="lp-form-ring">
          {FORMATION.map((f, i) => (
            <path key={f.name} d={arcPath(97, i * 72 + 5, i * 72 + 67)} fill="none" stroke={f.c} strokeWidth="5" strokeLinecap="round" />
          ))}
        </g>
      </g>
      <text x="400" y="192" textAnchor="middle" className="lp-form-hub">VOLTRON</text>
      <text x="400" y="206" textAnchor="middle" className="lp-gear-sub2">formation</text>
      <GearLabel x={400} y={62} title="All five Lions, combined" sub="one drive shaft, five specialists" />

      {/* pipeline gears */}
      <Gear cx={556} cy={196} r={60} teeth={12} dur={18} dir={-1} accent="#d97706" fill="#fffbeb" hubFill="#fff" spokes />
      <Gear cx={672} cy={196} r={46} teeth={10} dur={13} accent="#059669" fill="#ecfdf5" hubFill="#fff" />
      <GearLabel x={550} y={296} title="CAST pipeline" sub="traces → scored samples" />
      <GearLabel x={690} y={112} title="Adaptive RL" sub="rewards what worked" />

      <path d="M722 196 L 766 196" stroke="#a1a1aa" strokeWidth="2" strokeDasharray="5 6" className="lp-belt-run" />
      <path d="M760 190 l 8 6 -8 6" fill="none" stroke="#a1a1aa" strokeWidth="2" strokeLinejoin="round" />

      {/* the model you own */}
      <g>
        <rect x="776" y="118" width="320" height="156" rx="14" fill="#fff" stroke="#e4e4e7" />
        <rect x="776" y="118" width="320" height="156" rx="14" fill="none" stroke="#7c3aed" strokeOpacity=".22" />
        <text x="800" y="150" className="lp-gear-lbl2">Your own tuned model</text>
        <text x="800" y="167" className="lp-gear-sub2">weights, dataset and evals stay yours</text>
        {[52, 74, 96].map((w, i) => (
          <g key={i}>
            <rect x="800" y={186 + i * 22} width="200" height="10" rx="5" fill="#f4f4f5" />
            <rect x="800" y={186 + i * 22} width={w * 2} height="10" rx="5" fill={['#c4b5fd', '#a78bfa', '#7c3aed'][i]} />
            <text x={1014} y={195 + i * 22} className="lp-gear-sub2">pass {i + 1}</text>
          </g>
        ))}
      </g>
      <g>
        <rect x="990" y="284" width="106" height="24" rx="12" fill="#ecfdf5" stroke="#a7f3d0" />
        <text x="1043" y="300" textAnchor="middle" className="lp-gear-stat">−89% tokens</text>
      </g>

      {/* compounding return belt */}
      <path d="M936 274 L 936 352 L 400 352 L 400 282" fill="none" stroke="#7c3aed" strokeWidth="2" strokeDasharray="7 8" className="lp-belt-run" opacity=".8" />
      <path d="M394 290 l 6 -9 6 9" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinejoin="round" />
      <text x="668" y="376" textAnchor="middle" className="lp-gear-sub2">every cycle feeds the next tune — the dataset compounds, the model sharpens</text>
    </svg>
  </div>
);

const TUNE_CARDS = [
  { icon: 'Lion', tint: '#7c3aed', title: 'Voltron formation drives it', body: 'Formation is when all five Lion agents combine — Black plans the run, Green pulls context, Blue builds the pipeline, Yellow gates the data, Red ships the trained weights. One drive gear, five specialists.' },
  { icon: 'Layers', tint: '#d97706', title: 'CAST turns runs into data', body: 'The CAST gear takes raw run traces and casts them into structured, scored training samples — deduped, labelled, and aligned to the goal you actually ran. Your dataset builds itself as you work.' },
  { icon: 'Refresh', tint: '#059669', title: 'Adaptive RL tunes the layers', body: 'Every accepted action is a reward signal and every rollback is a penalty. Adaptive reinforcement learning feeds those signals back into the layers, so the model gets better at your ops, not the benchmark.' },
];

const TuneSection = () => (
  <LpSection id="research" alt>
    <SectionHead
      center icon="Beaker" eyebrow="BUILD YOUR OWN MODEL"
      title="How to build your custom tuned model."
      lead="Same drivetrain, pointed at the model itself. Voltron Lion agents run the tuning pipeline on two gears — CAST and adaptive reinforcement learning — turning the runs you already did into a model you own." />
    <TuneDiagram />
    <div className="lp-form-row">
      <span className="lp-oil-cap mono">Voltron formation</span>
      {FORMATION.map(f => (
        <span className="lp-form-chip" key={f.name}>
          <span className="lp-oil-dot" style={{ background: f.c }} />{f.name} Lion
        </span>
      ))}
    </div>
    <div className="lp-gear-cards lp-tune-cards">
      {TUNE_CARDS.map(c => {
        const Ico = I[c.icon];
        return (
          <article className="lp-gear-card" key={c.title}>
            <span className="lp-gear-ico" style={{ color: c.tint, borderColor: `${c.tint}33`, background: `${c.tint}12` }}><Ico size={16} /></span>
            <h4>{c.title}</h4>
            <p className="text-pretty">{c.body}</p>
          </article>
        );
      })}
    </div>
    <div className="lp-gear-foot lp-tune-foot">
      <I.Refresh size={14} />
      <span><strong>Fully automated.</strong> The lab builds the dataset and runs the tune — you keep the weights.</span>
    </div>
  </LpSection>
);

Object.assign(window, { GearsSection, GearDiagram, TuneSection, TuneDiagram, Gear, gearPath });