/* =====================================================
   PARAGMATIQ, Company pages: About, Contact, Demo
   + Legal stubs (Privacy, Terms, Cookies)
   ===================================================== */

const { useState: useStateCo } = React;

/* ---------- Mock form (no backend) ---------- */
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@paragmatiq.com.", hidden = {} }) {
  const [state, setState] = useStateCo({});
  const [sent, setSent] = useStateCo(false);
  const update = (name, value) => setState((s) => ({ ...s, [name]: value }));
  const submit = (e) => {
    e.preventDefault();
    const payload = { ...hidden, ...state, _submittedAt: new Date().toISOString() };
    console.log('[Paragmatiq mock submit]', payload);
    setSent(true);
  };

  if (sent) {
    return (
      <div className="mock-form-success reveal">
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--gold-3)', letterSpacing: '0.16em' }}>RECEIVED · {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
        <h3 style={{ fontSize: 30, marginTop: 12, letterSpacing: '-0.02em', fontWeight: 700 }}>{successHeadline}</h3>
        <p style={{ marginTop: 14, color: 'var(--ink-2)', fontSize: 16, 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>
        <style>{`
          .mock-form-success {
            background: var(--paper);
            border-left: 3px solid var(--gold);
            padding: 36px 40px;
          }
        `}</style>
      </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(--red)', 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>
      <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
        <button type="submit" className="btn btn-primary">{submitLabel} <span className="arrow">→</span></button>
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.16em' }}>
          NO BACKEND · MOCK SUBMISSION · LOGGED TO CONSOLE
        </span>
      </div>
      <style>{`
        .mock-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 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.16em;
          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(--paper);
          border: 1px solid rgba(10,31,68,0.20);
          padding: 14px 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(--gold); }
        .mock-field textarea { resize: vertical; min-height: 120px; font-family: var(--font-body); }
        .mock-field-hint { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
        @media (max-width: 720px) {
          .mock-form-grid { grid-template-columns: 1fr; }
          .mock-field[style*="span 2"] { grid-column: span 1 !important; }
        }
      `}</style>
    </form>
  );
}

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

/* =========================
   ABOUT
   ========================= */

function AboutPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>ABOUT PARAGMATIQ SYSTEMS</span></div>
          <h1>A platform built for the messy reality of <span style={{ color: 'var(--gold)' }}>industrial radio</span>.</h1>
          <p className="subhead">
            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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">ENTITY</span><span className="value gold">Paragmatiq Systems Ltd</span></div>
            <div className="hero-meta-cell"><span className="label">JURISDICTION</span><span className="value">Delaware · USA</span></div>
            <div className="hero-meta-cell"><span className="label">SUPPORT</span><span className="value">Business hours</span></div>
            <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value">Your infrastructure</span></div>
          </div>
          <div style={{ marginTop: 64, paddingBottom: 64 }}>
            <Plate kind="control-room" ratio="21/9" tag="OPERATIONS CENTRE · WIDE ENVIRONMENTAL" corner={['DWG-C-101', 'ABOUT / HERO']} />
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80 }}>
          <div>
            <SectionEyebrow text="WHAT WE DO" />
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', marginTop: 18, maxWidth: '14ch', fontWeight: 800, letterSpacing: '-0.03em' }}>One sentence.</h2>
          </div>
          <p style={{ fontSize: 20, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: '64ch' }}>
            Paragmatiq 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={{ fontFamily: 'var(--font-serif)' }}>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.5fr"] {
              grid-template-columns: 1fr !important; gap: 32px !important;
            }
          }
        `}</style>
      </section>

      <section className="on-navy" style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
          <Plate kind="evidence" ratio="auto" tag="" corner={['', '']} style={{ height: '100%', aspectRatio: 'auto', border: 'none' }} />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,31,68,0.82), rgba(10,31,68,0.96))' }} />
        <div className="container" style={{ position: 'relative', paddingBlock: 128, maxWidth: 1000 }}>
          <SectionEyebrow text="WHY THIS WORK MATTERS" onDark />
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', marginTop: 18, color: 'var(--paper)', maxWidth: '24ch', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.0 }}>
            Voice has always been the primary medium of industrial coordination.
          </h2>
          <p style={{ marginTop: 28, fontSize: 19, lineHeight: 1.7, color: 'var(--bone-3)', maxWidth: '64ch' }}>
            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.
          </p>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container">
          <SectionEyebrow text="THE ENTITY" />
          <h2 style={{ fontSize: 'clamp(32px, 3.8vw, 50px)', marginTop: 18, maxWidth: '22ch', fontWeight: 800, letterSpacing: '-0.03em' }}>
            Paragmatiq Systems Ltd. <span style={{ color: 'var(--ink-3)' }}>One product. One platform. One data-sovereignty model.</span>
          </h2>

          <div className="entity-card" style={{ marginTop: 40 }}>
            <div className="entity-head">
              <span className="font-mono">PARAGMATIQ.COM</span>
              <span className="entity-pill">VIEWING</span>
            </div>
            <div className="entity-body">
              <div><strong>Paragmatiq Systems Ltd</strong>, the contracting entity for industrial voice intelligence. Aligned to operator requirements worldwide, with infrastructure under your sole control, no external AI providers, no third-party data egress.</div>
              <ul className="entity-list">
                <li><span>JURISDICTION</span>Delaware, USA · global operator</li>
                <li><span>SUPPORT HOURS</span>Business hours, extended via pilot agreements</li>
                <li><span>CONTACT</span><a href="mailto:hello@paragmatiq.com">hello@paragmatiq.com</a></li>
              </ul>
            </div>
          </div>
        </div>
        <style>{`
          .entity-card { background: var(--paper); border: 1px solid rgba(10,31,68,0.20); padding: 32px 36px 36px; }
          .entity-head {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 10.5px; letter-spacing: 0.18em; color: var(--ink-4);
            padding-bottom: 16px; border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .entity-pill {
            background: var(--gold); color: var(--navy);
            font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
            padding: 4px 10px;
          }
          .entity-body { padding-top: 22px; display: flex; flex-direction: column; gap: 20px; }
          .entity-body > div { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; }
          .entity-list { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid rgba(10,31,68,0.14); display: flex; flex-direction: column; gap: 8px; }
          .entity-list li {
            display: grid; grid-template-columns: 160px 1fr; gap: 16px;
            font-family: var(--font-mono); font-size: 13px; color: var(--ink-2);
            padding: 6px 0;
          }
          .entity-list li span { font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-4); padding-top: 2px; }
          .entity-list li a { color: var(--gold-3); border-bottom: 1px solid currentColor; }
        `}</style>
      </section>

      <section className="section-sm on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container">
          <SectionEyebrow text="PARTNERS & VALIDATION" />
          <p style={{ marginTop: 18, fontSize: 18, color: 'var(--ink-2)', maxWidth: '70ch', lineHeight: 1.65 }}>
            Paragmatiq 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(10,31,68,0.18);
            border: 1px solid rgba(10,31,68,0.18);
          }
          .partner-chip {
            background: var(--paper);
            padding: 40px 16px;
            text-align: center;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: clamp(20px, 2vw, 28px);
            letter-spacing: 0.04em;
            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' }}
      />
    </>
  );
}

/* =========================
   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: INDUSTRY_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\u2019re trying to solve.', required: true },
];

function ContactPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>CONTACT</span></div>
          <h1>Talk to the <span style={{ color: 'var(--gold)' }}>team</span>.</h1>
          <p className="subhead">
            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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">RESPONSE</span><span className="value gold">1 business day</span></div>
            <div className="hero-meta-cell"><span className="label">SUPPORT</span><span className="value">Business hours</span></div>
            <div className="hero-meta-cell"><span className="label">EMAIL</span><span className="value">hello@paragmatiq.com</span></div>
            <div className="hero-meta-cell"><span className="label">ENTITY</span><span className="value">Paragmatiq Systems Ltd</span></div>
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <SectionEyebrow text="SEND A MESSAGE" />
            <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 38px)', marginTop: 16, marginBottom: 32, maxWidth: '20ch', fontWeight: 700 }}>
              We read every message. We answer them all.
            </h2>
            <MockForm
              fields={CONTACT_FIELDS}
              submitLabel="Send message"
              hidden={{ source: '/contact', site: 'paragmatiq.com' }}
              successHeadline="Thanks, we got it."
              successBody="We'll be back to you within one working day. If it's time-critical, email hello@paragmatiq.com directly."
            />
          </div>

          <aside className="contact-aside">
            <SectionEyebrow text="DIRECT DETAILS" />
            <h3 style={{ fontSize: 24, marginTop: 14, marginBottom: 12, fontWeight: 700 }}>Reach us directly.</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55, marginBottom: 28 }}>
              Cut out the form. Email goes to the same routing.
            </p>

            <div className="contact-card active">
              <div className="contact-card-head">
                <span className="font-mono">PARAGMATIQ.COM</span>
                <span className="entity-pill" style={{ background: 'var(--gold)', color: 'var(--navy)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', padding: '4px 10px' }}>VIEWING</span>
              </div>
              <div className="contact-card-body">
                <div><strong>Paragmatiq Systems Ltd</strong></div>
                <div>Registered office, TBC</div>
                <div>Jurisdiction, Delaware</div>
                <div><a href="mailto:hello@paragmatiq.com">hello@paragmatiq.com</a></div>
                <div>Support, Business hours, extended via pilot agreements.</div>
              </div>
            </div>

            <div style={{ marginTop: 32 }}>
              <Plate kind="generic" ratio="16/9" tag="DIRECT · DESK · NO LATENCY" corner={['DWG-C-103', 'CONTACT']} light />
            </div>
          </aside>
        </div>
        <style>{`
          .contact-card {
            border: 1px solid rgba(10,31,68,0.20);
            padding: 24px 26px;
            background: var(--paper);
            position: relative;
          }
          .contact-card.active { background: var(--bone-2); }
          .contact-card.active::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
          }
          .contact-card-head {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-4);
            padding-bottom: 14px; border-bottom: 1px solid rgba(10,31,68,0.14);
            margin-bottom: 16px;
          }
          .contact-card-body { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
          .contact-card-body a { color: var(--gold-3); 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' }}
      />
    </>
  );
}

/* =========================
   DEMO / 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 style={{ fontFamily: 'var(--font-serif)' }}>"detect every permit-to-work breach over a 60-day window"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"verify operator-rounds completion on Unit 4"</em>, <em style={{ fontFamily: 'var(--font-serif)' }}>"reconstruct the next three near-miss incidents end to end."</em></> },
  { weeks: 'WEEK 3–10', title: 'Deployment & live operation.', body: 'Paragmatiq 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: INDUSTRY_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\u2026' },
  { 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\u2019d like us to know', kind: 'textarea', span: 2, placeholder: 'Success criteria you already have in mind, constraints, deadlines, etc.' },
];

function DemoPage() {
  useReveal();
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>REQUEST A PILOT</span></div>
          <h1>Bring Paragmatiq to <span style={{ color: 'var(--gold)' }}>one site</span>.</h1>
          <p className="subhead">
            A Paragmatiq 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 className="hero-meta">
            <div className="hero-meta-cell"><span className="label">DURATION</span><span className="value gold">60, 90 days</span></div>
            <div className="hero-meta-cell"><span className="label">SCOPE</span><span className="value">One site, one operation</span></div>
            <div className="hero-meta-cell"><span className="label">SUCCESS CRITERIA</span><span className="value">Agreed up front</span></div>
            <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value">Your infrastructure</span></div>
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container">
          <SectionHead
            eyebrow="WHAT A PILOT LOOKS LIKE"
            headline={<>Three phases. Twelve weeks. <span style={{ color: 'var(--ink-3)' }}>One scoped operation.</span></>}
            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>
                </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(10,31,68,0.20);
            border-bottom: 1px solid rgba(10,31,68,0.20);
          }
          .pilot-phase {
            padding: 40px 36px 48px;
            border-right: 1px solid rgba(10,31,68,0.14);
            display: flex; flex-direction: column; gap: 14px;
            background: var(--paper);
          }
          .pilot-phase:last-child { border-right: none; }
          .pilot-phase-mark {
            font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-4);
            padding-bottom: 16px; border-bottom: 1px solid rgba(10,31,68,0.14);
          }
          .pilot-phase h3 { font-size: 26px; letter-spacing: -0.02em; max-width: 14ch; font-weight: 700; }
          .pilot-phase p { font-size: 15px; color: var(--ink-3); line-height: 1.65; }
          @media (max-width: 920px) {
            .pilot-timeline { grid-template-columns: 1fr; }
            .pilot-phase { border-right: none; border-bottom: 1px solid rgba(10,31,68,0.14); }
            .pilot-phase:last-child { border-bottom: none; }
          }
        `}</style>
      </section>

      <section className="section on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <SectionEyebrow text="REQUEST FORM" />
            <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 38px)', marginTop: 16, marginBottom: 14, maxWidth: '22ch', fontWeight: 700 }}>
              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"
              hidden={{ source: '/demo', topic: 'Pilot inquiry', site: 'paragmatiq.com' }}
              successHeadline="Request received."
              successBody="A member of our team will be in touch within one working day to schedule a 30-minute scoping call."
            />
          </div>

          <aside>
            <SectionEyebrow text="WHAT WE'LL ASK FOR IN RETURN" />
            <h3 style={{ fontSize: 26, marginTop: 14, marginBottom: 18, maxWidth: '18ch', fontWeight: 700 }}>
              A pilot works when both sides commit.
            </h3>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7, marginBottom: 22 }}>
              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: 16, 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(10,31,68,0.14)' }}>
              <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.16em' }}>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.5, color: 'var(--ink-2)', display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ color: 'var(--gold)', fontFamily: 'var(--font-mono)' }}>›</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ marginTop: 36 }}>
              <Plate kind="topology" ratio="4/3" light tag="PILOT · ONE SITE · 60-90 DAYS" corner={['DWG-D-101', '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>
    </>
  );
}

/* =========================
   LEGAL
   ========================= */

const LEGAL = {
  privacy: {
    eyebrow: 'LEGAL · PRIVACY',
    title: <>Privacy.</>,
    intro: 'How Paragmatiq Systems Ltd handles personal data. Full policy issued at the time of pilot agreement or commercial contract.',
    sections: [
      { h: 'What we collect.', p: 'Account information you provide when contacting us or initiating a pilot, name, work email, company, country, industry. Paragmatiq\u2019s product processes operational voice data inside your perimeter; that data never reaches us.' },
      { h: 'Where it lives.',  p: 'Marketing and contact data is held in our CRM, hosted in the contracting entity\u2019s jurisdiction (Delaware, USA). Product operational data stays on your infrastructure under your control.' },
      { h: 'What we don\u2019t do.', p: 'We don\u2019t sell your data. We don\u2019t use it to train external models. We don\u2019t ship telemetry from your product deployment back to us.' },
      { h: 'Your rights.',     p: 'Access, correction, deletion, and export, as granted by GDPR, CCPA, and equivalent regimes in your jurisdiction. Email hello@paragmatiq.com.' },
    ],
  },
  terms: {
    eyebrow: 'LEGAL · TERMS',
    title: <>Terms.</>,
    intro: 'Terms of service issued by Paragmatiq Systems Ltd. Full versions provided at the time of pilot agreement or commercial contract.',
    sections: [
      { h: 'Who you are contracting with.', p: 'Paragmatiq.com customers contract with Paragmatiq Systems Ltd, governed by the laws of Delaware.' },
      { h: 'What we provide.',              p: 'Access to the Paragmatiq platform and the modules you have licensed, deployed on infrastructure you control. Support during agreed hours.' },
      { h: 'Your responsibilities.',        p: 'Operate the deployed system within applicable laws and regulations. Maintain access controls. Notify us of suspected security incidents.' },
      { h: 'Liability and termination.',    p: 'Detailed in the full agreement at the time of contract.' },
    ],
  },
  cookies: {
    eyebrow: 'LEGAL · COOKIES',
    title: <>Cookies.</>,
    intro: 'How this website handles cookies. The Paragmatiq product itself does not run in a browser session and uses no cookies.',
    sections: [
      { h: 'Strictly necessary.', p: 'A small number of cookies are used to maintain session state. These cannot be disabled.' },
      { h: 'Analytics.',          p: 'We use a privacy-preserving analytics tool (Plausible or Fathom) that does not set tracking cookies. No third-party trackers are loaded.' },
      { h: 'Marketing.',          p: 'No marketing cookies. No retargeting. No ad networks.' },
      { h: 'Changes.',            p: 'If this changes, the policy here changes first and the cookie consent banner appears before any new cookie is set.' },
    ],
  },
};

function LegalPage({ slug }) {
  useReveal();
  const l = LEGAL[slug];
  if (!l) return <StubPage path={'/legal/' + slug} />;
  return (
    <>
      <section className="on-navy hero-page">
        <div className="container">
          <div className="eyebrow on-dark"><span>{l.eyebrow}</span></div>
          <h1>{l.title}</h1>
          <p className="subhead">{l.intro}</p>
          <div className="hero-meta">
            <div className="hero-meta-cell"><span className="label">ISSUED BY</span><span className="value gold">Paragmatiq Systems Ltd</span></div>
            <div className="hero-meta-cell"><span className="label">GOVERNED BY</span><span className="value">Laws of Delaware</span></div>
            <div className="hero-meta-cell"><span className="label">CONTACT</span><span className="value">hello@paragmatiq.com</span></div>
            <div className="hero-meta-cell"><span className="label">UPDATED</span><span className="value">2026-05-19</span></div>
          </div>
        </div>
      </section>

      <section className="section on-bone">
        <div className="container" style={{ maxWidth: 920 }}>
          {l.sections.map((s, i) => (
            <div key={i} className="reveal" style={{ paddingBlock: 36, borderBottom: i < l.sections.length - 1 ? '1px solid rgba(10,31,68,0.14)' : 'none' }}>
              <h2 style={{ fontSize: 30, marginBottom: 16, letterSpacing: '-0.025em', fontWeight: 700 }}>{s.h}</h2>
              <p style={{ fontSize: 16.5, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: '64ch' }}>{s.p}</p>
            </div>
          ))}
          <p style={{ marginTop: 48, fontSize: 12, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', letterSpacing: '0.10em' }}>
            STUB POLICY · LAST UPDATED 2026-05-19 · FULL POLICY ISSUED BY PARAGMATIQ SYSTEMS LTD ON COMMERCIAL ENGAGEMENT.
          </p>
        </div>
      </section>
    </>
  );
}

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