/* =====================================================
   PARAGMATIQ, HOMEPAGE
   Bold, asymmetric, technical document aesthetic.
   ===================================================== */

function HomePage() {
  useReveal();
  return (
    <>
      <HeroBand />
      <PillarsBand />
      <UnderstandingBand />
      <PortfolioBand />
      <IndustriesBand />
      <ProofBand />
      <SovereigntyBand />
      <ClosingCTA
        headline="Bring Paragmatiq to your operation."
        subhead="Start with a scoped pilot on a single site. We'll evaluate your radio environment, your languages, and your vocabulary together, and define success criteria before any commitment."
        primary={{ label: 'Request a Pilot', to: '/demo' }}
        secondary={{ label: 'Talk to the team', to: '/contact' }}
      />
    </>
  );
}

/* ---------- HERO ---------- */
function HeroBand() {
  return (
    <section className="on-navy hero-page" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="eyebrow on-dark"><span>INDUSTRIAL VOICE INTELLIGENCE</span></div>
        <h1>
          If your teams talk on <span style={{ color: 'var(--gold)' }}>radio</span>,
          we turn every transmission into <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>operational truth</span>.
        </h1>
        <p className="subhead">
          Industrial voice intelligence built for operators worldwide. PTT and PMR radio becomes structured safety and operational intelligence, multilingual, evidence-backed, and running entirely on infrastructure you control.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <Link to="/demo" className="btn btn-primary">Request a Pilot <span className="arrow">→</span></Link>
          <Link to="/platform/understanding" className="btn btn-ghost-dark">How it understands <span className="arrow">→</span></Link>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-cell"><span className="label">DEPLOYMENT</span><span className="value gold">Your infrastructure</span></div>
          <div className="hero-meta-cell"><span className="label">EXTERNAL AI</span><span className="value">None. Ever.</span></div>
          <div className="hero-meta-cell"><span className="label">LANGUAGES</span><span className="value">EN · AR · ES · FR · NL · DE</span></div>
          <div className="hero-meta-cell"><span className="label">ENTITY</span><span className="value">Paragmatiq Systems Ltd</span></div>
        </div>

        <div style={{ marginTop: 64, paddingBottom: 64 }}>
          <Plate kind="control-room" tag="OPERATIONS CENTRE, ELEVATION" corner={['DWG-A-101', 'REV 12.3']} ratio="21/9" />
        </div>
      </div>
    </section>
  );
}

/* ---------- PILLARS ---------- */
const PILLARS = [
  {
    n: '01', glyph: 'capture',
    head: 'Capture every transmission.',
    body: 'PTT and PMR radio across every channel, transcribed in the language being spoken, threaded into coherent conversations, with operators, equipment, and procedures identified in context.',
  },
  {
    n: '02', glyph: 'detect',
    head: 'Detect what matters.',
    body: 'Permit-to-work breaches, hot-work conflicts, gas mentions, near-misses, procedural slips, surfaced as they happen, with playable evidence behind every alert.',
  },
  {
    n: '03', glyph: 'audit',
    head: 'Audit anything, instantly.',
    body: 'Every detection points back to the moment that triggered it. Every supervisor decision is logged. Every correction sharpens precision for your site.',
  },
];

function PillarGlyph({ kind }) {
  const c = '#C9A14A';
  if (kind === 'capture') return (
    <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
      <rect x="6" y="14" width="44" height="28" stroke={c} strokeWidth="1.5" />
      <line x1="14" y1="20" x2="42" y2="20" stroke={c} strokeWidth="1" />
      <line x1="14" y1="26" x2="42" y2="26" stroke={c} strokeWidth="1" />
      <line x1="14" y1="32" x2="34" y2="32" stroke={c} strokeWidth="1" />
      <line x1="28" y1="6" x2="28" y2="14" stroke={c} strokeWidth="1.5" />
      <circle cx="28" cy="4" r="2" fill={c} />
    </svg>
  );
  if (kind === 'detect') return (
    <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
      <path d="M 8 44 L 28 8 L 48 44 Z" stroke={c} strokeWidth="1.5" />
      <line x1="28" y1="20" x2="28" y2="32" stroke={c} strokeWidth="1.5" />
      <circle cx="28" cy="38" r="1.6" fill={c} />
    </svg>
  );
  if (kind === 'audit') return (
    <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
      <rect x="10" y="8" width="32" height="40" stroke={c} strokeWidth="1.5" />
      <line x1="16" y1="18" x2="36" y2="18" stroke={c} strokeWidth="1" />
      <line x1="16" y1="24" x2="36" y2="24" stroke={c} strokeWidth="1" />
      <line x1="16" y1="30" x2="28" y2="30" stroke={c} strokeWidth="1" />
      <path d="M 22 38 L 26 42 L 36 30" stroke={c} strokeWidth="1.8" fill="none" />
    </svg>
  );
  return null;
}

function PillarsBand() {
  return (
    <section className="section on-bone">
      <div className="container">
        <SectionHead
          eyebrow="WHAT PARAGMATIQ DOES"
          headline={<>One platform. Three jobs. <span style={{ color: 'var(--ink-3)' }}>Done continuously, in every language your crews speak.</span></>}
          sideNote="Voice is the foundation. Safe, Ops, and Signal stack on top. Cross-module services, retrospective analysis, templated reporting, supervisor review queue, come with every module."
        />
        <div className="pillars-grid">
          {PILLARS.map((p) => (
            <div key={p.n} className="pillar-card reveal">
              <div className="pillar-head">
                <PillarGlyph kind={p.glyph} />
              </div>
              <h3>{p.head}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .pillars-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid rgba(10,31,68,0.18);
          border-bottom: 1px solid rgba(10,31,68,0.18);
        }
        .pillar-card {
          padding: 40px 36px 56px;
          border-right: 1px solid rgba(10,31,68,0.14);
          background: var(--paper);
        }
        .pillar-card:last-child { border-right: none; }
        .pillar-card .pillar-head {
          display: flex; justify-content: flex-end; align-items: center;
          padding-bottom: 24px;
          border-bottom: 1px solid rgba(10,31,68,0.14);
          margin-bottom: 28px;
        }
        .pillar-card h3 {
          font-size: clamp(26px, 2.6vw, 34px);
          letter-spacing: -0.025em;
          line-height: 1.05;
          margin-bottom: 18px;
          max-width: 14ch;
          color: var(--ink);
        }
        .pillar-card p {
          font-size: 15px;
          color: var(--ink-3);
          line-height: 1.6;
          max-width: 36ch;
        }
        @media (max-width: 920px) {
          .pillars-grid { grid-template-columns: 1fr; }
          .pillar-card { border-right: none; border-bottom: 1px solid rgba(10,31,68,0.14); }
          .pillar-card:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}

/* ---------- UNDERSTANDING BAND ---------- */
const UNDERSTAND_TILES = [
  { n: '01', head: '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.' },
  { n: '02', head: 'It learns your company.',             body: 'Equipment IDs, callsigns, team names, operator accents, the system adapts to how your site actually speaks. No manual tagging.' },
  { n: '03', head: 'Multilingual, automatically.',        body: 'EN · AR · ES · FR · NL · DE, detected on every transmission. Channels can be pinned to specific crews where noise demands it.' },
  { n: '04', head: 'It refuses to make things up.',       body: 'Every alert is grounded in a specific transmission. Cross-checked against speaker, channel, procedure, and context, and held back when confidence is low.' },
];

function UnderstandingBand() {
  return (
    <section className="section on-navy" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <SectionHead
          eyebrow="THE INTELLIGENCE LAYER · PRAGMATIQ UNDERSTANDING"
          headline={<>Yes, <span style={{ color: 'var(--gold)' }}>it actually understands your radios</span>.</>}
          sideNote="The intelligence layer behind every Paragmatiq module. Learns your vocabulary. Speaks your languages. Corrects itself before it acts. Shows its working."
          onDark
        />
        <div className="understand-grid">
          {UNDERSTAND_TILES.map((t) => (
            <div key={t.n} className="understand-tile reveal">
              <h4>{t.head}</h4>
              <p>{t.body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <Link to="/platform/understanding" className="btn btn-ghost-dark">Read the six promises <span className="arrow">→</span></Link>
          <span className="font-mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--ink-5)' }}>SIX PROMISES · ZERO HALLUCINATIONS</span>
        </div>
      </div>
      <style>{`
        .understand-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid var(--navy-line-2);
          border-bottom: 1px solid var(--navy-line-2);
        }
        .understand-tile {
          padding: 36px 28px 44px;
          border-right: 1px solid var(--navy-line);
        }
        .understand-tile:last-child { border-right: none; }
        .understand-tile h4 {
          font-family: var(--font-display);
          font-size: 22px;
          font-weight: 700;
          color: var(--paper);
          margin-top: 0;
          margin-bottom: 14px;
          max-width: 14ch;
          line-height: 1.1;
          letter-spacing: -0.015em;
        }
        .understand-tile p {
          font-size: 14px;
          color: var(--bone-3);
          line-height: 1.6;
          max-width: 30ch;
        }
        @media (max-width: 980px) {
          .understand-grid { grid-template-columns: 1fr 1fr; }
          .understand-tile:nth-child(2) { border-right: none; }
          .understand-tile:nth-child(1), .understand-tile:nth-child(2) { border-bottom: 1px solid var(--navy-line); }
        }
        @media (max-width: 620px) {
          .understand-grid { grid-template-columns: 1fr; }
          .understand-tile { border-right: none; border-bottom: 1px solid var(--navy-line); }
          .understand-tile:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}

/* ---------- PORTFOLIO BAND ---------- */
const PORTFOLIO = [
  { n: '01', name: 'Paragmatiq Voice',  tagline: 'Foundation',  body: 'Structured radio data, in your languages.', accent: 'var(--bone)', to: '/products/voice',  kind: 'control-room' },
  { n: '02', name: 'Paragmatiq Safe',   tagline: 'Safety',      body: 'Detection across every channel, with evidence.', accent: 'var(--red)',  to: '/products/safe',   kind: 'refinery' },
  { n: '03', name: 'Paragmatiq Ops',    tagline: 'Operations',  body: 'Procedural verification in real time.', accent: 'var(--bone)', to: '/products/ops',    kind: 'procedure' },
  { n: '04', name: 'Paragmatiq Signal', tagline: 'Custom',      body: 'Define what matters. We detect it.', accent: 'var(--gold)', to: '/products/signal', kind: 'concept-flow' },
];

function PortfolioBand() {
  return (
    <section className="section on-bone">
      <div className="container">
        <SectionHead
          eyebrow="THE PORTFOLIO"
          headline={<>Four modules. <span style={{ color: 'var(--ink-3)' }}>One platform. Buy what you need today; expand when you're ready.</span></>}
          sideNote="Voice is the foundation. Safe, Ops, and Signal stack on top. Every module includes the same cross-module services and the same data-sovereignty posture."
        />
        <div className="portfolio-grid">
          {PORTFOLIO.map((p) => (
            <Link key={p.n} to={p.to} className="portfolio-card reveal">
              <div className="portfolio-card-plate">
                <Plate kind={p.kind} ratio="16/10" tag={p.name.toUpperCase()} corner={['', 'PMQ']} />
              </div>
              <div className="portfolio-card-copy">
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'flex-end' }}>
                  <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.16em' }}>{p.tagline.toUpperCase()}</span>
                </div>
                <h3>{p.name}</h3>
                <p>{p.body}</p>
                <span className="portfolio-cta">Read module →</span>
              </div>
            </Link>
          ))}
        </div>
      </div>
      <style>{`
        .portfolio-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1px;
          background: rgba(10,31,68,0.14);
          border: 1px solid rgba(10,31,68,0.14);
        }
        .portfolio-card {
          background: var(--paper);
          display: grid;
          grid-template-columns: 1fr;
          color: var(--ink);
          transition: background 0.18s ease;
        }
        .portfolio-card:hover { background: var(--bone); }
        .portfolio-card-plate { padding: 20px 20px 0; }
        .portfolio-card-copy {
          padding: 24px 24px 32px;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .portfolio-card h3 {
          font-size: clamp(24px, 2.6vw, 32px);
          letter-spacing: -0.02em;
          color: var(--ink);
        }
        .portfolio-card p {
          font-size: 14.5px;
          color: var(--ink-3);
          line-height: 1.6;
        }
        .portfolio-cta {
          margin-top: 8px;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--gold-3);
          letter-spacing: 0.16em;
          text-transform: uppercase;
          padding-top: 14px;
          border-top: 1px solid rgba(10,31,68,0.14);
        }
        @media (max-width: 880px) { .portfolio-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* ---------- INDUSTRIES BAND ---------- */
const INDUSTRIES_US = [
  { name: 'Oil & Gas',                   line: 'Upstream, midstream, refining. OSHA-aligned safety and procedural compliance.', to: '/industries/energy',             kind: 'refinery' },
  { name: 'Construction & Heavy Industry', line: 'Multi-site, multilingual crews, evolving hazard profiles.',                   to: '/industries/construction',        kind: 'site-map' },
  { name: 'Utilities',                   line: 'Power, water, gas distribution. Storm response, switching, NERC-relevant comms.', to: '/industries/energy',             kind: 'topology' },
  { name: 'Emergency Services',          line: '911, dispatch, fire, EMS coordination.',                                          to: '/industries/emergency-services', kind: 'dispatch-console' },
];

function IndustriesBand() {
  return (
    <section className="section on-paper" style={{ borderTop: '1px solid rgba(10,31,68,0.14)' }}>
      <div className="container">
        <SectionHead
          eyebrow="WHERE PARAGMATIQ WORKS"
          headline={<>Built for operations where radio is the backbone.</>}
          sideNote="Energy, utilities, emergency services, construction. Where field teams coordinate by voice and the cost of missed communication is operational."
        />
        <div className="industries-grid">
          {INDUSTRIES_US.map((ind, i) => (
            <Link key={i} to={ind.to} className="industry-card reveal">
              <Plate kind={ind.kind} ratio="4/3" tag={ind.name.toUpperCase()} corner={['', 'PMQ']} />
              <div className="industry-meta">
                <h4>{ind.name}</h4>
                <p>{ind.line}</p>
                <span className="industry-cta">Read industry →</span>
              </div>
            </Link>
          ))}
        </div>
        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'flex-end' }}>
          <Link to="/industries" className="btn-link">View all industries →</Link>
        </div>
      </div>
      <style>{`
        .industries-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        .industry-card {
          color: var(--ink);
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .industry-meta { display: flex; flex-direction: column; gap: 8px; }
        .industry-meta h4 {
          font-size: 20px; letter-spacing: -0.015em; line-height: 1.15; max-width: 18ch;
        }
        .industry-meta p {
          font-size: 13.5px; color: var(--ink-3); line-height: 1.55;
        }
        .industry-cta {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--gold-3);
          margin-top: 4px;
        }
        @media (max-width: 980px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 620px) { .industries-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* ---------- PROOF BAND ---------- */
function ProofBand() {
  const partners = ['AIRBUS', 'BECHTEL', 'HYTERA', 'SEPURA', 'ENTECH'];
  return (
    <section className="section-sm on-navy">
      <div className="container">
        <SectionEyebrow text="DEVELOPED ALONGSIDE" onDark />
        <div className="proof-row">
          {partners.map((p) => (
            <div key={p} className="proof-cell">
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 800, letterSpacing: '0.06em', color: 'var(--paper)' }}>{p}</span>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-5)' }}>
          REFERENCE CONVERSATIONS AVAILABLE ON REQUEST · APCO P25 ENVIRONMENTS SUPPORTED
        </p>
      </div>
      <style>{`
        .proof-row {
          margin-top: 28px;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          border-top: 1px solid var(--navy-line);
          border-bottom: 1px solid var(--navy-line);
        }
        .proof-cell {
          padding: 36px 16px;
          text-align: center;
          border-right: 1px solid var(--navy-line);
        }
        .proof-cell:last-child { border-right: none; }
        @media (max-width: 720px) { .proof-row { grid-template-columns: 1fr 1fr; } .proof-cell { border-bottom: 1px solid var(--navy-line); } }
      `}</style>
    </section>
  );
}

/* ---------- SOVEREIGNTY ---------- */
function SovereigntyBand() {
  return (
    <section className="section on-bone">
      <div className="container">
        <div className="sov-grid">
          <div>
            <SectionEyebrow text="RUNS WHERE YOU RUN" />
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 20, maxWidth: '14ch', fontWeight: 800, letterSpacing: '-0.035em' }}>
              Your data stays where your operation is.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, color: 'var(--ink-3)', maxWidth: '52ch', lineHeight: 1.6 }}>
              One dedicated appliance per site. No external AI providers. No third-party data egress. Engineered for sovereign deployment from the ground up, and a fit for regulated procurement worldwide.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Link to="/platform/data-sovereignty" className="btn btn-secondary">Read data sovereignty <span className="arrow">→</span></Link>
            </div>
            <div className="sov-points">
              {[
                { h: 'No external AI providers.', b: 'Every model, transcription, language understanding, detection, runs locally on dedicated hardware you control.' },
                { h: 'No data leaves your perimeter.', b: 'Voices, transcripts, detections, reports, all of it stays inside your network boundary by design.' },
                { h: 'One Mac Studio per site.',  b: 'A single, self-contained appliance per site runs the full stack. Multi-site environments are managed from a unified control plane.' },
              ].map((pt) => (
                <div key={pt.h} className="sov-point reveal">
                  <span style={{ color: 'var(--gold)' }}>›</span>
                  <div>
                    <h5>{pt.h}</h5>
                    <p>{pt.b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <Plate kind="appliance-vertical" ratio="4/5" tag="APPLIANCE · ONE PER SITE" corner={['', '']} viewBox="0 0 400 660" />
          </div>
        </div>
      </div>
      <style>{`
        .sov-grid {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: 80px;
          align-items: start;
        }
        .sov-points {
          margin-top: 48px;
          display: flex;
          flex-direction: column;
          gap: 0;
          border-top: 1px solid rgba(10,31,68,0.18);
        }
        .sov-point {
          padding: 22px 0;
          display: grid;
          grid-template-columns: 18px 1fr;
          gap: 16px;
          align-items: start;
          border-bottom: 1px solid rgba(10,31,68,0.14);
        }
        .sov-point span { font-family: var(--font-mono); font-size: 18px; }
        .sov-point h5 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
        .sov-point p { font-size: 14.5px; color: var(--ink-3); line-height: 1.6; max-width: 56ch; }
        @media (max-width: 920px) {
          .sov-grid { grid-template-columns: 1fr; gap: 48px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { HomePage });