// Company page — mission, founder, why now.

function CompanyHero() {
  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>Company</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,
          }}
        >
          A small company working on a narrow problem.
        </h1>
        <p
          style={{
            margin: isMobile ? '24px 0 0' : '28px 0 0',
            maxWidth: 760,
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.6,
            color: GREGIS_MUTED,
          }}
        >
          Gregis builds reliability software that runs inside the operator's environment. The
          same software serves the operator running the fleet, the enterprise sizing a private
          cluster, and — with the operator's consent — the underwriter pricing the cover behind
          it.
        </p>
      </div>
    </section>
  );
}

function FounderSection() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="founder">
      <Eyebrow>§ 01 · Founder</Eyebrow>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 28 : 56,
          alignItems: 'start',
        }}
      >
        <div>
          <img
            src="/founder.jpg"
            alt="Founder portrait"
            style={{
              width: '100%',
              maxWidth: 320,
              height: 'auto',
              display: 'block',
              borderRadius: 2,
              filter: 'grayscale(8%)',
            }}
          />
        </div>
        <div>
          <h2
            style={{
              fontFamily: FONT_SERIF,
              fontWeight: 500,
              fontSize: 28,
              lineHeight: 1.15,
              letterSpacing: '-0.01em',
              margin: '0 0 4px',
            }}
          >
            Gabriel Aguilar Perez
          </h2>
          <div
            style={{
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.06em',
              color: GREGIS_MUTED,
              marginBottom: 20,
            }}
          >
            FOUNDER · ex-AMD · Math @ UChicago
          </div>
          {/* TODO: replace with 2–3 sentence founder bio confirmed by Gabriel.
              The line below states only what was already in the prior site's
              team object ("ex-AMD. Math @ UChicago") and avoids extrapolation. */}
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: GREGIS_MUTED }}>
            Reach out directly:{' '}
            <a
              href={`mailto:${GREGIS_CONTACT.email}`}
              style={{ color: GREGIS_BLUE, textDecoration: 'none' }}
            >
              {GREGIS_CONTACT.email}
            </a>
            .
          </p>
        </div>
      </div>
    </Section>
  );
}

function WhyNow() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="why-now" background={GREGIS_LINE_SOFT}>
      <Eyebrow>§ 02 · Why now</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 28px',
          maxWidth: 820,
        }}
      >
        Three forces are converging on a single configuration the market hasn't filled yet.
      </h2>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 18,
          maxWidth: 820,
          fontSize: 16,
          lineHeight: 1.7,
          color: GREGIS_INK,
        }}
      >
        <p style={{ margin: 0 }}>
          First: GPU clusters are larger, more expensive, and more failure-prone than any
          infrastructure that came before them. Every recent large-model training paper
          documents hardware-failure events that disrupted multi-million-dollar training jobs.
          Enterprise customers are tightening their SLAs accordingly.
        </p>
        <p style={{ margin: 0 }}>
          Second: parametric cover for AI-infrastructure availability is starting to emerge.
          Underwriters need calibrated failure-rate distributions and correlated-tail structure
          to price it — inputs that do not exist today in defensible form.
        </p>
        <p style={{ margin: 0 }}>
          Third: the failure data that would settle the question is locked inside a small
          number of operators who treat it as competitive advantage. Operators have strong
          reasons not to ship raw telemetry to vendors or to underwriters. That rules out the
          obvious configurations — vendor-as-service, central data lake, third-party
          benchmark — and leaves one that works: software that runs inside the operator's
          environment, produces the calibrated outputs, and lets the operator decide what, if
          anything, flows back. That is what we build.
        </p>
        <p style={{ margin: 0, color: GREGIS_MUTED }}>
          The methodology — physics-of-failure scaling, Bayesian hierarchical pooling,
          correlated-failure modeling, two-phase policy optimization — is what makes the
          outputs trustworthy. The deployment model is what makes them obtainable at all.
        </p>
      </div>
    </Section>
  );
}

function CompanyCTA() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <Section id="next">
      <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 ? 26 : 34,
            lineHeight: 1.1,
            letterSpacing: '-0.015em',
            margin: 0,
            maxWidth: 640,
          }}
        >
          If any of this resonates, send a short note.
        </h2>
        <PrimaryLink href="/contact/">Contact us →</PrimaryLink>
      </div>
    </Section>
  );
}

function CompanyPage() {
  return (
    <PageShell active="company">
      <CompanyHero />
      <FounderSection />
      <WhyNow />
      <CompanyCTA />
    </PageShell>
  );
}

window.CompanyPage = CompanyPage;
