/* =====================================================
   COMPANY PAGES — About, Contact, Demo (mock forms)
   Brief §26–§28
   ===================================================== */

const { useState: useStateCo } = React;

/* --- Form. POSTs to `action` endpoint when provided, falls back to console log. --- */
function MockForm({ fields, submitLabel = 'Send message', successHeadline = 'Thanks — we got it.', successBody = "We'll be back to you within one working day. If it's time-critical, email hello@cortexalabs.uk.", extra = null, hidden = {}, action = null }) {
  const [state, setState] = useStateCo({});
  const [sent, setSent] = useStateCo(false);
  const [submitting, setSubmitting] = useStateCo(false);
  const [error, setError] = useStateCo(null);

  const update = (name, value) => setState((s) => ({ ...s, [name]: value }));

  const submit = async (e) => {
    e.preventDefault();
    const payload = { ...hidden, ...state, _submittedAt: new Date().toISOString() };

    if (!action) {
      // eslint-disable-next-line no-console
      console.log('[Cortexa submit]', payload);
      setSent(true);
      return;
    }

    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch(action, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error || 'Submission failed');
      setSent(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <div className="mock-form-success reveal">
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)', letterSpacing: '0.14em' }}>RECEIVED · {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
        <h3 style={{ fontSize: 28, marginTop: 12, letterSpacing: '-0.015em' }}>{successHeadline}</h3>
        <p style={{ marginTop: 14, color: 'var(--ink-2)', fontSize: 15.5, lineHeight: 1.65, maxWidth: '54ch' }}>{successBody}</p>
        <button type="button" className="btn btn-ghost-light" style={{ marginTop: 28 }} onClick={() => { setSent(false); setState({}); }}>
          Send another <span className="arrow">→</span>
        </button>
      </div>
    );
  }

  return (
    <form className="mock-form" onSubmit={submit} noValidate>
      <div className="mock-form-grid">
        {fields.map((f) => {
          const key = f.name;
          const val = state[key] || '';
          const onChange = (e) => update(key, e.target.value);
          const span = f.span || (f.kind === 'textarea' ? 2 : 1);
          return (
            <label key={key} className="mock-field" style={{ gridColumn: `span ${span}` }}>
              <span className="mock-field-label">
                {f.label}{f.required && <span style={{ color: 'var(--coral)', marginLeft: 4 }}>*</span>}
              </span>
              {f.kind === 'select' ? (
                <select value={val} onChange={onChange} required={f.required}>
                  <option value="">— Select —</option>
                  {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              ) : f.kind === 'textarea' ? (
                <textarea rows={5} value={val} onChange={onChange} placeholder={f.placeholder} required={f.required} />
              ) : (
                <input type={f.kind || 'text'} value={val} onChange={onChange} placeholder={f.placeholder} required={f.required} />
              )}
              {f.hint && <span className="mock-field-hint">{f.hint}</span>}
            </label>
          );
        })}
      </div>
      {extra}
      <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
        <button type="submit" className="btn btn-primary" disabled={submitting} style={{ opacity: submitting ? 0.7 : 1 }}>
          {submitting ? 'Sending…' : submitLabel} {!submitting && <span className="arrow">→</span>}
        </button>
        {error && (
          <span style={{ fontSize: 13, color: 'var(--coral)', maxWidth: '44ch', lineHeight: 1.5 }}>{error}</span>
        )}
      </div>
      <style>{`
        .mock-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
        .mock-field { display: flex; flex-direction: column; gap: 8px; }
        .mock-field-label {
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-4);
        }
        .mock-field input, .mock-field select, .mock-field textarea {
          font-family: var(--font-body);
          font-size: 15px;
          color: var(--ink);
          background: var(--warm-white);
          border: 1px solid rgba(27,35,48,0.18);
          padding: 12px 14px;
          border-radius: 0;
          outline: none;
          transition: border-color 0.15s ease;
          width: 100%;
        }
        .mock-field input:focus, .mock-field select:focus, .mock-field textarea:focus {
          border-color: var(--teal);
        }
        .mock-field textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }
        .mock-field-hint { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
        .mock-form-success {
          background: var(--warm-white);
          border-left: 3px solid var(--teal);
          padding: 32px 36px;
        }
        @media (max-width: 720px) {
          .mock-form-grid { grid-template-columns: 1fr; }
          .mock-field[style*="span 2"] { grid-column: span 1 !important; }
        }
      `}</style>
    </form>
  );
}

const INDUSTRIES_OPTIONS = ['Energy & Utilities', 'Aviation', 'Mining', 'Construction & Heavy Industry', 'Emergency Services', 'Defense', 'Logistics & Ports', 'Other'];

/* =====================================================
   §26 — ABOUT
   ===================================================== */

function AboutPage() {
  useReveal();

  return (
    <>
      {/* §26.1 HERO */}
      <section className="on-dark" style={{ paddingTop: 96, paddingBottom: 0, 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(60% 70% at 80% 20%, rgba(46,125,122,0.12), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative', paddingBottom: 64 }}>
          <SectionEyebrow num="26" text="ABOUT CORTEXA LABS" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '18ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            A platform built for the messy reality of <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>industrial radio</em>.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '60ch', lineHeight: 1.6 }}>
            We build an intelligence layer for industrial voice communications. It runs on your infrastructure, listens to your radios, and turns every transmission into structured intelligence your operations and safety teams can act on.
          </p>
          <div style={{ marginTop: 56 }}>
            <PhotoSlot
              ratio="21/9"
              src="assets/about-hero.png"
              alt="Quiet wide photograph of a working operations centre, multiple monitors, no specific company branding visible."
              tag="OPERATIONS CENTRE · WIDE ENVIRONMENTAL"
              corner={['', 'ABOUT / HERO']}
            />
          </div>
        </div>
      </section>

      {/* §26.2 — What we do */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div>
            <SectionEyebrow num="26.2" text="WHAT WE DO" />
            <h2 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 18, maxWidth: '14ch' }}>One sentence.</h2>
          </div>
          <p style={{ fontSize: 19, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '64ch' }}>
            Cortexa is an intelligence layer for industrial voice communications. We build the technology that listens to PTT and PMR radio traffic in the way an operations team actually uses it — multilingual, noisy, full of jargon — and turns it into structured safety and operational intelligence that operations teams can act on, audit, and learn from. We do this <em style={{ color: 'var(--ink)' }}>without sending a single byte of your operational data to an external AI provider</em>.
          </p>
        </div>
        <style>{`
          @media (max-width: 920px) {
            section.section .container[style*="grid-template-columns: 1fr 1.4fr"] {
              grid-template-columns: 1fr !important; gap: 32px !important;
            }
          }
        `}</style>
      </section>

      {/* §26.3 — Why this work matters (still life backdrop) */}
      <ScenarioBand
        eyebrow="WHY THIS WORK MATTERS"
        headline="Voice has always been the primary medium of industrial coordination."
        body={<>Voice has always been the primary medium of industrial coordination, and yet it has been the least visible to operational and safety systems. Permits, hazards, near-misses, procedural slips, handover gaps — they live in radio traffic that disappears the moment it's transmitted. We exist to close that gap, on infrastructure that belongs to the organisations whose data it processes.</>}
        photoSrc="assets/about-still.png"
        photoAlt="A printed report and a PTT radio side by side on a desk."
        photoCorner={['', 'WHY']}
      />

      {/* §26.4 — The entity */}
      <section className="section" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionEyebrow num="26.4" text="THE COMPANY" />
          <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', marginTop: 18, maxWidth: '24ch' }}>
            Cortexa Labs Ltd — the global operating entity.
          </h2>

          <div style={{ marginTop: 40, border: '1px solid rgba(27,35,48,0.12)', background: 'var(--warm-white)', padding: '32px 32px 36px', maxWidth: 560 }}>
            <div style={{ fontSize: 10.5, letterSpacing: '0.14em', color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', paddingBottom: 16, borderBottom: '1px solid rgba(27,35,48,0.10)', marginBottom: 16 }}>
              CORTEXA.COM · GLOBAL
            </div>
            <h3 style={{ fontSize: 26, letterSpacing: '-0.02em' }}>Cortexa Labs Ltd</h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 15, maxWidth: '42ch', marginTop: 10 }}>Registered in England and Wales. Global operating entity. Contracts customers worldwide.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 16, borderTop: '1px solid rgba(27,35,48,0.10)' }}>
              <li>Governing law — England and Wales</li>
              <li>Support hours — 09:00–18:00 GMT</li>
              <li>hello@cortexalabs.uk</li>
            </ul>
          </div>

          <p style={{ marginTop: 36, fontSize: 16, color: 'var(--ink-3)', maxWidth: '72ch', lineHeight: 1.65 }}>
            <strong>Cortexa Labs Ltd</strong> is the global operating entity, registered in England and Wales. We build and deliver the Cortexa platform to industrial operators worldwide, on infrastructure they control and under governing law that applies to them.
          </p>
        </div>
      </section>

      {/* §26.5 — Partners & validation */}
      <section className="section-sm" style={{ background: 'var(--warm-white)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionEyebrow num="26.5" text="PARTNERS & VALIDATION" />
          <p style={{ marginTop: 18, fontSize: 18, color: 'var(--ink-2)', maxWidth: '70ch', lineHeight: 1.65 }}>
            Cortexa has been developed alongside leading industrial radio manufacturers and operators across aviation, energy, and emergency services — including engagements with the partners below. Reference conversations available on request.
          </p>
          <div className="partner-row">
            {['Airbus', 'Bechtel', 'Hytera', 'Sepura', 'EnTech'].map((p) => (
              <div key={p} className="partner-chip">{p}</div>
            ))}
          </div>
        </div>
        <style>{`
          .partner-row {
            margin-top: 32px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1px;
            background: rgba(27,35,48,0.12);
            border: 1px solid rgba(27,35,48,0.12);
          }
          .partner-chip {
            background: var(--warm-white);
            padding: 36px 16px;
            text-align: center;
            font-family: var(--font-display);
            font-size: 22px;
            letter-spacing: -0.01em;
            color: var(--ink);
          }
          @media (max-width: 760px) {
            .partner-row { grid-template-columns: 1fr 1fr; }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Talk to us about your operation."
        subhead="Pilots, procurement conversations, reference calls. The fastest path through this site is a 30-minute call with our team."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* =====================================================
   §27 — CONTACT
   ===================================================== */

const CONTACT_FIELDS = [
  { name: 'name', label: 'Full name', required: true },
  { name: 'email', label: 'Work email', kind: 'email', required: true },
  { name: 'company', label: 'Company', required: true },
  { name: 'country', label: 'Country', required: true },
  { name: 'industry', label: 'Industry', kind: 'select', options: INDUSTRIES_OPTIONS, required: true },
  { name: 'topic', label: 'What are you reaching out about?', kind: 'select', options: ['Pilot inquiry', 'Reference call', 'Partner inquiry', 'Press', 'Other'], required: true },
  { name: 'message', label: 'Message', kind: 'textarea', span: 2, placeholder: 'Tell us a little about your operation and what you’re trying to solve.', required: true },
];

function ContactPage() {
  useReveal();

  return (
    <>
      <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.35 }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow num="27" text="CONTACT" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '14ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            Talk to the team.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '60ch', lineHeight: 1.6 }}>
            Pilots, procurement questions, partnership conversations, reference calls. Tell us what you need and we'll route it to the right person — typically within one working day.
          </p>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          {/* Form */}
          <div>
            <SectionEyebrow num="27.2" text="SEND A MESSAGE" />
            <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', marginTop: 16, marginBottom: 32, maxWidth: '20ch' }}>
              We read every message. We answer them all.
            </h2>
            <MockForm
              fields={CONTACT_FIELDS}
              submitLabel="Send message"
              action="/api/contact"
              hidden={{ source: '/contact', site: 'cortexalabs.uk' }}
              successHeadline="Thanks — we got it."
              successBody="We’ll be back to you within one working day. If it’s time-critical, email hello@cortexalabs.uk directly."
            />
          </div>

          {/* Direct details */}
          <aside className="contact-aside">
            <SectionEyebrow num="27.3" text="DIRECT DETAILS" />
            <h3 style={{ fontSize: 22, marginTop: 14, marginBottom: 8 }}>Reach us directly.</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55, marginBottom: 24 }}>
              Global enquiries are handled by Cortexa Labs Ltd, registered in England and Wales.
            </p>

            <div className="contact-card active">
              <div className="contact-card-head">
                <span className="font-mono">CORTEXA.COM · GLOBAL</span>
              </div>
              <div className="contact-card-body">
                <div><strong>Cortexa Labs Ltd</strong></div>
                <div>Registered office — England and Wales</div>
                <div><a href="mailto:hello@cortexalabs.uk">hello@cortexalabs.uk</a></div>
                <div>Support — 09:00–18:00 GMT, extended via pilot agreements.</div>
              </div>
            </div>

            <div style={{ marginTop: 28 }}>
              <PhotoSlot ratio="16/9" src="assets/contact-still.png" alt="Desk with a PTT radio, a notebook, and a phone, soft daylight." tag="QUIET DESK STILL LIFE" light corner={['', 'CONTACT']} />
            </div>
          </aside>
        </div>
        <style>{`
          .contact-card {
            border: 1px solid rgba(27,35,48,0.14);
            padding: 22px 24px;
            margin-bottom: 16px;
            background: var(--warm-white);
            position: relative;
          }
          .contact-card.active { background: var(--warm-white-2); }
          .contact-card.active::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber);
          }
          .contact-card-head {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-4);
            padding-bottom: 12px; border-bottom: 1px solid rgba(27,35,48,0.10);
            margin-bottom: 14px;
          }
          .contact-card-body { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
          .contact-card-body a { color: var(--teal); border-bottom: 1px solid currentColor; }
          @media (max-width: 920px) {
            section.section .container[style*="grid-template-columns: 1.4fr 1fr"] {
              grid-template-columns: 1fr !important; gap: 56px !important;
            }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Or skip the form — book a pilot conversation directly."
        subhead="A 30-minute call with someone who can answer your technical and commercial questions in the same conversation."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Read about us', to: '/about' }}
      />
    </>
  );
}

/* =====================================================
   §28 — REQUEST A PILOT
   ===================================================== */

const PILOT_TIMELINE = [
  {
    weeks: 'WEEK 1–2',
    title: 'Scoping.',
    body: <>Together we identify one site, one operation, two or three concrete success criteria — for example, <em>"detect every permit-to-work breach over a 60-day window"</em>, <em>"verify operator-rounds completion on Unit 4"</em>, <em>"reconstruct the next three near-miss incidents end to end."</em></>,
  },
  {
    weeks: 'WEEK 3–10',
    title: 'Deployment & live operation.',
    body: 'Cortexa is deployed on a dedicated host on your infrastructure. Your team begins reviewing detections through the platform. We tune the system to your vocabulary, channels, and operations.',
  },
  {
    weeks: 'WEEK 11–12',
    title: 'Review.',
    body: 'Joint review of detection quality, supervisor feedback, and operational outcomes against the agreed success criteria. From there: scale, refine, or part ways with no further obligation.',
  },
];

const PILOT_FIELDS = [
  { name: 'name', label: 'Full name', required: true },
  { name: 'email', label: 'Work email', kind: 'email', required: true },
  { name: 'company', label: 'Company', required: true },
  { name: 'country', label: 'Country', required: true },
  { name: 'industry', label: 'Industry', kind: 'select', options: INDUSTRIES_OPTIONS, required: true },
  { name: 'sites', label: 'Number of sites under consideration', kind: 'number', placeholder: 'e.g. 1' },
  { name: 'channels', label: 'Approximate active radio channels per site', kind: 'number', placeholder: 'e.g. 12' },
  { name: 'languages', label: 'Languages in operational use', placeholder: 'EN, ES, AR…' },
  { name: 'startWindow', label: 'Target start window', kind: 'select', options: ['Next 30 days', 'Next 60 days', 'Next 90 days', 'Later than 90 days'] },
  { name: 'infra', label: 'Existing PTT/PMR infrastructure', placeholder: 'Manufacturer, model, network type — any detail helps.' },
  { name: 'message', label: 'Anything else you’d like us to know', kind: 'textarea', span: 2, placeholder: 'Success criteria you already have in mind, constraints, deadlines, etc.' },
];

function DemoPage() {
  useReveal();

  return (
    <>
      {/* §28.1 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 75% 25%, rgba(242,160,75,0.14), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow num="28" text="REQUEST A PILOT" onDark />
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: '#fff', marginTop: 26, maxWidth: '14ch', letterSpacing: '-0.035em', lineHeight: 1.0 }}>
            Bring Cortexa to <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>one site</em>.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.6 }}>
            A Cortexa pilot is a scoped, time-boxed deployment on one of your sites — typically 60 to 90 days — with explicit success criteria agreed up front. We'll evaluate your radio environment, languages, and vocabulary together, deploy on your infrastructure, and review the results with you before any commitment to scale.
          </p>
        </div>
      </section>

      {/* §28.2 — Three-phase timeline */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="28.2"
            eyebrow="WHAT A PILOT LOOKS LIKE"
            headline={<>Three phases. Twelve weeks. One scoped operation.</>}
            sideNote="Pilots are deliberately small. One site, one operation, two or three concrete success criteria the team agrees to up front."
          />
          <div className="pilot-timeline">
            {PILOT_TIMELINE.map((p, i) => (
              <div key={i} className="pilot-phase reveal">
                <div className="pilot-phase-mark">
                  <span className="font-mono">{p.weeks}</span>
                  <span className="pilot-num">{String(i+1).padStart(2,'0')}</span>
                </div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .pilot-timeline {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-top: 1px solid rgba(27,35,48,0.16);
            border-bottom: 1px solid rgba(27,35,48,0.16);
          }
          .pilot-phase {
            padding: 40px 32px 44px;
            border-right: 1px solid rgba(27,35,48,0.10);
            display: flex; flex-direction: column; gap: 14px;
            position: relative;
          }
          .pilot-phase:last-child { border-right: none; }
          .pilot-phase-mark {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-4);
            padding-bottom: 16px; border-bottom: 1px solid rgba(27,35,48,0.10);
          }
          .pilot-num {
            font-family: var(--font-display);
            font-size: 32px;
            color: var(--amber);
            letter-spacing: -0.03em;
            line-height: 1;
          }
          .pilot-phase h3 { font-size: 24px; letter-spacing: -0.015em; max-width: 14ch; }
          .pilot-phase p { font-size: 15px; color: var(--ink-2); line-height: 1.65; }
          @media (max-width: 920px) {
            .pilot-timeline { grid-template-columns: 1fr; }
            .pilot-phase { border-right: none; border-bottom: 1px solid rgba(27,35,48,0.10); }
            .pilot-phase:last-child { border-bottom: none; }
          }
        `}</style>
      </section>

      {/* §28.3 — Pilot form */}
      <section className="section" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <SectionEyebrow num="28.3" text="REQUEST FORM" />
            <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', marginTop: 16, marginBottom: 12, maxWidth: '22ch' }}>
              Tell us about your radio environment.
            </h2>
            <p style={{ fontSize: 15.5, color: 'var(--ink-3)', maxWidth: '56ch', marginBottom: 32, lineHeight: 1.6 }}>
              The more specific you are about your operation, the more concrete our first call can be. Nothing here is a commitment.
            </p>
            <MockForm
              fields={PILOT_FIELDS}
              submitLabel="Submit pilot request"
              action="/api/pilot"
              hidden={{ source: '/demo', topic: 'Pilot inquiry', site: 'cortexalabs.uk' }}
              successHeadline="Request received."
              successBody="A member of our team will be in touch within one working day to schedule a 30-minute scoping call. Routed to Cortexa Labs Ltd."
            />
          </div>

          {/* §28.4 — What we'll ask for in return */}
          <aside>
            <SectionEyebrow num="28.4" text="WHAT WE'LL ASK FOR IN RETURN" />
            <h3 style={{ fontSize: 22, marginTop: 14, marginBottom: 18, maxWidth: '18ch' }}>
              A pilot works when both sides commit.
            </h3>
            <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7, marginBottom: 24 }}>
              We'll ask for one operational champion at your site, supervisor time to review detections in the first three weeks, access to your radio infrastructure for ingestion, and a willingness to share aggregate results with us under NDA.
            </p>
            <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7 }}>
              In exchange, you get a working deployment, your team's verdict, and a clear decision point.
            </p>

            <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid rgba(27,35,48,0.12)' }}>
              <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>WE COMMIT TO</span>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'Deployment on hardware you control.',
                  'No external AI providers in the pipeline.',
                  'Aggregate results shared with you, never sold.',
                  'A clean exit at week 12 with no further obligation.',
                ].map((t) => (
                  <li key={t} style={{ fontSize: 14, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ color: 'var(--teal)', fontFamily: 'var(--font-mono)' }}>›</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ marginTop: 36 }}>
              <PhotoSlot ratio="4/3" src="assets/demo-hero.png" alt="Two people at a desk reviewing a screen together — operator and Cortexa engineer in a real working session." tag="WORKING SESSION · OPERATOR + ENGINEER" light corner={['', 'PILOT']} />
            </div>
          </aside>
        </div>
        <style>{`
          @media (max-width: 920px) {
            section.section .container[style*="grid-template-columns: 1.4fr 1fr"] {
              grid-template-columns: 1fr !important; gap: 56px !important;
            }
          }
        `}</style>
      </section>
    </>
  );
}

Object.assign(window, { AboutPage, ContactPage, DemoPage, MockForm });