// Direction 3 — Cinematic Operator
// Near-black product-led, sparse technical, terminal/mono accents, vibrant teal.
// Supports a light "day" mode that mutates `cinematicTheme` in place before each render
// so existing `const c = cinematicTheme` references still work.

const cinematicDark = {
  bg: '#06090F',
  panel: '#0B111A',
  panelAlt: '#0F1623',
  line: '#1B2535',
  lineSoft: 'rgba(255,255,255,0.08)',
  text: '#E2E8F0',
  textDim: '#94A3B8',
  muted: '#64748B',
  gold: '#D4B36A',
  teal: '#2DD4BF',
  tealDim: '#0F766E',
  signal: '#84CC16',
  navBg: 'rgba(6,9,15,0.82)',
  ctaText: '#04201E',
  shadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(45,212,191,0.05)',
  gridLine: '#1B2535',
  warn: '#F87171'
};

const cinematicLight = {
  bg: '#F7F8FB',
  panel: '#FFFFFF',
  panelAlt: '#F1F4F8',
  line: '#DCE2EA',
  lineSoft: 'rgba(11,17,26,0.08)',
  text: '#0B111A',
  textDim: '#475569',
  muted: '#94A3B8',
  gold: '#A87E1B',
  teal: '#0D9488',
  tealDim: '#CCFBF1',
  signal: '#65A30D',
  navBg: 'rgba(255,255,255,0.82)',
  ctaText: '#FFFFFF',
  shadow: '0 24px 60px rgba(15,23,42,0.12), 0 0 0 1px rgba(13,148,136,0.08)',
  gridLine: '#E6EAF0',
  warn: '#DC2626'
};

const cinematicTheme = { ...cinematicDark };
function setCinematicMode(mode) {
  Object.assign(cinematicTheme, mode === 'light' ? cinematicLight : cinematicDark);
}

function CinematicShell({ children, page, setPage, tagline, mode, setMode }) {
  setCinematicMode(mode);
  return (
    <div style={{
      minHeight: '100vh',
      background: cinematicTheme.bg,
      color: cinematicTheme.text,
      fontFamily: '"Inter", system-ui, sans-serif',
      fontSize: 14,
      lineHeight: 1.55
    }}>
      <CinematicNav page={page} setPage={setPage} mode={mode} setMode={setMode} />
      {children}
      <CinematicFooter tagline={tagline} />
    </div>);

}

function NavikaWordmark() {
  return (
    <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>
      Nāvika<span style={{ color: cinematicTheme.muted, fontWeight: 400, marginLeft: 8, fontSize: 12 }}>
        a PortCall<span style={{ color: cinematicTheme.teal }}>.ai</span> company
      </span>
    </span>);

}

function CinematicThemeToggle({ mode, setMode }) {
  const next = mode === 'light' ? 'dark' : 'light';
  return (
    <button
      onClick={() => setMode(next)}
      aria-label={`Switch to ${next} mode`}
      title={`Switch to ${next} mode`}
      style={{
        background: 'transparent',
        border: `1px solid ${cinematicTheme.line}`,
        color: cinematicTheme.textDim,
        width: 34, height: 34,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', padding: 0
      }}>
      {mode === 'light' ?
      // moon (currently light, click to go dark)
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
        </svg> :

      // sun (currently dark, click to go light)
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4" />
          <line x1="12" y1="2" x2="12" y2="4" />
          <line x1="12" y1="20" x2="12" y2="22" />
          <line x1="4.93" y1="4.93" x2="6.34" y2="6.34" />
          <line x1="17.66" y1="17.66" x2="19.07" y2="19.07" />
          <line x1="2" y1="12" x2="4" y2="12" />
          <line x1="20" y1="12" x2="22" y2="12" />
          <line x1="4.93" y1="19.07" x2="6.34" y2="17.66" />
          <line x1="17.66" y1="6.34" x2="19.07" y2="4.93" />
        </svg>
      }
    </button>);

}

function CinematicNav({ page, setPage, mode, setMode }) {
  const marketing = [
  { id: 'home', label: 'Product' },
  { id: 'contact', label: 'Contact' }];

  const items = marketing;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: cinematicTheme.navBg,
      backdropFilter: 'blur(20px)',
      borderBottom: `1px solid ${cinematicTheme.line}`
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '16px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <button onClick={() => setPage('home')} style={{
          background: 'none', border: 0, padding: 0, cursor: 'pointer',
          color: cinematicTheme.text, display: 'flex', alignItems: 'center', gap: 10
        }}>
          <span style={{ color: cinematicTheme.teal }}>
            <TridentMark size={22} stroke={1.6} />
          </span>
          <NavikaWordmark />
        </button>
        <nav style={{ display: 'flex', gap: 4, alignItems: 'center',
          background: cinematicTheme.panel, border: `1px solid ${cinematicTheme.line}`,
          padding: 4 }}>
          {items.map((i) =>
          <button key={i.id} onClick={() => setPage(i.id)} style={{
            background: page === i.id ? cinematicTheme.panelAlt : 'transparent',
            border: 0, padding: '7px 14px', cursor: 'pointer',
            color: page === i.id ? cinematicTheme.text : cinematicTheme.textDim,
            fontSize: 13, fontWeight: 500
          }}>{i.label}</button>
          )}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <CinematicThemeToggle mode={mode} setMode={setMode} />
          <button onClick={() => setPage('contact')} style={{
            background: cinematicTheme.teal, color: cinematicTheme.ctaText, border: 0,
            padding: '8px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
            whiteSpace: 'nowrap'
          }}>Book a demo →</button>
        </div>
      </div>
    </header>);

}

function CinematicFooter({ tagline }) {
  return (
    <footer style={{ background: cinematicTheme.panel, marginTop: 80,
      borderTop: `1px solid ${cinematicTheme.line}` }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '56px 32px 36px',
        display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <span style={{ color: cinematicTheme.teal }}><TridentMark size={22} stroke={1.6} /></span>
            <span style={{ fontSize: 18, fontWeight: 600 }}>Nāvika</span>
          </div>
          <p style={{ fontSize: 14, color: cinematicTheme.textDim, lineHeight: 1.55,
            margin: 0, maxWidth: 340 }}>
            The complete platform for modern pilotage — passage planning,
            movements scheduling, and crew competency in one connected system.
          </p>
        </div>
        {[
        { h: 'Modules', items: ['Pilotage Planning', 'Movements Scheduling', 'Crew & Competency', 'The Unified Portal'] },
        { h: 'Site', items: ['Product', 'Contact', { label: 'PortCall.ai ↗', href: 'https://portcall.ai' }] },
        { h: 'Company', items: [
          { label: 'info@portcall.ai', href: 'mailto:info@portcall.ai' },
          { label: '+61 427 824 875', href: 'tel:+61427824875' },
          'Melbourne · Singapore',
        ] }].
        map((col) =>
        <div key={col.h}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: cinematicTheme.teal, marginBottom: 16 }}>{col.h}</div>
            {col.items.map((i) => {
              const isLink = typeof i === 'object';
              const label = isLink ? i.label : i;
              return isLink ?
                <a key={label} href={i.href} target={i.href.startsWith('http') ? '_blank' : undefined}
                   rel={i.href.startsWith('http') ? 'noopener' : undefined}
                   style={{ color: cinematicTheme.textDim, padding: '4px 0', fontSize: 13,
                             display: 'block', textDecoration: 'none' }}>{label}</a> :
                <div key={label} style={{ color: cinematicTheme.textDim, padding: '4px 0', fontSize: 13 }}>{label}</div>;
            })}
          </div>
        )}
      </div>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '16px 32px 28px',
        display: 'flex', justifyContent: 'space-between',
        borderTop: `1px solid ${cinematicTheme.line}`,
        color: cinematicTheme.muted, fontSize: 11,
        fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.04em'
      }}>
        <span>© 2026 PORTCALL.AI · MARITIME INTELLIGENCE</span>
        <span style={{ color: cinematicTheme.gold }}>NĀVIKA — A PORTCALL.AI COMPANY</span>
      </div>
    </footer>);

}

function CinematicNavika({ setPage }) {
  const c = cinematicTheme;
  return (
    <main>
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden',
        borderBottom: `1px solid ${c.line}` }}>
        <CinematicGridBg />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto',
          padding: '88px 32px 56px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24, flexWrap: 'wrap' }}>
            <span style={{ color: c.teal }}><TridentMark size={28} stroke={1.6} /></span>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.08em', color: c.teal }}>
              PRODUCT / NĀVIKA / PILOTAGE PLATFORM
            </span>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: '0.08em', color: c.signal,
              border: `1px solid ${c.line}`, padding: '4px 9px' }}>
              ● LIVE BETA · PORTS OF MELBOURNE &amp; GEELONG
            </span>
          </div>
          <h1 style={{ ...cinDisplay(72), letterSpacing: '-0.025em', maxWidth: 1100 }}>
            The complete platform for{' '}
            <span style={{ color: c.teal }}>modern pilotage.</span>
          </h1>
          <p style={{ fontSize: 19, color: c.textDim, lineHeight: 1.55,
            marginTop: 24, marginBottom: 32, maxWidth: 880 }}>
            Nāvika brings every part of a pilotage operation into one connected platform — passage
            planning, vessel movements, and crew competency. Built by pilots, for pilots, it replaces
            paper plans, spreadsheets and disconnected tools with a single, fast, browser-based system
            that works at the berth, on the bridge, and everywhere in between — online or off.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={() => setPage('contact')} style={ctaPrimary()}>Book a demo →</button>
            <button onClick={() => {
              document.getElementById('navika-modules')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }} style={ctaGhost()}>See the modules</button>
          </div>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 18, maxWidth: 880 }}>
            {[
            ['Works offline', 'on the bridge, even when the signal drops'],
            ['Browser-based', 'no apps, no installs, no rollout'],
            ['Built by pilots', 'for the realities of pilotage'],
            ['1,000+ vessels', 'on tap, growing with every job']].
            map(([n, l]) =>
            <div key={n} style={{ borderTop: `1px solid ${c.line}`, paddingTop: 12 }}>
                <div style={{ fontSize: 17, fontWeight: 600, color: c.text }}>{n}</div>
                <div style={{ fontSize: 11, color: c.muted,
                fontFamily: '"JetBrains Mono", monospace',
                letterSpacing: '0.04em', marginTop: 4, lineHeight: 1.5 }}>{l}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section style={{ padding: '88px 32px', maxWidth: 1320, margin: '0 auto' }}>
        <CinematicEyebrow label="The problem we solve" />
        <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1.4fr',
          gap: 56, alignItems: 'start' }}>
          <h2 style={cinDisplay(40)}>
            Critical information,<br />
            <span style={{ color: c.teal }}>Consolidated.</span>
          </h2>
          <div>
            <p style={{ fontSize: 18, color: c.textDim, lineHeight: 1.6, margin: 0 }}>Pilotage runs on critical information that's scattered across paper charts or ECDIS, vessel files, tide tables, spreadsheets and email. Every passage means reassembling it by hand — and every gap is a risk.



            </p>
            <p style={{ fontSize: 18, color: c.text, lineHeight: 1.6, marginTop: 18, marginBottom: 0 }}>
              Nāvika consolidates it: the vessel's particulars, the tides, the under-keel clearance,
              the chart, the checklist and the sign-off — all in one place, all current, all to hand
              when the pilot needs them.
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 0, border: `1px solid ${c.line}`,
              background: c.panel }}>
              {[
              ['Paper', 'charts & plans'],
              ['Files', 'vessel particulars'],
              ['Tables', 'tide predictions'],
              ['Sheets', 'UKC, tugs, billing'],
              ['Email', 'master-pilot exchange']].
              map(([h, d], i) =>
              <div key={h} style={{ flex: 1, padding: '14px 14px',
                borderRight: i < 4 ? `1px solid ${c.line}` : 'none' }}>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                  letterSpacing: '0.08em', color: c.muted,
                  textDecoration: 'line-through' }}>{h.toUpperCase()}</div>
                  <div style={{ fontSize: 12, color: c.textDim, marginTop: 4 }}>{d}</div>
                </div>
              )}
            </div>
            <div style={{ marginTop: 14, fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              color: c.teal, letterSpacing: '0.06em' }}>
              → ONE CONNECTED PLATFORM
            </div>
          </div>
        </div>
      </section>

      {/* DATA-ASSEMBLED · OCEANS-X */}
      <section style={{ padding: '88px 32px', maxWidth: 1320, margin: '0 auto' }}>
        <CinematicEyebrow label="Built on the port's own data" />
        <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1.4fr 1fr',
          gap: 56, alignItems: 'start' }}>
          <div>
            <h2 style={cinDisplay(40)}>
              The plan assembles itself{' '}
              <span style={{ color: c.teal }}>from the feeds a port already publishes.</span>
            </h2>
            <p style={{ fontSize: 18, color: c.textDim, lineHeight: 1.6, marginTop: 22 }}>
              Increasingly the data a pilot needs is already digital. Nāvika is a native consumer of
              Singapore's <strong style={{ color: c.text }}>MPA OCEANS-X</strong> data platform — vessel
              particulars, arrival and departure declarations, port-clearance certificates, live weather
              and AIS position flow straight into the plan, with no re-keying of data the port already holds.
            </p>
            <p style={{ fontSize: 18, color: c.text, lineHeight: 1.6, marginTop: 16, marginBottom: 0 }}>
              From those declarations Nāvika assembles a <strong>pre-boarding brief</strong> — the vessel,
              the movement and the clearances, ready before the pilot steps aboard. It complements the
              agent-and-master ordering workflow rather than replacing it.
            </p>
            <div style={{ marginTop: 24, fontFamily: '"JetBrains Mono", monospace', fontSize: 12,
              color: c.teal, letterSpacing: '0.06em' }}>
              → ONE INTEGRATION · THE WHOLE SUITE LIGHTS UP
            </div>
          </div>
          <div style={{ background: c.panel, border: `1px solid ${c.line}` }}>
            <div style={{ padding: '12px 16px', borderBottom: `1px solid ${c.line}`,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: '0.08em', color: c.muted }}>
              <span>OCEANS-X · LIVE SURFACES</span>
              <span style={{ color: c.signal }}>● 12 ACROSS 4 APPS</span>
            </div>
            {[
            ['MPX', 'Particulars · weather · pre-boarding brief · AIS position'],
            ['OPS', 'Due to arrive · due to depart · clearance light · traffic'],
            ['e-CHIT', 'Particulars enrichment · clearance line'],
            ['Portal', 'Live port-traffic tile']].
            map(([app, desc], i) =>
            <div key={app} style={{ padding: '14px 16px',
              borderBottom: i < 3 ? `1px solid ${c.line}` : 'none' }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: c.text }}>{app}</div>
                <div style={{ fontSize: 12, color: c.textDim, marginTop: 3, lineHeight: 1.5 }}>{desc}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* MODULES OVERVIEW */}
      <section id="navika-modules" style={{ background: c.panel,
        borderTop: `1px solid ${c.line}`,
        borderBottom: `1px solid ${c.line}`,
        padding: '88px 32px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <CinematicEyebrow label="The platform · four modules, one record" />
          <h2 style={{ ...cinDisplay(40), marginTop: 24, marginBottom: 40, maxWidth: 800 }}>
            Pilotage planning, movements scheduling, crew & competency — under one portal.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {[
            { n: '01', code: 'MPX', name: 'Pilotage Planning',
              desc: 'Every passage, fully planned — in minutes, not hours.',
              anchor: 'mod-empx', live: true },
            { n: '02', code: 'Allocations', name: 'Movements Scheduling',
              desc: 'See every movement, allocate with clarity.',
              anchor: 'mod-allocops' },
            { n: '03', code: 'Crew', name: 'Crew & Competency',
              desc: 'The right pilot, qualified and available.',
              anchor: 'mod-crewops' },
            { n: '04', code: 'Portal', name: 'The Unified Portal',
              desc: 'One sign-in. The whole operation.',
              anchor: 'mod-portal' }].
            map((m) =>
            <button key={m.code} onClick={() => {
              document.getElementById(m.anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }} style={{
              textAlign: 'left', cursor: 'pointer',
              padding: '24px 22px',
              border: `1px solid ${m.live ? c.teal : c.line}`,
              background: m.live ? c.panelAlt : c.bg,
              color: c.text, fontFamily: 'inherit',
              position: 'relative'
            }}>
                {<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: 2,
                background: m.live ? c.teal : 'transparent' }} />}
                <div style={{ display: 'flex', justifyContent: 'space-between',
                fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                color: c.muted, letterSpacing: '0.06em', textAlign: "left" }}>
                  <span>{m.n}</span>
                  <span style={{ color: m.live ? c.teal : c.gold }}>{m.code}</span>
                </div>
                <div style={{ fontSize: 19, fontWeight: 600, marginTop: 18, lineHeight: 1.2 }}>{m.name}</div>
                <div style={{ color: c.textDim, fontSize: 13, marginTop: 8, lineHeight: 1.5 }}>{m.desc}</div>
              </button>
            )}
          </div>
        </div>
      </section>

      {/* MODULE 01 — PILOTAGE PLANNING */}
      <section id="mod-empx" style={{ padding: '96px 32px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
          letterSpacing: '0.08em', color: c.teal }}>
          <span>MODULE 01</span>
          <span style={{ color: c.muted }}>·</span>
          <span style={{ color: c.gold,
            padding: '3px 7px', border: `1px solid ${c.gold}`,
            fontSize: 10 }}>CURRENTLY MPX</span>
        </div>
        <h2 style={{ ...cinDisplay(48), marginTop: 14, maxWidth: 1000 }}>
          Every passage, fully planned —{' '}
          <span style={{ color: c.teal }}>in minutes, not hours.</span>
        </h2>
        <p style={{ fontSize: 18, color: c.textDim, lineHeight: 1.55,
          marginTop: 22, maxWidth: 820 }}>
          The heart of the platform. A complete digital pilotage planning tool that takes a movement
          from first details to a signed, exportable passage plan.
        </p>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {[
          { n: '01', title: 'Vessel intelligence on tap',
            body: 'A database of 1,000+ vessels with full particulars: dimensions, drafts, tonnage, propulsion, thrusters, engine data and master details. Enter an IMO or vessel name and the entire plan pre-populates. New vessels are captured automatically and grow the database with every job.',
            tag: '1,000+ VESSELS' },
          { n: '02', title: 'Interactive chart annotation',
            body: 'Mark up harbour charts directly: freehand, lines, shapes, text and nautical symbols, plus to-scale, fully rotatable ship and tug stamps. Calibrate any chart to real-world scale so every vessel is drawn in correct proportion.',
            tag: 'TO-SCALE STAMPS' },
          { n: '03', title: 'Tide-aware UKC risk assessment',
            body: 'Live tide predictions from configurable tide stations, with under-keel-clearance calculated against each channel\u2019s charted depth. Transit timing adjusts automatically by route and vessel type, and pilots can fine-tune for delays.',
            tag: 'LIVE TIDE · UKC' },
          { n: '04', title: 'Structured passage stages',
            body: 'Break the voyage into stages, each with its own annotated chart and notes, kept independently for every pilotage.',
            tag: 'STAGE-BY-STAGE' },
          { n: '05', title: 'Master–Pilot Exchange checklists',
            body: 'Standardised pre-departure and pass/caution checklists ensure nothing is missed.',
            tag: 'MPX · STANDARDISED' },
          { n: '06', title: 'Tug planning',
            body: 'Assign tugs, roles and bollard pull to match the job.',
            tag: 'TUGS · ROLES · BP' },
          { n: '07', title: 'Professional PDF output',
            body: 'Generate a complete, branded passage plan document with charts, risk assessment and digital pilot & master sign-off.',
            tag: 'SIGNED PDF · BRANDED' }].
          map((f) =>
          <div key={f.n} style={{
            padding: '24px 22px 26px',
            border: `1px solid ${c.line}`,
            background: c.panel,
            display: 'flex', flexDirection: 'column', gap: 10
          }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                letterSpacing: '0.08em', color: c.teal }}>{f.n}</span>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 9,
                letterSpacing: '0.08em', color: c.gold,
                padding: '2px 6px', border: `1px solid ${c.line}` }}>
                  {f.tag}
                </span>
              </div>
              <div style={{ fontSize: 19, fontWeight: 600, marginTop: 6, lineHeight: 1.25 }}>{f.title}</div>
              <div style={{ color: c.textDim, fontSize: 13.5, lineHeight: 1.55 }}>{f.body}</div>
            </div>
          )}
        </div>
      </section>

      {/* MODULE 02 — MOVEMENTS SCHEDULING */}
      <section id="mod-allocops" style={{ background: c.panel,
        borderTop: `1px solid ${c.line}`,
        borderBottom: `1px solid ${c.line}`,
        padding: '88px 32px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12,
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.08em', color: c.teal }}>
              <span>MODULE 02</span>
              <span style={{ color: c.muted }}>·</span>
              <span style={{ color: c.gold, padding: '3px 7px',
                border: `1px solid ${c.gold}`, fontSize: 10 }}>CURRENT Allocations</span>
            </div>
            <h2 style={{ ...cinDisplay(40), marginTop: 18, maxWidth: 540 }}>
              See every movement,{' '}
              <span style={{ color: c.teal }}>allocate with clarity.</span>
            </h2>
            <p style={{ fontSize: 17, color: c.textDim, lineHeight: 1.6, marginTop: 18, marginBottom: 0 }}>
              Schedule and coordinate shipping movements across the port. Arrivals, departures and
              shifts are managed in one view and flow directly into the planning module — so the
              pilot opens a job that's already half-built.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 10, alignItems: 'center',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 12,
              color: c.gold, letterSpacing: '0.04em' }}>
              <span>NO RE-KEYING</span><span style={{ color: c.muted }}>·</span>
              <span>NO VERSION CONFUSION</span>
            </div>
          </div>
          <div style={{ background: c.bg, border: `1px solid ${c.line}`, padding: 0 }}>
            <div style={{ padding: '12px 16px', borderBottom: `1px solid ${c.line}`,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: '0.08em', color: c.muted }}>
              <span>MOVEMENTS · TODAY</span>
              <span style={{ color: c.teal }}>● 6 SCHEDULED</span>
            </div>
            {[
            ['06:40', 'M/V Stellaris', 'Arrival', 'OP-3', c.teal],
            ['09:15', 'M/V Orion Star', 'Arrival', 'OP-1', c.teal],
            ['11:30', 'M/V Talisman', 'Shift', 'OP-2 → OP-4', c.gold],
            ['14:20', 'M/V Atlantic Drift', 'Arrival', 'BLK-7', c.teal],
            ['17:50', 'M/V Helios', 'Departure', 'OP-4', c.textDim],
            ['21:15', 'M/V Northwind', 'Arrival', 'BLK-3', c.teal]].
            map(([t, v, k, b, col], i) =>
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '60px 1.4fr 80px 1fr',
              padding: '12px 16px', borderBottom: i < 5 ? `1px solid ${c.line}` : 'none',
              fontSize: 12.5, alignItems: 'center'
            }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', color: c.teal }}>{t}</span>
                <span style={{ color: c.text }}>{v}</span>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                letterSpacing: '0.06em', color: col }}>{k.toUpperCase()}</span>
                <span style={{ color: c.textDim, fontFamily: '"JetBrains Mono", monospace', fontSize: 11 }}>{b}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* MODULE 03 — CREW & COMPETENCY */}
      <section id="mod-crewops" style={{ padding: '88px 32px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div style={{ background: c.panel, border: `1px solid ${c.line}`, padding: 0 }}>
            <div style={{ padding: '12px 16px', borderBottom: `1px solid ${c.line}`,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              letterSpacing: '0.08em', color: c.muted }}>
              <span>PILOTS · COMPETENCY</span>
              <span style={{ color: c.signal }}>● ALL CURRENT</span>
            </div>
            {[
            ['Capt. Kavanagh', 'Class 1 · unrestricted', 'Valid · 18mo', c.teal],
            ['Capt. O\u2019Brien', 'Class 2 · ≤ 270m', 'Valid · 22mo', c.teal],
            ['Capt. Walsh', 'Class 4 · ≤ 220m', 'Valid · 6mo', c.gold],
            ['Capt. Murphy', 'Class 1 · unrestricted', 'Valid · 14mo', c.teal],
            ['Capt. Lynch', 'Class 4 · ≤ 220m', 'Expires · 28d', c.warn]].
            map(([n, q, v, col], i) =>
            <div key={n} style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1.2fr 1fr',
              padding: '14px 16px', borderBottom: i < 4 ? `1px solid ${c.line}` : 'none',
              fontSize: 12.5, alignItems: 'center'
            }}>
                <span style={{ color: c.text }}>{n}</span>
                <span style={{ color: c.textDim }}>{q}</span>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                letterSpacing: '0.06em', color: col }}>{v.toUpperCase()}</span>
              </div>
            )}
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12,
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.08em', color: c.teal }}>
              <span>MODULE 03</span>
              <span style={{ color: c.muted }}>·</span>
              <span style={{ color: c.gold, padding: '3px 7px',
                border: `1px solid ${c.gold}`, fontSize: 10 }}>CURRENTLY Crew</span>
            </div>
            <h2 style={{ ...cinDisplay(40), marginTop: 18, maxWidth: 540 }}>
              The right pilot,{' '}
              <span style={{ color: c.teal }}>qualified and available.</span>
            </h2>
            <p style={{ fontSize: 17, color: c.textDim, lineHeight: 1.6, marginTop: 18, marginBottom: 0 }}>
              Manage pilots and crew alongside their competencies and authorisations. Keep
              qualifications current and visible, so allocation decisions are always backed by who is
              licensed and ready for the movement.
            </p>
          </div>
        </div>
      </section>

      {/* MODULE 04 — UNIFIED PORTAL */}
      <section id="mod-portal" style={{ background: c.panel,
        borderTop: `1px solid ${c.line}`,
        borderBottom: `1px solid ${c.line}`,
        padding: '88px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12,
            fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
            letterSpacing: '0.08em', color: c.teal }}>
            <span>MODULE 04</span>
            <span style={{ color: c.muted }}>·</span>
            <span style={{ color: c.gold, padding: '3px 7px',
              border: `1px solid ${c.gold}`, fontSize: 10 }}>THE UNIFIED PORTAL</span>
          </div>
          <h2 style={{ ...cinDisplay(48), marginTop: 20, marginBottom: 16 }}>
            One sign-in.{' '}
            <span style={{ color: c.teal }}>The whole operation.</span>
          </h2>
          <p style={{ fontSize: 18, color: c.textDim, lineHeight: 1.55, maxWidth: 700,
            margin: '0 auto' }}>
            A single secure gateway into the Nāvika platform. Every module, every user — one
            consistent place to start the day.
          </p>
          <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center', gap: 0,
            border: `1px solid ${c.line}`, background: c.bg, maxWidth: 720,
            margin: '36px auto 0' }}>
            {['Pilotage', 'Movements', 'Crew', 'Reports'].map((m, i) =>
            <div key={m} style={{ flex: 1, padding: '18px 12px',
              borderRight: i < 3 ? `1px solid ${c.line}` : 'none' }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: c.text }}>{m}</div>
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                color: c.teal, marginTop: 4, letterSpacing: '0.06em' }}>● READY</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* WHY NĀVIKA */}
      <section style={{ padding: '96px 32px', maxWidth: 1320, margin: '0 auto' }}>
        <CinematicEyebrow label="Why Nāvika" />
        <h2 style={{ ...cinDisplay(48), marginTop: 24, marginBottom: 48, maxWidth: 900 }}>
          Built for the realities of pilotage.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0,
          border: `1px solid ${c.line}`, background: c.panel }}>
          {[
          { tag: 'OFFLINE', h: 'Works offline',
            d: 'Charts, plans and vessel data are stored on the device. When the connection drops underway, Nāvika doesn\u2019t.' },
          { tag: 'NO INSTALL', h: 'Nothing to install',
            d: 'Runs in any modern browser, on the bridge laptop or the office desktop. No app stores, no IT rollout.' },
          { tag: 'CONNECTED', h: 'Connected by design',
            d: 'Movements, vessels, precincts and crew flow between modules automatically — enter information once.' },
          { tag: 'CONFIGURABLE', h: 'Fully configurable',
            d: 'Ports, berths, channels, passage stages, tide stations and tug fleets are all set up to match your operation, by you.' },
          { tag: 'FAST', h: 'Fast',
            d: 'Built for speed — a plan that took an afternoon now takes minutes.' }].
          map((p, i) =>
          <div key={p.tag} style={{
            padding: '28px 22px',
            borderRight: i < 4 ? `1px solid ${c.line}` : 'none'
          }}>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
              color: c.teal, letterSpacing: '0.08em', marginBottom: 18 }}>
                ● {p.tag}
              </div>
              <div style={{ fontSize: 19, fontWeight: 600, marginBottom: 12 }}>{p.h}</div>
              <div style={{ color: c.textDim, fontSize: 13.5, lineHeight: 1.55 }}>{p.d}</div>
            </div>
          )}
        </div>
      </section>

      {/* TWO AUDIENCES */}
      <section style={{ padding: '0 32px 96px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
          { tag: 'FOR PORT AUTHORITIES & PILOTAGE PROVIDERS',
            h: 'Standardise every pilotage across your service.',
            d: 'Nāvika standardises how every pilotage is planned and recorded across your service. Consistent checklists, auditable risk assessments and signed passage plans — with the configurability to reflect your port\u2019s precincts, channels and procedures exactly. Reduce risk, demonstrate compliance, and give every pilot the same high-quality toolset.',
            bullets: ['Consistent checklists', 'Auditable risk assessments', 'Signed passage plans', 'Configurable to your port'] },
          { tag: 'FOR HARBOUR PILOTS',
            h: 'Ready before you board. Working when the signal isn\u2019t.',
            d: 'Everything you need for the next job, ready before you board: the vessel\u2019s particulars, the chart, the tides, the clearances. Annotate, plan and sign off in one tool that\u2019s as quick as it is thorough — and that keeps working when the signal doesn\u2019t.',
            bullets: ['Vessel particulars on tap', 'Chart, tides & clearances', 'Annotate & sign off', 'Offline on the bridge'] }].
          map((a) =>
          <div key={a.tag} style={{
            padding: '40px 36px',
            border: `1px solid ${c.line}`,
            background: c.panel
          }}>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              color: c.teal, letterSpacing: '0.08em', marginBottom: 18 }}>
                {a.tag}
              </div>
              <h3 style={{ ...cinDisplay(28), marginBottom: 16, maxWidth: 480 }}>{a.h}</h3>
              <p style={{ color: c.textDim, fontSize: 15, lineHeight: 1.6, marginBottom: 24 }}>{a.d}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
              borderTop: `1px solid ${c.line}`, paddingTop: 18 }}>
                {a.bullets.map((b) =>
              <div key={b} style={{ display: 'flex', gap: 10, alignItems: 'baseline',
                fontSize: 13, color: c.text }}>
                    <span style={{ color: c.teal, fontFamily: '"JetBrains Mono", monospace' }}>✓</span>
                    {b}
                  </div>
              )}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* TESTIMONIAL — founder & working pilot */}
      <section style={{ padding: '0 32px 96px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ border: `1px solid ${c.line}`, background: c.panel, padding: '48px 44px' }}>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
            letterSpacing: '0.08em', color: c.teal, marginBottom: 18 }}>FROM THE BRIDGE</div>
          <p style={{ ...cinDisplay(28), color: c.text, maxWidth: 920, lineHeight: 1.3 }}>
            "Planning that used to take hours is done in minutes."
          </p>
          <div style={{ marginTop: 20, fontSize: 13.5, color: c.textDim }}>
            — Capt Aaron Kavanagh · Founder &amp; marine pilot, Ports of Melbourne &amp; Geelong
          </div>
        </div>
      </section>

      {/* SCALES TO ANY PORT */}
      <section style={{ background: c.panel, borderTop: `1px solid ${c.line}`,
        borderBottom: `1px solid ${c.line}`, padding: '88px 32px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <CinematicEyebrow label="One platform · every port" />
          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1.3fr',
            gap: 56, alignItems: 'start' }}>
            <h2 style={{ ...cinDisplay(40), maxWidth: 460 }}>
              A port is a{' '}
              <span style={{ color: c.teal }}>portable profile.</span>
            </h2>
            <div>
              <p style={{ fontSize: 18, color: c.textDim, lineHeight: 1.6, margin: 0 }}>
                Everything port-specific — berths, channels, tides, tugs, routes and under-keel rules —
                lives in a versioned <strong style={{ color: c.text }}>Port Profile</strong> the whole
                suite consumes. An onboarding wizard authors it; the apps reskin to whatever port is active.
              </p>
              <p style={{ fontSize: 18, color: c.text, lineHeight: 1.6, marginTop: 16, marginBottom: 0 }}>
                We modelled the full <strong>Port of Singapore</strong> profile in days, from MPA's own
                published sources — 246 berths, 124 tugs, 315 recommended routes and the Straits/port
                under-keel regimes — and authored the Port of Brisbane end-to-end as proof.
              </p>
              <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
                {[['246', 'SG berths modelled'], ['124', 'named tugs'], ['315', 'PSA routes']].
                map(([n, l]) =>
                <div key={l} style={{ borderTop: `1px solid ${c.line}`, paddingTop: 12 }}>
                    <div style={{ fontSize: 22, fontWeight: 600, color: c.teal }}>{n}</div>
                    <div style={{ fontSize: 11, color: c.muted,
                      fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.04em',
                      marginTop: 4 }}>{l}</div>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 22, padding: '14px 16px', border: `1px solid ${c.line}`,
                background: c.bg, display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                  color: c.gold, letterSpacing: '0.08em', whiteSpace: 'nowrap' }}>IN DEVELOPMENT</span>
                <span style={{ fontSize: 13.5, color: c.textDim, lineHeight: 1.55 }}>
                  An <strong style={{ color: c.text }}>AI onboarding agent</strong> that assembles a new
                  port's profile straight from its published sources — turning a multi-week setup into a
                  guided conversation.
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CLOSING CTA */}
      <section style={{ padding: '0 32px 96px' }}>
        <div style={{
          maxWidth: 1320, margin: '0 auto',
          background: c.panel, border: `1px solid ${c.line}`,
          position: 'relative', overflow: 'hidden',
          padding: '72px 56px'
        }}>
          <div style={{ position: 'absolute', inset: 0,
            background: `radial-gradient(circle at 90% 50%, ${c.tealDim}30 0%, transparent 60%)` }} />
          <div style={{ position: 'relative', display: 'grid',
            gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <CinematicEyebrow label="Closing · See Nāvika in your port" />
              <h3 style={{ ...cinDisplay(46), marginTop: 18, maxWidth: 700 }}>
                Bring your pilotage operation onto{' '}
                <span style={{ color: c.teal }}>one platform.</span>
              </h3>
              <p style={{ color: c.textDim, fontSize: 17, marginTop: 14, maxWidth: 560 }}>
                See how Nāvika fits your port.
              </p>
              <div style={{ marginTop: 22, display: 'grid', gap: 8, maxWidth: 560 }}>
                <div style={{ display: 'flex', gap: 10, fontSize: 12.5, color: c.textDim }}>
                  <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                    color: c.teal, letterSpacing: '0.08em', minWidth: 78 }}>SOLD AS</span>
                  <span>Per-port licence + per-seat. We'll scope it to your operation.</span>
                </div>
                <div style={{ display: 'flex', gap: 10, fontSize: 12.5, color: c.textDim }}>
                  <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                    color: c.teal, letterSpacing: '0.08em', minWidth: 78 }}>YOUR DATA</span>
                  <span>Offline-first, held on the device; AU ⇄ SG data sovereignty by design.</span>
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button onClick={() => setPage('contact')} style={ctaPrimary()}>
                Book a demo →
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

function CinematicContact({ formState, setFormState, submitted, onSubmit, submitting, submitError }) {
  return (
    <main style={{ padding: '72px 32px 40px', maxWidth: 1320, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80 }}>
        <div>
          <CinematicEyebrow label="Book a demo" />
          <h1 style={{ ...cinDisplay(56), margin: '20px 0 14px' }}>
            See <span style={{ color: cinematicTheme.teal }}>Nāvika</span> in your port.
          </h1>
          <p style={{ fontSize: 18, color: cinematicTheme.textDim, lineHeight: 1.55, marginBottom: 36 }}>
            Tell us about your operation and we'll be in touch to walk you through Nāvika
            and explore how it could fit your port.
          </p>
          <div style={{ display: 'grid', gap: 1, background: cinematicTheme.line,
            border: `1px solid ${cinematicTheme.line}` }}>
            {[
            ['Email', 'info@portcall.ai'],
            ['Phone', '+61 427 824 875'],
            ['Based', 'Melbourne · Singapore']].
            map((r) =>
            <div key={r[0]} style={{
              padding: '16px 18px', background: cinematicTheme.panel,
              display: 'flex', justifyContent: 'space-between'
            }}>
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
                letterSpacing: '0.08em', color: cinematicTheme.teal,
                textTransform: 'uppercase' }}>{r[0]}</div>
                <div style={{ fontSize: 13, color: cinematicTheme.text }}>{r[1]}</div>
              </div>
            )}
          </div>
        </div>

        <form onSubmit={onSubmit} style={{
          background: cinematicTheme.panel, border: `1px solid ${cinematicTheme.line}`,
          padding: '32px 28px'
        }}>
          {submitted ?
          <div style={{ minHeight: 440, display: 'flex', flexDirection: 'column',
            justifyContent: 'center', textAlign: 'center', gap: 14 }}>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.12em', color: cinematicTheme.teal }}>
                ✓ MESSAGE RECEIVED
              </div>
              <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em' }}>
                Thanks — we'll be in touch.
              </div>
              <div style={{ color: cinematicTheme.textDim, maxWidth: 360, margin: '0 auto' }}>
                We typically reply within one business day.
              </div>
            </div> :

          <>
              <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.08em', color: cinematicTheme.teal, marginBottom: 22 }}>
                $ contact.send --new
              </div>
              {[
            { k: 'name', l: 'Your name' },
            { k: 'organisation', l: 'Pilot station / port / organisation' },
            { k: 'role', l: 'Your role' },
            { k: 'email', l: 'Email', type: 'email' }].
            map((f) =>
            <CinematicField key={f.k} label={f.l}>
                  <input type={f.type || 'text'} required name={f.k}
              value={formState[f.k] || ''}
              onChange={(e) => setFormState({ ...formState, [f.k]: e.target.value })}
              style={cinInput()} />
                </CinematicField>
            )}
              <CinematicField label="Pilots on the team">
                <select name="pilots" value={formState.pilots || ''}
              onChange={(e) => setFormState({ ...formState, pilots: e.target.value })}
              style={cinInput()}>
                  <option value="">Select…</option>
                  {['1–3', '4–10', '11–25', '26–50', '50+'].map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              </CinematicField>
              <CinematicField label="Notes">
                <textarea rows={3} name="note"
              value={formState.note || ''}
              onChange={(e) => setFormState({ ...formState, note: e.target.value })}
              style={{ ...cinInput(), minHeight: 80, resize: 'vertical' }} />
              </CinematicField>
              <button type="submit" disabled={submitting} style={{
              ...ctaPrimary(), width: '100%', marginTop: 10,
              opacity: submitting ? 0.6 : 1,
              cursor: submitting ? 'wait' : 'pointer'
            }}>
                {submitting ? 'Sending…' : 'Book a demo →'}
              </button>
              {submitError &&
            <div style={{ marginTop: 12, fontSize: 12, color: cinematicTheme.warn,
              textAlign: 'center' }}>{submitError}</div>
            }
              <div style={{ marginTop: 12, fontSize: 12, color: cinematicTheme.muted,
              textAlign: 'center' }}>
                We typically reply within one business day.
              </div>
            </>
          }
        </form>
      </div>
    </main>);

}

function CinematicField({ label, children }) {
  return (
    <label style={{ display: 'block', marginBottom: 14 }}>
      <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
        letterSpacing: '0.1em', color: cinematicTheme.textDim, marginBottom: 6,
        textTransform: 'uppercase' }}>{label}</div>
      {children}
    </label>);

}

function CinematicEyebrow({ label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10,
      fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
      letterSpacing: '0.08em', color: cinematicTheme.teal,
      textTransform: 'uppercase' }}>
      <span style={{ width: 24, height: 1, background: cinematicTheme.teal }} />
      <span>{label}</span>
    </div>);

}

function CinematicDashboardMock({ large }) {
  const c = cinematicTheme;
  const h = large ? 560 : 460;
  return (
    <div style={{ background: c.bg, height: h, display: 'grid',
      gridTemplateColumns: '180px 1fr 240px', gap: 0 }}>
      {/* sidebar */}
      <aside style={{ borderRight: `1px solid ${c.line}`, padding: '16px 14px',
        display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 6px 14px' }}>
          <span style={{ color: c.teal }}><TridentMark size={16} stroke={1.6} /></span>
          <span style={{ fontSize: 14, fontWeight: 600 }}>Nāvika</span>
        </div>
        {[['Dashboard', true], ['Vessels'], ['Routes'], ['Pilotage'], ['Roster'], ['Tariff'], ['Reports']].
        map(([l, on]) =>
        <div key={l} style={{
          padding: '7px 10px', fontSize: 12,
          color: on ? c.text : c.textDim,
          background: on ? c.panelAlt : 'transparent',
          borderLeft: on ? `2px solid ${c.teal}` : '2px solid transparent'
        }}>{l}</div>
        )}
        <div style={{ marginTop: 'auto', fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
          color: c.muted, padding: '8px 6px', letterSpacing: '0.04em',
          borderTop: `1px solid ${c.line}`, marginLeft: -14, marginRight: -14,
          paddingLeft: 14, paddingRight: 14, paddingTop: 12 }}>
          <div>WATCH · 14:32 GMT</div>
          <div style={{ color: c.signal, marginTop: 4 }}>● ON STATION</div>
        </div>
      </aside>
      {/* center map */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0,
          backgroundImage: `repeating-linear-gradient(0deg, transparent 0 ${h / 24}px, ${c.line} ${h / 24}px ${h / 24 + 0.5}px),
                                         repeating-linear-gradient(90deg, transparent 0 30px, ${c.line} 30px 30.5px)`,
          opacity: 0.4 }} />
        <svg viewBox="0 0 600 400" preserveAspectRatio="none" style={{ width: '100%', height: '100%',
          position: 'relative', zIndex: 1 }}>
          <path d="M40 280 Q 280 160 540 230" fill="none" stroke={c.muted} strokeWidth="1" strokeDasharray="3 5" />
          <path d="M40 280 Q 280 160 320 200" fill="none" stroke={c.teal} strokeWidth="2" />
          <circle cx="320" cy="200" r="6" fill={c.teal} />
          <circle cx="320" cy="200" r="22" fill="none" stroke={c.teal} strokeWidth="1" opacity="0.5" />
          <circle cx="320" cy="200" r="40" fill="none" stroke={c.teal} strokeWidth="0.5" opacity="0.3" />
          <text x="334" y="196" fontSize="10" fill={c.text} fontFamily="JetBrains Mono, monospace">
            M/V STELLARIS
          </text>
          <text x="334" y="210" fontSize="9" fill={c.textDim} fontFamily="JetBrains Mono, monospace">
            045° · 12.5kn · UKC 4.8m
          </text>
          <text x="20" y="24" fontSize="10" fill={c.teal} fontFamily="JetBrains Mono, monospace"
          letterSpacing="2">PILOT VIEW · PORT PHILLIP</text>
          <text x="20" y="386" fontSize="9" fill={c.muted} fontFamily="JetBrains Mono, monospace">
            38.290°S · 144.610°E · TIDE +1.2m RISING
          </text>
        </svg>
      </div>
      {/* right rail */}
      <aside style={{ borderLeft: `1px solid ${c.line}`,
        display: 'flex', flexDirection: 'column' }}>
        {[
        ['COURSE', '045°', c.text],
        ['ETA', '14:32', c.teal],
        ['UKC', '4.8 m', c.text],
        ['SPEED', '12.5kn', c.text]].
        map(([l, v, color]) =>
        <div key={l} style={{ padding: '14px 16px',
          borderBottom: `1px solid ${c.line}` }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: c.muted, letterSpacing: '0.08em' }}>{l}</div>
            <div style={{ fontSize: 22, fontWeight: 600, color, marginTop: 2 }}>{v}</div>
          </div>
        )}
        <div style={{ padding: 16, flex: 1 }}>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
            color: c.muted, letterSpacing: '0.08em', marginBottom: 10 }}>RISK ENVELOPE</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 60 }}>
            {[0.3, 0.5, 0.4, 0.7, 0.5, 0.9, 0.6, 0.8, 0.4, 0.5, 0.3, 0.4].map((v, i) =>
            <div key={i} style={{ flex: 1, height: `${v * 100}%`,
              background: v > 0.7 ? c.gold : c.teal, opacity: 0.7 }} />
            )}
          </div>
        </div>
      </aside>
    </div>);

}

function CinematicGridBg() {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0,
      backgroundImage: `radial-gradient(circle at 80% 10%, rgba(45,212,191,0.10) 0%, transparent 50%),
                        radial-gradient(circle at 0% 100%, rgba(212,179,106,0.08) 0%, transparent 50%),
                        repeating-linear-gradient(0deg, transparent 0 60px, ${cinematicTheme.line} 60px 60.5px),
                        repeating-linear-gradient(90deg, transparent 0 60px, ${cinematicTheme.line} 60px 60.5px)`,
      maskImage: 'linear-gradient(180deg, white 0%, white 80%, transparent 100%)',
      opacity: 0.7
    }} />);

}

// style helpers
function ctaPrimary() {
  return {
    background: cinematicTheme.teal, color: cinematicTheme.ctaText, border: 0,
    padding: '12px 22px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center'
  };
}
function ctaGhost() {
  return {
    background: 'transparent', color: cinematicTheme.text,
    border: `1px solid ${cinematicTheme.line}`,
    padding: '12px 22px', fontSize: 14, fontWeight: 500, cursor: 'pointer'
  };
}
function cinDisplay(px) {
  return {
    fontSize: px, fontWeight: 600, lineHeight: 1.05,
    letterSpacing: '-0.025em', margin: 0
  };
}
function cinInput() {
  return {
    width: '100%', boxSizing: 'border-box',
    background: cinematicTheme.bg, border: `1px solid ${cinematicTheme.line}`,
    color: cinematicTheme.text, padding: '11px 13px', fontSize: 13,
    fontFamily: 'inherit', outline: 'none'
  };
}

function Cinematic({ tagline, mode = 'dark', setMode = () => {} }) {
  setCinematicMode(mode);
  const [page, setPage] = React.useState('home');
  const [formState, setFormState] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitError('');
    setSubmitting(true);
    try {
      const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xlgzqznw';
      const fd = new FormData();
      Object.entries(formState).forEach(([k, v]) => fd.append(k, v ?? ''));
      fd.append('_subject', 'Nāvika — new interest from site');
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        body: fd,
        headers: { Accept: 'application/json' }
      });
      if (!res.ok) throw new Error('Form submission failed');
      setSubmitted(true);
    } catch (err) {
      setSubmitError("Couldn't send right now — please email info@portcall.ai");
    } finally {
      setSubmitting(false);
    }
  };

  React.useEffect(() => {
    if (page !== 'contact') {setSubmitted(false);setSubmitError('');}
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  return (
    <CinematicShell page={page} setPage={setPage} tagline={tagline} mode={mode} setMode={setMode}>
      {page === 'home' && <CinematicNavika setPage={setPage} />}
      {page === 'contact' && <CinematicContact formState={formState} setFormState={setFormState}
      submitted={submitted} onSubmit={onSubmit}
      submitting={submitting} submitError={submitError} />}
    </CinematicShell>);

}

window.Cinematic = Cinematic;