// For Underwriters page.

function UnderwritersHero() {
  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 Underwriters</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,
          }}
        >
          The actuarial model for{' '}
          <span style={{ fontFamily: FONT_SERIF_ITALIC, fontStyle: 'italic' }}>
            AI-infrastructure failure risk.
          </span>
        </h1>
        <p
          style={{
            margin: isMobile ? '24px 0 0' : '28px 0 0',
            maxWidth: 760,
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.55,
            color: GREGIS_MUTED,
          }}
        >
          Expected loss, credible intervals, and correlated-failure structure for parametric
          AI-infrastructure cover. Outputs are generated by software running inside the
          insured's environment and shared with you on the insured's terms — pricing inputs
          conditioned on real telemetry without requiring the operator to surrender it.
        </p>
        <div style={{ marginTop: isMobile ? 28 : 36 }}>
          <PrimaryLink href="#contact">Talk to us about underwriting →</PrimaryLink>
        </div>
      </div>
    </section>
  );
}

function WhatYouGet() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const items = [
    {
      title: 'Failure-rate distributions with credible intervals',
      body:
        'Per-component hazard distributions with explicit 95% credible intervals. No bare point estimates. Posteriors update as design partners contribute telemetry.',
    },
    {
      title: 'Expected loss given event',
      body:
        'Workload-conditioned expected business loss per failure mode — training-run interruption, inference-tier degradation, full-cluster downtime — with the full loss distribution behind it.',
    },
    {
      title: 'Correlated-failure structure',
      body:
        'A self-exciting layer over independent hazards captures cascading PSU failures, HBM clusters, and other catastrophic tail events that independent-failure models systematically under-price.',
    },
    {
      title: 'Exportable actuarial summary',
      body:
        'A pricing-ready document: distributions, credible intervals, sensitivity to model assumptions, and the audit trail of which public anchors and telemetry the calibration uses.',
    },
  ];
  return (
    <Section id="what-you-get">
      <Eyebrow>§ 01 · 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,
        }}
      >
        Pricing inputs in the form an actuary expects them.
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 28 : 32,
        }}
      >
        {items.map((it, i) => (
          <div
            key={i}
            style={{
              borderTop: `1px solid ${GREGIS_INK}`,
              paddingTop: 20,
            }}
          >
            <h3
              style={{
                fontFamily: FONT_SERIF,
                fontWeight: 500,
                fontSize: 22,
                lineHeight: 1.2,
                margin: '0 0 12px',
              }}
            >
              {it.title}
            </h3>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: GREGIS_MUTED }}>
              {it.body}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function MethodologyDepth() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  const items = [
    {
      tag: 'Bayesian hierarchical pooling',
      body:
        'Failure-rate priors are pooled across public anchors — recent LLM training papers (which document hardware-failure events in detail), HPC lab disclosures, NVIDIA SDC studies — using a hierarchical model that respects between-fleet heterogeneity. Posteriors are conditioned on the insured’s workload class and reported with explicit credible intervals.',
    },
    {
      tag: 'Physics-of-failure scaling',
      body:
        'Workload telemetry — temperature, current, voltage swings, mechanical cycling — drives MTBF through standard reliability-physics scaling laws. The same operating conditions that void warranties show up directly in the hazard rate.',
    },
    {
      tag: 'Correlated tails',
      body:
        'Independent-failure models materially under-price the tail. A self-exciting layer captures cascading events — a bad batch of PSUs propagating through adjacent slots, HBM defects clustering — producing thicker tails consistent with reported large-cluster incidents.',
    },
    {
      tag: 'Robustness to parameter uncertainty',
      body:
        'Both procurement-time allocation and operations-time policy are trained and evaluated by sampling failure rates from the Bayesian posterior. The resulting policies are robust to the uncertainty in the model rather than overfit to point estimates that the data does not support.',
    },
  ];
  return (
    <Section id="methodology" background={GREGIS_LINE_SOFT}>
      <Eyebrow>§ 02 · Methodology depth</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,
        }}
      >
        The five components, briefly.
      </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>
      <div style={{ marginTop: 36 }}>
        <SecondaryLink href="/approach/">Full approach →</SecondaryLink>
      </div>
    </Section>
  );
}

function Integration() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="integration">
      <Eyebrow>§ 03 · How it integrates</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,
          }}
        >
          Fits the workflow you already use to price catastrophe and parametric cover.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: GREGIS_INK }}>
            The model runs inside the insured's environment. The actuarial summary — distributions,
            credible intervals, sensitivity tables, audit trail — is what the insured shares with
            you, in the form an underwriting workflow expects. The analog of how RMS and AIR
            Worldwide are consumed inside catastrophe-pricing workflows: documents and structured
            data, not a black-box service.
          </p>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            That configuration is what makes the underwriting possible. Operators have strong
            reasons not to share raw telemetry with vendors or underwriters; software-in-the-
            operator's-environment is the configuration that gives you the pricing inputs you
            need without asking them to.
          </p>
        </div>
      </div>
    </Section>
  );
}

function UnderwriterForm() {
  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 underwriting.
          </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 the risk class you are pricing.
          </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 UnderwritersPage() {
  return (
    <PageShell active="underwriters">
      <UnderwritersHero />
      <WhatYouGet />
      <MethodologyDepth />
      <Integration />
      <UnderwriterForm />
    </PageShell>
  );
}

window.UnderwritersPage = UnderwritersPage;
