// TWO THESES
// Thesis 1: Fragmentation, not consolidation
// Thesis 2: The orbit is the scheduler — cycled LEO vs dawn-dusk SSO

function Theses() {
  return (
    <Section id="theses" eyebrow="03 / Two Theses" idx="§ 03 · what we are betting on">
      <div className="mb-14 md:mb-16">
        <h2 className="font-sans font-light text-[32px] md:text-[44px] lg:text-[52px] leading-[1.04] text-ink-50 tracking-[-0.02em] max-w-[20ch]" style={{ textWrap: "balance" }}>
          Two non-obvious bets the rest of the field is on the wrong side of.
        </h2>
        <p className="mt-6 max-w-[60ch] text-[16px] md:text-[18px] text-ink-100 leading-relaxed">
          Physics-grounded. Testable now. <span className="text-ink-50">The reason a horizontal runtime wins.</span>
        </p>
      </div>

      {/* Thesis 1 — Fragmentation map */}
      <ThesisOne />

      {/* Thesis 2 — Orbit is the scheduler */}
      <ThesisTwo />
    </Section>
  );
}

function ThesisOne() {
  // Six vendor silicon targets — heterogeneous by design, every one canonical
  // (CLAUDE.md §6 / product.jsx). Nomos is the single layer that spans them all.
  const silicon = [
    { vendor: "NVIDIA",       chip: "Vera Rubin",    form: "GPU module",   sdk: "CUDA" },
    { vendor: "GOOGLE",       chip: "Edge TPU",      form: "tensor ASIC",  sdk: "TFLite" },
    { vendor: "AMD",          chip: "Versal",        form: "adaptive SoC", sdk: "Vitis AI" },
    { vendor: "INTEL",        chip: "Movidius",      form: "vision DSP",   sdk: "OpenVINO" },
    { vendor: "QUALCOMM",     chip: "Snapdragon",    form: "mobile NPU",   sdk: "Hexagon" },
    { vendor: "BAE · CUSTOM", chip: "Rad-hard ASIC", form: "rad-hardened", sdk: "vendor SDK" },
  ];
  // Constellation overhead: the fleet downlinking into the one runtime.
  const prefersReduce = useMemo(() => typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);
  const t = useRAFTime(!prefersReduce);
  const sats = [
    { x: 150, y: 40 }, { x: 375, y: 26 }, { x: 600, y: 20 }, { x: 825, y: 26 }, { x: 1050, y: 40 },
  ];
  const WAIST = { x: 600, y: 150 };            // convergence point: top-centre of the NOMOS bar
  const colX = [100, 300, 500, 700, 900, 1100]; // six fan-out target columns across the 1200 grid
  return (
    <div className="mb-16">
      <div className="mb-7">
        <div className="label mb-2">THESIS 01</div>
        <h3 className="font-sans font-light text-[26px] md:text-[34px] leading-[1.1] text-ink-50 max-w-[20ch]">
          The hardware is fragmenting, <span className="text-signal-amber">not consolidating.</span>
        </h3>
        <p className="mt-5 max-w-[70ch] text-[16px] md:text-[20px] leading-[1.42] text-ink-100">
          By 2027 a single constellation mixes Vera Rubin, TPUs, Versal, Movidius, and rad-hard ASICs.
          <span className="text-ink-50 font-medium"> A single-chip runtime breaks in that fleet. A horizontal one doesn't.</span>
        </p>
      </div>

      <div id="fragmentation" className="border border-ink-600/70 bg-ink-850/60 scroll-mt-20">
        <div className="border-b border-ink-600/70 px-4 py-2.5">
          <span className="label">Heterogeneous silicon · 2027</span>
        </div>

        <div className="px-5 md:px-12 py-10 md:py-14">
          {/* One plain sentence: what the figure and its motion show */}
          <p className="max-w-[72ch] text-[14px] md:text-[15px] text-ink-200 leading-relaxed mb-9 md:mb-11">
            Nomos is one runtime that runs on every chip in the fleet. The governor, the policy, and the model variants are
            the same on every target;<span className="text-ink-50"> the only per-chip code is a thin driver.</span>
          </p>

          {/* TIER 1 · THE FLEET */}
          <div className="label text-ink-300 mb-3">The fleet</div>
          <svg viewBox="0 0 1200 150" className="w-full h-auto block -mb-px" aria-hidden="true">
            <path d="M 60 70 Q 600 -6 1140 70" fill="none" stroke="#38bdf8" strokeOpacity="0.12" strokeWidth="1" strokeDasharray="3 7" />
            {sats.map((s, i) => {
              const p = ((t / 2600 + i * 0.19) % 1);
              return (
                <g key={i}>
                  {/* the one runtime reaching each satellite */}
                  <line x1={WAIST.x} y1={WAIST.y} x2={s.x} y2={s.y + 6} stroke="#f5a524" strokeOpacity="0.20" strokeWidth="1" />
                  <circle cx={lerp(WAIST.x, s.x, p)} cy={lerp(WAIST.y, s.y + 6, p)} r="1.6" fill="#f5a524" opacity={0.55 * (1 - Math.abs(p - 0.5) * 1.6)} />
                  <g transform={`translate(${s.x} ${s.y})`} opacity="0.9">
                    <line x1="-9" y1="0" x2="-4.5" y2="0" stroke="#5e8fb5" strokeWidth="1.4" />
                    <line x1="4.5" y1="0" x2="9" y2="0" stroke="#5e8fb5" strokeWidth="1.4" />
                    <rect x="-3.5" y="-3.5" width="7" height="7" fill="#0b1019" stroke="#6aa6cf" strokeWidth="1" />
                  </g>
                </g>
              );
            })}
          </svg>

          {/* TIER 2 · NOMOS — the one layer between the fleet and the silicon */}
          <div className="relative border border-signal-amber/80 overflow-hidden" style={{ background: "rgba(245,165,36,0.05)", boxShadow: "0 0 22px rgba(245,165,36,0.10)" }}>
            <div className="absolute inset-x-0 top-0 h-px sweep-line" aria-hidden="true" />
            <div className="flex flex-col items-center justify-center py-6 md:py-8">
              <span className="display-font font-bold text-signal-amber text-[28px] md:text-[44px] tracking-[0.22em] leading-none" style={{ textShadow: "0 0 14px rgba(245,165,36,0.22)" }}>NOMOS</span>
              <span className="mt-2.5 text-center px-4 font-mono text-[10px] md:text-[11px] tracking-[0.16em] uppercase text-signal-amber/90">
                the layer between spacecraft and silicon
              </span>
            </div>
          </div>

          {/* boundary — the same runtime fans down to every chip; only the driver differs */}
          <svg viewBox="0 0 1200 46" className="hidden lg:block w-full h-auto -mt-px" aria-hidden="true">
            <defs>
              <linearGradient id="fanout" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#f5a524" stopOpacity="0.5" />
                <stop offset="1" stopColor="#828fad" stopOpacity="0.28" />
              </linearGradient>
            </defs>
            {colX.map((x, i) => {
              const p = ((t / 2600 + i * 0.16) % 1);
              return (
                <g key={i}>
                  <line x1="600" y1="0" x2={x} y2="42" stroke="url(#fanout)" strokeWidth="1" />
                  <circle cx={lerp(600, x, p)} cy={lerp(0, 42, p)} r="1.4" fill="#f5a524" opacity={0.5 * (1 - Math.abs(p - 0.5) * 1.6)} />
                </g>
              );
            })}
          </svg>
          <div className="lg:hidden flex justify-center -mt-px" aria-hidden="true">
            <div className="w-px h-9" style={{ background: "linear-gradient(to bottom, rgba(245,165,36,0.6), rgba(130,143,173,0.3))" }} />
          </div>

          <div className="label text-ink-300 mb-3 mt-4">The silicon</div>

          {/* SILICON — fragmented vendor targets. Names are BRIGHT (recognizable, credible);
              tiles stay cool-grey so NOMOS above keeps the only saturated colour on the figure. */}
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-px bg-ink-600/40 border border-ink-600/60">
            {silicon.map((s) => (
              <div key={s.vendor} className="bg-ink-900/70 px-3 py-5 flex flex-col items-center text-center">
                <div className="display-font font-bold text-[14px] md:text-[15px] tracking-wider text-ink-50">{s.vendor}</div>
                <div className="font-mono text-[11px] text-ink-200 mt-1.5">{s.chip}</div>
                <div className="mt-3.5 pt-3 w-full border-t border-ink-600/50 font-mono text-[10px] tracking-wider text-ink-300">{s.sdk}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-4 grid md:grid-cols-3 gap-3">
        {[
          ["~25×", "Vera Rubin Space-1 perf vs. H100", "NVIDIA, GTC Mar 2026"],
          ["6+", "active orbital-AI chip families", "Industry survey"],
          ["0", "horizontal runtimes that span them", "as of Q1 2026"],
        ].map(([n, l, s]) => (
          <div key={l} className="border-l border-signal-amber/35 pl-3 py-1">
            <div className="font-mono text-ink-50 text-[20px] tnum">{n}</div>
            <div className="label mt-0.5 text-ink-200">{l}</div>
            <div className="font-mono text-[10px] uppercase tracking-wider text-ink-300 mt-0.5">{s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ThesisTwo() {
  const t = useRAFTime(true);
  // Two orbit canvases: cycled LEO (cycles in/out of eclipse) vs dawn-dusk SSO (always sunlit)
  return (
    <div>
      <div className="grid lg:grid-cols-12 gap-6 mb-6 items-end">
        <div className="lg:col-span-5">
          <div className="label mb-2">THESIS 02</div>
          <h3 className="font-sans font-light text-[26px] md:text-[32px] leading-[1.1] text-ink-50">
            The orbit <span className="text-signal-amber italic">is</span> the scheduler.
          </h3>
        </div>
        <div className="lg:col-span-7">
          <p className="text-[14px] text-ink-200 leading-relaxed">
            Two flagship regimes demand <em className="text-ink-50 not-italic">inverted</em> policies. Multi-mission operators cannot
            run two runtimes. The runtime that wins is the one that internalizes both as first-class constraints.
          </p>
        </div>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        <OrbitRegime
          mode="leo"
          t={t}
          title="Cycled LEO"
          eyebrow="Inclined · ~90 min period"
          example="Inclined LEO · EO & tasking payloads"
          policy="Variant cycling. Spend the eclipse drained-down on distilled; recover thermal headroom over poles."
          color="#f5a524"
        />
        <OrbitRegime
          mode="sso"
          t={t}
          title="Dawn-Dusk SSO"
          eyebrow="Sun-sync · terminator-tracking"
          example="Defense ISR · SDA tranches, Muon Space"
          policy="Steady-state radiator saturation. Hard thermal cap is the binding constraint, not the battery."
          color="#7ccf6b"
        />
      </div>

      <div className="mt-6 border border-ink-600/70 bg-ink-850/60 p-5">
        <div className="grid md:grid-cols-3 gap-6 items-start">
          <div className="md:col-span-2">
            <div className="label mb-2">why this matters</div>
            <p className="text-ink-100 leading-relaxed">
              <span className="text-ink-50">Not minor variants: inverted physics.</span> Cycled LEO is power-bound; eclipse
              drains the battery. Dawn-dusk SSO is thermal-bound; perpetual sun saturates the radiator and battery goes
              non-binding. An operator with both can't ship two runtimes. Nomos makes them two policies on one substrate.
            </p>
          </div>
          <div className="border-l border-ink-500/60 pl-4">
            <div className="label mb-2">binding constraint</div>
            <div className="space-y-2">
              <div className="flex items-baseline justify-between font-mono text-[12px]">
                <span className="text-ink-200">LEO</span>
                <span className="text-signal-amber tracking-wider">POWER</span>
              </div>
              <div className="flex items-baseline justify-between font-mono text-[12px]">
                <span className="text-ink-200">SSO</span>
                <span className="text-ok tracking-wider">THERMAL</span>
              </div>
              <div className="pt-2 border-t border-ink-600/60 flex items-baseline justify-between font-mono text-[12px]">
                <span className="text-ink-200">Both</span>
                <span className="text-ink-50 tracking-wider">ONE RUNTIME</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function OrbitRegime({ mode, t, title, eyebrow, example, policy, color }) {
  // Geometry
  const cx = 145, cy = 110, rx = 110, ry = mode === "leo" ? 48 : 86;
  const period = mode === "leo" ? 12000 : 18000;
  const theta = ((t % period) / period) * Math.PI * 2 - Math.PI / 2;
  const sx = cx + rx * Math.cos(theta);
  const sy = cy + ry * Math.sin(theta);

  // LEO: in/out of eclipse. SSO: always sunlit (terminator orbit).
  const inEclipse = mode === "leo" ? Math.cos(theta) > 0.25 : false;
  const phase = (t % period) / period;
  // Power curves
  const power = mode === "leo"
    ? clamp(0.55 + 0.4 * Math.cos(phase * Math.PI * 2 - 0.4), 0.2, 0.95)
    : 0.85 + 0.04 * Math.sin(t / 2000);
  const thermal = mode === "leo"
    ? clamp(0.45 + 0.35 * Math.sin(phase * Math.PI * 2 + 0.2), 0.2, 0.95)
    : clamp(0.78 + 0.10 * Math.sin(t / 3000), 0.2, 0.98);

  return (
    <CornerFrame>
      <div className="border border-ink-600/70 bg-ink-850/60">
        <div className="border-b border-ink-600/70 px-4 py-2 flex items-center justify-between">
          <div>
            <div className="font-mono text-[13px] text-ink-50 tracking-wider uppercase">{title}</div>
            <div className="label mt-0.5">{eyebrow}</div>
          </div>
          <span className="label-amber" style={{ color }}>{mode === "leo" ? "POWER-BOUND" : "THERMAL-BOUND"}</span>
        </div>

        <div className="grid grid-cols-5 gap-0">
          <div className="col-span-3 relative border-r border-ink-600/50 p-2">
            <svg viewBox="0 0 290 220" className="w-full h-auto">
              <defs>
                <radialGradient id={`sun-${mode}`} cx="0" cy="0.5" r="1">
                  <stop offset="0" stopColor="#f5a524" stopOpacity="0.5" />
                  <stop offset="1" stopColor="#f5a524" stopOpacity="0" />
                </radialGradient>
              </defs>
              {/* sun source */}
              <rect x="-40" y="40" width="80" height="140" fill={`url(#sun-${mode})`} />
              <line x1="2" y1="110" x2="22" y2="110" stroke="#f5a524" />
              <text x="2" y="124" fontFamily="IBM Plex Mono" fontSize="8" fill="#f5a524">SUN</text>

              {/* eclipse cone — only in LEO */}
              {mode === "leo" && (
                <path d="M 145 75 L 290 50 L 290 170 L 145 145 Z" fill="#05070b" opacity="0.7" />
              )}

              {/* Earth */}
              <circle cx={cx} cy={cy} r="34" fill="#1b2335" stroke="#3d465c" />
              <path d={`M ${cx} ${cy - 34} A 17 34 0 0 0 ${cx} ${cy + 34}`} fill="#080b12" opacity="0.7" />

              {/* Orbit */}
              <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill="none" stroke="#3d465c" strokeDasharray="3 4" />

              {/* terminator-clinging viz for SSO */}
              {mode === "sso" && (
                <line x1={cx} y1={cy - 100} x2={cx} y2={cy + 100} stroke="#7ccf6b" strokeWidth="0.6" strokeDasharray="2 3" opacity="0.6" />
              )}

              {/* sat */}
              <circle cx={sx} cy={sy} r="3" fill={color} />
              <circle cx={sx} cy={sy} r="8" fill="none" stroke={color} opacity="0.5" />

              {/* trail */}
              {Array.from({ length: 20 }).map((_, i) => {
                const a = theta - (i / 20) * 0.7;
                return <circle key={i} cx={cx + rx * Math.cos(a)} cy={cy + ry * Math.sin(a)} r="1" fill={color} opacity={(1 - i / 20) * 0.4} />;
              })}

              <text x="146" y="210" fontFamily="IBM Plex Mono" fontSize="8" fill="#828fad" letterSpacing="1.5" textAnchor="middle">
                {mode === "leo"
                  ? (inEclipse ? "ECLIPSE — array yield 0 W" : "SUNLIT — array yield ≈ 468 W")
                  : "PERMANENT SUNLIT — terminator orbit"}
              </text>
            </svg>
          </div>

          <div className="col-span-2 p-3 space-y-2.5">
            <div>
              <div className="flex items-baseline justify-between font-mono text-[10px] uppercase tracking-wider text-ink-300">
                <span>Solar input</span>
                <span className="tnum" style={{ color }}>{(power * 100).toFixed(0)}%</span>
              </div>
              <div className="relative h-1.5 bg-ink-800 mt-1 border border-ink-600/60">
                <div className="absolute inset-y-0 left-0" style={{ width: `${power * 100}%`, background: color, boxShadow: `0 0 8px ${color}66` }} />
              </div>
            </div>
            <div>
              <div className="flex items-baseline justify-between font-mono text-[10px] uppercase tracking-wider text-ink-300">
                <span>Radiator load</span>
                <span className="tnum" style={{ color }}>{(thermal * 100).toFixed(0)}%</span>
              </div>
              <div className="relative h-1.5 bg-ink-800 mt-1 border border-ink-600/60">
                <div className="absolute inset-y-0 left-0" style={{ width: `${thermal * 100}%`, background: color, boxShadow: `0 0 8px ${color}66` }} />
                <div className="absolute inset-y-0 w-px bg-fault" style={{ left: "82%" }} />
              </div>
            </div>
            <div className="pt-2 border-t border-ink-600/60">
              <div className="label">example fleet</div>
              <div className="text-[12px] text-ink-100 mt-1 leading-snug">{example}</div>
            </div>
            <div className="pt-2 border-t border-ink-600/60">
              <div className="label">policy</div>
              <div className="text-[12px] text-ink-100 mt-1 leading-snug">{policy}</div>
            </div>
          </div>
        </div>
      </div>
    </CornerFrame>
  );
}

window.Theses = Theses;