// Architecture — two-column with abstract convergence / divergence glyphs.
// Body text trimmed; SVG glyph carries part of the message.

const VizConverge = () => (
  <svg viewBox="0 0 320 160" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* source streams */}
    {[28, 56, 80, 104, 132].map((y, i) => (
      <g key={i}>
        <line x1="14" y1={y} x2="58" y2={y} stroke="rgba(255,255,255,0.45)" strokeWidth="1" />
        <circle cx="14" cy={y} r="2" fill="rgba(255,255,255,0.55)" />
      </g>
    ))}
    {/* converging curves to model */}
    {[28, 56, 80, 104, 132].map((y, i) => (
      <path
        key={`p${i}`}
        d={`M 58 ${y} C 140 ${y}, 180 80, 230 80`}
        stroke="rgba(255,255,255,0.22)"
        strokeWidth="0.9"
        fill="none"
      />
    ))}
    {/* model node */}
    <rect x="226" y="62" width="68" height="36" rx="4" fill="rgba(255,255,255,0.95)" />
    {/* labels */}
    <text x="14" y="152" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2" fill="rgba(255,255,255,0.5)">SIGNAL</text>
    <text x="306" y="152" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2" fill="rgba(255,255,255,0.9)" textAnchor="end">OWNED MODEL</text>
  </svg>
);

const VizDiverge = () => (
  <svg viewBox="0 0 320 160" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* model node on left */}
    <rect x="26" y="62" width="68" height="36" rx="4" fill="rgba(255,255,255,0.95)" />
    {/* diverging curves to audience */}
    {[28, 56, 80, 104, 132].map((y, i) => (
      <path
        key={`d${i}`}
        d={`M 94 80 C 150 80, 180 ${y}, 262 ${y}`}
        stroke="rgba(255,255,255,0.22)"
        strokeWidth="0.9"
        fill="none"
      />
    ))}
    {/* endpoints */}
    {[28, 56, 80, 104, 132].map((y, i) => (
      <g key={i}>
        <line x1="262" y1={y} x2="306" y2={y} stroke="rgba(255,255,255,0.45)" strokeWidth="1" />
        <circle cx="306" cy={y} r="2" fill="rgba(255,255,255,0.55)" />
      </g>
    ))}
    {/* return signal — dashed arc back */}
    <path d="M 304 138 Q 160 152 88 110" stroke="rgba(255,255,255,0.35)" strokeWidth="0.9" strokeDasharray="3 4" fill="none" />
    <polygon points="88,110 95,104 95,114" fill="rgba(255,255,255,0.5)" />
    {/* labels */}
    <text x="14" y="152" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2" fill="rgba(255,255,255,0.9)">OWNED MODEL</text>
    <text x="306" y="152" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2" fill="rgba(255,255,255,0.5)" textAnchor="end">USERS</text>
  </svg>
);

const Flywheels = () => (
  <section className="section" id="flywheel" data-screen-label="04 Architecture">
    <div className="wrap">
      <div className="s-head">
        <span className="label">/ 03 — Architecture</span>
        <h2>Two sides. One system.</h2>
        <p className="lede">
          We hand AI companies the full lifecycle of an owned model &mdash; and put
          those models in front of the world. Both sides compound, automatically.
        </p>
      </div>

      <div className="arch-grid">
        <div className="arch-col">
          <div className="arch-viz"><VizConverge /></div>
          <div className="arch-num">01 / For builders</div>
          <h3 className="arch-h">Production becomes a model.</h3>
          <p className="arch-body">
            AI companies get the entire lifecycle of an owned model &mdash; hosted on
            their own knowledge. <strong>Production behavior compounds into proprietary
            intelligence.</strong>
          </p>
          <div className="arch-keys">
            <span>Endpoints</span>
            <span>Data plane</span>
            <span>Evaluation Data Agent</span>
            <span>Deployment Agent</span>
            <span>Optimization Agent</span>
            <span>Continuous fine-tuning</span>
          </div>
        </div>

        <div className="arch-col">
          <div className="arch-viz"><VizDiverge /></div>
          <div className="arch-num">02 / For the world</div>
          <h3 className="arch-h">A model becomes distribution.</h3>
          <p className="arch-body">
            Owned models surface on our Router and reach a global audience.
            <strong> Real-world signal flows back to its creators</strong> &mdash;
            at scale, in real time.
          </p>
          <div className="arch-keys">
            <span>Router</span>
            <span>Discovery</span>
            <span>Signal capture</span>
            <span>Perpetual improvement</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Flywheels = Flywheels;