// PageInference — Fact sheet 03. Buyer-education page covering what inference
// is, why demand is outpacing supply, the structural reasons hyperscalers
// cannot close the gap quickly, and how Pyrra deploys distributed capacity to
// meet demand in weeks. Visually matches /specs and /financials.

const InferenceLinkCard = ({ onClick }) => (
  <a
    className="pyrra-specslink pyrra-specslink--inference"
    href="#/inference"
    onClick={(e) => { e.preventDefault(); onClick(); }}
  >
    <div className="pyrra-specslink__icon"><IconGlobe size={26} /></div>
    <div className="pyrra-specslink__text">
      <Eyebrow>Inference</Eyebrow>
      <h3>What it is and why it's important.</h3>
    </div>
    <div className="pyrra-specslink__cta">
      <span>Read the brief</span>
      <IconArrowRight size={18} />
    </div>
  </a>
);

// ---------------------------------------------------------------------------
// Tiny composite: section title + pill tag, used over each fact table.
// ---------------------------------------------------------------------------
const TableSub = ({ title, pill }) => (
  <div className="pyrra-fintable__sub pyrra-fintable__sub--withpill">
    <span>{title}</span>
    {pill ? <span className="pyrra-inference__pill">{pill}</span> : null}
  </div>
);

const PageInference = ({ go }) => {
  const trainingVsInference = [
    { title: "Purpose",               body: "Training builds the model weights. Inference uses those weights to produce a response." },
    { title: "Frequency",             body: "Training is episodic, measured in runs per quarter. Inference is continuous, measured in requests per second." },
    { title: "Workload shape",        body: "Training is a long, synchronous batch job across thousands of GPUs. Inference is many small, latency-sensitive jobs across many smaller pools." },
    { title: "Locality sensitivity",  body: "Training tolerates distance. Inference is round-trip-time sensitive and rewards being close to the user." },
    { title: "Cluster size",          body: "Training favors single large clusters in one campus. Inference favors many smaller clusters distributed across metros." },
    { title: "Hardware fit",          body: "Both run on Blackwell-class accelerators. Inference uses memory bandwidth and interconnect at the rack level rather than the campus level." },
    { title: "Spend curve over time", body: "Training spend is bursty and tied to model releases. Inference spend grows with adoption and compounds across every deployed product." },
    { title: "Industry sizing",       body: "Industry analysts increasingly project inference spend will exceed training spend by a wide multiple over the second half of the decade, as agents and embedded models reach scale." },
  ];

  const demandDrivers = [
    { title: "Foundation-model usage", body: "Aggregate token volume across major LLM providers has grown by orders of magnitude year over year since 2023, with no observable slowing in adoption." },
    { title: "Agent workloads",        body: "A single autonomous agent run can consume tens to hundreds of times more inference per user task than a single chat turn, multiplying per-user demand sharply." },
    { title: "Embedded copilots",      body: "Inference calls are now wired into IDEs, productivity suites, design tools, customer support flows, and operational dashboards. Each call adds to baseline load." },
    { title: "Reasoning-style models", body: "Modern reasoning techniques amplify the token count required for a single response by five to twenty times relative to a direct answer, raising compute per request." },
    { title: "Multimodal workloads",   body: "Image, video, and voice generation and understanding each cost meaningfully more inference per request than text, and adoption of all three is climbing." },
    { title: "Latency expectations",   body: "Product teams target sub-second responses for chat and sub-100-millisecond responses for embedded suggestions, which sets a floor on how distant the serving infrastructure can sit." },
    { title: "Enterprise commitments", body: "Multi-year inference offtake commitments from enterprise buyers are now common, locking in supply ahead of usage and tightening available capacity for spot buyers." },
    { title: "Sovereign demand",       body: "National AI strategies in the US, Middle East, Europe, India, and Southeast Asia are funding inference capacity inside their own jurisdictions, removing supply from the global merchant market." },
  ];

  const hyperscaleConstraints = [
    { title: "Grid interconnect queues",         body: "Major US data center metros report multi-year waits for new utility interconnect capacity above the 100 MW threshold. The same pattern repeats in Ireland, the Nordics, and parts of Australia." },
    { title: "Permitting and entitlement",       body: "Greenfield mega-campus builds typically take three to five years from site selection through commissioning, with permitting alone consuming twelve to twenty-four months in most jurisdictions." },
    { title: "Power generation lead time",       body: "New gas, nuclear, or large-scale renewable generation tied to data center demand cannot be built faster than the underlying generation asset, which is measured in years." },
    { title: "Water availability",               body: "Many hyperscale designs depend on evaporative cooling and lose access to favored locations when local water authorities cap or deny new draw permits." },
    { title: "Land and zoning",                  body: "Communities that previously welcomed data center campuses are imposing moratoria, design constraints, or tax-treatment changes that lengthen siting cycles." },
    { title: "Capex concentration",              body: "A single hyperscale campus represents multiple billions of dollars of capex on a long-dated payback. Hyperscalers cannot diversify across many metros simultaneously without exceeding their internal hurdle rates." },
    { title: "Geographic concentration",         body: "The supply that does exist concentrates in a small number of metros (Northern Virginia, Phoenix, Dublin, Singapore, and a few others). Buyers outside those metros pay a latency and routing premium even when capacity is technically available." },
    { title: "Sovereignty mismatch",             body: "A workload requiring local jurisdiction cannot run inside a hyperscale region that sits in a different country, regardless of available capacity." },
    { title: "Refresh cadence vs build cadence", body: "Accelerator generations turn over roughly every eighteen months. Hyperscale construction takes multiples of that, meaning a campus broken ground today commissions onto silicon that is two generations behind the merchant frontier." },
  ];

  const pyrraSpeed = [
    { title: "Unit size",                  body: "30 to 55 square feet of footprint, 25 to 200 kW of power draw. Sized to fit inside infrastructure that already exists in most commercial and institutional buildings." },
    { title: "No new substation required", body: "Each node lands inside the spare envelope of an existing commercial electrical panel. No new utility interconnect, no transmission build, no multi-year wait." },
    { title: "Cooling reuse",              body: "Direct-to-chip liquid loops tie into existing chilled water, cooling tower, or dry cooler infrastructure already present at the host site." },
    { title: "Install duration",           body: "5 to 7 calendar days for a P1 once MEP-ready. 10 to 14 calendar days for a P2." },
    { title: "Permitting envelope",        body: "Installation falls inside the commercial mechanical permit category in most jurisdictions, which is measured in weeks rather than years." },
    { title: "Capex distribution",         body: "Each node is independently owner-financed, which means Pyrra can stand up many nodes in parallel across many metros without concentrating capex on a single balance sheet." },
    { title: "Fleet operation",            body: "Pyrra's network operations center carries every node under a uniform standard, so buyers see one network, one API, and one SLA across a globally distributed footprint." },
    { title: "Refresh path",               body: "Because each node is a self-contained chassis, hardware refreshes happen at the unit level rather than the campus level, keeping the fleet close to the merchant frontier as new accelerator generations land." },
  ];

  const compareRows = [
    { label: "Time from greenlight to live capacity", values: ["3 to 5 years",                                            "Weeks once a host site qualifies"] },
    { label: "Unit of capacity",                       values: ["50 MW to 500 MW campus",                                  "25 to 200 kW unit"] },
    { label: "Capex per unit",                         values: ["Hundreds of millions to billions, single balance sheet",  "$1.5M to $2.8M per node, distributed across independent owners"] },
    { label: "New utility interconnect required",      values: ["Yes, typically a multi-year process",                     "No, lands inside existing commercial electrical service"] },
    { label: "Permitting category",                    values: ["Greenfield industrial build, multi-stage entitlement",    "Commercial mechanical equipment install"] },
    { label: "Geographic reach",                       values: ["A handful of campuses per region",                        "Every metro where a qualifying building exists"] },
    { label: "Locality to buyers",                     values: ["Routed across long-haul fiber from a distant region",     "Inside the metro, often inside the building or campus serving the buyer"] },
    { label: "Refresh granularity",                    values: ["Whole campus, sized to the original power envelope",      "Chassis-level swap on the fleet refresh cadence"] },
  ];

  return (
    <div className="pyrra-inference">
      <header className="pyrra-factsheet__head">
        <Eyebrow>Inference facts</Eyebrow>
        <h1>The workload that defines the next decade of AI.</h1>
        <p>
          Inference is the running of a trained model against live requests: every chat reply, every
          embedded suggestion, every agent action, every search summary. It is the workload that
          converts AI capability into AI usage.
        </p>
        <div className="pyrra-factsheet__ctas">
          <Button size="md" onClick={() => go("Waitlist")}>Buy a node</Button>
        </div>
      </header>

      {/* ============================ HERO DIAGRAM ============================ */}
      <section className="pyrra-section pyrra-section--tight">
        <InferenceFanout />
      </section>

      {/* ============================ 01 — TRAINING VS INFERENCE ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">01</span>
          <span className="pyrra-factsheet__name" style={{ color: "rgb(215, 53, 2)" }}>Training vs inference</span>
        </div>
        <h2 className="pyrra-inference__h2">One trains the model. The other runs it forever.</h2>
        <p className="pyrra-section__lede">
          Buyers often conflate the two. They behave differently, scale differently, and need very
          different infrastructure shapes.
        </p>
        <TableSub title="How the workloads differ" pill="Reference" />
        <DefList items={trainingVsInference} columns={1} />
      </section>

      {/* ============================ 02 — DEMAND DRIVERS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">02</span>
          <span className="pyrra-factsheet__name" style={{ color: "rgb(215, 53, 2)" }}>Demand is outpacing supply</span>
        </div>
        <h2 className="pyrra-inference__h2">Every adoption signal points the same direction.</h2>
        <p className="pyrra-section__lede">
          The shape of the inference demand curve is no longer in doubt. The supply side is what
          determines whether buyers can serve that demand at a price and latency the product needs.
        </p>
        <TableSub title="Demand drivers" pill="Indicative" />
        <DefList items={demandDrivers} columns={1} />
      </section>

      {/* ============================ 03 — HYPERSCALE CONSTRAINTS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">03</span>
          <span className="pyrra-factsheet__name" style={{ color: "rgb(215, 53, 2)" }}>Why hyperscalers struggle to keep up</span>
        </div>
        <h2 className="pyrra-inference__h2">The supply gap is structural.</h2>
        <p className="pyrra-section__lede">
          Hyperscale data center construction was the right answer for the training era. The same
          pattern stalls when applied to the inference era, for a list of reasons that have nothing
          to do with effort or capital.
        </p>
        <TableSub title="The constraints on hyperscale build-out" pill="Structural" />
        <DefList items={hyperscaleConstraints} columns={1} />
      </section>

      {/* ============================ 05 — HOW PYRRA DEPLOYS FAST ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">05</span>
          <span className="pyrra-factsheet__name" style={{ color: "rgb(215, 53, 2)" }}>How Pyrra meets demand quickly</span>
        </div>
        <h2 className="pyrra-inference__h2">Capacity that lands in weeks, not years.</h2>
        <p className="pyrra-section__lede">
          Pyrra collapses the deployment cycle by reusing existing commercial mechanical and
          electrical infrastructure and by miniaturizing the unit of capacity. The result is a
          deployment cadence measured against building install windows rather than utility
          construction cycles.
        </p>
        <TableSub title="What lets Pyrra deploy fast" pill="Operational" />
        <DefList items={pyrraSpeed} columns={1} />
      </section>

      {/* ============================ 06 — SIDE BY SIDE ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">06</span>
          <span className="pyrra-factsheet__name" style={{ color: "rgb(215, 53, 2)" }}>Side by side</span>
        </div>
        <h2 className="pyrra-inference__h2">The build cycle, compared.</h2>
        <TableSub title="Hyperscale campus vs Pyrra Node" pill="Comparison" />
        <FinanceTable
          cols={["Parameter", "Hyperscale campus", "Pyrra Node"]}
          rows={compareRows}
        />
      </section>

      {/* ============================ 07 — THREE AUDIENCE CARDS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">07</span>
          <span className="pyrra-factsheet__name">Who this is for</span>
        </div>
        <PillarsNum items={[
          { tag: "For buyers",
            title: "Capacity where your users are.",
            body: "Route inference to Pyrra capacity sited inside the metros where your requests originate. Pricing in the neocloud market band, latency that matches local serving expectations, and a single API across the fleet." },
          { tag: "For owners",
            title: "Hold a productive piece of the build-out.",
            body: "Each node is an owner-held infrastructure asset that earns a monthly capacity payment from contracted inference resale, with Pyrra operating the asset to a uniform standard across the fleet." },
          { tag: "For nations",
            title: "Inference capacity inside your jurisdiction.",
            body: "Distributed nodes let governments and sovereign funds build domestic inference fleets without waiting for hyperscale region announcements, with full ownership and full jurisdictional control of the underlying capacity." },
        ]}/>
      </section>

    </div>
  );
};

// ---------------------------------------------------------------------------
// Hero diagram: a trained model fans out to many inference requests
// (chat, agent, search, embedded copilot, voice, vision).
// ---------------------------------------------------------------------------
const InferenceFanout = () => (
  <div className="pyrra-fanout" role="presentation">
    <svg viewBox="0 0 1200 360" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <g className="pyrra-fanout__lines">
        <line x1="600" y1="180" x2="180" y2="60"  />
        <line x1="600" y1="180" x2="180" y2="180" />
        <line x1="600" y1="180" x2="180" y2="300" />
        <line x1="600" y1="180" x2="1020" y2="60"  />
        <line x1="600" y1="180" x2="1020" y2="180" />
        <line x1="600" y1="180" x2="1020" y2="300" />
      </g>
    </svg>

    <div className="pyrra-fanout__hub">
      <strong>TRAINED MODEL</strong>
      <span>One set of weights</span>
    </div>

    <div className="pyrra-fanout__node pyrra-fanout__node--tl">
      <span className="pyrra-fanout__tag">Chat</span>
      <span className="pyrra-fanout__line">"Summarize this thread."</span>
    </div>
    <div className="pyrra-fanout__node pyrra-fanout__node--ml">
      <span className="pyrra-fanout__tag">Agent</span>
      <span className="pyrra-fanout__line">"Book the flight, then file the report."</span>
    </div>
    <div className="pyrra-fanout__node pyrra-fanout__node--bl">
      <span className="pyrra-fanout__tag">Embedded</span>
      <span className="pyrra-fanout__line">"Autocomplete this function."</span>
    </div>
    <div className="pyrra-fanout__node pyrra-fanout__node--tr">
      <span className="pyrra-fanout__tag">Search</span>
      <span className="pyrra-fanout__line">"Compare the last three quarters."</span>
    </div>
    <div className="pyrra-fanout__node pyrra-fanout__node--mr">
      <span className="pyrra-fanout__tag">Voice</span>
      <span className="pyrra-fanout__line">"Reply in a softer tone."</span>
    </div>
    <div className="pyrra-fanout__node pyrra-fanout__node--br">
      <span className="pyrra-fanout__tag">Vision</span>
      <span className="pyrra-fanout__line">"Tag every defect in the run."</span>
    </div>
  </div>
);

// ---------------------------------------------------------------------------
// Distributed vs centralized illustration.
// ---------------------------------------------------------------------------
const DistributedVsCentralIllus = () => (
  <svg viewBox="0 0 800 480" className="pyrra-distillus" aria-hidden="true">
    <defs>
      <pattern id="pyrra-illus-grid" width="32" height="32" patternUnits="userSpaceOnUse">
        <path d="M 32 0 L 0 0 0 32" fill="none" stroke="var(--border-subtle)" strokeWidth="1" />
      </pattern>
    </defs>

    {/* divider */}
    <line x1="400" y1="20" x2="400" y2="460" stroke="var(--border-subtle)" strokeDasharray="4 6" />

    {/* labels */}
    <text x="200" y="36" textAnchor="middle" className="pyrra-distillus__cap">PYRRA · DISTRIBUTED</text>
    <text x="600" y="36" textAnchor="middle" className="pyrra-distillus__cap">HYPERSCALE · CENTRALIZED</text>

    {/* Left: metro grid */}
    <rect x="40" y="60" width="320" height="380" fill="url(#pyrra-illus-grid)" />
    {[
      [90, 130], [160, 100], [240, 140], [310, 110],
      [70, 220], [200, 200], [280, 240], [340, 200],
      [110, 310], [200, 290], [260, 330], [320, 290],
      [140, 380], [220, 380], [300, 380],
    ].map(([cx, cy], i) => (
      <g key={i}>
        <circle cx={cx} cy={cy} r="28" fill="none" stroke="var(--fire-700)" strokeOpacity="0.18" />
        <circle cx={cx} cy={cy} r="6"  fill="var(--fire-700)" />
      </g>
    ))}

    {/* Right: distant campus */}
    <rect x="440" y="60" width="320" height="380" fill="url(#pyrra-illus-grid)" />
    <g>
      <circle cx="490" cy="380" r="6" fill="var(--ink-700)" />
      <text x="490" y="406" textAnchor="middle" className="pyrra-distillus__lbl">Buyer metro</text>
    </g>
    <g>
      <circle cx="700" cy="140" r="120" fill="none" stroke="var(--fire-700)" strokeOpacity="0.14" />
      <circle cx="700" cy="140" r="80"  fill="none" stroke="var(--fire-700)" strokeOpacity="0.22" />
      <rect x="676" y="116" width="48" height="48" fill="var(--ink-900)" />
      <text x="700" y="186" textAnchor="middle" className="pyrra-distillus__lbl">Hyperscale campus</text>
    </g>
    <line x1="496" y1="378" x2="694" y2="146" stroke="var(--ink-700)" strokeDasharray="2 4" />
  </svg>
);

Object.assign(window, { PageInference, InferenceLinkCard, InferenceFanout, DistributedVsCentralIllus });
