// The problem (shared/commingled cloud) · privacy pillars (3 cards) · why.

function Problem() {
  return (
    <Section id="problem" pad={88}>
      <Eyebrow index="01">The problem</Eyebrow>
      <p style={{
        fontSize: 'clamp(26px, 3vw, 38px)', fontWeight: 400, letterSpacing: '-0.02em',
        lineHeight: 1.32, color: 'var(--fg)', maxWidth: '26ch', margin: '28px 0 0', textWrap: 'balance',
      }}>
        Most hosting providers can <span style={{ color: 'var(--accent)' }}>read everything you store</span> with them: your files, your mail, your keys, sitting in plaintext on infrastructure you'll never see, under whatever jurisdiction they answer to.
      </p>
    </Section>
  );
}

function Solution() {
  const cards = [
    ['Encrypted so even we can\u2019t read it', 'Cloud storage and business email are encrypted with keys we never hold. We can\u2019t read your data, hand readable copies to anyone who demands them, or inject code to surveil what you store.', 1],
    ['We own the hardware', 'Every workload runs on machines we buy, rack, and operate ourselves. No third-party operator sits between you and your data.', 2],
    ['Data stays in Canada', 'Hosted in a Tier 3 datacenter in Toronto. PIPEDA, GDPR processor terms, and a clear data-processing agreement: residency you can point to.', 3],
  ];
  return (
    <Section id="principles" pad={88} style={{ background: 'var(--bg-alt)' }}>
      <Eyebrow index="02">How we keep it private</Eyebrow>
      <h2 style={{ fontSize: 'clamp(30px,3.4vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '16px 0 8px', maxWidth: '22ch', color: 'var(--fg)' }}>
        Privacy isn't a setting. It's the architecture.
      </h2>
      <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '58ch', margin: '0 0 40px' }}>
        We own our hardware, run it with in-house engineers, and encrypt your storage and mail so the keys never leave you: privacy that's built into the architecture, not bolted on top.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden', background: 'var(--surface)' }}>
        {cards.map(([title, body, n], i) => <SolutionCard key={n} title={title} body={body} n={n} first={i === 0} />)}
      </div>
    </Section>
  );
}

function SolutionCard({ title, body, n, first }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: 32, borderLeft: first ? 'none' : '1px solid var(--rule-soft)',
        background: hover ? 'var(--bg-alt)' : 'var(--surface)', transition: 'background 140ms', position: 'relative',
      }}>
      <span style={{ fontSize: 12, color: 'var(--accent)', fontVariantNumeric: 'tabular-nums' }}>0{n}</span>
      <h3 style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', margin: '14px 0 12px', lineHeight: 1.25, color: 'var(--fg)' }}>{title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{body}</p>
    </div>
  );
}

function WhyTensorHost() {
  const points = [
    ['Zero-knowledge storage & mail', 'Encrypted with keys we never hold.'],
    ['Owned hardware', 'Operated end to end, in-house.'],
    ['In-house engineers', 'No third-party access to your data.'],
    ['Canadian data residency', 'Toronto · PIPEDA · GDPR processor.'],
    ['Flexible payment', 'Card, crypto, bank transfer, even cash by post.'],
    ['Predictable pricing', 'No spot swings, no surprise egress.'],
  ];
  return (
    <Section id="why" dark pad={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <Eyebrow index="03" dark>Why TensorHost</Eyebrow>
          <h2 style={{ fontSize: 'clamp(30px,3.4vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '16px 0 18px', color: 'var(--inv-fg)' }}>
            What shared hosting<br />doesn't give you.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--inv-fg-2)', maxWidth: '40ch', margin: 0, lineHeight: 1.65 }}>
            The control of running your own hardware, without buying a rack. Encryption, residency, and a real operator behind it.
          </p>
        </div>
        <div style={{ borderTop: '1px solid var(--inv-rule)' }}>
          {points.map(([k, v]) => (
            <div key={k} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 16, padding: '20px 0', borderBottom: '1px solid var(--inv-rule-2)', alignItems: 'baseline' }}>
              <span style={{ color: 'var(--accent)', fontSize: 13 }}>→</span>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 16, color: 'var(--inv-fg)', fontWeight: 700 }}>{k}</span>
                <span style={{ fontSize: 14, color: 'var(--inv-fg-3)', flex: '1 1 200px', textAlign: 'right' }}>{v}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Problem, Solution, WhyTensorHost });