// What we host — four hosting products, privacy-framed. GPU is one of them.

function Services() {
  const products = [
    ['Web hosting', 'Drag a zip and your site is live in under 20 seconds, with TLS and a custom domain ready, analytics that don\u2019t sell your visitors out. On hardware we own in Canada.', 'from £4 / site / mo', 'Web%20Hosting.html'],
    ['Business email', 'Zero-knowledge mailboxes on your own domain, encrypted with keys we never hold, so even we can\u2019t read your mail. Open IMAP, migration handled. Mail stays in Canada.', 'from £3 / mailbox / mo', 'TensorMail.html'],
    ['Cloud storage', 'S3-compatible object storage with zero egress fees and flat per-TB pricing. Point any S3 client at us, no rewrite, no surprise bill. Residency-locked to Canada.', 'from £5 / TB / mo', 'Cloud%20Storage.html'],
    ['GPU compute', 'Bare-metal H100s, A100s and L40S billed by the second, a whole GPU for your session, not a slice. Owned hardware, Canadian residency, your data never trains anyone else.', 'from $1.99 / GPU-hr', 'GPU%20Rentals.html'],
  ];


  return (
    <Section id="services" pad={96}>
      <Eyebrow index="04">What we host</Eyebrow>
      <h2 style={{ fontSize: 'clamp(30px,3.4vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '16px 0 8px', color: 'var(--fg)' }}>
        Four ways to host with us.
      </h2>
      <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '58ch', margin: '0 0 40px' }}>
        Sold directly. Web, email, and storage are priced in GBP and quoted per engagement; GPU compute is hourly. Everything runs on hardware we own and operate in Canada, and storage and mail are encrypted so even we can't read them.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {products.map(([title, body, price, href]) => (
          <ProductCard key={title} title={title} body={body} price={price} href={href} cta="Explore" />
        ))}
      </div>
    </Section>
  );
}

function ProductCard({ title, body, price, href, cta }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ border: `1px solid ${hover ? 'var(--fg)' : 'var(--rule)'}`, borderRadius: 4, padding: 32, background: 'var(--surface)', transition: 'border-color 140ms', display: 'flex', flexDirection: 'column', minHeight: 240, textDecoration: 'none', color: 'inherit', cursor: 'pointer' }}>
      <div style={{ marginBottom: 16 }}>
        <h3 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: 'var(--fg)' }}>{title}</h3>
      </div>
      <p style={{ fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.6, margin: '0 0 20px', flex: 1 }}>{body}</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--rule-soft)', paddingTop: 18 }}>
        <span style={{ fontSize: 13, color: 'var(--fg)', fontVariantNumeric: 'tabular-nums' }}>{price}</span>
        <span style={{ fontSize: 13, color: 'var(--fg)', textDecoration: 'none', display: 'inline-flex', gap: 6, alignItems: 'center' }}>
          {cta} <span style={{ color: 'var(--accent)' }}>→</span>
        </span>
      </div>
    </a>
  );
}

window.Services = Services;