// Page assemblies — one component per route.

const PageHome = ({ go }) => (
  <>
    <Hero
      title={[
        <React.Fragment key="l1">Modern inference for local <AccentWord>innovation.</AccentWord></React.Fragment>,
      ]}
      accentIndex={-1}
      body={(
        <>
          Pyrra lets anyone deploy a local data center node and sell AI inference through Pyrra Network. Perfect for residential buildings, small businesses, hospitals, offices, and more.<br/>
          Power your city. Keep the value local.
        </>
      )}
      image={R("img/hero-city.webp")}
      ctas={[
        { label: "Reserve your inference zone", onClick: () => go("Waitlist") },
        { label: "Explore P1 & P2", onClick: () => go("Nodes"), variant: "secondary" },
      ]}
    />
    <SpecBar
      items={[
        { icon: <IconMapPin size={26} />, value: "20 Mile", label: "Local Coverage" },
        { icon: <IconRack   size={26} />, value: "P1 + P2", label: "Nodes" },
        { icon: <IconShield size={26} />, value: "$5000",   label: "Deposit to reserve an inference zone" },
      ]}
    />

    <section className="pyrra-section">
      <SectionHeading eyebrow="How Pyrra works">
        Local compute. Distributed ownership. Shared future.
      </SectionHeading>
      <FeatureGrid items={[
        { icon: <IconBuilding size={28} />, title: "Place compute close to demand.",
          body: "P1 and P2 Nodes provide low-latency inference to businesses within a 20 mile radius." },
        { icon: <IconOffice   size={28} />, title: "Any building can run a node.",
          body: "Deploy in residential buildings, small businesses, hospitals, offices, and campuses." },
        { icon: <IconDollar   size={28} />, title: "Sell inference. Earn locally.",
          body: "Offer fast, private, and reliable inference through the Pyrra app and keep revenue in your community." },
        { icon: <IconFlag     size={28} />, title: "Race to reserve your territory.",
          body: "Cities open in limited quantities. Secure your area and build the future of local AI." },
      ]}/>
    </section>

    <section className="pyrra-section">
      <SectionHeading eyebrow="Built for every environment">
        Deploy where your city lives and works.
      </SectionHeading>
      <div className="pyrra-envs">
        <EnvCard image={R("img/env-residential.webp")} title="Residential Buildings"
                 body="Bring powerful inference to where people live, quietly and efficiently." />
        <EnvCard image={R("img/env-hospital.webp")} title="Hospitals & Health Systems"
                 body="Keep sensitive data local and speed up the next generation of care." />
        <EnvCard image={R("img/env-office.webp")} title="Offices & Campuses"
                 body="Fuel research, operations, and productivity with private, local inference." />
      </div>
    </section>

    <section className="pyrra-section pyrra-section--inset">
      <Eyebrow>The Pyrra Network</Eyebrow>
      <h2 className="pyrra-network-title">Expanding local inference availability, city by city.</h2>
      <p className="pyrra-network-lede">
        We're building the first people-owned inference network. Reserve your city and help expand the map.
      </p>
      <NetworkMap selectedId="nyc" onSelect={() => {}} showSidebar={false} />
    </section>

    <CtaStrip
      title="The best locations won't stay open."
      body={<>Secure your city today with a $5000 deposit and be first in line<br/>to deploy a Pyrra Node.</>}
      ctaLabel="Reserve your inference zone"
      onCta={() => go("Waitlist")}
    />
  </>
);

const PageNodes = ({ go }) => (
  <>
    <Hero
      title={[
        "Local inference ",
        <React.Fragment key="l2">for <AccentWord>local businesses.</AccentWord></React.Fragment>,
      ]}
      accentIndex={-1}
      body={(
        <>
          Pyrra Nodes bring AI inference close to the people who live, work, and build in your city. Each Node serves businesses and organization within 20 miles, assuming normal demand.{" "}
        </>
      )}
      image={R("img/hero-building.webp")}
    />

    <section className="pyrra-section">
      <SectionHeading eyebrow="Nodes built for local demand">
        Choose the Node that fits your community.
      </SectionHeading>
      <div className="pyrra-nodes">
        <NodeSpecCard
          symbol="P1" name="Designed for everyday demand"
          coverage="~20 MILE COVERAGE"
          body="Built for steady AI demand across institutions, campuses, and professional environments."
          image={R("img/node-p1.webp")}
          specs={[
            { icon: <IconRack   size={18} />, key: "GPU configuration", val: "8 × NVIDIA B200 SXM" },
            { icon: <IconSpeedometer size={18} />, key: "FP8 throughput",    val: "~16 PFLOPS" },
            { icon: <IconBolt   size={18} />, key: "Power draw",        val: "25–100 kW" },
          ]}
          bestFor={["Residential portfolios", "Office parks", "Clinics", "Coworking", "Local AI operators"]}
        />
        <NodeSpecCard
          symbol="P2" name="Designed for training and R&D"
          coverage="~20 MILE COVERAGE"
          body="Built for higher parallelism and performance in dense, compute-active environments."
          image={R("img/node-p2.webp")}
          specs={[
            { icon: <IconRack size={18} />, key: "GPU configuration", val: "16 × NVIDIA B200 SXM" },
            { icon: <IconSpeedometer size={18} />, key: "FP8 throughput",    val: "~32 PFLOPS" },
            { icon: <IconBolt size={18} />, key: "Power draw",        val: "50–200 kW" },
          ]}
          bestFor={["Hospitals & health systems", "Universities", "Dense commercial districts", "Metro operators"]}
        />
      </div>
    </section>

    <section className="pyrra-section pyrra-section--specs-link">
      <SpecsLinkCard onClick={() => go("Specs")} />
      <FinancialsLinkCard onClick={() => go("Financials")} />
    </section>

    <section className="pyrra-section">
      <SectionHeading eyebrow="How deployment works">
        From site to service in three steps.
      </SectionHeading>
      <div className="pyrra-steps">
        <StepCard n="1" title="Site qualification"
                  body="We evaluate power, connectivity, and placement to ensure the right fit for your community."
                  image={R("img/step-1.webp")} />
        <StepCard n="2" title="Location lock"
                  body="Secure a site within the coverage area and finalize power and connectivity."
                  image={R("img/step-2.webp")} />
        <StepCard n="3" title="Network activation"
                  body="Connect your node, and bring inference capacity online locally."
                  image={R("img/step-3.webp")} />
      </div>
    </section>

    <section className="pyrra-section pyrra-localby">
      <div className="pyrra-localby__icon"><IconMapPin size={36} /></div>
      <div>
        <Eyebrow>Local by Design</Eyebrow>
        <p>Pyrra Nodes are built to keep inference local, reliable, and fast—right where it matters.</p>
      </div>
      <Button variant="secondary" onClick={() => go("Network")}>Explore the Network</Button>
    </section>
  </>
);

const PageNetwork = ({ go }) => {
  const [selected, setSelected] = React.useState("nyc");
  const handleReserve = (city) => {
    go("Waitlist", { city: `${city.name}, ${city.region}`, node: city.node });
  };
  return (
    <>
      <Hero
        title={[
          <React.Fragment key="l1">Modern inference for local <AccentWord>innovation.</AccentWord></React.Fragment>,
        ]}
        accentIndex={-1}
        body={(
          <>
            Pyrra is building the first people-owned AI inference network. Secure your 20-mile territory,
            deploy a node, and power the future of local AI.
          </>
        )}
        image={R("img/hero-cityscape.webp")}
        ctas={[{ label: "Explore the Network", onClick: () => go("Waitlist") }]}
      />

      <section className="pyrra-section pyrra-network__intro">
        <SectionHeading eyebrow="The Pyrra Network"
          sub={(<><span className="pyrra-network__sub-line">Nodes must be at least 20 miles apart to ensure optimal performance and fair distribution.</span><br/><span className="pyrra-accent-word">Be the first to secure prime local inference territories in your city.</span></>)}>
          Own the infrastructure powering the future of AI.
        </SectionHeading>
        <NetworkMap selectedId={selected} onSelect={setSelected} onReserve={handleReserve} />
        <div className="pyrra-network-spec">
          <div><IconMapPin size={20} /><div><strong>20 mile territories</strong><span>Nodes must be 20 miles apart (for now).</span></div></div>
          <div><IconFlag    size={20} /><div><strong>Race to secure</strong><span>High-demand cities go fast. The best locations won't stay open.</span></div></div>
          <div><IconShield  size={20} /><div><strong>You own your node</strong><span>Deploy, earn, and build local AI infrastructure in your community.</span></div></div>
          <div><IconDollar  size={20} /><div><strong>Earn locally</strong><span>Keep inference revenue in your city and power what matters most.</span></div></div>
        </div>
      </section>

      <CtaStrip
        title="The best locations won't stay open."
        body="Prime inference territories are limited and in high demand. Secure your city today with a $5000 deposit and help power the future of AI."
        ctaLabel="Explore the Network"
        onCta={() => go("Waitlist")}
      />
    </>
  );
};

const PageAbout = ({ go }) => (
  <>
    <Hero
      title={[
        <React.Fragment key="l1">You don't need a data center the size of Manhattan to power <AccentWord>AI.</AccentWord></React.Fragment>,
      ]}
      accentIndex={-1}
      body={(
        <>
          Pyrra designs modern data centers designed to deploy in high-density metropolitan areas, where the compute is needed most because we don't need to build a data center the size of a city to provide the world with AI.
        </>
      )}
      image={R("img/hero-aerial.webp")}
      ctas={[
        { label: "Join the Waitlist", onClick: () => go("Waitlist") },
      ]}
    />

    <section className="pyrra-section">
      <SectionHeading eyebrow="Our Thesis"
        sub="Most compute is consumed in cities but originates far away. Pyrra brings it closer.">
        From hyperscale to neighborhood-scale.
      </SectionHeading>
      <div className="pyrra-envs">
        <EnvCard image={R("img/about-operators.webp")} title="Built for operators."
          body="Turn underutilized space into high-impact infrastructure. Simple to deploy, easy to run, built for real estate teams." />
        <EnvCard image={R("img/about-buyers.webp")} title="Built for buyers."
          body="Low-latency inference for tenants, visitors, and systems. Private, reliable, and always on, right where work happens." />
        <EnvCard image={R("img/about-density.webp")} title="Built for density."
          body="Local inference means stronger network effects for every building, business, and community." />
      </div>
    </section>

    <section className="pyrra-section pyrra-story">
      <div className="pyrra-story__text">
        <Eyebrow>Our Story</Eyebrow>
        <h2>Built by experienced operators who believe in distributed ownership.</h2>
        <p>Pyrra was founded by a team with two decades of commercial real estate and data center management experience. We have deployed and managed over $1 billion of compute infrastructure in countries around the world.</p>
        <p>We believe the future of AI is locally-owned with the benefits shared with the communities we serve. We're building the first people-owned compute network that transforms everyday real estate into valuable infrastructure for the AI era</p>
      </div>
      <div className="pyrra-story__images">
        <div style={{ backgroundImage: `url(${R("img/about-story-1.webp")})` }} />
        <div style={{ backgroundImage: `url(${R("img/about-story-2.webp")})` }} />
      </div>
    </section>

    <section className="pyrra-section">
      <SectionHeading eyebrow="Our Approach">Together we can bring inference to the world.</SectionHeading>
      <div className="pyrra-approach">
        {[
          { n: "01", title: "Place",    body: "Deploy inference nodes in buildings, campuses, and corridors where demand lives.", img: R("img/about-place.webp") },
          { n: "02", title: "Activate", body: "Power local AI use cases with secure, reliable, low-latency compute.",            img: R("img/about-activate.webp") },
          { n: "03", title: "Align",    body: "Create new revenue streams for owners and value for communities.",                img: R("img/about-align.webp")    },
        ].map((s, i) => (
          <div className="pyrra-approach__step" key={i}>
            <div className="pyrra-approach__img" style={{ backgroundImage: `url(${s.img})` }} />
            <h4>{s.title}</h4>
            <p>{s.body}</p>
          </div>
        ))}
      </div>
    </section>

    <CtaStrip
      title="Let's build the future of local AI together."
      body="We're partnering with forward-thinking building owners, operators, and developers to bring inference to the places that need it most."
      ctaLabel="Join Waitlist"
      onCta={() => go("Waitlist")}
    />
  </>
);

const PageWaitlist = ({ go, prefill }) => (
  <>
    <Hero
      title={[
        "Secure your",
        <React.Fragment key="l2">place on <AccentWord>the map.</AccentWord></React.Fragment>,
      ]}
      accentIndex={-1}
      body={(
        <>
          Place your deposit and claim your inference zone to join the Pyrra network. Our team will reach out for site qualification and deposit coordination to hold your location.
        </>
      )}
      image={R("img/hero-residence.webp")}
      variant="wide"
    />

    <section className="pyrra-section">
      <WaitlistForm prefill={prefill || {}} />
    </section>

    <CtaStrip
      title="Ready to bring Pyrra to your city?"
      body="Secure your city today with a $5000 deposit and be first in line to deploy a Pyrra Node."
      ctaLabel="Reserve Your City"
      onCta={() => go("Waitlist")}
    />
  </>
);

const PageSpecs = ({ go }) => {
  const compareRows = [
    { key: "GPU configuration", p1: "8 × NVIDIA B200 SXM", p2: "16 × NVIDIA B200 SXM" },
    { key: "Footprint", p1: "24U or 42U liquid-cooled rack", p2: "48U liquid-cooled rack" },
    { key: "Floor area required", p1: "~30 sq ft (rack + service clearance)", p2: "~55 sq ft (rack + service clearance)" },
    { key: "Ceiling clearance", p1: "8 ft minimum", p2: "9 ft minimum" },
    { key: "Power service", p1: "3-phase, 208V or 480V", p2: "3-phase, 480V preferred" },
    { key: "Power draw, typical", p1: "25–100 kW", p2: "50–200 kW" },
    { key: "Cooling", p1: "Direct-to-chip liquid, building loop", p2: "Direct-to-chip liquid, building loop" },
    { key: "Heat rejection capacity", p1: "100 kW (peak)", p2: "200 kW (peak)" },
    { key: "Backhaul", p1: "10 Gbps minimum, 100 Gbps preferred", p2: "100 Gbps minimum, 400 Gbps preferred" },
    { key: "Acoustic profile", p1: "50–55 dBA at 1 m", p2: "50–55 dBA at 1 m" },
    { key: "Floor loading", p1: "250 lbs / sq ft minimum", p2: "300 lbs / sq ft minimum" },
    { key: "Install duration", p1: "5–7 days", p2: "10–14 days" },
  ];

  return (
    <>
      <header className="pyrra-factsheet__head">
        <Eyebrow>Site Specifications</Eyebrow>
        <h1>Pyrra Node site requirements.</h1>
        <p>
          Every Pyrra node installs into existing commercial mechanical and electrical infrastructure.
          This factsheet lists the qualifying envelope for P1 and P2 deployments.
        </p>
        <div className="pyrra-factsheet__ctas">
          <Button size="md" onClick={() => go("Waitlist")}>Request a site survey</Button>
        </div>
      </header>

      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">01</span>
          <span className="pyrra-factsheet__name">Comparison · P1 vs P2</span>
        </div>
        <SpecCompareTable rows={compareRows} />
      </section>

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">02</span>
        <span className="pyrra-factsheet__name">Electrical</span>
      </div>
      <SpecBlock
        icon={<IconBolt size={20} />}
        eyebrow="Electrical"
        rows={[
          { key: "Service type", val: "3-phase, 208Y/120V or 480Y/277V" },
          { key: "Spare panel capacity (P1)", val: "125 A at 480V minimum" },
          { key: "Spare panel capacity (P2)", val: "250 A at 480V minimum" },
          { key: "Conductor", val: "Copper, rated to 90°C, sized per NEC 310" },
          { key: "Disconnects", val: "Lockable, accessible at install location" },
          { key: "Backup", val: "Generator interface optional, recommended for SLA-critical buyers" },
          { key: "Metering", val: "Pyrra-supplied at rack, with utility-tie option" },
        ]}
      />

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">03</span>
        <span className="pyrra-factsheet__name">Thermal</span>
      </div>
      <SpecBlock
        icon={<IconLeaf size={20} />}
        eyebrow="Thermal"
        rows={[
          { key: "Coolant", val: "Propylene glycol mix, dielectric, food-grade" },
          { key: "Supply temperature", val: "18–35°C" },
          { key: "Flow rate (P1)", val: "60 L/min nominal" },
          { key: "Flow rate (P2)", val: "120 L/min nominal" },
          { key: "Heat rejection (P1)", val: "Up to 341,000 BTU/hr (100 kW)" },
          { key: "Heat rejection (P2)", val: "Up to 682,000 BTU/hr (200 kW)" },
          { key: "Leak detection", val: "Sensor array under each rack, automated shutoff" },
          { key: "Building connection", val: "Welded copper or stainless, 1.5\" supply / 1.5\" return" },
        ]}
      />

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">04</span>
        <span className="pyrra-factsheet__name">Floor &amp; footprint</span>
      </div>
      <SpecBlock
        icon={<IconBuilding size={20} />}
        eyebrow="Floor & footprint"
        rows={[
          { key: "Rack dimensions", val: "800 × 1200 mm (24U, 42U, or 48U height)" },
          { key: "Loaded weight (P1)", val: "~1,500 lbs" },
          { key: "Loaded weight (P2)", val: "~2,000 lbs per rack" },
          { key: "Floor load rating", val: "250 lbs/sq ft (P1), 300 lbs/sq ft (P2)" },
          { key: "Service clearance", val: "36\" front, 24\" rear" },
          { key: "Install path width", val: "36\" minimum throughout" },
          { key: "Seismic", val: "Z4 anchoring kit included for west coast and high-risk zones" },
        ]}
      />

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">05</span>
        <span className="pyrra-factsheet__name">Backhaul</span>
      </div>
      <SpecBlock
        icon={<IconGlobe size={20} />}
        eyebrow="Backhaul"
        rows={[
          { key: "Backhaul (P1)", val: "10 Gbps minimum, 100 Gbps preferred" },
          { key: "Backhaul (P2)", val: "100 Gbps minimum, 400 Gbps preferred" },
          { key: "Carrier diversity", val: "Two carriers recommended, single carrier acceptable" },
          { key: "Latency target", val: "Sub-10 ms to buyer endpoint" },
          { key: "IP transit", val: "BGP multi-homed, /29 minimum allocation per node" },
          { key: "Internal handoff", val: "Dual 100 Gbps optical, redundant" },
          { key: "Telecom room proximity", val: "Within 200 m of MPOE recommended" },
        ]}
      />

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">06</span>
        <span className="pyrra-factsheet__name">Compliance</span>
      </div>
      <SpecBlock
        icon={<IconShieldCheck size={20} />}
        eyebrow="Compliance"
        rows={[
          { key: "Ambient temperature", val: "15–30°C" },
          { key: "Relative humidity", val: "20%–80%, non-condensing" },
          { key: "Fire suppression", val: "Gaseous agent (FM-200, Novec 1230, or equivalent)" },
          { key: "Smoke detection", val: "VESDA or equivalent recommended" },
          { key: "Physical access", val: "Key card or biometric, audit-logged" },
          { key: "Camera coverage", val: "Required at rack and entry" },
          { key: "Compliance scope", val: "HIPAA, SEC, FERPA, SOC 2 Type 2" },
        ]}
      />

      <div className="pyrra-factsheet__label pyrra-factsheet__label--inline">
        <span className="pyrra-factsheet__num">07</span>
        <span className="pyrra-factsheet__name">Build out</span>
      </div>
      <SpecBlock
        icon={<IconCalendar size={20} />}
        eyebrow="Build out"
        rows={[
          { key: "Site survey", val: "1 day, no charge for qualified sites" },
          { key: "MEP integration", val: "2–4 days, customer's contractor or Pyrra-managed" },
          { key: "Rigging and placement", val: "1 day" },
          { key: "Commissioning", val: "1–3 days, including 24-hour burn-in" },
          { key: "Total install (P1)", val: "5–7 calendar days from MEP-ready" },
          { key: "Total install (P2)", val: "10–14 calendar days from MEP-ready" },
          { key: "Operations", val: "24/7 NOC, 4-hour on-site SLA" },
          { key: "Maintenance windows", val: "Coordinated with customer, off-peak" },
        ]}
      />

      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">08</span>
          <span className="pyrra-factsheet__name">Deployment envelope</span>
        </div>
        <FitsBlock
          fits={[
            "Hospital mechanical rooms, imaging center utility spaces, and pharmacy IT closets",
            "University data buildings, research mechanical rooms, and campus utility plants",
            "Class A commercial office buildings with conditioned telecom rooms above 1,000 sq ft",
            "Multifamily residential buildings of 50+ units with active chiller plants",
            "Data center colocation suites and carrier hotels",
            "Industrial buildings with three-phase service and process cooling",
            "New construction where MEP plans can accommodate the node from the design phase",
          ]}
          notFits={[
            "Individual apartments, condos, or single-family homes",
            "Standalone retail spaces under 5,000 sq ft",
            "Buildings without three-phase commercial electrical service",
            "Buildings without a chilled water loop or dry cooler capacity for 100 kW or more",
            "Spaces with wood-framed floors above the ground level",
            "Locations without conditioned ambient temperature year-round",
            "Spaces lacking carrier-grade fiber service or willingness to install it",
          ]}
        />
      </section>

      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">09</span>
          <span className="pyrra-factsheet__name">Pre-install checklist</span>
        </div>
        <ChecklistBlock items={[
          { title: "Electrical", body: "Does the building have three-phase commercial service with at least 125 amps of spare capacity at 480V available within 200 feet of the proposed install location?" },
          { title: "Cooling", body: "Does the building have a chilled water loop, cooling tower, or dry cooler with at least 100 kW of available heat rejection capacity?" },
          { title: "Structural", body: "Is the install location slab-on-grade or in a commercial mechanical room rated for 250 pounds per square foot or more?" },
          { title: "Network", body: "Does the building have or can it accept commercial fiber service from at least one tier-one carrier at 10 Gbps or higher?" },
          { title: "Code", body: "Does the proposed location meet commercial mechanical room standards for fire suppression, ambient control, and physical access?" },
        ]} />
      </section>

      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">10</span>
          <span className="pyrra-factsheet__name">FAQ</span>
        </div>
        <FaqBlock items={[
          { q: "Can I put a P1 in my home?", a: "No. Residential electrical service caps at roughly 48 kW for the entire dwelling, well below the P1's typical operating draw. The cooling and structural requirements also exceed what residential construction is designed for. Pyrra's residential segment serves multifamily buildings from a central node, not individual units." },
          { q: "What if my building has the cooling but not the power, or vice versa?", a: "Targeted MEP upgrades are common and Pyrra's engineering team will scope them as part of the site survey. Most qualifying buildings need at most a panel upgrade or a chilled water tie-in, both well-understood commercial scopes." },
          { q: "How disruptive is the install?", a: "Less than a chiller replacement. Most work happens inside the MEP room and does not interrupt building operations. The rigging day is the most visible, and Pyrra coordinates with building management to schedule it during off-hours." },
          { q: "Who owns the equipment?", a: "The buyer takes title to the hardware at delivery. Two purchase paths are available: cash at full capex ($1.5M for P1, $2.8M for P2) with no lien or covenants, or financed through the Pyrra hardware facility at 70% loan-to-value against the signed Inference Capacity Offtake Agreement (60 months at an indicative 10% APR), with the lender holding a UCC-1 lien on the equipment. Ownership lets the buyer capture the federal tax stack — Section 48 ITC and MACRS five-year accelerated depreciation — directly. See the Node Financial Projections for the full waterfall." },
          { q: "What happens if the building loses power or cooling?", a: "The node has integrated UPS and graceful-shutdown protection. Extended outages route inference traffic to the nearest Pyrra metro peer under SLA, so the buyer's workloads stay online while the local node waits for utilities to recover." },
          { q: "Can the same node serve multiple tenants?", a: "Yes. Physical GPU isolation is built into the architecture and each tenant receives dedicated B200s at the server level. HIPAA, SEC, and FERPA workloads can run side by side on the same chassis without sharing silicon." },
        ]} />
        <p className="pyrra-specs-footnote">
          Site survey terms current as of 2026.
        </p>
      </section>

      <CtaStrip
        title="Reserve your site survey."
        body="Tell us about your building. A Pyrra engineer will review your power, cooling, and connectivity in 48 hours and tell you whether you qualify for P1, P2, or both. Surveys are no-cost and non-binding."
        ctaLabel="Request a site survey"
        onCta={() => go("Waitlist")}
      />
    </>
  );
};

const PageFinancials = ({ go }) => {
  // ---- table data ---------------------------------------------------------
  const p1Y1Rows = [
    { label: "Gross inference revenue", values: ["$85,000", "$96,300", "$113,300"] },
    { label: "Less: Pyrra Service Fee (50%)", values: ["($42,500)", "($48,150)", "($56,650)"], negative: true },
    { label: "Capacity Payment to owner", values: ["$42,500", "$48,150", "$56,650"], emphasis: true },
    { label: "Less: Electricity ($0.10/kWh)", values: ["($5,100)", "($5,800)", "($6,800)"], negative: true },
    { label: "Less: Site overhead", values: ["($1,000)", "($1,000)", "($1,000)"], negative: true },
    { label: "Less: Debt service (if financed)", values: ["($22,000)", "($22,000)", "($22,000)"], negative: true },
    { label: "Net cash to owner — financed", values: ["$14,400", "$19,350", "$26,850"], emphasis: true },
    { label: "Net cash to owner — cash purchase", values: ["$36,400", "$41,350", "$48,850"], emphasis: true },
  ];

  const p2Y1Rows = [
    { label: "Gross inference revenue", values: ["$170,000", "$192,700", "$226,700"] },
    { label: "Less: Pyrra Service Fee (50%)", values: ["($85,000)", "($96,350)", "($113,350)"], negative: true },
    { label: "Capacity Payment to owner", values: ["$85,000", "$96,350", "$113,350"], emphasis: true },
    { label: "Less: Electricity ($0.10/kWh)", values: ["($10,220)", "($11,580)", "($13,640)"], negative: true },
    { label: "Less: Site overhead", values: ["($1,500)", "($1,500)", "($1,500)"], negative: true },
    { label: "Less: Debt service (if financed)", values: ["($41,000)", "($41,000)", "($41,000)"], negative: true },
    { label: "Net cash to owner — financed", values: ["$32,280", "$42,270", "$57,210"], emphasis: true },
    { label: "Net cash to owner — cash purchase", values: ["$73,280", "$83,270", "$98,210"], emphasis: true },
  ];

  const p1FiveYear = [
    { label: "Financed · 75% util",        values: ["$450,000",   "$558,000",   "1.24×", "24.8%"] },
    { label: "Financed · 85% util",        values: ["$450,000",   "$816,000",   "1.81×", "36.3%"] },
    { label: "Financed · 100% util",       values: ["$450,000",   "$1,204,000", "2.68×", "53.5%"] },
    { label: "Cash purchase · 75% util",   values: ["$1,500,000", "$1,878,000", "1.25×", "25.0%"] },
    { label: "Cash purchase · 85% util",   values: ["$1,500,000", "$2,136,000", "1.42×", "28.5%"] },
    { label: "Cash purchase · 100% util",  values: ["$1,500,000", "$2,524,000", "1.68×", "33.7%"] },
  ];

  const p2FiveYear = [
    { label: "Financed · 75% util",        values: ["$840,000",   "$1,325,000", "1.58×", "31.5%"] },
    { label: "Financed · 85% util",        values: ["$840,000",   "$1,841,000", "2.19×", "43.8%"] },
    { label: "Financed · 100% util",       values: ["$840,000",   "$2,616,000", "3.11×", "62.3%"] },
    { label: "Cash purchase · 75% util",   values: ["$2,800,000", "$3,785,000", "1.35×", "27.0%"] },
    { label: "Cash purchase · 85% util",   values: ["$2,800,000", "$4,301,000", "1.54×", "30.7%"] },
    { label: "Cash purchase · 100% util",  values: ["$2,800,000", "$5,076,000", "1.81×", "36.3%"] },
  ];

  const federalTax = [
    { label: "MACRS 5-year accelerated depreciation", values: ["$300K – $980K tax shield", "Depreciate 100% of basis over 5 years"] },
    { label: "Section 48 Investment Tax Credit",       values: ["Up to $1M – $5M one-time",  "Energy property credit; capture requirements apply"] },
    { label: "Opportunity Zone deferral",              values: ["Up to $10M investor benefit", "Deferral if deployment in qualified zone"] },
    { label: "CHIPS Act competitive grants",           values: ["$5M – $15M per project",     "Federal Department of Commerce"] },
    { label: "New Markets Tax Credit",                 values: ["Up to $5M per node",         "CDFI Fund allocation"] },
  ];

  const stateLocalTax = [
    { label: "Texas DC tax abatement",          values: ["Texas",            "$2M – $8M over 10 years"] },
    { label: "Virginia DC sales tax exemption", values: ["Virginia",         "$2M – $8M over 10 years"] },
    { label: "Florida sales/use tax exemption", values: ["Florida",          "$300K – $500K"] },
    { label: "Empire State Development",        values: ["New York",         "$500K – $3M"] },
    { label: "County job creation grants",      values: ["Multiple",         "$500K – $3M"] },
    { label: "Rural Energy for America Program",values: ["USDA",             "25% – 50% of project cost"] },
    { label: "Power utility incentives",        values: ["Local utilities",  "$200K – $1M"] },
  ];

  const assumptionsRows = [
    { label: "Gross inference price (blended)",     values: ["$0.55 / million tokens", "$0.30 – $0.80"] },
    { label: "Per-GPU throughput (Llama 70B FP8)",  values: ["10,000 tokens / sec",    "8,000 – 13,000"] },
    { label: "Pyrra Service Fee",                   values: ["50% of gross",           "Fixed at 50% under standard contract"] },
    { label: "Commercial electricity rate",         values: ["$0.10 / kWh",            "$0.07 – $0.22"] },
    { label: "Average power draw (P1, 75% util)",   values: ["70 kW",                  "60 – 75"] },
    { label: "Hardware financing rate",             values: ["10% APR",                "Subject to credit underwriting"] },
    { label: "Loan amortization",                   values: ["60 months",              "Standard 5-year"] },
    { label: "Year 1 utilization",                  values: ["75%",                    "50% – 100%"] },
    { label: "Revenue decay Years 3 – 5",           values: ["90% / 80% / 70%",        "100% – 50%"] },
    { label: "Site overhead allocation",            values: ["$1K – $1.5K / month",    "Set by buyer's accountant"] },
  ];

  // ---- page ---------------------------------------------------------------
  return (
    <div className="pyrra-financials">
      <header className="pyrra-factsheet__head">
        <Eyebrow>Node Financial Projections</Eyebrow>
        <h1>Model the asset under your assumptions.</h1>
        <p>
          Pyrra nodes are infrastructure assets that generate inference under contract. The scenarios below show
          how that revenue flows back to the owner under a transparent, bundled fee structure. Inputs you control.
          Math you can audit. No promises made.
        </p>
        <p className="pyrra-factsheet__disclaim">
          All scenarios on this page are illustrative. Pyrra does not promise, project, or guarantee any specific
          financial outcome to node owners. Returns depend on utilization, electricity costs, financing terms,
          market conditions, and the buyer's tax situation.
        </p>
        <div className="pyrra-factsheet__ctas">
          <Button size="md" onClick={() => go("Waitlist")}>Reserve your inference zone</Button>
        </div>
      </header>

      {/* ============================ 01 — WATERFALL ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">01</span>
          <span className="pyrra-factsheet__name">How the cash flows</span>
        </div>

        <div className="pyrra-finance-flow">
          <CashWaterfall />
          <div className="pyrra-finance-flow__panels">
            <BulletPanel
              eyebrow="Service Fee covers"
              title="One bundled fee, 50% of gross"
              items={[
                "Inference platform, model serving, API and developer tools",
                "Enterprise sales, marketing, customer success",
                "HIPAA, SEC, FERPA, and SOC 2 Type 2 compliance bundle",
                "Carrier fiber backhaul, IP transit, BGP peering",
                "24/7 NOC and four-hour on-site SLA",
                "Firmware, software, security patching, hardware service",
                "Pyrra's operating margin",
              ]}
            />
            <BulletPanel
              eyebrow="Owner pays directly"
              title="Three line items, owner-controlled"
              tone="muted"
              items={[
                "Electricity at the site's commercial tariff",
                "Site overhead allocation (property tax, insurance)",
                "Debt service (if hardware is financed)",
              ]}
            />
          </div>
        </div>
        <p className="pyrra-fintable__footnote">
          Illustrative structure. The 50% Service Fee is the base case for both P1 and P2 under current market
          conditions and standard contract terms. Actual fee structure is set in the Inference Capacity Offtake
          Agreement signed at deployment.
        </p>
      </section>

      {/* ============================ 02 — P1 YEAR 1 ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">02</span>
          <span className="pyrra-factsheet__name">P1 · monthly cash flow · Year 1</span>
        </div>
        <FinanceTable
          cols={["Line Item", "75% Util", "85% Util", "100% Util"]}
          rows={p1Y1Rows}
          footnote="Illustrative scenario. Assumes $0.55 / million tokens blended pricing, $0.10 / kWh commercial electricity, and 10% APR hardware financing on a 5-year amortization for the financed scenario. Actual results will vary."
        />
      </section>

      {/* ============================ 03 — P2 YEAR 1 ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">03</span>
          <span className="pyrra-factsheet__name">P2 · monthly cash flow · Year 1</span>
        </div>
        <FinanceTable
          cols={["Line Item", "75% Util", "85% Util", "100% Util"]}
          rows={p2Y1Rows}
          footnote="Illustrative scenario. P2 doubles the GPU count, doubles the inference capacity, and roughly doubles every line in the waterfall. Equity payback in the financed scenario reaches breakeven at a similar pace to P1 because both nodes scale proportionally."
        />
      </section>

      {/* ============================ 04 — 5-YEAR ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">04</span>
          <span className="pyrra-factsheet__name">Five-year illustrative scenarios</span>
        </div>
        <p className="pyrra-section__lede">
          The base case applies a moderate price-decay curve: full pricing in Years 1 – 2, then 90% in Year 3,
          80% in Year 4, and 70% in Year 5. These are possibles scenarios, not forecasts.
        </p>

        <div className="pyrra-fintable__sub">P1</div>
        <FinanceTable
          cols={["Scenario", "Equity Invested", "5-Year Net Cash", "Multiple", "Avg Annual Return"]}
          rows={p1FiveYear}
        />

        <div className="pyrra-fintable__sub">P2</div>
        <FinanceTable
          cols={["Scenario", "Equity Invested", "5-Year Net Cash", "Multiple", "Avg Annual Return"]}
          rows={p2FiveYear}
          footnote="All figures pre-tax and illustrative. The Section 48 Investment Tax Credit and MACRS 5-year accelerated depreciation are not included; both may materially improve after-tax economics for taxable buyers."
        />
      </section>

      {/* ============================ 05 — FINANCED VS CASH ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">05</span>
          <span className="pyrra-factsheet__name">Financed vs cash purchase</span>
        </div>
        <TwoPathsBlock
          left={{
            pill: "Path A",
            title: "Financed · 70% LTV",
            body: "Pyrra hardware facility advances 70% of capex against the signed Inference Capacity Offtake Agreement. The buyer's equity check is reduced; the lender holds a UCC-1 lien against the equipment and a collateral assignment of the offtake agreement.",
            meta: [
              { key: "Equity check (P1)",   val: "$450,000" },
              { key: "Equity check (P2)",   val: "$840,000" },
              { key: "Term",                val: "60 months at indicative 10% APR" },
              { key: "Monthly debt service", val: "~$22K (P1) · ~$41K (P2)" },
            ],
            bestFor: [
              "Cost of capital above 10% for marginal investments",
              "Wants to preserve cash for other uses",
              "Comfortable with covenants and right of substitution",
            ],
          }}
          right={{
            pill: "Path B",
            title: "Cash purchase",
            body: "Buyer pays full capex at delivery and takes the asset clean. No lien, no covenants, no lender approval required for transfers or refinancing. Full tax stack — ITC, MACRS — without sharing benefits with a financing partner.",
            meta: [
              { key: "Cash outlay (P1)",    val: "$1,500,000" },
              { key: "Cash outlay (P2)",    val: "$2,800,000" },
              { key: "Encumbrance",         val: "None" },
              { key: "Tax benefits",        val: "Captured in full by buyer" },
            ],
            bestFor: [
              "Cost of capital below 10%",
              "Maximum tax efficiency, full ITC capture",
              "Tax-exempt buyers using a partner structure",
            ],
          }}
        />
        <p className="pyrra-fintable__footnote">
          A P1 buyer at 75% utilization invests $450K (financed) or $1.5M (cash). Over five years the financed
          scenario produces ~$558K of pre-tax net cash, a 1.24× multiple on equity. The cash scenario produces
          ~$1.88M, a 1.25× multiple. Percentage returns are nearly identical at the base case; the difference is
          absolute dollars and embedded leverage risk.
        </p>
      </section>

      {/* ============================ 06 — TAX TREATMENT ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">06</span>
          <span className="pyrra-factsheet__name">Tax treatment</span>
        </div>
        <p className="pyrra-section__lede">
          Because the buyer takes title to the hardware at delivery, they may qualify for the federal, state, and
          local programs that apply to ownership of qualifying energy and information technology property. Pyrra
          does not provide tax advice; discuss with your accountant before purchase.
        </p>

        <div className="pyrra-fintable__sub">Federal programs</div>
        <FinanceTable
          cols={["Program", "Estimated Benefit", "Mechanism"]}
          rows={federalTax}
        />

        <div className="pyrra-fintable__sub">State &amp; local programs</div>
        <FinanceTable
          cols={["Program", "Jurisdiction", "Indicative Benefit"]}
          rows={stateLocalTax}
          footnote="Pyrra does not provide tax, legal, or accounting advice. Eligibility for any incentive depends on the buyer's specific situation and applicable law at the time of deployment. Indicative benefits are typical ranges, not commitments. Consult your tax advisor before relying on any incentive in your economic model."
        />
      </section>

      {/* ============================ 08 — NOT IN THESE NUMBERS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">07</span>
          <span className="pyrra-factsheet__name">What's not in these numbers</span>
        </div>
        <p className="pyrra-section__lede">
          The illustrative scenarios above are intentionally conservative on three dimensions worth flagging openly.
        </p>
        <DefList items={[
          { title: "Tax benefits",
            body: "The 24%–36% average annual return figures are pre-tax. Taxable buyers capturing MACRS depreciation and the Section 48 ITC can see after-tax Year-1 economics meaningfully higher than the pre-tax view suggests. Uplift depends on effective rate, ITC qualification path, and entity type." },
          { title: "State and local incentives",
            body: "The incentive stack ranges from $200K per node (Florida sales tax exemption) to $15M per project (CHIPS Act grants) depending on the deployment metro and qualification. These reduce effective basis and accelerate equity payback, but availability varies by location and is not assumed in the base case." },
          { title: "Utility incentives",
            body: "Power utilities in some metros offer demand-charge waivers, rebates, or preferred tariffs for AI infrastructure. These can reduce the buyer's monthly electricity cost by 15%–25%. The illustrative scenarios use national average commercial rates without these adjustments." },
        ]} columns={1} />
      </section>

      {/* ============================ 09 — ASSUMPTIONS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">08</span>
          <span className="pyrra-factsheet__name">Key assumptions</span>
        </div>
        <FinanceTable
          cols={["Assumption", "Base Case", "Range Tested"]}
          rows={assumptionsRows}
          footnote="Pyrra publishes these assumptions to make the model auditable. Buyers may run their own sensitivities and Pyrra's account team will help model alternate cases on request."
        />
      </section>

      {/* ============================ 10 — RISK FACTORS ============================ */}
      <section className="pyrra-section">
        <div className="pyrra-factsheet__label">
          <span className="pyrra-factsheet__num">09</span>
          <span className="pyrra-factsheet__name">Risk factors</span>
        </div>
        <p className="pyrra-section__lede">
          Pyrra nodes are operating assets, not financial securities, and the economics depend on the asset
          performing under prevailing market conditions. The list below is illustrative of the principal risk
          categories and is not exhaustive.
        </p>
        <DefList items={[
          { title: "Market risk",
            body: "Inference prices may decline as newer GPU generations enter the merchant cloud, compressing the Capacity Payment per token sold. The base case applies a 30% price decay by Year 5; actual decay may be more severe." },
          { title: "Utilization risk",
            body: "Capacity Payments are paid on inference Pyrra actually sells. If Pyrra cannot sell the node's full capacity, the Capacity Payment is correspondingly lower. The base case assumes 75% utilization, consistent with Pyrra's underwriting but not guaranteed." },
          { title: "Technology risk",
            body: "B200 silicon will eventually be superseded by subsequent generations. The refresh option in the Operations and Maintenance Agreement mitigates but does not eliminate this risk." },
          { title: "Operational risk",
            body: "Equipment failure, network outages, or facility disruption can interrupt revenue. Pyrra's operational SLA mitigates but does not eliminate this risk." },
          { title: "Counterparty risk",
            body: "Pyrra's enterprise customers may default or renegotiate, reducing the revenue Pyrra can pass through." },
          { title: "Electricity rate risk",
            body: "Material increases in the buyer's commercial electricity tariff reduce net cash to the owner." },
          { title: "Regulatory risk",
            body: "Changes to tax treatment, energy incentives, or AI-related regulation may affect the asset's economics." },
          { title: "Liquidity risk",
            body: "Pyrra nodes are not freely tradable. Resale or transfer requires Pyrra's involvement under the offtake structure and may not be possible at the buyer's preferred timing or price." },
        ]} columns={2} />
      </section>

      <section className="pyrra-section pyrra-section--disclaim">
        <p className="pyrra-specs-footnote pyrra-specs-footnote--legal">
          The information on this page is for general informational purposes only and does not constitute an offer
          to sell or a solicitation of an offer to buy any security or other financial instrument. The figures
          shown are illustrative scenarios based on Pyrra's published base-case assumptions and are not forecasts,
          projections, or guarantees of any particular outcome. Actual results will vary based on factors including
          but not limited to market demand for inference services, electricity costs, financing terms, equipment
          performance, regulatory changes, and the buyer's tax situation. Past performance of comparable
          infrastructure assets does not indicate future results. Pyrra does not provide tax, legal, accounting,
          or investment advice. Prospective buyers should consult their own qualified advisors and review the full
          transaction documents before making any purchase decision. © 2026 Pyrra Inference Inc.
        </p>
      </section>
    </div>
  );
};

const PageContact = ({ go }) => (
  <>
    <header className="pyrra-factsheet__head">
      <Eyebrow>Contact</Eyebrow>
      <h1>Talk to Pyrra.</h1>
      <p>
        Whether you're a building owner, an operator, a press contact, or just curious — drop us a line.
        We read every message and a team member typically replies within two business days.
      </p>
    </header>

    <section className="pyrra-section">
      <ContactForm />
    </section>
  </>
);

Object.assign(window, { PageHome, PageNodes, PageNetwork, PageAbout, PageWaitlist, PageSpecs, PageFinancials, PageContact });