/* =====================================================
   DATA SOVEREIGNTY & LOCAL AI — /platform/data-sovereignty
   ===================================================== */

function SovereigntyPage() {
  useReveal();
  const guarantees = [
    {
      n: '01',
      title: 'No external AI providers.',
      body: 'Every model — transcription, language understanding, detection, decision-making — runs locally on dedicated hardware you control. Cortexa does not call out to any third-party model API at any point in its pipeline.',
      glyph: 'lock',
    },
    {
      n: '02',
      title: 'No data leaves your perimeter.',
      body: 'Voices, transcripts, detections, reports, audit trails — all of it stays inside your network boundary by design. There is no Cortexa cloud, no telemetry, no model improvement loop that exports your data.',
      glyph: 'perimeter',
    },
    {
      n: '03',
      title: 'One self-contained appliance per site.',
      body: 'A single dedicated host (Apple Mac Studio class) runs the full stack — transcription, intelligence layer, detection, storage, reporting. Multi-site deployments are managed from a unified control plane.',
      glyph: 'appliance',
    },
    {
      n: '04',
      title: 'You own your data, end to end.',
      body: 'Storage retention, deletion policy, export rights, and access control are all yours to configure. Cortexa never retains a copy. Your data, your rules, your custody chain.',
      glyph: 'noegress',
    },
  ];

  const standards = ['ISO 27001', 'GDPR by-design', 'NIST CSF', 'ISO 45001'];

  return (
    <>
      {/* HERO */}
      <section className="on-dark" style={{ paddingTop: 96, paddingBottom: 96, borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'relative', overflow: 'hidden' }}>
        <div className="bg-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(50% 70% at 80% 30%, rgba(46,125,122,0.12), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="sov-hero-grid">
            <div>
              <SectionEyebrow text="DATA SOVEREIGNTY & LOCAL AI" onDark />
              <h1 style={{ fontSize: 'clamp(48px, 6.5vw, 96px)', color: '#fff', marginTop: 24, maxWidth: '14ch', letterSpacing: '-0.03em', lineHeight: 1.0, fontFamily: 'var(--font-display)', fontWeight: 500 }}>
                Your data stays where your operation is.
              </h1>
              <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '54ch', lineHeight: 1.55 }}>
                Cortexa is engineered for sovereign deployment from the ground up. Every model runs on your infrastructure. No external AI providers. No third-party data egress. No exceptions.
              </p>
              <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
                <Link to="/contact" className="btn btn-ghost-dark">Procurement enquiry <span className="arrow">→</span></Link>
              </div>
            </div>

            <div>
              <PhotoSlot
                ratio="4/5"
                src="assets/sovereignty-appliance.png"
                alt="Mac Studio on a brushed-steel desk with a single ethernet cable, slate-grey backdrop. One appliance per site."
                tag="MAC STUDIO · OPERATIONS CABINET"
                corner={['', 'APPLIANCE / 01']}
              />
            </div>
          </div>
        </div>

        <style>{`
          .sov-hero-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 80px;
            align-items: center;
          }
          @media (max-width: 980px) { .sov-hero-grid { grid-template-columns: 1fr; gap: 48px; } }
        `}</style>
      </section>

      {/* FOUR GUARANTEES */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="11.2"
            eyebrow="THE FOUR GUARANTEES"
            headline={<>Four lines a procurement team can defend.</>}
            sideNote="These aren't best efforts. They're architectural. Each one is enforced by how the platform is built, not by promises in a contract."
          />

          <div className="guarantee-grid">
            {guarantees.map((g) => (
              <div key={g.n} className="guarantee-card reveal">
                <div className="guarantee-head">
                  <GuaranteeGlyph kind={g.glyph} />
                </div>
                <h3>{g.title}</h3>
                <p>{g.body}</p>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          .guarantee-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: rgba(27,35,48,0.12);
            border: 1px solid rgba(27,35,48,0.12);
          }
          .guarantee-card {
            padding: 48px 40px;
            background: var(--warm-white);
            display: flex;
            flex-direction: column;
          }
          .guarantee-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
          }
          .guarantee-card h3 {
            font-size: 28px;
            font-weight: 500;
            margin-top: 28px;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
            max-width: 16ch;
          }
          .guarantee-card p {
            font-size: 15px;
            color: var(--ink-2);
            max-width: 42ch;
            line-height: 1.6;
          }
          @media (max-width: 820px) { .guarantee-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* WHY THIS MATTERS */}
      <section className="section" style={{ background: 'var(--warm-white-2)' }}>
        <div className="container" style={{ maxWidth: 920, marginInline: 'auto' }}>
          <SectionEyebrow num="11.3" text="WHY THIS MATTERS" />
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', marginTop: 20, maxWidth: '24ch' }}>
            Voice traffic is among the most sensitive data your operation produces.
          </h2>
          <p style={{ marginTop: 28, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: '64ch' }}>
            It contains operator identities, equipment status, security-relevant communications, and — in regulated industries — material subject to specific data-residency laws. Any voice-AI product that routes this data through a third-party AI provider exposes you to that provider’s contracts, breaches, and policy changes.
          </p>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink)', lineHeight: 1.7, maxWidth: '64ch', fontWeight: 500 }}>
            Cortexa removes that exposure by design.
          </p>
        </div>
      </section>

      {/* STANDARDS */}
      <section className="on-dark section-sm" style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <SectionEyebrow num="11.4" text="STANDARDS & ALIGNMENT" onDark />
              <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 42px)', color: '#fff', marginTop: 18, maxWidth: '20ch' }}>
                Plain alignments. No over-claims.
              </h2>
            </div>
            <p style={{ color: 'var(--slate-300)', maxWidth: '40ch', fontSize: 14.5 }}>
              The platform is engineered to align with the regimes our customers operate under. Certifications held vs. in-progress are disclosed in writing on request.
            </p>
          </div>

          <div style={{ marginTop: 48, display: 'flex', flexWrap: 'wrap', gap: 1, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.08)' }}>
            {standards.map((s) => (
              <div key={s} style={{ flex: '1 1 200px', minWidth: 180, padding: '32px 24px', background: 'var(--slate-800)', fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--slate-100)', letterSpacing: '-0.01em' }}>
                {s}
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        headline="Bring procurement into the conversation."
        subhead="We'll send a documentation pack covering architecture, data flow, key management, and standards alignment — written for procurement and security teams, not engineers."
        primary={{ label: 'Request the pack', to: '/contact' }}
        secondary={{ label: 'Request a Pilot', to: '/demo' }}
      />
    </>
  );
}

function GuaranteeGlyph({ kind }) {
  const p = { width: 48, height: 48, viewBox: '0 0 48 48', fill: 'none' };
  if (kind === 'lock') return (
    <svg {...p}>
      <rect x="10" y="22" width="28" height="20" stroke="#1B2330" strokeWidth="1.2"/>
      <path d="M16 22 V16 a8 8 0 0 1 16 0 V22" stroke="#1B2330" strokeWidth="1.2" fill="none"/>
      <circle cx="24" cy="32" r="2.5" fill="#2E7D7A"/>
    </svg>
  );
  if (kind === 'perimeter') return (
    <svg {...p}>
      <rect x="6" y="6" width="36" height="36" stroke="#1B2330" strokeWidth="1.2" strokeDasharray="3 4"/>
      <circle cx="24" cy="24" r="6" fill="#2E7D7A"/>
    </svg>
  );
  if (kind === 'appliance') return (
    <svg {...p}>
      <rect x="8" y="14" width="32" height="20" stroke="#1B2330" strokeWidth="1.2"/>
      <circle cx="14" cy="24" r="1.5" fill="#2E7D7A"/>
      <line x1="20" y1="24" x2="34" y2="24" stroke="#1B2330" strokeWidth="1"/>
    </svg>
  );
  return (
    <svg {...p}>
      <rect x="6" y="6" width="36" height="36" stroke="#1B2330" strokeWidth="1.2"/>
      <path d="M14 14 L34 34 M34 14 L14 34" stroke="#D9534F" strokeWidth="1.4"/>
      <circle cx="38" cy="10" r="3" fill="#D9534F"/>
    </svg>
  );
}

Object.assign(window, { SovereigntyPage });