// Product page — orbit (platform) and orbit(satellite) (edge device).
// Sectioned as: hero → what orbit is → console screenshot → capabilities
// detail → satellite edge device → CTA.

const ProductHero = () => (
  <section style={{
    position: "relative", overflow: "hidden",
    padding: "120px 80px 96px",
  }}>
    <div className="site-grid" />
    <div className="nh-glow" style={{
      width: 800, height: 800, left: "55%", top: -240,
      background: "radial-gradient(circle, var(--nh-amber) 0%, transparent 60%)",
      opacity: 0.14,
    }} />

    <div className="site-wrap" style={{ position: "relative" }}>
      <SiteEyebrow id="ORB-IDENT/01">OPERATOR CONSOLE</SiteEyebrow>

      <div style={{
        marginTop: 56,
        display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80,
        alignItems: "center",
      }}>
        <div>
          {/* orbit wordmark, big */}
          <h1 style={{
            fontFamily: "var(--nh-display)", fontWeight: 600,
            fontSize: "clamp(112px, 14vw, 200px)",
            lineHeight: 0.88, letterSpacing: "-0.055em",
            margin: 0, color: "var(--nh-ink)",
            whiteSpace: "nowrap",
            position: "relative", isolation: "isolate",
          }}>
            {"or"}<OrbitBSatellite />{"\u0131t"}
          </h1>
          <p style={{
            fontFamily: "var(--nh-display)", fontWeight: 400,
            fontSize: 28, letterSpacing: "-0.015em", lineHeight: 1.25,
            color: "var(--nh-ink-2)", margin: "32px 0 0", maxWidth: 640,
          }}>
            A vendor-agnostic energy management platform.
          </p>
          <p className="site-body" style={{ fontSize: 17, marginTop: 20, maxWidth: 580 }}>
            orbit ingests data from any inverter, meter, sensor, or EMS, normalises it onto one schema, and turns it into money saved, expected yield delivered, and faults closed. EPCs deliver one solution. Operators get one console.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <a href="contact.html" className="site-btn site-btn--primary">Book a demo →</a>
            <a href="#capabilities" className="site-btn">Capabilities</a>
          </div>
        </div>

        {/* what's in the console — a callout panel, no numbers */}
        <div className="nh-card" style={{ padding: 32 }}>
          <div className="nh-mono" style={{
            fontSize: 10, color: "var(--nh-ink-3)", letterSpacing: "0.22em",
            marginBottom: 20, textTransform: "uppercase",
          }}>
            ◇ WHAT'S IN THE CONSOLE
          </div>
          <ul style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "flex", flexDirection: "column", gap: 14,
          }}>
            {[
              ["Fleet view",        "Financial-first — savings, baseline, blended tariff, wasted revenue."],
              ["Site detail",       "Live telemetry with TOU tariff bands overlaid on the power curve."],
              ["Alert triage",      "Two streams — OEM alarms passed through, and Platform Signals we derive."],
              ["Workbench",         "Site-level deep-dive — explain curves, draft work orders, compare days."],
              ["Built-in CMMS",     "Tasks, asset registry, warranty tracking, SLA breach escalation."],
            ].map(([k, v], i) => (
              <li key={i} style={{ display: "flex", gap: 16 }}>
                <span className="nh-mono" style={{
                  fontSize: 11, color: "var(--nh-accent)", letterSpacing: "0.14em",
                  textTransform: "uppercase", minWidth: 130,
                }}>{k}</span>
                <span style={{
                  fontFamily: "var(--nh-sans)", fontSize: 14, lineHeight: 1.5,
                  color: "var(--nh-ink-2)",
                }}>{v}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

// ────────── The console — a big screenshot mock ──────────
const ProductConsole = () => (
  <section className="site-section" style={{ background: "var(--nh-bg-2)" }}>
    <div className="site-wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 64, alignItems: "end",
        marginBottom: 56,
      }}>
        <div>
          <SiteEyebrow id="CONSOLE" />
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            The cloud console.
          </h2>
        </div>
        <p className="site-body" style={{ fontSize: 17, maxWidth: 640 }}>
          The financial-first fleet view. Stats and groups top, a daily bot summary, savings and baseline tiles, and a fleet table where every row tells you what each site earned, what it should have earned, and whether it's tracking. Equipment from any vendor surfaces the same way.
        </p>
      </div>

      <div style={{ position: "relative", aspectRatio: "16 / 9" }}>
        {/* corner brackets */}
        {["tl", "tr", "bl", "br"].map((c) => (
          <div key={c} style={{
            position: "absolute", width: 20, height: 20,
            borderColor: "var(--nh-accent)", borderStyle: "solid",
            borderWidth:
              c === "tl" ? "1px 0 0 1px" : c === "tr" ? "1px 1px 0 0" :
              c === "bl" ? "0 0 1px 1px" : "0 1px 1px 0",
            top: c.includes("t") ? -12 : "auto",
            bottom: c.includes("b") ? -12 : "auto",
            left: c.includes("l") ? -12 : "auto",
            right: c.includes("r") ? -12 : "auto",
            opacity: 0.7, zIndex: 2,
          }} />
        ))}
        <div className="nh-mono" style={{
          position: "absolute", top: -28, left: 0, zIndex: 2,
          fontSize: 10, color: "var(--nh-ink-3)", letterSpacing: "0.22em",
        }}>
          ◇ ORBIT · FLEET-VIEW · LIVE PREVIEW
        </div>
        <div className="nh-mono" style={{
          position: "absolute", top: -28, right: 0, zIndex: 2,
          fontSize: 10, color: "var(--nh-ink-4)", letterSpacing: "0.22em",
        }}>
          PLATFORM v.4.2
        </div>
        <img src="img/fleet-financial.jpg" alt="orbit Fleet view in Financial mode"
          style={{
            width: "100%", height: "100%", display: "block",
            objectFit: "cover", objectPosition: "top left",
            border: "1px solid var(--nh-line)",
          }}
        />
      </div>

      <div style={{
        marginTop: 48,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
        paddingTop: 32, borderTop: "1px solid var(--nh-line)",
      }}>
        {[
          ["FLEET VIEW", "Savings month-to-date, vs-baseline, blended tariff, wasted revenue"],
          ["SITE DETAIL", "Live curve with TOU bands; entity cards for Grid, PV, Weather, Environmental"],
          ["ALERT TRIAGE", "OEM alarms (pass-through) and Platform Signals (derived)"],
          ["WORKBENCH", "Lasso a window, draft a work order, compare days, run what-ifs"],
        ].map(([k, v], i) => (
          <div key={i}>
            <div className="nh-mono" style={{
              fontSize: 10, color: "var(--nh-accent)", letterSpacing: "0.18em", textTransform: "uppercase",
            }}>◇ {k}</div>
            <div style={{
              fontFamily: "var(--nh-sans)", fontSize: 14, color: "var(--nh-ink-2)",
              marginTop: 8, lineHeight: 1.5,
            }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ────────── Site-detail screenshot — proves the TOU overlay claim ──────────
const ProductSiteDetail = () => (
  <section className="site-section">
    <div className="site-wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 64, alignItems: "end",
        marginBottom: 56,
      }}>
        <div>
          <SiteEyebrow id="SITE DETAIL" />
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            One site,<br />
            <span style={{ color: "var(--nh-accent)" }}>read clearly.</span>
          </h2>
        </div>
        <p className="site-body" style={{ fontSize: 17, maxWidth: 640 }}>
          Click into any site for live telemetry against time-of-use tariff bands, an energy-flow visualisation of solar / grid / load, and entity cards for Grid, PV, Weather, and Environmental. The operator sees what the plant is earning, what it should be earning, and where the gap is.
        </p>
      </div>

      <div style={{ position: "relative", aspectRatio: "16 / 11" }}>
        {["tl", "tr", "bl", "br"].map((c) => (
          <div key={c} style={{
            position: "absolute", width: 20, height: 20,
            borderColor: "var(--nh-accent)", borderStyle: "solid",
            borderWidth:
              c === "tl" ? "1px 0 0 1px" : c === "tr" ? "1px 1px 0 0" :
              c === "bl" ? "0 0 1px 1px" : "0 1px 1px 0",
            top: c.includes("t") ? -12 : "auto",
            bottom: c.includes("b") ? -12 : "auto",
            left: c.includes("l") ? -12 : "auto",
            right: c.includes("r") ? -12 : "auto",
            opacity: 0.7, zIndex: 2,
          }} />
        ))}
        <div className="nh-mono" style={{
          position: "absolute", top: -28, left: 0, zIndex: 2,
          fontSize: 10, color: "var(--nh-ink-3)", letterSpacing: "0.22em",
        }}>
          ◇ ORBIT · SITE DETAIL · LIVE
        </div>
        <img src="img/site-live.jpg" alt="orbit Site detail with TOU bands"
          style={{
            width: "100%", height: "100%", display: "block",
            objectFit: "cover", objectPosition: "top left",
            border: "1px solid var(--nh-line)",
          }}
        />
      </div>
    </div>
  </section>
);

// ────────── Capabilities — detailed, alternating row layout ──────────
const PRODUCT_CAPS = [
  {
    n: "01",
    title: "Money-first fleet view",
    body: "The Fleet page leads with savings month-to-date, a vs-baseline tracker, wasted revenue, and a fleet-weighted blended tariff. A daily bot summary tells the operator what the fleet has earned this month and what it's on track to close at.",
  },
  {
    n: "02",
    title: "Time-of-use intelligence",
    body: "Peak, standard, and off-peak tariff bands are overlaid directly on every site's live power curve. The platform calibrates per-site, per-tariff, so the operator can read the day's TOU shape without leaving the console. Tariffs can be edited and re-applied historically.",
  },
  {
    n: "03",
    title: "Multi-source cross-validation",
    body: "Where two OEMs read the same plant, orbit shows both side by side and quantifies the disagreement — a Huawei FusionSolar daily yield vs a Liveview meter, for example. The operator picks the authoritative source per metering point and keeps both for data-quality monitoring.",
  },
  {
    n: "04",
    title: "Curtailment auto-investigation",
    body: "When the platform detects a curtailment event, it opens a pre-filled investigation work order — time window, site, assignee — with the surrounding telemetry attached. The OEM-alarm → field-engineer loop happens inside one platform, with no CMMS bridge to maintain.",
  },
  {
    n: "05",
    title: "Performance against simulation",
    body: "Performance Ratio per IEC 61724-1, against HelioScope P50/P90 expected yield with panel-degradation curves auto-applied from the commissioning anniversary. Daily and intraday actual is shown against the curve; deviations are attributed by inverter and by weather variable.",
  },
  {
    n: "06",
    title: "Platform Signals",
    body: "Alerts orbit derives that the OEMs don't raise — declining yield over consecutive days, agreed-demand breach with dead-band tolerance, PF-correction opportunity surfaced in currency-per-month. Each signal can route to email, Telegram, or in-app, with SLA-breach escalation built in.",
  },
];

const ProductCapabilities = () => (
  <section id="capabilities" className="site-section">
    <div className="site-wrap">
      <div style={{ marginBottom: 56 }}>
        <SiteEyebrow id="CAPABILITIES" />
        <h2 className="site-h2" style={{ marginTop: 24, maxWidth: 760 }}>
          What the platform does.
        </h2>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {PRODUCT_CAPS.map((c, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "80px 1fr 2fr", gap: 48,
            padding: "44px 0",
            borderTop: "1px solid var(--nh-line)",
            alignItems: "start",
          }}>
            <div className="nh-mono" style={{
              fontSize: 18, color: "var(--nh-accent)", letterSpacing: "0.14em",
            }}>{c.n}</div>
            <h3 style={{
              fontFamily: "var(--nh-display)", fontWeight: 500,
              fontSize: 30, letterSpacing: "-0.025em", lineHeight: 1.1,
              margin: 0, color: "var(--nh-ink)", maxWidth: "18ch",
            }}>{c.title}</h3>
            <p style={{
              fontFamily: "var(--nh-sans)", fontSize: 16, lineHeight: 1.7,
              color: "var(--nh-ink-2)", margin: 0, maxWidth: 640,
            }}>{c.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ────────── Where we're heading — agentic direction ──────────
const AGENTIC = [
  {
    tag: "A",
    title: "Curtailment forensics",
    body: "The agent watches the curtailment stream, correlates with weather, grid frequency, inverter alarms, and TOU bands, and writes the investigation report before the engineer opens the ticket.",
  },
  {
    tag: "B",
    title: "Tariff optimiser",
    body: "Given a site's load shape and a tariff catalogue, the agent quantifies the saving from switching tariff structure — including PF-correction targets and demand-response opt-ins.",
  },
  {
    tag: "C",
    title: "Yield-decay diagnostician",
    body: "When a yield-trend signal fires, the agent investigates: weather, soiling, MPPT fault, degraded string, comms gap, or tariff change masking real drop. Reports in plain language with a recommended action.",
  },
  {
    tag: "D",
    title: "Asset-life forecaster",
    body: "Combines the asset registry — commissioning date, warranty expiry, OEM degradation curves — with actual performance history to predict the end-of-warranty value vs the replacement cost.",
  },
  {
    tag: "E",
    title: "Conversational fleet",
    body: "An LLM front door over the fleet. Which sites underperformed P90 last week? How much would I save if Brickworks moved to a different tariff? Draft the monthly report for FreshBev.",
  },
];

const ProductAgentic = () => (
  <section id="agentic" className="site-section">
    <div className="site-wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginBottom: 56,
        alignItems: "end",
      }}>
        <div>
          <SiteEyebrow id="ORB-NEXT/01">WHERE WE'RE HEADING</SiteEyebrow>
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            The agentic<br />direction.
          </h2>
        </div>
        <p className="site-body" style={{ fontSize: 17, maxWidth: 640 }}>
          The platform already runs the data plane — telemetry in, signals out, work orders open and close. The next layer is agents that read the same data and act on it: writing the investigation report before the engineer opens the ticket, comparing tariffs against load shape, talking to the operator in plain language. Five directions, all in flight.
        </p>
      </div>

      <div style={{
        borderTop: "1px solid var(--nh-line)",
      }}>
        {AGENTIC.map((a, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "80px 1fr 2fr", gap: 48,
            padding: "32px 0",
            borderBottom: "1px solid var(--nh-line)",
            alignItems: "start",
          }}>
            <div className="nh-mono" style={{
              fontSize: 18, color: "var(--nh-violet)", letterSpacing: "0.14em",
            }}>{a.tag}</div>
            <h3 style={{
              fontFamily: "var(--nh-display)", fontWeight: 500,
              fontSize: 26, letterSpacing: "-0.025em", lineHeight: 1.15,
              margin: 0, color: "var(--nh-ink)", maxWidth: "18ch",
            }}>{a.title}</h3>
            <p style={{
              fontFamily: "var(--nh-sans)", fontSize: 15, lineHeight: 1.65,
              color: "var(--nh-ink-2)", margin: 0, maxWidth: 640,
            }}>{a.body}</p>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 32,
        padding: "20px 24px",
        background: "rgba(124,92,255,0.05)",
        border: "1px solid rgba(124,92,255,0.18)",
        display: "flex", gap: 20, alignItems: "flex-start", flexWrap: "wrap",
      }}>
        <span className="nh-mono" style={{
          fontSize: 10, color: "var(--nh-violet)", letterSpacing: "0.22em",
          marginTop: 2, whiteSpace: "nowrap",
        }}>◇ ORB-NEXT/02</span>
        <span style={{
          fontFamily: "var(--nh-sans)", fontSize: 14, lineHeight: 1.6,
          color: "var(--nh-ink-2)", flex: 1, minWidth: 280,
        }}>
          Each agent lives behind the same console — invoked from the Workbench, from a Platform Signal, or from chat. They explain what they did and link to the underlying telemetry. Nothing happens without an audit trail.
        </span>
      </div>
    </div>
  </section>
);

// ────────── orbit(satellite) — edge device ──────────
const ProductSatellite = () => (
  <section id="satellite" className="site-section" style={{ background: "var(--nh-bg-2)" }}>
    <div className="site-wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
      }}>
        <div>
          <SiteEyebrow id="ORB-SAT/01">EDGE DEVICE</SiteEyebrow>
          {/* orbit(satellite) wordmark */}
          <div style={{
            display: "inline-flex", alignItems: "baseline",
            fontFamily: "var(--nh-display)", fontWeight: 600,
            marginTop: 32, whiteSpace: "nowrap",
          }}>
            <span style={{ fontSize: 80, letterSpacing: "-0.045em", color: "var(--nh-ink)" }}>
              {"or"}<OrbitBSatellite />{"\u0131t"}
            </span>
            <span style={{
              fontSize: 26, color: "var(--nh-accent)",
              fontWeight: 500, marginLeft: 6,
            }}>(</span>
            <span style={{
              fontSize: 26, color: "var(--nh-ink-2)",
              fontWeight: 500, fontStyle: "italic",
            }}>satellite</span>
            <span style={{
              fontSize: 26, color: "var(--nh-accent)", fontWeight: 500,
            }}>)</span>
          </div>
          <p style={{
            fontFamily: "var(--nh-display)", fontWeight: 400,
            fontSize: 22, letterSpacing: "-0.015em", lineHeight: 1.35,
            color: "var(--nh-ink-2)", margin: "28px 0 0", maxWidth: 520,
          }}>
            Site-level OEM capabilities. The other half of the platform.
          </p>
          <p className="site-body" style={{ fontSize: 15, marginTop: 20, maxWidth: 520 }}>
            orbit(satellite) is the site layer of the platform. It integrates with inverters, combiner boxes, weather stations, and the rest of the balance-of-plant equipment at the site — regardless of vendor — normalises everything onto one schema, and uplinks to the cloud console.
          </p>

          <ul style={{
            listStyle: "none", padding: 0, margin: "32px 0 0",
            borderTop: "1px solid var(--nh-line)", paddingTop: 24,
            display: "flex", flexDirection: "column", gap: 12,
            maxWidth: 520,
          }}>
            {[
              "Vendor-agnostic equipment integration",
              "Per-string visibility where supported",
              "Weather and irradiance inputs",
              "Multi-protocol uplink with offline buffering",
              "OEM-grade observability without an OEM lock-in",
            ].map((b, i) => (
              <li key={i} style={{
                display: "flex", gap: 14,
                fontFamily: "var(--nh-sans)", fontSize: 15, lineHeight: 1.5,
                color: "var(--nh-ink-2)",
              }}>
                <span style={{ color: "var(--nh-accent)", marginTop: 1 }}>—</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* device diagram */}
        <div style={{ position: "relative", aspectRatio: "1.1 / 1", maxHeight: 520 }}>
          <ProductSatelliteDiagram />
        </div>
      </div>
    </div>
  </section>
);

// A wireframe-style edge-device drawing — same family as EdgeDeviceDiagram
// in orbit-brand.jsx but reshaped for a portrait-leaning frame here.
const ProductSatelliteDiagram = () => (
  <svg viewBox="0 0 480 440" style={{ width: "100%", height: "100%" }}>
    <defs>
      <pattern id="esat-grid-prod" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--nh-line)" strokeWidth="0.5" />
      </pattern>
    </defs>
    <rect width="480" height="440" fill="url(#esat-grid-prod)" opacity="0.5" />
    {/* device chassis */}
    <rect x="100" y="120" width="280" height="220" fill="var(--nh-bg)"
      stroke="var(--nh-accent)" strokeWidth="1.5" />
    {/* corner crosses */}
    {[[100,120],[380,120],[100,340],[380,340]].map(([x,y], i) => (
      <g key={i}>
        <line x1={x-10} y1={y} x2={x+10} y2={y} stroke="var(--nh-accent)" strokeWidth="1" />
        <line x1={x} y1={y-10} x2={x} y2={y+10} stroke="var(--nh-accent)" strokeWidth="1" />
      </g>
    ))}
    {/* inner */}
    <rect x="120" y="140" width="240" height="180" fill="none"
      stroke="var(--nh-line-2)" strokeWidth="1" strokeDasharray="2 3" />
    {/* display */}
    <rect x="140" y="160" width="160" height="50" fill="var(--nh-bg-3)" stroke="var(--nh-line)" strokeWidth="1" />
    <text x="152" y="180" fontFamily="var(--nh-mono)" fontSize="10" fill="var(--nh-ink-3)" letterSpacing="0.16em">SITE-04 · B-04</text>
    <text x="152" y="198" fontFamily="var(--nh-mono)" fontSize="13" fontWeight="500" fill="var(--nh-mint)" letterSpacing="0.08em">OK · 2.847 GW</text>
    {/* LED */}
    <circle cx="340" cy="170" r="6" fill="var(--nh-accent)" opacity=".22" />
    <circle cx="340" cy="170" r="3.5" fill="var(--nh-accent)">
      <animate attributeName="opacity" values="1;0.2;1" dur="1.5s" repeatCount="indefinite" />
    </circle>
    {/* ports */}
    <rect x="140" y="240" width="64" height="28" fill="var(--nh-bg-3)" stroke="var(--nh-line-2)" strokeWidth="1" />
    <text x="172" y="258" fontFamily="var(--nh-mono)" fontSize="9" fill="var(--nh-ink-3)" textAnchor="middle" letterSpacing="0.1em">RS-485</text>
    <rect x="218" y="240" width="64" height="28" fill="var(--nh-bg-3)" stroke="var(--nh-line-2)" strokeWidth="1" />
    <text x="250" y="258" fontFamily="var(--nh-mono)" fontSize="9" fill="var(--nh-ink-3)" textAnchor="middle" letterSpacing="0.1em">RJ-45</text>
    <rect x="296" y="240" width="64" height="28" fill="var(--nh-bg-3)" stroke="var(--nh-line-2)" strokeWidth="1" />
    <text x="328" y="258" fontFamily="var(--nh-mono)" fontSize="9" fill="var(--nh-ink-3)" textAnchor="middle" letterSpacing="0.1em">USB-C</text>
    {/* antenna */}
    <line x1="240" y1="120" x2="240" y2="60" stroke="var(--nh-accent)" strokeWidth="1.4" />
    <circle cx="240" cy="60" r="3" fill="var(--nh-accent)" />
    {[22, 34, 46].map((r, i) => (
      <path key={r} d={`M ${240-r} 60 A ${r} ${r} 0 0 1 ${240+r} 60`}
        fill="none" stroke="var(--nh-accent)" strokeWidth="1" opacity={0.55 - i * 0.15} />
    ))}
    {/* annotations */}
    <line x1="248" y1="68" x2="340" y2="40" stroke="var(--nh-line-2)" strokeWidth="1" strokeDasharray="2 2" />
    <text x="346" y="44" fontFamily="var(--nh-mono)" fontSize="10" fill="var(--nh-ink-3)" letterSpacing="0.14em">LTE · LORA · WIFI</text>
    <line x1="350" y1="170" x2="420" y2="148" stroke="var(--nh-line-2)" strokeWidth="1" strokeDasharray="2 2" />
    <text x="424" y="152" fontFamily="var(--nh-mono)" fontSize="10" fill="var(--nh-ink-3)" letterSpacing="0.14em">LIVE</text>
    <line x1="100" y1="126" x2="56" y2="100" stroke="var(--nh-line-2)" strokeWidth="1" strokeDasharray="2 2" />
    <text x="14" y="94" fontFamily="var(--nh-mono)" fontSize="10" fill="var(--nh-ink-3)" letterSpacing="0.14em">FANLESS</text>
    {/* dimensions */}
    <line x1="100" y1="370" x2="380" y2="370" stroke="var(--nh-ink-4)" strokeWidth="0.8" />
    <line x1="100" y1="365" x2="100" y2="375" stroke="var(--nh-ink-4)" strokeWidth="0.8" />
    <line x1="380" y1="365" x2="380" y2="375" stroke="var(--nh-ink-4)" strokeWidth="0.8" />
    <text x="240" y="388" fontFamily="var(--nh-mono)" fontSize="11" fill="var(--nh-ink-4)" textAnchor="middle" letterSpacing="0.16em">120 × 80 × 32 mm</text>
    <text x="240" y="406" fontFamily="var(--nh-mono)" fontSize="9" fill="var(--nh-ink-4)" textAnchor="middle" letterSpacing="0.2em">PART · ORB-SAT-04 · LOT MMXXVI/A</text>
  </svg>
);

const ProductPage = () => (
  <>
    <SiteNav active="product" />
    <main>
      <ProductHero />
      <ProductConsole />
      <ProductSiteDetail />
      <ProductCapabilities />
      <ProductAgentic />
      <ProductSatellite />
      <SiteCTA
        eyebrow="ORB-CTA/01"
        title="Book a demo."
        body="A 30-minute call. We bring up the console with anonymised telemetry and walk through how an EPC delivers it to the operator."
        primary="Get in touch"
        primaryHref="contact.html"
        secondary="Email sales"
        secondaryHref="mailto:sales@neohelio.co"
      />
    </main>
    <SiteFooter />
  </>
);

window.ProductPage = ProductPage;
