// For Operators page.

function OperatorsHero() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <section style={{ padding: isMobile ? '56px 22px 56px' : '96px 56px 80px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <Eyebrow>For Operators</Eyebrow>
        <h1
          style={{
            fontFamily: FONT_SERIF,
            fontWeight: 500,
            fontSize: isMobile ? 36 : 'clamp(40px, 5vw, 68px)',
            lineHeight: isMobile ? 1.08 : 1.04,
            letterSpacing: '-0.02em',
            margin: 0,
            maxWidth: 960,
          }}
        >
          A standing reliability capability for{' '}
          <span style={{ fontFamily: FONT_SERIF_ITALIC, fontStyle: 'italic' }}>
            live GPU fleet operations.
          </span>
        </h1>
        <p
          style={{
            margin: isMobile ? '24px 0 0' : '28px 0 0',
            maxWidth: 760,
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.55,
            color: GREGIS_MUTED,
          }}
        >
          Software that deploys inside your environment, ingests your existing cluster
          telemetry, and makes the marginal swap / replace / redistribute calls your heuristics
          get wrong — to reduce SLA-credit exposure and lift uptime across the fleet you already
          operate. Calibration stays current as your hardware, workloads, and SLAs evolve.
          Advisor mode by default; automation within safety bounds when your team is ready.
        </p>
        <div style={{ marginTop: isMobile ? 28 : 36 }}>
          <PrimaryLink href="#contact">Talk to us about your fleet →</PrimaryLink>
        </div>
      </div>
    </section>
  );
}

function OperationsProblem() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="problem">
      <Eyebrow>§ 01 · The operations problem</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 ? 28 : 'clamp(30px, 3.4vw, 42px)',
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            margin: 0,
          }}
        >
          Heuristics get the easy calls right. The marginal cases are where SLA credit and capex
          leak.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            GPU clusters fail continuously. A reliability team at fleet scale makes hundreds of
            swap, replace, and redistribute calls a week. The bulk of those calls are obvious;
            internal tooling handles them well.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            The marginal cases are the ones that hurt. </p>
        </div>
      </div>
    </Section>
  );
}

function WhatYouGetOps() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const systemItems = [
    {
      title: 'Live telemetry, calibrated reasoning',
      body:
        'Ingests DCGM, XID events, ECC counters, thermal and power, NVLink health. Reasons about each component’s hazard rate under the Bayesian posterior — not against fixed thresholds.',
    },
    {
      title: 'Sequential decisions',
      body:
        'Emits the next action: swap, redistribute spares across (parent, type) pools, schedule preventative replacement, or hold. Each decision comes with the counterfactual the simulator evaluated against.',
    },
    {
      title: 'Advisor or automated, your call',
      body:
        'Deploys in advisor mode by default — recommendations flow into your existing review path. Graduates to automated mode within explicit safety bounds when your team is ready.',
    },
    {
      title: 'Per-tenant training',
      body:
        'Calibrated against your fleet’s own history and the same Bayesian posterior the static optimizer uses.',
    },
  ];
  return (
    <Section id="what-you-get" background={GREGIS_LINE_SOFT}>
      <Eyebrow>§ 02 · What you get</Eyebrow>
      <h2
        style={{
          fontFamily: FONT_SERIF,
          fontWeight: 500,
          fontSize: isMobile ? 28 : 'clamp(30px, 3.4vw, 42px)',
          lineHeight: 1.1,
          letterSpacing: '-0.015em',
          margin: '0 0 32px',
          maxWidth: 820,
        }}
      >
        Fewer SLA-credit payouts, more uptime, lower spare capex — from the fleet you already
        operate.
      </h2>
      <p
        style={{
          margin: '0 0 32px',
          maxWidth: 780,
          fontSize: 16,
          lineHeight: 1.65,
          color: GREGIS_INK,
        }}
      >
        The savings come from making the marginal swap / replace / redistribute calls correctly
        that heuristics get wrong. Two error modes, both expensive: pulling a chip too early
        burns a spare; holding it too long routes a training job through a marginal component.
        A policy trained against the calibrated failure-rate posterior closes the gap on both
        sides.
      </p>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 16 : 20,
          marginBottom: isMobile ? 40 : 56,
        }}
      >
        {[
          { metric: '10–25%', label: 'Fewer SLA-credit payouts', range: 'illustrative' },
          { metric: '0.2–0.6 pp', label: 'Uptime recovered', range: 'illustrative' },
          { metric: '3–8%', label: 'Spare capex reduction', range: 'illustrative' },
        ].map((s) => (
          <div
            key={s.label}
            style={{
              background: '#fff',
              border: `1px solid ${GREGIS_LINE}`,
              padding: isMobile ? 20 : 24,
              borderRadius: 2,
              display: 'flex',
              flexDirection: 'column',
              gap: 6,
            }}
          >
            <div
              style={{
                fontFamily: FONT_SERIF,
                fontWeight: 500,
                fontSize: isMobile ? 30 : 36,
                lineHeight: 1.05,
                color: GREGIS_INK,
                letterSpacing: '-0.01em',
              }}
            >
              {s.metric}
            </div>
            <div
              style={{
                fontSize: 14,
                lineHeight: 1.5,
                color: GREGIS_INK,
              }}
            >
              {s.label}
            </div>
            <div
              style={{
                marginTop: 'auto',
                paddingTop: 12,
                fontFamily: FONT_MONO,
                fontSize: 11,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: GREGIS_MUTED,
              }}
            >
              {s.range}
            </div>
          </div>
        ))}
      </div>
      <p
        style={{
          margin: '-32px 0 56px',
          fontFamily: FONT_MONO,
          fontSize: 11,
          letterSpacing: '0.1em',
          color: GREGIS_MUTED,
          textTransform: 'uppercase',
          maxWidth: 720,
        }}
      >
        Ranges above are illustrative — no real-customer figures yet. We publish credible
        intervals, not promises.
      </p>

      <h3
        style={{
          fontFamily: FONT_SERIF,
          fontWeight: 500,
          fontSize: isMobile ? 24 : 28,
          lineHeight: 1.15,
          letterSpacing: '-0.01em',
          margin: '0 0 24px',
        }}
      >
        The system underneath the savings.
      </h3>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 28 : 32,
        }}
      >
        {systemItems.map((it, i) => (
          <div
            key={i}
            style={{
              borderTop: `1px solid ${GREGIS_INK}`,
              paddingTop: 20,
            }}
          >
            <h4
              style={{
                fontFamily: FONT_SERIF,
                fontWeight: 500,
                fontSize: 22,
                lineHeight: 1.2,
                margin: '0 0 12px',
              }}
            >
              {it.title}
            </h4>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: GREGIS_MUTED }}>
              {it.body}
            </p>
          </div>
        ))}
      </div>

      <div
        style={{
          marginTop: isMobile ? 40 : 56,
          paddingTop: 24,
          borderTop: `1px solid ${GREGIS_LINE}`,
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 10 : 24,
          alignItems: isMobile ? 'flex-start' : 'baseline',
        }}
      >
      </div>
    </Section>
  );
}

function ModernApproach() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="modern">
      <Eyebrow>§ 04 · Why this is the modern approach</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 ? 28 : 'clamp(28px, 3.2vw, 40px)',
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            margin: 0,
          }}
        >
          Heuristics-based ops tooling is the prior generation.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            Modern data models — calibrated failure-rate posteriors, correlated-failure
            structure that captures cascading events, RL policies trained against the actual
            decision distribution — let you extract real savings from the same fleet without
            replacing your reliability team.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            This is unambiguously an AI/ML-native product. We just decline to dress it up as
            “AI-powered” magic. The predictive stack is named on{' '}
            <a
              href="/approach/"
              style={{
                color: GREGIS_INK,
                textDecoration: 'none',
                borderBottom: `1px solid ${GREGIS_INK}`,
              }}
            >
              /approach
            </a>
            .
          </p>
        </div>
      </div>
    </Section>
  );
}

function HowItIntegrates() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const items = [
    {
      tag: 'Deployment',
      body:
        'The software runs inside your environment — your VPC, your on-prem network, your control plane. There is no central Gregis service that ingests your telemetry; the model lives with the fleet.',
    },
    {
      tag: 'Telemetry in',
      body:
        'DCGM, NVIDIA SMI, XID logs, ECC counters, ambient sensors — pulled directly from hosts or through your existing observability stack (Prometheus, Datadog, internal). No workload payloads or model weights are read.',
    },
    {
      tag: 'Decisions out',
      body:
        'Recommendations to your ticketing or orchestration system (ServiceNow, PagerDuty, internal) or directly to the cluster control plane (Kubernetes, Slurm, internal).',
    },
    {
      tag: 'Egress',
      body:
        'Nothing leaves your environment without your explicit consent. The default is no egress.',
    },
    {
      tag: 'Training',
      body:
        'Per-tenant against your fleet’s own history, calibrated against the same Bayesian posterior used by the static optimizer. No silent pooling of your data across customers.',
    },
    {
      tag: 'Auditability',
      body:
        'Every decision is logged with state, posterior, action distribution, and counterfactual reasoning — important for your own postmortems and for any underwriter reviewing the residual risk.',
    },
  ];
  return (
    <Section id="integration">
      <Eyebrow>§ 03 · How it integrates</Eyebrow>
      <h2
        style={{
          fontFamily: FONT_SERIF,
          fontWeight: 500,
          fontSize: isMobile ? 28 : 'clamp(30px, 3.4vw, 42px)',
          lineHeight: 1.1,
          letterSpacing: '-0.015em',
          margin: '0 0 48px',
          maxWidth: 820,
        }}
      >
        Fits the stack your fleet already runs on.
      </h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {items.map((it, i) => (
          <div
            key={i}
            style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '220px 1fr',
              gap: isMobile ? 8 : 32,
              borderTop: `1px solid ${GREGIS_LINE}`,
              paddingTop: 20,
            }}
          >
            <div
              style={{
                fontFamily: FONT_MONO,
                fontSize: 11,
                letterSpacing: '0.15em',
                textTransform: 'uppercase',
                color: GREGIS_BLUE,
                paddingTop: 4,
              }}
            >
              {it.tag}
            </div>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_INK }}>
              {it.body}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function WhatThisReplaces() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="replaces" background={GREGIS_LINE_SOFT}>
      <Eyebrow>§ 05 · What this replaces or augments</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 ? 28 : 'clamp(28px, 3.2vw, 40px)',
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            margin: 0,
          }}
        >
          Not your reliability team.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            Your team continues to set policy, define safety bounds, and approve actions in
            advisor mode. The agent handles the marginal-call volume that heuristics struggle
            with and frees your senior engineers to focus on systemic issues — fleet design,
            workload placement, vendor escalations.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            When you decide to graduate the agent inside safety bounds, the bounds are yours —
            written, reviewed, and enforced explicitly. Nothing about this product is meant to
            remove a human from a decision they should be making.
          </p>
        </div>
      </div>
    </Section>
  );
}

function OperatorForm() {
  const isMobile = useMediaQuery('(max-width: 760px)');

  return (
    <Section id="contact" background={GREGIS_INK} color="#fff">
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1.1fr)',
          gap: isMobile ? 36 : 64,
          alignItems: 'start',
        }}
      >
        <div>
          <Eyebrow color="rgba(255,255,255,0.55)">§ 06 · Contact</Eyebrow>
          <h2
            style={{
              fontFamily: FONT_SERIF,
              fontWeight: 500,
              fontSize: isMobile ? 32 : 'clamp(32px, 3.6vw, 48px)',
              lineHeight: 1.06,
              letterSpacing: '-0.015em',
              margin: '0 0 20px',
              color: '#fff',
            }}
          >
            Talk to us about your fleet.
          </h2>
          <p
            style={{
              margin: 0,
              fontSize: 15,
              lineHeight: 1.65,
              color: 'rgba(255,255,255,0.74)',
              maxWidth: 480,
            }}
          >
            Schedule a call to tell us about your fleet size, GPU mix, and the operational problem you’d like to
            solve.
          </p>
          <div
            style={{
              marginTop: 32,
              paddingTop: 24,
              borderTop: '1px solid rgba(255,255,255,0.16)',
              display: 'flex',
              flexDirection: 'column',
              gap: 8,
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.06em',
              color: 'rgba(255,255,255,0.7)',
            }}
          >
            <span>EMAIL · {GREGIS_CONTACT.email}</span>
          </div>
        </div>

        <CalendarWidget compact />
      </div>
    </Section>
  );
}

function OperatorsPage() {
  return (
    <PageShell active="operators">
      <OperatorsHero />
      <OperationsProblem />
      <WhatYouGetOps />
      <HowItIntegrates />
      <ModernApproach />
      <WhatThisReplaces />
      <OperatorForm />
    </PageShell>
  );
}

window.OperatorsPage = OperatorsPage;
