// Services page
function Services({ go }) {
  const services = [
    {
      id: "01",
      title: "Flight Animation & Reconstruction",
      body: [
        "Time-synchronous three-dimensional reconstruction of flight events using recorded flight data (FDR, QAR), surveillance records (ADS-B, PSR/SSR, MLAT), ATC transcripts, imagery, and meteorological archives.",
        "Each sequence is produced in a geodesic reference frame with documented methodology, frame-accurate timecodes, and — on request — signed source manifests."
      ],
      deliverables: [
        ["DLV.01", "Cine-master (ProRes / DNx)"],
        ["DLV.02", "Broadcast-ready proxy"],
        ["DLV.03", "Exhibit stills at publication resolution"],
        ["DLV.04", "Source & methodology annex"],
      ],
      visual: "route",
      image: "media/svc-01-animation.png"
    },
    {
      id: "02",
      title: "Flight Data Analysis & Plotting",
      body: [
        "Decoding review, parameter validation, and cross-correlation of recorded data with independent sources. Exceedance analysis, regime identification, and statistical comparison against fleet baselines.",
        "Plots are produced to publication standard: typographically disciplined, scale-accurate, and suitable for reproduction in regulatory reporting, academic review, or expert testimony."
      ],
      deliverables: [
        ["DLV.01", "Parameter plots (vector)"],
        ["DLV.02", "Decoding audit document"],
        ["DLV.03", "Statistical appendix"],
      ],
      visual: "plot",
      image: "media/svc-02-plotting.png"
    },
    {
      id: "03",
      title: "Litigation Support Visuals",
      body: [
        "Exhibits engineered to withstand cross-examination. Every visual element is traceable to recorded data, documented method, or cited source. Ambiguities are shown as ambiguities — not resolved invisibly.",
        "Engagements are typically retained through counsel. Reports and declarations are prepared in the prevailing jurisdiction's style."
      ],
      deliverables: [
        ["DLV.01", "Courtroom display package"],
        ["DLV.02", "Deposition-ready exhibits"],
        ["DLV.03", "Declaration / expert report"],
      ],
      visual: "plot",
      image: "media/svc-03-litigation.png"
    },
    {
      id: "04",
      title: "Investigation Support",
      body: [
        "Independent technical assistance to state investigation authorities, internal safety departments, and party-to-investigation representatives. Scope is tailored to the phase of the investigation and the data available.",
        "CVR audio review, verbatim transcription, and frame-accurate synchronisation of transcript to animation — speaker-tagged, timecoded, and cross-referenced against recorded flight parameters.",
        "All work is conducted under applicable investigation confidentiality regimes; publication is deferred until the controlling authority has released its findings."
      ],
      deliverables: [
        ["DLV.01", "Technical working papers"],
        ["DLV.02", "Parameter studies"],
        ["DLV.03", "Trajectory & energy analysis"],
        ["DLV.04", "CVR transcription & animation sync"],
      ],
      visual: "route",
      image: "media/svc-04-cvr.png"
    },
    {
      id: "05",
      title: "Safety & Operational Analysis",
      body: [
        "Flight data monitoring review, exceedance triage, and operational trend reporting for operators and their advisors. Analysis is presented as actionable findings, not dashboards.",
        "Where fleet baselines are insufficient, comparable-type reference data is modelled from public sources with the limitations noted."
      ],
      deliverables: [
        ["DLV.01", "Trend & exceedance report"],
        ["DLV.02", "Route / fleet briefing pack"],
      ],
      visual: "plot",
      image: "media/svc-05-fdm.png"
    },
    {
      id: "06",
      title: "Media & Documentary Graphics",
      body: [
        "Technically accurate visual sequences for long-form factual broadcast, print journalism, and editorial features. Produced under editorial review, with uncertainty shown honestly and on-screen attributions provided.",
        "Working relationships with producers and editors are long-term; output is calibrated to the tone of the programme, not to drama."
      ],
      deliverables: [
        ["DLV.01", "Broadcast-delivery masters"],
        ["DLV.02", "Caption / legal-sign-off sheet"],
        ["DLV.03", "Editorial still package"],
      ],
      visual: "hero",
      image: "media/svc-06-transcript-window.png"
    },
  ];

  return (
    <main>
      <PageHead
        index="§ Services"
        title={<>Capabilities,<br/><em>in full.</em></>}
        sub="Six disciplines applied to one question: what actually happened, and can we prove it. Each engagement combines primary data with independent sources and documented method."
        meta={[]}
      />

      <section className="section" style={{paddingTop: 80}}>
        {services.map((s, i) => (
          <div className="svc-long" key={s.id}>
            <div>
              <span className="svc-long-index">§ {s.id}</span>
              <ul className="svc-long-deliverables">
                {s.deliverables.map(([id, label]) => (
                  <li key={id}>
                    <span className="mono">{id}</span>
                    <span>{label}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="svc-long-title">{s.title}</h3>
              <div className="svc-long-body">
                {s.body.map((p, j) => <p key={j}>{p}</p>)}
              </div>
              <div style={{marginTop:28, display:'flex', gap:14}}>
                <button className="btn btn-ghost" onClick={() => go("work")}>
                  Related work <span className="btn-arrow">→</span>
                </button>
                <button className="btn btn-ghost" onClick={() => go("contact")}>
                  Enquire
                </button>
              </div>
            </div>
            <MediaSlot
              kind={s.visual === "plot" ? "PLOT" : s.visual === "route" ? "RECON" : "MASTER"}
              id={`SVC-${s.id}`}
              title={s.title.toUpperCase()}
              note="REPLACE WITH PROJECT MEDIA"
              duration="00:00:00"
              frameRef={`FR ${String(i*120).padStart(5,'0')}`}
              image={s.image}
              images={s.images}
              visual={s.visual === "plot" ? <ParamPlot seed={i+2} traces={3}/>
                    : s.visual === "route" ? <MiniRoute seed={i}/>
                    : <HeroCanvas/>}
            />
          </div>
        ))}
      </section>

      <CtaBand go={go}/>
    </main>
  );
}

function PageHead({ index, title, sub, meta = [] }) {
  return (
    <section className="page-head">
      <div style={{position:'absolute', inset:0, opacity:0.5}}>
        <PlottingGrid/>
      </div>
      <div className="page-head-meta">
        {meta.map(m => <span key={m} className="mono">{m}</span>)}
      </div>
      <div className="page-head-inner fade-in">
        <div>
          <span className="eyebrow" style={{marginBottom:28, display:'inline-flex'}}>{index}</span>
          <h1 className="page-head-title">{title}</h1>
        </div>
        <p className="page-head-sub">{sub}</p>
      </div>
    </section>
  );
}

function CtaBand({ go }) {
  return (
    <section className="cta-band">
      <div style={{position:'absolute', inset:0, opacity:0.3}}>
        <PlottingGrid/>
      </div>
      <div className="cta-band-inner">
        <div>
          <span className="eyebrow" style={{marginBottom:28, display:'inline-flex'}}>§ Engagement</span>
          <h2 className="cta-band-title">
            Consult on a matter<br/><em>in confidence.</em>
          </h2>
        </div>
        <button className="btn btn-primary" onClick={() => go("contact")}>
          Initiate inquiry <span className="btn-arrow">→</span>
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { Services, PageHead, CtaBand });