// For Enterprises page.

function EnterprisesHero() {
  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 Enterprises</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,
          }}
        >
          Defensible availability targets for{' '}
          <span style={{ fontFamily: FONT_SERIF_ITALIC, fontStyle: 'italic' }}>
            private AI clusters.
          </span>
        </h1>
        <p
          style={{
            margin: isMobile ? '24px 0 0' : '28px 0 0',
            maxWidth: 760,
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.55,
            color: GREGIS_MUTED,
          }}
        >
          A standing reliability capability for private AI infrastructure: calibrated SLA-breach
          probabilities and operational decisions across the cluster's life, continuously
          re-calibrated as your fleet evolves. Sparing policy falls out as one downstream
          output. Software that lives inside your environment — your telemetry stays within
          your walls.
        </p>
        <div style={{ marginTop: isMobile ? 28 : 36 }}>
          <PrimaryLink href="#contact">Talk to us about your cluster →</PrimaryLink>
        </div>
      </div>
    </section>
  );
}

function ProcurementProblem() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="problem">
      <Eyebrow>§ 01 · The reliability 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,
          }}
        >
          A fixed reliability budget, sized once, against a failure model nobody has written down.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            A 100–500 GPU private cluster is a multi-million-dollar capital commitment with an
            availability target written into internal policy. The current state of the practice
            sets that target against spreadsheet heuristics and an unstated margin to feel safe.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            Cloud is not an option — the same reasons that pushed you to a private cluster (data
            sovereignty, residency, contractual exclusivity, latency, regulatory posture) preclude
            elastic burst capacity. The capacity you procure is the capacity you have.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            Through the cluster’s life, every marginal swap, replace, and redistribute call is
            made against the same un-modeled failure picture.
          </p>
        </div>
      </div>
    </Section>
  );
}

function LifecycleCoverage() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const phases = [
    {
      tag: 'Procurement time',
      title: 'The first decision the software makes.',
      body:
        'A reliability policy that meets your internal SLA at your chosen confidence level. Output includes the credible-interval band on availability, a sensitivity table the CFO can read, and the minimum-cost spare allocation that falls out of it — generated by the same software that will operate the cluster for the next several years.',
      bullets: [
        'Cluster topology and hardware mix as direct inputs.',
        'Workload-conditioned hazard rates via physics-of-failure scaling.',
        'Confidence level selected explicitly — not implied by a point estimate.',
      ],
    },
    {
      tag: 'Operating life',
      title: 'Sequential decisions, continuously calibrated.',
      body:
        'Ingests live telemetry from your existing observability stack, reasons under your fleet-specific failure-rate posterior, and emits sequential decisions: component swap, spare-pool redistribution across (parent, type) slots, repair scheduling, or hold. Calibration tightens as your own telemetry accumulates. Deploys in advisor mode by default; graduates to automated mode within explicit safety bounds when your team is ready.',
      bullets: [
        'Runs inside your environment — telemetry does not leave your walls without your explicit consent.',
        'Every action logged with state, posterior, and counterfactual reasoning.',
        'Per-tenant calibration against your fleet’s history; no silent pooling across customers.',
      ],
    },
  ];
  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 48px',
          maxWidth: 820,
        }}
      >
        One piece of software, two decision horizons.
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: 2,
          background: GREGIS_LINE,
          border: `1px solid ${GREGIS_LINE}`,
        }}
      >
        {phases.map((ph) => (
          <div
            key={ph.tag}
            style={{
              background: '#fff',
              padding: isMobile ? 24 : 36,
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
            }}
          >
            <div
              style={{
                fontFamily: FONT_MONO,
                fontSize: 11,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: GREGIS_BLUE,
              }}
            >
              {ph.tag}
            </div>
            <h3
              style={{
                fontFamily: FONT_SERIF,
                fontWeight: 500,
                fontSize: 24,
                lineHeight: 1.18,
                letterSpacing: '-0.01em',
                margin: 0,
              }}
            >
              {ph.title}
            </h3>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: GREGIS_MUTED }}>
              {ph.body}
            </p>
            <ul
              style={{
                listStyle: 'none',
                padding: 0,
                margin: '8px 0 0',
                display: 'flex',
                flexDirection: 'column',
                gap: 8,
              }}
            >
              {ph.bullets.map((b, i) => (
                <li
                  key={i}
                  style={{
                    fontSize: 14,
                    lineHeight: 1.5,
                    color: GREGIS_INK,
                    paddingLeft: 18,
                    position: 'relative',
                  }}
                >
                  <span
                    style={{
                      position: 'absolute',
                      left: 0,
                      top: 9,
                      width: 8,
                      height: 1,
                      background: GREGIS_BLUE,
                    }}
                  />
                  {b}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Section>
  );
}

function UseCases() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const cases = [
    {
      tag: 'Banks',
      body:
        'Fraud detection, AML, internal LLMs. Data residency and supervision constraints rule out elastic cloud burst capacity.',
    },
    {
      tag: 'Pharma',
      body:
        'Drug discovery, clinical document AI, protein and small-molecule workloads where IP and audit constraints push compute on-premise.',
    },
    {
      tag: 'Defense',
      body:
        'Classified or controlled-environment compute where the cluster is sized for its mission and there is no elastic outside capacity.',
    },
    {
      tag: 'Sovereign AI',
      body:
        'National or regional clusters serving a public-sector mandate, sized to absorb peak load locally.',
    },
  ];
  return (
    <Section id="use-cases">
      <Eyebrow>§ 03 · Where this fits</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 40px',
          maxWidth: 820,
        }}
      >
        Places whose mission requires their own metal.
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 20 : 20,
        }}
      >
        {cases.map((c) => (
          <div
            key={c.tag}
            style={{
              borderTop: `1px solid ${GREGIS_INK}`,
              paddingTop: 16,
            }}
          >
            <h3
              style={{
                fontFamily: FONT_SERIF,
                fontWeight: 500,
                fontSize: 19,
                margin: '0 0 8px',
              }}
            >
              {c.tag}
            </h3>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: GREGIS_MUTED }}>
              {c.body}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function EnterpriseForm() {
  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)">§ 04 · 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 cluster.
          </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 cluster size, target deployment date, and the broad shape of the workload.
          </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 EnterprisesPage() {
  return (
    <PageShell active="enterprises">
      <EnterprisesHero />
      <ProcurementProblem />
      <LifecycleCoverage />
      <UseCases />
      <EnterpriseForm />
    </PageShell>
  );
}

window.EnterprisesPage = EnterprisesPage;