// Approach page — full methodology.

function ApproachHero() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <section style={{ padding: isMobile ? '56px 22px 56px' : '96px 56px 64px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <Eyebrow>Approach</Eyebrow>
        <h1
          style={{
            fontFamily: FONT_SERIF,
            fontWeight: 500,
            fontSize: isMobile ? 36 : 'clamp(40px, 5vw, 64px)',
            lineHeight: isMobile ? 1.08 : 1.05,
            letterSpacing: '-0.02em',
            margin: 0,
            maxWidth: 960,
          }}
        >
          The methodology, end to end.
        </h1>
        <p
          style={{
            margin: isMobile ? '24px 0 0' : '28px 0 0',
            maxWidth: 820,
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.6,
            color: GREGIS_MUTED,
          }}
        >
          Five named components. The descriptions below convey the shape of the work and the
          tools each part draws on.
        </p>
      </div>
    </section>
  );
}

function ApproachContents() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const items = [
    {
      n: '01',
      id: 'simulator',
      title: 'Event-driven simulator',
      body: (
        <>
          <p>
            A simulator that represents the cluster as a topology of typed slots and pooled
            spares, generates failures as time-stamped events from the per-component hazard
            process, and treats repair, swap, and reallocation as first-class events too. It
            models partial-failure semantics — a GPU can degrade in bandwidth, an HBM stack
            can lose a channel — and is the environment everything downstream trains and
            evaluates against.
          </p>
        </>
      ),
    },
    {
      n: '02',
      id: 'physics',
      title: 'Physics-of-failure-conditioned hazard rates',
      body: (
        <>
          <p>
            Per-component hazards are conditioned on the operating conditions that actually drive
            them — temperature, current, voltage and frequency cycling, mechanical wear — through
            standard reliability-physics scaling laws. The output is an MTBF for each slot under its real operating regime, not
            under datasheet conditions.
          </p>
        </>
      ),
    },
    {
      n: '03',
      id: 'bayesian',
      title: 'Bayesian hierarchical model over failure data',
      body: (
        <>
          <p>
            The data: LLM training papers, HPC lab disclosures, NVIDIA SDC
            studies, vendor RMA aggregates. A Bayesian hierarchical model is the right tool for that shape
            of evidence: it pools across sources, captures between-fleet variation, and produces
            a posterior over per-component failure rates with explicit credible intervals. The
            posterior tightens as design partners contribute telemetry.
          </p>
        </>
      ),
    },
    {
      n: '04',
      id: 'correlated',
      title: 'Correlated-failure modeling',
      body: (
        <>
          <p>
            Independent-failure assumptions are convenient and systematically wrong in the tail —
            bad PSU batches propagate, HBM defects cluster, environmental faults take a rack
            down at once. A self-exciting layer over the per-component hazards captures that
            clustering. The practical effect is a thicker tail on cluster-level loss, which is
            exactly what a parametric cover has to absorb and what a spreadsheet model
            under-provisions against.
          </p>
        </>
      ),
    },
    {
      n: '05',
      id: 'policy',
      title: 'Two-phase policy optimization',
      body: (
        <>
          <p>
            Two decision horizons, two tools. At procurement time, a greedy submodular
            allocation picks the spare configuration that meets the SLA at minimum cost — a
            one-shot decision before the cluster ships. Across the operating life, a
            reinforcement-learning agent — using the simulator as its environment — handles
            component swap, spare-pool redistribution, and repair scheduling under live
            telemetry. Both phases sample from the Bayesian posterior, so the resulting policies
            are robust to the parameter uncertainty the model honestly reports.
          </p>
        </>
      ),
    },
  ];

  return (
    <Section id="contents">
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '220px 1fr',
          gap: isMobile ? 32 : 48,
        }}
      >
        {!isMobile && (
          <nav
            style={{
              position: 'sticky',
              top: 96,
              alignSelf: 'start',
              display: 'flex',
              flexDirection: 'column',
              gap: 10,
              fontFamily: FONT_MONO,
              fontSize: 11,
              letterSpacing: '0.1em',
              color: GREGIS_MUTED,
            }}
          >
            <span style={{ color: GREGIS_BLUE, marginBottom: 4 }}>CONTENTS</span>
            {items.map((it) => (
              <a
                key={it.n}
                href={`#${it.id}`}
                style={{
                  color: GREGIS_INK,
                  textDecoration: 'none',
                  borderLeft: `1px solid ${GREGIS_LINE}`,
                  paddingLeft: 10,
                  fontFamily: FONT_SANS,
                  fontSize: 13,
                  letterSpacing: 0,
                  lineHeight: 1.4,
                }}
              >
                {it.n} · {it.title}
              </a>
            ))}
          </nav>
        )}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 48 : 72 }}>
          {items.map((it) => (
            <article key={it.n} id={it.id}>
              <div
                style={{
                  fontFamily: FONT_MONO,
                  fontSize: 11,
                  letterSpacing: '0.18em',
                  color: GREGIS_BLUE,
                  marginBottom: 8,
                }}
              >
                § {it.n}
              </div>
              <h2
                style={{
                  fontFamily: FONT_SERIF,
                  fontWeight: 500,
                  fontSize: isMobile ? 26 : 32,
                  lineHeight: 1.12,
                  letterSpacing: '-0.015em',
                  margin: '0 0 20px',
                }}
              >
                {it.title}
              </h2>
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 14,
                  fontSize: 16,
                  lineHeight: 1.65,
                  color: GREGIS_INK,
                  maxWidth: 720,
                }}
              >
                {it.body}
              </div>
            </article>
          ))}
        </div>
      </div>
    </Section>
  );
}

function Deployment() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const phases = [
    {
      tag: 'Procurement-time policy',
      body:
        'The first decision the software makes. Inputs — topology, components, workload profile, SLA — produce the availability policy, the credible-interval bands, the actuarial summary, and the minimum-cost sparing allocation that falls out of them. The software is installed in the customer environment from day one, so the same artifact that produced the procurement policy is the one that operates the cluster afterward.',
    },
    {
      tag: 'Operations-time policy',
      body:
        'Telemetry from the customer\'s existing observability stack (DCGM, Prometheus, Datadog, or direct) flows into the local model; decisions flow out to the customer\'s ticketing or orchestration system (ServiceNow, PagerDuty, Kubernetes, Slurm). Calibration is per-tenant against the customer\'s own history. Every action is logged with state, posterior, and counterfactual reasoning, useful for both internal postmortems and for any underwriter reviewing residual risk.',
    },
  ];
  return (
    <Section id="deployment">
      <Eyebrow>§ 06 · Deployment</Eyebrow>
      <h2
        style={{
          fontFamily: FONT_SERIF,
          fontWeight: 500,
          fontSize: isMobile ? 26 : 32,
          lineHeight: 1.1,
          letterSpacing: '-0.015em',
          margin: '0 0 24px',
          maxWidth: 820,
        }}
      >
        One piece of software, running inside the operator's environment.
      </h2>
      <p
        style={{
          margin: '0 0 32px',
          maxWidth: 820,
          fontSize: 16,
          lineHeight: 1.65,
          color: GREGIS_MUTED,
        }}
      >
        The pilot deployment is the permanent deployment. Both decision horizons — procurement
        and operations — run as the same artifact in the same place, with the same posterior
        and the same simulator underneath. Telemetry, contracts, and outputs do not leave the
        customer's environment without the customer's explicit consent.
      </p>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 28 : 32,
        }}
      >
        {phases.map((ph) => (
          <div
            key={ph.tag}
            style={{
              borderTop: `1px solid ${GREGIS_INK}`,
              paddingTop: 20,
            }}
          >
            <div
              style={{
                fontFamily: FONT_MONO,
                fontSize: 11,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: GREGIS_BLUE,
                marginBottom: 14,
              }}
            >
              {ph.tag}
            </div>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_INK }}>
              {ph.body}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function ScopedExpansions() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="scope">
      <Eyebrow>§ 07 · What we are not yet</Eyebrow>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 28 : 56,
          alignItems: 'start',
        }}
      >
        <h2
          style={{
            fontFamily: FONT_SERIF,
            fontWeight: 500,
            fontSize: isMobile ? 26 : 32,
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            margin: 0,
          }}
        >
          Cooling and power guidance is a foreseen extension, not a current capability.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            The architecture fits — operating conditions already drive the per-component hazard
            rate, so a control surface over cooling and power has a place in the same model.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            The piece that is not yet built is the transfer function from cooling and power
            actions to junction temperature. We expect to close it by empirical fitting against
            facility telemetry, with the option to graduate to a reduced-order physical model.
            It is not in initial scope; we name it here so the architectural fit is honest and
            the scope is clear.
          </p>
        </div>
      </div>
    </Section>
  );
}

function Glossary() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const entries = [
    {
      term: 'MTBF',
      def:
        'Mean time between failures. The expectation of the inter-failure-event distribution under stated operating conditions.',
    },
    {
      term: 'Credible interval',
      def:
        'A Bayesian interval that contains the parameter with a stated posterior probability. A 95% credible interval means: given the model and data, the parameter has a 95% probability of lying in this range.',
    },
    {
      term: 'Parametric cover',
      def:
        'Insurance that pays on a defined trigger rather than on an indemnity assessment. For AI infra: covers triggered by measurable availability or throughput shortfalls, not by post-loss adjustment.',
    },
    {
      term: 'Self-exciting process',
      def:
        'A point process in which the occurrence of an event temporarily raises the intensity of subsequent events. Used here to model cascading failures.',
    },
  ];
  return (
    <Section id="glossary" background={GREGIS_LINE_SOFT}>
      <Eyebrow>Glossary</Eyebrow>
      <h2
        style={{
          fontFamily: FONT_SERIF,
          fontWeight: 500,
          fontSize: isMobile ? 26 : 32,
          lineHeight: 1.1,
          letterSpacing: '-0.015em',
          margin: '0 0 32px',
        }}
      >
        Terms used on this page.
      </h2>
      <dl
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '180px 1fr',
          gap: isMobile ? 4 : 24,
          rowGap: isMobile ? 18 : 18,
          margin: 0,
        }}
      >
        {entries.map((e) => (
          <React.Fragment key={e.term}>
            <dt
              style={{
                fontFamily: FONT_MONO,
                fontSize: 13,
                letterSpacing: '0.04em',
                color: GREGIS_INK,
                paddingTop: isMobile ? 0 : 2,
              }}
            >
              {e.term}
            </dt>
            <dd style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: GREGIS_INK }}>
              {e.def}
            </dd>
          </React.Fragment>
        ))}
      </dl>
    </Section>
  );
}

function WhatWeDontClaim() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="disclosure">
      <div
        style={{
          border: `1px solid ${GREGIS_INK}`,
          padding: isMobile ? 24 : 36,
          maxWidth: 820,
        }}
      >
        <Eyebrow>What we don’t claim</Eyebrow>
        <p style={{ margin: '0 0 14px', fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
          We publish credible intervals, not point estimates. The width of those intervals is
          part of the answer, not a defect to be hidden.
        </p>
        <p style={{ margin: '0 0 14px', fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
          Our models improve as design partners contribute telemetry. We do not pretend that the
          available anchors alone are sufficient for every workload class.
        </p>
        <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
          We do not warrant SLA outcomes. We provide calibrated estimates against which buyers
          select their own confidence levels and against which underwriters price.
        </p>
      </div>
    </Section>
  );
}

function ApproachCTA() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="next" background={GREGIS_INK} color="#fff">
      <div
        style={{
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 20 : 32,
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'space-between',
        }}
      >
        <h2
          style={{
            fontFamily: FONT_SERIF,
            fontWeight: 500,
            fontSize: isMobile ? 28 : 36,
            lineHeight: 1.06,
            letterSpacing: '-0.015em',
            margin: 0,
            color: '#fff',
            maxWidth: 640,
          }}
        >
          Decide which conversation you want to start.
        </h2>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a
            href="/operators/"
            style={{
              background: 'transparent',
              color: '#fff',
              padding: '14px 22px',
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.05em',
              textDecoration: 'none',
              borderRadius: 2,
              border: '1px solid rgba(255,255,255,0.5)',
            }}
          >
            For operators →
          </a>
          <a
            href="/underwriters/"
            style={{
              background: '#fff',
              color: GREGIS_INK,
              padding: '14px 22px',
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.05em',
              textDecoration: 'none',
              borderRadius: 2,
            }}
          >
            For underwriters →
          </a>
          <a
            href="/enterprises/"
            style={{
              background: 'transparent',
              color: '#fff',
              padding: '14px 22px',
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.05em',
              textDecoration: 'none',
              borderRadius: 2,
              border: '1px solid rgba(255,255,255,0.5)',
            }}
          >
            For enterprises →
          </a>
        </div>
      </div>
    </Section>
  );
}

function ApproachPage() {
  return (
    <PageShell active="approach">
      <ApproachHero />
      <ApproachContents />
      <Deployment />
      <ScopedExpansions />
      <Glossary />
      <WhatWeDontClaim />
      <ApproachCTA />
    </PageShell>
  );
}

window.ApproachPage = ApproachPage;
