/* =====================================================
   HOW CORTEXA UNDERSTANDS — /platform/understanding
   The trust pillar. Six promises.
   ===================================================== */

const PROMISES = [
  {
    n: '01',
    title: 'It speaks your industry.',
    body: 'Permit-to-work, lockout-tagout, hot work, confined-space, hazardous-substance vocabulary — recognised on day one across every supported language. The vocabulary of industrial safety isn’t something we add later; it’s the language the system was built for.',
    outcome: 'Industry terminology works from the first transmission — across every supported language.',
    tag: 'PERMIT-TO-WORK BOARD',
    src: 'assets/promise-01-permit.png',
  },
  {
    n: '02',
    title: 'It learns your company’s vocabulary.',
    body: 'Your equipment IDs, your callsigns, your team names, your operator accents — the system adapts to how your site actually speaks. No manual tagging. No spreadsheets of synonyms. The longer it runs in your environment, the sharper it gets.',
    outcome: 'Your terminology, your callsigns, your accent — all recognised correctly, with no manual tagging required.',
    tag: 'EQUIPMENT ID TAG · STENCILED',
    src: 'assets/promise-02-equipment.png',
  },
  {
    n: '03',
    title: 'Multilingual, automatically.',
    body: 'English, Arabic, Spanish, French, Dutch, German — detected automatically on every transmission. Channels can be pinned to specific crews when accents or noise demand it. Mixed-language utterances are handled natively.',
    outcome: 'Six languages today, more added without taking the system offline.',
    tag: 'EN · AR · ES · FR · NL · DE',
    isLangs: true,
  },
  {
    n: '04',
    title: 'It corrects itself before it acts.',
    body: 'Industrial radio is messy: similar-sounding callsigns, accented vowels, broken transmissions, character ambiguity in Arabic and other non-Latin scripts. Cortexa cross-checks every interpretation against context — speaker, channel, procedure, recent traffic — and refuses to act on low-confidence reads.',
    outcome: 'Fewer false positives, higher confidence on the alerts you do see.',
    tag: 'AMBIGUITY → RESOLUTION',
    src: 'assets/promise-04-correction.png',
  },
  {
    n: '05',
    title: 'Grounded in what was actually said.',
    body: 'Every alert points back to the exact transmission that triggered it — speaker, channel, timestamp, audio, transcript. If the platform can’t cite the moment, the alert doesn’t fire. Supervisors can play back any decision in seconds.',
    outcome: 'No hallucinated incidents. Every alert backed by playable, citable evidence.',
    tag: 'EVIDENCE FOLDER · STILL LIFE',
    src: 'assets/promise-05-evidence.png',
  },
  {
    n: '06',
    title: 'Every correction logged. Every review counts.',
    body: 'When a supervisor confirms, dismisses, or re-routes a detection, that decision feeds back into the system’s precision for your site — auditable, attributed, and reversible. The platform that ships on day one is not the platform you run on day thirty.',
    outcome: 'You can audit what changed. The system gets sharper the longer it runs.',
    tag: 'SUPERVISOR · REVIEW SCREEN',
    src: 'assets/promise-06-supervisor.png',
  },
];

function UnderstandingPage() {
  useReveal();
  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 75% 25%, rgba(46,125,122,0.16), transparent 70%)' }} />
        <div className="container" style={{ position: 'relative' }}>
          <SectionEyebrow text="THE INTELLIGENCE LAYER" onDark />
          <h1 style={{ fontSize: 'clamp(52px, 7.5vw, 120px)', color: '#fff', marginTop: 28, maxWidth: '12ch', letterSpacing: '-0.035em', lineHeight: 0.96, fontFamily: 'var(--font-display)', fontWeight: 500 }}>
            How Cortexa<br/><span style={{ color: 'var(--teal)' }}>Understands.</span>
          </h1>
          <p style={{ marginTop: 36, fontSize: 19, color: 'var(--slate-200)', maxWidth: '54ch', lineHeight: 1.55 }}>
            The intelligence behind every Cortexa module — Voice, Safe, Ops, and Signal.
          </p>
          <p style={{ marginTop: 24, fontSize: 16, color: 'var(--slate-300)', maxWidth: '64ch', lineHeight: 1.65 }}>
            Most voice-AI products fail in the field for the same reasons: accents, jargon, equipment names the system has never heard, multilingual crews, noisy channels, and casual phrasing. Cortexa Understanding is the intelligence layer beneath every module — and it is what makes them work in your environment, not in a lab. It learns your vocabulary, speaks your languages, corrects itself before mistakes reach you, and shows its working so you can verify every conclusion it draws.
          </p>

          {/* Wide cinematic banner — gloved hand on PTT, mid-transmission */}
          <div style={{ marginTop: 56 }}>
            <PhotoSlot
              ratio="21/9"
              src="assets/understanding-hero.png"
              alt="Close-up of a gloved hand wrapped around a Motorola PTT handset, finger pressed on the press-to-talk key, channel indicator showing CH 12 TX, industrial background out of focus with amber warning light bleed."
              tag="WHAT THE PLATFORM ACTUALLY LISTENS TO"
              corner={['', 'CH 12 · TX']}
            />
          </div>

          {/* Index */}
          <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--slate-400)', letterSpacing: '0.14em' }}>SIX PROMISES · INDEX</span>
            <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.06)' }}>
              {PROMISES.map((p) => (
                <div key={p.n} style={{ background: 'var(--slate-800)', padding: '20px 24px' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--slate-100)', marginTop: 8, letterSpacing: '-0.01em' }}>{p.title}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* THE SIX PROMISES */}
      <section style={{ background: 'var(--warm-white)' }}>
        {PROMISES.map((p, i) => (
          <div key={p.n} id={`promise-${p.n}`} className="promise-row" style={{ background: i % 2 === 0 ? 'var(--warm-white)' : 'var(--warm-white-2)' }}>
            <div className="container">
              <div className={'promise-grid ' + (i % 2 === 1 ? 'reverse' : '')}>
                <div className="promise-copy reveal">
                  <h2 style={{ fontSize: 'clamp(34px, 4vw, 52px)', marginTop: 0, maxWidth: '16ch', letterSpacing: '-0.025em' }}>
                    {p.title}
                  </h2>
                  <p style={{ marginTop: 24, fontSize: 17, color: 'var(--ink-2)', maxWidth: '50ch', lineHeight: 1.6 }}>
                    {p.body}
                  </p>
                  <div className="outcome-card">
                    <span className="font-mono" style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>OUTCOME</span>
                    <p style={{ marginTop: 8, fontSize: 16, color: 'var(--ink)', fontStyle: 'italic', fontWeight: 500 }}>
                      {p.outcome}
                    </p>
                  </div>
                </div>
                <div className="promise-visual reveal">
                  {p.isLangs ? <LangsVisual /> : (
                    <PhotoSlot
                      ratio="4/3"
                      src={p.src}
                      light={i % 2 === 1}
                      tag={p.tag}
                      corner={['', p.n + ' / 06']}
                    />
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}

        <style>{`
          .promise-row {
            padding-block: 96px;
            border-top: 1px solid rgba(27,35,48,0.10);
          }
          .promise-grid {
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            gap: 80px;
            align-items: center;
          }
          .promise-grid.reverse { grid-template-columns: 1fr 1.05fr; }
          .promise-grid.reverse .promise-copy { order: 2; }
          .outcome-card {
            margin-top: 36px;
            padding: 22px 24px;
            border-left: 3px solid var(--teal);
            background: rgba(46,125,122,0.05);
            max-width: 56ch;
          }
          @media (max-width: 980px) {
            .promise-grid, .promise-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
            .promise-grid.reverse .promise-copy { order: 0; }
            .promise-row { padding-block: 56px; }
          }
        `}</style>
      </section>

      {/* CLOSING */}
      <section className="on-dark section">
        <div className="container" style={{ textAlign: 'center', maxWidth: 880 }}>
          <SectionEyebrow text="UNDERNEATH EVERY MODULE" onDark />
          <h2 style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', color: '#fff', marginTop: 20, maxWidth: '22ch', marginInline: 'auto' }}>
            Cortexa Understanding runs underneath every module.
          </h2>
          <p style={{ marginTop: 24, fontSize: 17, color: 'var(--slate-200)', maxWidth: '64ch', marginInline: 'auto', lineHeight: 1.6 }}>
            You don’t configure it. You don’t buy it separately. It’s the engine that makes the platform work in your environment from day one.
          </p>

          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.08)' }}>
            {[
              { name: 'Cortexa Voice', to: '/products/voice' },
              { name: 'Cortexa Safe', to: '/products/safe' },
              { name: 'Cortexa Ops', to: '/products/ops' },
              { name: 'Cortexa Signal', to: '/products/signal' },
            ].map((m) => (
              <Link key={m.name} to={m.to} className="under-mod">
                <span>{m.name}</span>
                <span style={{ color: 'var(--amber)' }}>→</span>
              </Link>
            ))}
          </div>
        </div>

        <style>{`
          .under-mod {
            background: var(--slate-800);
            padding: 28px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--font-display);
            font-size: 17px;
            color: #fff;
            letter-spacing: -0.01em;
            transition: background 0.15s;
          }
          .under-mod:hover { background: var(--slate-700); }
          @media (max-width: 720px) {
            .promise-row { padding-block: 56px; }
            section.on-dark.section .under-mod { font-size: 15px; }
            section.on-dark.section [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </section>

      <ClosingCTA
        headline="Put Cortexa Understanding to work."
        subhead="Bring a recording from your operation. We'll show you what the platform recognises on day one — in your vocabulary, in your languages, at your accent."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

Object.assign(window, { UnderstandingPage });