/* =====================================================
   CORTEXA VOICE — /products/voice
   ===================================================== */

function ProductHero({ eyebrow, headline, subhead, accent, ctaPrimary, ctaSecondary, photoTag, photoCaption, photoCorner }) {
  return (
    <section className="on-dark" style={{ paddingTop: 64, 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.5 }} />
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(50% 60% at 80% 20%, ${accent}1A, transparent 70%)`, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', paddingBlock: 64 }}>
        <div className="eyebrow on-dark" style={{ color: accent }}>{eyebrow}</div>
        <h1 style={{ fontSize: 'clamp(44px, 6vw, 88px)', color: '#fff', marginTop: 24, maxWidth: '14ch', letterSpacing: '-0.03em', lineHeight: 1.0 }}>
          {headline}
        </h1>
        <p style={{ marginTop: 32, fontSize: 18, color: 'var(--slate-200)', maxWidth: '64ch', lineHeight: 1.55 }}>
          {subhead}
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Link to={ctaPrimary.to} className="btn btn-primary">{ctaPrimary.label} <span className="arrow">→</span></Link>
          <Link to={ctaSecondary.to} className="btn btn-ghost-dark">{ctaSecondary.label} <span className="arrow">→</span></Link>
        </div>

        <div style={{ marginTop: 72 }}>
          <PhotoSlot
            ratio="21/9"
            src="assets/voice-hero.png"
            alt="Industrial control room with a PTT base station radio prominent in the foreground, multiple monitors behind showing operations dashboards, operator in profile mid-conversation with a headset."
            tag={photoTag}
            corner={photoCorner}
          />
        </div>
      </div>
    </section>
  );
}

function VoicePage() {
  useReveal();
  const blocks = [
    {
      n: '01', title: 'Live operations view',
      body: 'A real-time view of every active channel, who’s talking, in which language, and what monitors are watching. Control-room operators get the operational picture without leaving the page.',
      tag: 'CONTROL DESK · MULTI-MONITOR', visual: 'feed',
    },
    {
      n: '02', title: 'Conversation threading',
      body: 'Fragmented PTT transmissions are automatically grouped into the conversations they belong to — by speaker, channel, and timing — so safety and operations teams see coherent operational events instead of disconnected clips.',
      tag: 'THREAD ILLUSTRATION', visual: 'threads',
    },
    {
      n: '03', title: 'Multilingual transcription',
      body: 'Every transmission is transcribed in the language being spoken, with automatic detection across six languages. Channels can be pinned to specific crews when accents or noise demand it.',
      tag: 'EN · AR · ES · FR · NL · DE', visual: 'langs',
    },
    {
      n: '04', title: 'Knowledge & entity recognition',
      body: 'Equipment names, procedures, and team callsigns are recognised in context. Voice connects what people say to what they’re talking about — the asset, the location, the procedure — so every conversation arrives with meaning, not just words.',
      tag: 'TOOL BELT · EQUIPMENT TAG', visual: 'entities',
    },
  ];

  const usecases = [
    { head: 'Search every conversation that ever happened on your radios.', to: '/solutions/multilingual-operations', label: 'Multilingual Field Operations' },
    { head: 'Reconstruct any incident, end to end.', to: '/solutions/incident-detection', label: 'Incident Detection & Reconstruction' },
    { head: 'One operational record of truth across multilingual crews.', to: '/solutions/multilingual-operations', label: 'Multilingual Field Operations' },
  ];

  return (
    <>
      <ProductHero
        eyebrow="CORTEXA VOICE — THE FOUNDATION MODULE"
        accent="#E6E8EC"
        headline={<>Your radios become <em style={{ fontStyle: 'normal', color: 'var(--amber)' }}>structured data</em>.</>}
        subhead="Cortexa Voice captures every PTT and PMR transmission across every channel, transcribes it in the language being spoken, threads fragmented messages into coherent conversations, and recognises the operators, equipment, and procedures being referred to. It's the foundation every other Cortexa module stands on."
        ctaPrimary={{ label: 'Request a Pilot', to: '/demo' }}
        ctaSecondary={{ label: 'See Cortexa Understanding', to: '/platform/understanding' }}
        photoTag="HERO · CONTROL ROOM, ACTIVITY FEED"
        photoCaption="Wide environmental shot. PTT base station + real-time feed display. Cool fluorescent. 21:9."
        photoCorner={['', 'VOICE / HERO']}
      />

      {/* What Voice does */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container">
          <SectionHead
            num="5.2"
            eyebrow="WHAT VOICE DOES"
            headline={<>Captured. Threaded. Translated. <span style={{ color: 'var(--ink-3)' }}>Understood.</span></>}
            sideNote="Four foundation capabilities run continuously on every channel. Everything else in the Cortexa portfolio is built on top."
          />

          <div className="voice-blocks">
            {blocks.map((b, i) => (
              <div key={b.n} className={'voice-block reveal ' + (i % 2 === 1 ? 'reverse' : '')}>
                <div className="voice-block-copy">
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--teal)', letterSpacing: '0.14em' }}>{b.n}</span>
                  <h3>{b.title}</h3>
                  <p>{b.body}</p>
                </div>
                <div className="voice-block-visual">
                  {b.visual === 'feed' && <FeedVisual />}
                  {b.visual === 'threads' && <ThreadsVisual />}
                  {b.visual === 'langs' && <LangsVisual />}
                  {b.visual === 'entities' && (
                    <PhotoSlot ratio="4/3" src="assets/voice-entities.png" alt="Close-up of a worker's chest harness showing a labelled Motorola radio reading UNIT 7 CHANNEL 4, a handwritten equipment tag reading CALIBRATE 289 OK 10/12/23 4B, gloves, multitool, and hi-vis vest." tag={b.tag} corner={['', b.n + ' / 04']} />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          .voice-blocks { display: flex; flex-direction: column; gap: 96px; }
          .voice-block {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 64px;
            align-items: center;
          }
          .voice-block.reverse { grid-template-columns: 1.1fr 1fr; }
          .voice-block.reverse .voice-block-copy { order: 2; }
          .voice-block-copy h3 {
            font-size: clamp(28px, 3vw, 40px);
            font-weight: 500;
            letter-spacing: -0.02em;
            margin-top: 18px;
            margin-bottom: 20px;
            max-width: 18ch;
          }
          .voice-block-copy p {
            font-size: 16px;
            color: var(--ink-2);
            max-width: 48ch;
            line-height: 1.6;
          }
          @media (max-width: 980px) {
            .voice-block, .voice-block.reverse { grid-template-columns: 1fr; gap: 32px; }
            .voice-block.reverse .voice-block-copy { order: 0; }
          }
        `}</style>
      </section>

      {/* Use cases */}
      <section className="section-sm" style={{ background: 'var(--warm-white-2)', borderTop: '1px solid rgba(27,35,48,0.10)' }}>
        <div className="container">
          <SectionEyebrow num="5.3" text="WHAT YOU CAN DO WITH VOICE" />
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', marginTop: 18, marginBottom: 48, maxWidth: '28ch' }}>
            Three outcomes most teams discover in the first month.
          </h2>

          <div className="usecase-list">
            {usecases.map((u, i) => (
              <Link key={i} to={u.to} className="usecase-row reveal">
                <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>{String(i+1).padStart(2,'0')}</span>
                <h4>{u.head}</h4>
                <span className="usecase-link">{u.label} →</span>
              </Link>
            ))}
          </div>
        </div>

        <style>{`
          .usecase-list { display: flex; flex-direction: column; border-top: 1px solid rgba(27,35,48,0.12); }
          .usecase-row {
            display: grid;
            grid-template-columns: 60px 1fr auto;
            gap: 32px;
            align-items: center;
            padding: 32px 0;
            border-bottom: 1px solid rgba(27,35,48,0.12);
            transition: padding 0.18s ease, background 0.18s ease;
            color: var(--ink);
          }
          .usecase-row:hover { padding-left: 16px; background: rgba(27,35,48,0.02); }
          .usecase-row h4 {
            font-family: var(--font-display);
            font-size: clamp(20px, 2.4vw, 28px);
            font-weight: 500;
            letter-spacing: -0.015em;
          }
          .usecase-link {
            font-size: 13px;
            color: var(--teal);
            font-family: var(--font-mono);
            letter-spacing: 0.06em;
            text-transform: uppercase;
          }
          @media (max-width: 720px) {
            .usecase-row { grid-template-columns: 1fr; gap: 8px; }
          }
        `}</style>
      </section>

      <CrossLinkBand
        title="Voice is built on Cortexa Understanding."
        body="The intelligence layer that handles your industry vocabulary, your company-specific terms, six languages, and the messy reality of radio noise. Six promises behind every alert."
        links={[
          { label: 'Cortexa Understanding', to: '/platform/understanding' },
          { label: 'Cortexa Safe', to: '/products/safe' },
          { label: 'Cortexa Ops', to: '/products/ops' },
          { label: 'Cortexa Signal', to: '/products/signal' },
        ]}
      />

      <ClosingCTA
        headline="Make your radios speak in structured data."
        subhead="Start with a scoped pilot on a single site. We'll meet your radio environment, your languages, and your vocabulary where they are."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* ---------- Small inline visuals for Voice blocks ---------- */
function FeedVisual() {
  return (
    <div style={{
      background: 'var(--slate-800)',
      border: '1px solid rgba(27,35,48,0.18)',
      padding: 18,
      aspectRatio: '4/3',
      display: 'flex',
      flexDirection: 'column',
      gap: 10,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 10, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span className="font-mono" style={{ fontSize: 10, color: 'var(--slate-300)', letterSpacing: '0.14em' }}>● LIVE — 14 CHANNELS</span>
        <span className="font-mono" style={{ fontSize: 10, color: 'var(--slate-400)' }}>14:02:08</span>
      </div>
      {[
        { ch: 'CH-01', lang: 'EN', text: 'Unit 4 valve check complete, returning to position.', kind: 'voice' },
        { ch: 'CH-02', lang: 'ES', text: 'Permiso 8841 cerrado, copia recibida.', kind: 'ops' },
        { ch: 'CH-07', lang: 'EN', text: 'Smell of gas, tank farm B north side.', kind: 'safe' },
        { ch: 'CH-03', lang: 'AR', text: '\u062a\u0645 \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u0627\u0631\u0633.', kind: 'signal' },
        { ch: 'CH-11', lang: 'FR', text: 'Équipe de nuit prête, attente du briefing.', kind: 'voice' },
      ].map((r, i) => {
        const c = r.kind === 'safe' ? 'var(--coral)' : r.kind === 'ops' ? 'var(--teal)' : r.kind === 'signal' ? 'var(--amber)' : 'var(--slate-400)';
        return (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '3px 56px 1fr 30px', gap: 10, alignItems: 'center', padding: '6px 0' }}>
            <span style={{ height: 18, background: c }} />
            <span className="font-mono" style={{ fontSize: 10, color: 'var(--slate-300)' }}>{r.ch}</span>
            <span style={{ fontSize: 12, color: 'var(--slate-200)', fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>"{r.text}"</span>
            <span className="font-mono" style={{ fontSize: 9.5, color: 'var(--slate-400)', textAlign: 'right' }}>{r.lang}</span>
          </div>
        );
      })}
      <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <span className="font-mono" style={{ fontSize: 10, color: 'var(--slate-400)' }}>5 / 14 SHOWN</span>
        <span className="font-mono" style={{ fontSize: 10, color: 'var(--teal)' }}>↗ open feed</span>
      </div>
    </div>
  );
}

function ThreadsVisual() {
  return (
    <div style={{ background: 'var(--warm-white-2)', border: '1px solid rgba(27,35,48,0.10)', padding: 24, aspectRatio: '4/3' }}>
      <span className="font-mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>THREAD #02-1183 · CH-07 · 02:14:08 — 02:15:02</span>
      <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { who: 'OP-414', when: '14:08', text: 'Strong smell of gas near tank farm B.' },
          { who: 'SUP-02', when: '14:11', text: 'Confirmed. Pausing hot work on Unit 4.' },
          { who: 'OP-411', when: '14:14', text: 'Hot work paused. Awaiting investigation.' },
          { who: 'OP-309', when: '15:02', text: 'Two additional crew dispatched.' },
        ].map((m, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: 14 }}>
            <div className="font-mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>
              <div>{m.when}</div>
              <div style={{ marginTop: 2 }}>{m.who}</div>
            </div>
            <div style={{ background: 'var(--warm-white)', border: '1px solid rgba(27,35,48,0.08)', padding: '10px 14px', fontSize: 13, fontStyle: 'italic', color: 'var(--ink-2)' }}>
              "{m.text}"
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function LangsVisual() {
  return (
    <div style={{ background: 'var(--slate-800)', padding: 32, aspectRatio: '4/3', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
      <span className="font-mono" style={{ fontSize: 10, color: 'var(--slate-400)', letterSpacing: '0.14em' }}>SIX LANGUAGES · AUTO-DETECT</span>
      <svg viewBox="0 0 400 80" preserveAspectRatio="none" style={{ width: '100%', height: 80, opacity: 0.6 }}>
        <path d="M0 40 Q 25 8 50 40 Q 75 72 100 40 Q 125 12 150 40 Q 175 64 200 40 Q 225 16 250 40 Q 275 60 300 40 Q 325 20 350 40 Q 375 56 400 40" stroke="#F2A04B" strokeWidth="1.4" fill="none"/>
      </svg>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
        {[
          { c: 'EN', n: 'English' },
          { c: 'AR', n: 'العربية' },
          { c: 'ES', n: 'Español' },
          { c: 'FR', n: 'Français' },
          { c: 'NL', n: 'Nederlands' },
          { c: 'DE', n: 'Deutsch' },
        ].map((l) => (
          <div key={l.c} style={{ border: '1px solid rgba(255,255,255,0.14)', padding: '10px 8px', textAlign: 'center' }}>
            <div className="font-mono" style={{ fontSize: 14, color: '#fff', letterSpacing: '0.08em' }}>{l.c}</div>
            <div style={{ fontSize: 10, color: 'var(--slate-300)', marginTop: 4 }}>{l.n}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { VoicePage, ProductHero, FeedVisual, ThreadsVisual, LangsVisual });