/* global React, Glyph, Sparkline, PointCloud */
// ============================================================
// InfraMind — inner page components (Platform, Solutions, Tech,
// Case Studies, About, Contact)
// ============================================================

const { useState: useStatePages } = React;

// ---------------- shared inner-page hero ----------------
function PageHero({ crumb, title, lead, meta }) {
  return (
    <section className="page-hero">
      <div className="grid-bg"></div>
      <div className="container page-hero-inner">
        <div>
          <div className="page-hero-breadcrumb">
            <a href="index.html">InfraMind</a>
            <span className="sep">/</span>
            <span className="here">{crumb}</span>
          </div>
          <h1>{title}</h1>
          <p className="lead">{lead}</p>
        </div>
        {meta &&
        <div className="page-hero-meta">
            {meta.map((m, i) =>
          <div className="row" key={i}>
                <span className="k">{m.label}</span>
                <span className="v">{m.value}</span>
              </div>
          )}
          </div>
        }
      </div>
    </section>);

}

// ============================================================
// PLATFORM PAGE
// ============================================================
function PlatformPage() {
  const dives = [
  {
    eyebrow: "01 · Ingest",
    title: "Every survey output, in one structured asset.",
    paras: [
    "LiDAR, imagery, inspection records — validated, indexed, and tagged to the asset. Originals stay your source of truth."],

    list: ["LAS, E57, PLY point clouds", "JPG, TIFF, RAW imagery", "PDF / XLSX inspection records", "CAD, GIS, BIM as-built data"],
    visual: <PlatformIngestVisual />
  },
  {
    eyebrow: "02 · Unify",
    title: "Every modality, mapped onto one 3D model.",
    paras: [
    "Co-registered to one coordinate system — a point cloud, a photo and a 2019 inspection note at the same chainage, describing the same defect."],

    list: ["Co-registration across modalities", "Single coordinate system per asset", "Layer toggles (LiDAR, IMG, docs)", "3D · Map · List · Documents views", "Same chainage, every layer agrees"],
    visual: <PlatformUnifyVisual />,
    flip: true
  },
  {
    eyebrow: "03 · Detect",
    title: "Defects measured consistently, across every modality.",
    paras: [
    "Computer vision quantifies visible defects. Point-cloud analytics measure deformation and section change against design and earlier surveys."],

    list: ["Crack width and length (mm)", "Spalling area (cm² / m²)", "Deformation vectors (mm)", "Structural change vs baseline"],
    visual: <PlatformDetectVisual />
  },
  {
    eyebrow: "04 · Rank",
    title: "Every defect ranked, with the reasoning attached.",
    paras: [
    "Severity combines geometry, location, confidence, and historical change. Calibrated to your engineering review standards — not a black-box score."],

    list: ["Severity tier (informational → critical)", "Asset location and chainage", "Detection confidence (0–1)", "Δ vs previous survey campaign", "Maintenance urgency window"],
    visual: <PlatformRankVisual />,
    flip: true
  },
  {
    eyebrow: "05 · Decide",
    title: "Engineers in the loop. Every decision recorded.",
    paras: [
    "Reviewers confirm, edit, or reject every call. The system logs who decided what, when, and why — producing the audit trail owners and insurers require."],

    list: ["Reviewer assignment & sign-off", "Comments and audit log", "Inspection report PDFs", "Maintenance dataset exports", "Asset health dashboards"],
    visual: <PlatformDecideVisual />
  }];


  return (
    <>
      <Nav active="platform" />
      <PageHero
        crumb="Platform"
        eyebrow="The platform"
        title="From survey data to engineering decision, in one platform."
        lead="Four stages. One auditable workflow."
        meta={[
        { label: "Modalities supported", value: "LiDAR · Imagery · Records" },
        { label: "Output formats", value: "PDF · CSV · GIS · BIM" },
        { label: "Review model", value: "Human-in-the-loop, audited" }]
        } />
      

      <section className="section-divider" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="platform-hero-mockup">
            <ProductMockup />
          </div>
        </div>
      </section>
      {dives.map((d, i) =>
      <section key={i} className="section-divider" style={{ padding: 0 }}>
          <div className="container">
            <div className={`deepdive${d.flip ? " flip" : ""}`}>
              <div className="dd-text">
                <span className="eyebrow">{d.eyebrow}</span>
                <h2>{d.title}</h2>
                {d.paras.map((p, j) => <p key={j}>{p}</p>)}
                <ul>{d.list.map((l) => <li key={l}>{l}</li>)}</ul>
              </div>
              <div className="dd-visual">{d.visual}</div>
            </div>
          </div>
        </section>
      )}

      <FinalCTA />
      <Footer />
    </>);

}

function PlatformIngestVisual() {return <IngestMockup />;}
function PlatformUnifyVisual() {return <UnifyMockup />;}
function PlatformDetectVisual() {return <DetectMockup />;}
function PlatformRankVisual() {return <RankMockup />;}
function PlatformDecideVisual() {return <DecideMockup />;}
function _UnusedIngestPanel() {
  const rows = [
  { c: "#22D3EE", l: "LiDAR · A13-N · seg-04", v: "1.4M pts / m³", s: "ingesting" },
  { c: "#3B82F6", l: "As-built · DWG/GIS set", v: "12 sheets", s: "indexed" },
  { c: "#67E8F9", l: "Imagery · UAV pass", v: "1,240 frames", s: "ingested" },
  { c: "#9CA3AF", l: "Inspection report 2024", v: "PDF · 84p", s: "indexed" },
  { c: "#9CA3AF", l: "Historical · 2019, 2021", v: "2 campaigns", s: "linked" }];

  return (
    <div style={{ position: "absolute", inset: 0, padding: 24, display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: "#8FA3C2", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 6 }}>Ingest queue · 5 sources</div>
      {rows.map((r, i) =>
      <div key={i} style={{
        display: "grid", gridTemplateColumns: "8px 1fr auto auto", gap: 12, alignItems: "center",
        padding: "12px 14px", border: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(255,255,255,0.02)"
      }}>
          <span style={{ width: 8, height: 8, background: r.c }}></span>
          <span style={{ fontSize: 13, color: "var(--off-white)" }}>{r.l}</span>
          <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#8FA3C2" }}>{r.v}</span>
          <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: i === 0 ? "var(--cyan-400)" : "var(--green)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{r.s}</span>
        </div>
      )}
      <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#6A7B97", paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
        <span>co-registration · ON</span><span>3.2 GB / 4.1 GB</span>
      </div>
    </div>);

}

function _UnusedDetectPanel() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <PointCloud defectMode="all" />
      <div style={{ position: "absolute", top: 16, left: 16, fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: "#8FA3C2", textTransform: "uppercase", letterSpacing: "0.06em", background: "rgba(8,17,31,0.7)", padding: "6px 10px", border: "1px solid rgba(255,255,255,0.06)" }}>
        defect pass · 147 detections · 92 reviewed
      </div>
    </div>);

}

function _UnusedRankPanel() {
  const rows = [
  { sev: "high", c: "#EF4444", t: "Longitudinal crack CR-04", loc: "ch 412.6 · crown", conf: 0.94, score: 87 },
  { sev: "high", c: "#EF4444", t: "Longitudinal crack CR-02", loc: "ch 418.2 · NE haunch", conf: 0.91, score: 82 },
  { sev: "med", c: "#F59E0B", t: "Spalling SP-12", loc: "ch 414.0 · invert", conf: 0.87, score: 64 },
  { sev: "med", c: "#F59E0B", t: "Concrete spalling SP-07", loc: "ch 420 · invert", conf: 0.78, score: 58 },
  { sev: "low", c: "#22D3EE", t: "Deformation DF-02", loc: "ch 416 · 1.6mm Δ", conf: 0.96, score: 34 }];

  return (
    <div style={{ position: "absolute", inset: 0, padding: 24, display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: "#8FA3C2", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 6, display: "flex", justifyContent: "space-between" }}>
        <span>Ranked defects · top 5</span>
        <span style={{ color: "#6A7B97" }}>sorted by risk score</span>
      </div>
      {rows.map((r, i) =>
      <div key={i} style={{
        display: "grid",
        gridTemplateColumns: "10px 1fr auto",
        gap: 14,
        alignItems: "center",
        padding: "12px 14px",
        background: "rgba(255,255,255,0.02)",
        border: "1px solid rgba(255,255,255,0.08)"
      }}>
          <span style={{ width: 10, height: 10, background: r.c }}></span>
          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            <span style={{ fontSize: 13, color: "var(--off-white)" }}>{r.t}</span>
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#8FA3C2" }}>{r.loc} · conf {r.conf}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 50, height: 4, background: "rgba(255,255,255,0.08)", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, width: `${r.score}%`, background: r.c }}></div>
            </div>
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 12, color: "var(--off-white)", width: 24, textAlign: "right" }}>{r.score}</span>
          </div>
        </div>
      )}
    </div>);

}

function _UnusedDecidePanel() {
  return (
    <div style={{ position: "absolute", inset: 0, padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: "#8FA3C2", textTransform: "uppercase", letterSpacing: "0.06em" }}>Review activity · last 7 days</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        {[
        { who: "JC", name: "J. Carter", action: "Approved", target: "CR-04 · severity HIGH", time: "2h", c: "#10B981" },
        { who: "MA", name: "M. Ahmadi", action: "Edited", target: "SP-12 · severity MED → HIGH", time: "5h", c: "#F59E0B" },
        { who: "RN", name: "R. Nair", action: "Commented", target: "CR-04 · re-measure requested", time: "1d", c: "#22D3EE" },
        { who: "JC", name: "J. Carter", action: "Approved", target: "DF-02 · severity LOW", time: "1d", c: "#10B981" },
        { who: "SP", name: "S. Park", action: "Exported", target: "Evidence pack · seg-04 v3", time: "2d", c: "#3B82F6" }].
        map((r, i) =>
        <div key={i} style={{ display: "grid", gridTemplateColumns: "28px 1fr auto", gap: 12, alignItems: "center" }}>
            <span style={{ width: 28, height: 28, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)", fontFamily: "IBM Plex Mono, monospace", fontSize: 10, color: "var(--off-white)" }}>{r.who}</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              <span style={{ fontSize: 13, color: "var(--off-white)" }}>{r.name} <span style={{ color: r.c }}>{r.action}</span></span>
              <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#8FA3C2" }}>{r.target}</span>
            </div>
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#6A7B97" }}>{r.time}</span>
          </div>
        )}
      </div>
      <div style={{ paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.06)", display: "flex", justifyContent: "space-between", fontFamily: "IBM Plex Mono, monospace", fontSize: 11, color: "#6A7B97" }}>
        <span>audit log · 412 events</span>
        <span style={{ color: "var(--cyan-400)" }}>↓ export</span>
      </div>
    </div>);

}

// ============================================================
// SOLUTIONS PAGE — short and visual. Four roles, four assets.
// One line of substance each. No walls of bullets.
// ============================================================
function SolutionsPage() {
  const roles = [
  {
    id: "owners",
    pid: "01",
    title: "Asset owners",
    lead: "Find urgent defects. Prioritise spend.",
    points: ["Network-wide, risk-ranked priorities", "Defensible evidence for every spend decision", "Catch deterioration before it becomes an emergency"]
  },
  {
    id: "consultants",
    pid: "02",
    title: "Engineering consultants",
    lead: "Ship more inspections, at higher quality.",
    points: ["First-pass analysis in hours, not weeks", "Consistent severity scoring across engineers", "More inspections without growing headcount"]
  },
  {
    id: "contractors",
    pid: "03",
    title: "Repair contractors",
    lead: "Mobilise from a quantified digital twin.",
    points: ["Quantified defects for accurate BoQ and pricing", "Mobilise from a 3D model, not a PDF", "Scope and sequence work before you're on site"]
  },
  {
    id: "risk",
    pid: "04",
    title: "Risk & due diligence",
    lead: "Comparable evidence, not narrative reports.",
    points: ["Comparable condition data across portfolios", "Independent, auditable evidence", "Track change over time to price risk"]
  }];


  const assets = [
  { id: "tunnels", t: "Tunnels", b: "LiDAR · imagery, fused." },
  { id: "bridges", t: "Bridges", b: "Section loss and change, across spans." },
  { id: "network", t: "Highways & rail", b: "Pavement and structures at scale." },
  { id: "civil", t: "Civil structures", b: "Dams, retaining walls, one-offs." }];


  return (
    <>
      <Nav active="solutions" />
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions"
        title="One platform. Built around how infrastructure decisions get made."
        lead="By role, or by the asset you manage." />
      

      {/* By role — clean two-column rows */}
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="sol-section-head">
            <span className="eyebrow">By role</span>
          </div>
          <div className="sol-roles">
            {roles.map((r) =>
            <a className="sol-role" key={r.id} id={r.id} href="contact.html">
                <div className="sol-role-pid pm-mono">{r.pid}</div>
                <div className="sol-role-body">
                  <h3 className="sol-role-title">{r.title}</h3>
                  <p className="sol-role-lead">{r.lead}</p>
                  <ul className="sol-role-points">
                    {r.points.map((p) => <li key={p}>{p}</li>)}
                  </ul>
                </div>
                <div className="sol-role-arrow" aria-hidden="true">
                  <svg width="16" height="12" viewBox="0 0 16 12" fill="none">
                    <path d="M1 6H15M15 6L10 1M15 6L10 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* By asset — quiet four-up grid */}
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="sol-section-head">
            <span className="eyebrow">By asset</span>
          </div>
          <div className="sol-assets">
            {assets.map((a) =>
            <div className="sol-asset" key={a.id} id={a.id}>
                <h4 className="sol-asset-title">{a.t}</h4>
                <p className="sol-asset-body">{a.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </>);

}

// ============================================================
// TECHNOLOGY PAGE
// ============================================================
function TechnologyPage() {
  const tech = [
  {
    tag: "Vision",
    title: "Computer vision for visible defects",
    body: "Models trained on infrastructure imagery and calibrated to engineering measurement standards — not a generic anomaly detector.",
    points: ["Crack segmentation, mm-precision width", "Spalling area, calibrated", "Asset-specific models"]
  },
  {
    tag: "3D",
    title: "Point cloud analytics",
    body: "Geometric processing of LiDAR — as-built geometry, cross-sections, and surface deviation against design or earlier surveys.",
    points: ["Surface reconstruction from raw scans", "Cross-section + profile extraction", "Multi-campaign change detection"]
  },
  {
    tag: "Physics",
    title: "Physics-informed reasoning",
    body: "AI scores combined with geometry, load path, and material — so severity aligns with engineering review.",
    points: ["Geometry-aware calibration", "Load-path + structural context", "Standards-aligned classification"]
  },
  {
    tag: "History",
    title: "Historical comparison",
    body: "Campaigns co-registered over time. New and worsening defects rise to the top automatically.",
    points: ["Cross-campaign co-registration", "Quantified deformation over time", "New / worsening / stable classification"]
  },
  {
    tag: "Human",
    title: "Engineer-in-the-loop validation",
    body: "Every AI output is auditable, editable, and reversible. Engineers stay in charge; the platform records every decision.",
    points: ["Per-defect confirm / edit / reject", "Reviewer sign-off + audit log", "Confidence + provenance always visible"]
  }];

  return (
    <>
      <Nav active="tech" />
      <PageHero
        crumb="Technology"
        eyebrow="Technology"
        title="Built on AI, engineering knowledge, and multi-modal infrastructure data."
        lead="A serious technical foundation for serious infrastructure decisions." />
      

      <section>
        <div className="container">
          {tech.map((t, i) =>
          <div className="deepdive" key={i} style={i === 0 ? { borderTop: 0, paddingTop: 0 } : null}>
              <div className="dd-text">
                <span className="eyebrow">{t.tag}</span>
                <h2>{t.title}</h2>
                <p>{t.body}</p>
                <ul>{t.points.map((p) => <li key={p}>{p}</li>)}</ul>
              </div>
              <div className="dd-visual">
                <TechDiagram index={i} />
              </div>
            </div>
          )}
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </>);

}

function TechDiagram({ index }) {
  const map = [VisionMockup, PointCloudMockup, PhysicsMockup, HistoryMockup, HumanMockup];
  const Comp = map[index] || VisionMockup;
  return <Comp />;
}
function _UnusedTechDiagram({ index }) {
  // Simple, abstract technical diagrams per discipline
  const common = { position: "absolute", inset: 0, width: "100%", height: "100%" };
  switch (index) {
    case 0: // CV — bounding boxes
      return (
        <svg viewBox="0 0 400 300" style={common} preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="cvbg" width="20" height="20" patternUnits="userSpaceOnUse">
              <rect width="20" height="20" fill="#050C18" />
              <line x1="0" y1="0" x2="20" y2="0" stroke="rgba(255,255,255,0.03)" />
              <line x1="0" y1="0" x2="0" y2="20" stroke="rgba(255,255,255,0.03)" />
            </pattern>
          </defs>
          <rect width="400" height="300" fill="url(#cvbg)" />
          {/* Random "crack" path */}
          <path d="M60 240 Q120 200 180 220 T280 180 T360 140" stroke="#67E8F9" strokeWidth="1.5" fill="none" opacity="0.6" />
          <path d="M80 60 Q140 80 200 110 T320 80" stroke="rgba(255,255,255,0.3)" strokeWidth="0.6" fill="none" strokeDasharray="2 3" />
          {/* detection boxes */}
          {[[60, 180, 130, 60, "#EF4444", "crack · 12.8mm"], [200, 80, 100, 50, "#F59E0B", "spall · 4.2mm"], [280, 200, 80, 50, "#22D3EE", "df · 1.6mm"]].map(([x, y, w, h, c, l], i) =>
          <g key={i}>
              <rect x={x} y={y} width={w} height={h} stroke={c} strokeWidth="1" fill={c} fillOpacity="0.06" />
              <rect x={x} y={y - 14} width={l.length * 6.5} height="14" fill={c} />
              <text x={x + 4} y={y - 4} fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#050C18">{l}</text>
            </g>
          )}
        </svg>);

    case 1: // 3D point cloud
      return <div style={common}><PointCloud defectMode="all" /></div>;
    case 2: // deformation section
      return (
        <svg viewBox="0 0 400 300" style={common} preserveAspectRatio="xMidYMid slice">
          <rect width="400" height="300" fill="#050C18" />
          {/* depth scale */}
          {Array.from({ length: 20 }, (_, i) =>
          <line key={i} x1="0" y1={20 + i * 14} x2="400" y2={20 + i * 14} stroke={`rgba(34,211,238,${0.04 + Math.sin(i * 0.7) * 0.03})`} strokeWidth="3" />
          )}
          {/* section grid */}
          {[80, 160, 240, 320].map((cx, i) =>
          <path key={i} d={`M${cx - 30} 180 Q${cx} 140 ${cx + 30} 180`} stroke="#22D3EE" strokeWidth="1.2" fill="none" opacity="0.7" />
          )}
          {/* deviation zone */}
          <ellipse cx="200" cy="230" rx="35" ry="14" fill="#EF4444" opacity="0.25" />
          <ellipse cx="200" cy="230" rx="35" ry="14" stroke="#EF4444" strokeWidth="1" fill="none" />
          <text x="200" y="234" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#EF4444" textAnchor="middle">Δ +9mm</text>
          <text x="20" y="25" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2">deformation · section B-B'</text>
          <text x="380" y="25" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2" textAnchor="end">depth → 1.2m</text>
        </svg>);

    case 3: // Physics — beam diagram
      return (
        <svg viewBox="0 0 400 300" style={common} preserveAspectRatio="xMidYMid meet">
          <rect width="400" height="300" fill="#050C18" />
          {/* supports */}
          <line x1="60" y1="200" x2="340" y2="200" stroke="rgba(255,255,255,0.5)" strokeWidth="2" />
          <polygon points="50,210 70,210 60,200" fill="rgba(255,255,255,0.5)" />
          <polygon points="330,210 350,210 340,200" fill="rgba(255,255,255,0.5)" />
          {/* deflection */}
          <path d="M60 200 Q200 240 340 200" stroke="#22D3EE" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
          {/* load arrows */}
          {[120, 170, 220, 270].map((x) =>
          <g key={x}>
              <line x1={x} y1="110" x2={x} y2="195" stroke="#F59E0B" strokeWidth="1.2" />
              <polygon points={`${x - 4},190 ${x + 4},190 ${x},198`} fill="#F59E0B" />
            </g>
          )}
          {/* defect highlight */}
          <circle cx="220" cy="200" r="18" stroke="#EF4444" strokeWidth="1" fill="#EF4444" fillOpacity="0.1" />
          <text x="220" y="170" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#EF4444" textAnchor="middle">σ_max @ midspan</text>
          {/* axes labels */}
          <text x="20" y="100" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2">load q(x)</text>
          <text x="20" y="280" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2">stress · deformation</text>
        </svg>);

    case 4: // Historical trend
      return (
        <svg viewBox="0 0 400 300" style={common} preserveAspectRatio="xMidYMid meet">
          <rect width="400" height="300" fill="#050C18" />
          {/* axes */}
          <line x1="50" y1="240" x2="380" y2="240" stroke="rgba(255,255,255,0.3)" />
          <line x1="50" y1="240" x2="50" y2="40" stroke="rgba(255,255,255,0.3)" />
          {/* surveys (vertical guides) */}
          {[100, 180, 260, 340].map((x, i) =>
          <g key={i}>
              <line x1={x} y1="240" x2={x} y2="50" stroke="rgba(255,255,255,0.06)" strokeDasharray="2 3" />
              <text x={x} y="258" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2" textAnchor="middle">{2019 + i * 2}</text>
            </g>
          )}
          {/* deformation curve */}
          <path d="M50 100 L100 110 L180 135 L260 165 L340 200 L380 215" stroke="#22D3EE" strokeWidth="1.5" fill="none" />
          <path d="M50 100 L100 110 L180 135 L260 165 L340 200 L380 215 L380 240 L50 240 Z" fill="#22D3EE" fillOpacity="0.1" />
          {/* delta markers */}
          {[[100, 110], [180, 135], [260, 165], [340, 200]].map(([x, y], i) =>
          <circle key={i} cx={x} cy={y} r="3" fill="#22D3EE" />
          )}
          <text x="60" y="70" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#8FA3C2">deformation (mm)</text>
          <text x="340" y="195" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="#EF4444" textAnchor="end">▲ 4.2mm in 24m</text>
        </svg>);

    case 5: // HITL workflow
      return (
        <svg viewBox="0 0 400 300" style={common} preserveAspectRatio="xMidYMid meet">
          <rect width="400" height="300" fill="#050C18" />
          {[
          { x: 30, l: "AI", c: "#3B82F6" },
          { x: 145, l: "Review", c: "#22D3EE" },
          { x: 260, l: "Decide", c: "#10B981" }].
          map((b, i) =>
          <g key={i}>
              <rect x={b.x} y="120" width="100" height="60" fill="rgba(255,255,255,0.04)" stroke={b.c} strokeWidth="1" />
              <text x={b.x + 50} y="155" fontFamily="Inter, sans-serif" fontSize="13" fill="var(--off-white)" textAnchor="middle" fontWeight="500">{b.l}</text>
            </g>
          )}
          <line x1="130" y1="150" x2="145" y2="150" stroke="rgba(255,255,255,0.4)" markerEnd="url(#arr)" />
          <line x1="245" y1="150" x2="260" y2="150" stroke="rgba(255,255,255,0.4)" markerEnd="url(#arr)" />
          <defs>
            <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M0 0 L10 5 L0 10 z" fill="rgba(255,255,255,0.5)" />
            </marker>
          </defs>
          {/* feedback loop */}
          <path d="M310 120 Q310 60 90 60 Q30 60 30 120" stroke="#F59E0B" strokeWidth="1" fill="none" strokeDasharray="3 3" markerEnd="url(#arr)" />
          <text x="200" y="50" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#F59E0B" textAnchor="middle">corrections improve future detections</text>
          {/* audit log */}
          <rect x="30" y="220" width="340" height="50" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)" />
          <text x="44" y="248" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA3C2">audit log · every decision recorded</text>
          <circle cx="350" cy="245" r="4" fill="#10B981" />
        </svg>);

    default:
      return null;
  }
}

// ============================================================
// CASE STUDIES PAGE
// ============================================================
function CaseStudiesPage() {
  const sections = [
  { id: "background", label: "Background" },
  { id: "challenge", label: "Challenge" },
  { id: "solution", label: "Solution" },
  { id: "results", label: "Results" },
  { id: "validation", label: "Client validation" },
  { id: "next", label: "What's next" }];


  return (
    <>
      <Nav active="cases" />
      <PageHero
        crumb="Case Studies · National Highways"
        eyebrow="Case study · National Highways"
        title="AI-powered tunnel inspection introduces a new era of infrastructure management."
        lead="A pilot with National Highways' Historical Railways Estate digitised the inspection of an 800m masonry tunnel — turning weeks of manual review into hours of AI-quantified, engineer-validated findings."
        meta={[
        { label: "Client", value: "National Highways · HRE" },
        { label: "Asset", value: "800m masonry tunnel" },
        { label: "Data", value: "LiDAR · historical inspection records" }]
        } />
      

      {/* Headline stats */}
      <section style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="container">
          <div className="cs-stats">
            <div className="cs-stat">
              <div className="cs-stat-num">Weeks → hours</div>
              <div className="cs-stat-lbl">Inspection turnaround</div>
            </div>
            <div className="cs-stat">
              <div className="cs-stat-num">Millimetre</div>
              <div className="cs-stat-lbl">Defect measurement precision</div>
            </div>
            <div className="cs-stat">
              <div className="cs-stat-num">800 m</div>
              <div className="cs-stat-lbl">Masonry tunnel piloted</div>
            </div>
          </div>
        </div>
      </section>

      {/* Hero visual: 3D dashboard mockup */}
      <section style={{ paddingTop: 40, paddingBottom: 40 }}>
        <div className="container">
          <div className="cs-hero-visual">
            <div className="cs-hero-visual-inner">
              <div className="cs-hero-frame">
                <div className="cs-hero-frame-bar">
                  <span className="cs-mock-dot" style={{ background: "#FF5F57" }}></span>
                  <span className="cs-mock-dot" style={{ background: "#FEBC2E" }}></span>
                  <span className="cs-mock-dot" style={{ background: "#28C840" }}></span>
                  <span className="cs-hero-frame-crumb">
                    <span className="pm-dim">app.inframind</span>
                    <span className="pm-dim">/</span>
                    <span>Demo Tunnel</span>
                    <span className="pm-dim">/</span>
                    <span>3D View</span>
                  </span>
                </div>
                <div className="cs-hero-frame-canvas">
                  <img src="assets/scan-3d.png"
                  alt="3D digital twin of the National Highways tunnel, generated from raw LiDAR with defects classified and severity-rated"
                  className="cs-hero-frame-img" />
                </div>
              </div>
            </div>
            <div className="cs-hero-caption">
              <span className="pm-mono pm-dim">FIG. 01</span>
              <span>Interactive 3D digital twin generated from raw LiDAR survey data, with defects classified, sized, and severity-rated.</span>
            </div>
          </div>

          {/* Second figure: detailed defect close-up */}
          <div className="cs-hero-visual" style={{ marginTop: 64 }}>
            <div className="cs-hero-visual-inner">
              <div className="cs-hero-frame">
                <div className="cs-hero-frame-bar">
                  <span className="cs-mock-dot" style={{ background: "#FF5F57" }}></span>
                  <span className="cs-mock-dot" style={{ background: "#FEBC2E" }}></span>
                  <span className="cs-mock-dot" style={{ background: "#28C840" }}></span>
                  <span className="cs-hero-frame-crumb">
                    <span className="pm-dim">app.inframind</span>
                    <span className="pm-dim">/</span>
                    <span>Demo Tunnel</span>
                    <span className="pm-dim">/</span>
                    <span>Spalling · ch&nbsp;7.86&nbsp;m</span>
                  </span>
                </div>
                <div className="cs-hero-frame-canvas">
                  <img src="assets/defect-detail.png"
                  alt="Close-up of detected spalling on the tunnel's left wall, with each affected brick highlighted and the defect quantified in mm² and mm³"
                  className="cs-hero-frame-img cs-hero-frame-img-natural" />
                </div>
              </div>
            </div>
            <div className="cs-hero-caption">
              <span className="pm-mono pm-dim">FIG. 02</span>
              <span>Defect close-up. Each affected brick is identified, segmented, and quantified — depth 163&nbsp;mm, area 8.36&times;10⁶&nbsp;mm², volume 1.36&times;10⁹&nbsp;mm³ — with full provenance back to the source scan.</span>
            </div>
          </div>
        </div>
      </section>

      {/* Body: two-column with section nav */}
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="cs-body">
            <aside className="cs-aside">
              <div className="cs-aside-block">
                <div className="cs-aside-lbl">Contents</div>
                <ul className="cs-toc">
                  {sections.map((s) =>
                  <li key={s.id}><a href={`#${s.id}`}>{s.label}</a></li>
                  )}
                </ul>
              </div>
              <div className="cs-aside-block">
                <div className="cs-aside-lbl">Partner</div>
                <p className="cs-aside-val">National Highways<br /><span className="pm-dim">Historical Railways Estate</span></p>
              </div>
              <div className="cs-aside-block">
                <div className="cs-aside-lbl">Modalities</div>
                <p className="cs-aside-val">LiDAR survey<br />Historical inspection records</p>
              </div>
              <div className="cs-aside-block">
                <div className="cs-aside-lbl">Defects analysed</div>
                <p className="cs-aside-val">Spalling · Mortar loss<br />Fractures · Construction joints</p>
              </div>
              <div className="cs-aside-block">
                <div className="cs-aside-lbl">Outputs</div>
                <p className="cs-aside-val">3D digital twin · severity ratings · deformation analysis · inspection reports</p>
              </div>
            </aside>

            <article className="cs-article">
              <section id="background" className="cs-section">
                <h2>Background</h2>
                <p>National Highways is responsible for operating, maintaining, and improving England's motorways and major roads. As part of this remit, it also manages the Historical Railways Estate (HRE), a portfolio of more than 3,000 heritage structures including tunnels, bridges, and viaducts.</p>
                <p>With many of these assets over a century old, ensuring their safety and reliability requires both deep engineering expertise and forward-looking innovation.</p>
              </section>

              <section id="challenge" className="cs-section">
                <h2>Challenge</h2>
                <p>Tunnel inspections are inherently complex. They take place in confined spaces, often with limited lighting, and require engineers to balance required inspection work with safety considerations.</p>
                <p>While traditional methods have long provided valuable insights, National Highways recognised the opportunity to enhance these practices with advanced digital tools to support faster, safer, and more detailed inspections — while creating a scalable model for its wider portfolio.</p>
              </section>

              <section id="solution" className="cs-section">
                <h2>Solution</h2>
                <p>InfraMind partnered with National Highways, through HRE, to pilot a digital inspection of an 800m masonry tunnel. The process was straightforward: existing LiDAR survey data was shared with InfraMind, and our AI platform carried out the full analysis.</p>
                <p>The system automatically identified features such as spalling, mortar loss, fractures, and construction joints with millimetre precision. Crucially, it also measured the size, depth, and volume of each defect, offering quantitative insights that go beyond traditional visual assessments. Alongside this, the platform assigned severity ratings, performed deformation analysis, and integrated historic inspection reports into an interactive 3D digital twin.</p>
                <p>Accessible through a browser-based interface, the platform allowed engineers to navigate the tunnel seamlessly, filter results by defect type and severity, and generate professional inspection reports instantly. This workflow complemented existing expertise while providing richer, data-driven visibility.</p>

                <div className="cs-callout">
                  <div className="cs-callout-head pm-mono">What the AI measured</div>
                  <div className="cs-callout-grid">
                    {[
                    { t: "Spalling", d: "Surface damage with depth + area" },
                    { t: "Mortar loss", d: "Joint deterioration mapped to wall" },
                    { t: "Fractures", d: "Crack width to mm precision" },
                    { t: "Construction joints", d: "Distinguished from defect features" }].
                    map((x) =>
                    <div className="cs-callout-item" key={x.t}>
                        <div className="cs-callout-t">{x.t}</div>
                        <div className="cs-callout-d">{x.d}</div>
                      </div>
                    )}
                  </div>
                </div>
              </section>

              <section id="results" className="cs-section">
                <h2>Results</h2>
                <p>The pilot showed how AI can add value at every level of asset management. Inspections that once took weeks were processed in hours, reducing site exposure and freeing engineers from manual reporting.</p>
                <p>Precise and objective defect measurements allow asset managers to prioritise repairs objectively, optimise maintenance schedules, and allocate budgets more effectively. At a strategic level, the platform provides early visibility of deterioration, reducing the risk of unexpected failures and supporting longer asset lifespans.</p>
                <p>Together, these outcomes demonstrate that AI-powered inspection is not just a faster way to survey tunnels — it is a smarter, data-driven approach to managing and protecting infrastructure at scale.</p>
              </section>

              <section id="validation" className="cs-section">
                <h2>Client validation</h2>
                <p>National Highways validated InfraMind's outputs against prior inspection records and confirmed their accuracy and added value. The AI analysis closely aligned with previous findings while providing more consistency and depth.</p>
                <p>On the strength of this pilot, National Highways directed InfraMind to work with Jacobs on a Business-as-Usual solution and began preparing for expansion across additional tunnel structures.</p>

                <figure className="cs-quote">
                  <blockquote>
                    "Partnering with InfraMind has been a true collaborative effort. Their platform is the first solution we've seen that can analyse tunnel data in this way. Through this project, we've experienced first-hand that AI is no longer just a concept — it's delivering real, measurable value for safety, planning, and maintenance."
                  </blockquote>
                  <figcaption>
                    <span className="cs-quote-name">Colin Mcnicol</span>
                    <span className="cs-quote-role">National Highways</span>
                  </figcaption>
                </figure>
              </section>

              <section id="next" className="cs-section">
                <h2>What's next</h2>
                <p>Following the pilot, InfraMind and National Highways are preparing for further trials, including an upcoming project on a major bridge. These trials will explore how the platform can be applied to a wider range of assets beyond tunnels and demonstrate its potential to support broader digital approaches to infrastructure management in the future.</p>

              </section>

              <section className="cs-section cs-about">
                <h3 style={{ fontSize: 16, marginBottom: 12, color: "var(--ink-500)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 500 }}>About InfraMind</h3>
                <p>InfraMind is a Cambridge spin-out transforming the way critical infrastructure is inspected and maintained. By applying our proprietary pre-trained models to multi-modal remote sensing data, digitising survey data, integrating historical records, and applying advanced AI, InfraMind provides asset owners with faster, safer, and more cost-effective ways to understand and protect their networks.</p>
              </section>
            </article>
          </div>
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </>);

}
function _UnusedCaseCardVisual({ index }) {
  // Subtle decorative visuals — different per card
  const visuals = [
  // 0 — tunnel arch
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      <defs><linearGradient id="cv0" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#22D3EE" stopOpacity="0.7" /><stop offset="1" stopColor="#1D4FD7" stopOpacity="0.1" /></linearGradient></defs>
      {[0.1, 0.3, 0.5, 0.7, 0.9].map((t, i) => <ellipse key={i} cx="200" cy={130 + t * 10} rx={180 - t * 100} ry={70 - t * 40} fill="none" stroke="url(#cv0)" strokeWidth="0.6" />)}
      <circle cx="160" cy="100" r="5" fill="#EF4444" />
      <circle cx="240" cy="110" r="3" fill="#F59E0B" />
    </svg>,
  // 1 — bridge silhouette
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      <line x1="40" y1="140" x2="360" y2="140" stroke="#22D3EE" strokeOpacity="0.6" />
      <path d="M40 100 Q200 30 360 100" fill="none" stroke="#22D3EE" strokeOpacity="0.6" />
      <line x1="120" y1="140" x2="120" y2="50" stroke="#22D3EE" strokeOpacity="0.4" />
      <line x1="280" y1="140" x2="280" y2="50" stroke="#22D3EE" strokeOpacity="0.4" />
      {Array.from({ length: 14 }, (_, i) => <line key={i} x1={60 + i * 22} y1="140" x2={60 + i * 22} y2={100 - Math.abs(Math.sin((i + 1) / 15 * Math.PI)) * 50} stroke="rgba(34,211,238,0.2)" />)}
    </svg>,
  // 2 — network grid / dots
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      {Array.from({ length: 60 }, (_, i) => {
      const x = i * 73 % 400,y = i * 47 % 200;
      const sev = i % 7 === 0 ? "#EF4444" : i % 5 === 0 ? "#F59E0B" : "#22D3EE";
      return <circle key={i} cx={x} cy={y} r="2.5" fill={sev} opacity="0.7" />;
    })}
    </svg>,
  // 3 — deformation curve
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      <path d="M20 160 L100 150 L180 130 L260 100 L340 70 L380 60" stroke="#22D3EE" strokeWidth="1.5" fill="none" />
      <path d="M20 160 L100 150 L180 130 L260 100 L340 70 L380 60 L380 200 L20 200 Z" fill="#22D3EE" fillOpacity="0.1" />
      {[[100, 150], [180, 130], [260, 100], [340, 70]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r="3" fill="#22D3EE" />)}
    </svg>,
  // 4 — deformation section
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      {Array.from({ length: 14 }, (_, i) => <line key={i} x1="0" y1={15 + i * 13} x2="400" y2={15 + i * 13} stroke={`rgba(34,211,238,${0.06 + Math.sin(i * 0.7) * 0.04})`} strokeWidth="3" />)}
      {[100, 200, 300].map((x, i) => <path key={i} d={`M${x - 20} 130 Q${x} 100 ${x + 20} 130`} stroke="#22D3EE" fill="none" strokeWidth="1" />)}
      <ellipse cx="200" cy="160" rx="40" ry="8" stroke="#EF4444" fill="#EF4444" fillOpacity="0.2" />
    </svg>,
  // 5 — research diagram
  <svg viewBox="0 0 400 200" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
      <circle cx="120" cy="100" r="40" stroke="#22D3EE" strokeOpacity="0.7" fill="none" />
      <circle cx="220" cy="100" r="40" stroke="#3B82F6" strokeOpacity="0.7" fill="none" />
      <circle cx="170" cy="60" r="40" stroke="#67E8F9" strokeOpacity="0.7" fill="none" />
      <text x="80" y="105" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA3C2">CV</text>
      <text x="240" y="105" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA3C2">ML</text>
      <text x="160" y="40" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="#8FA3C2">LiDAR</text>
    </svg>];

  return visuals[index] || null;
}

// ============================================================
// BLOG PAGE
// ============================================================
function BlogPage() {
  // -----------------------------------------------------------
  // To add a new blog post: add an object to `posts` below. The
  // first item is rendered as the large featured card; the rest
  // fill the grid. Categories are derived automatically, so
  // simply set `cat` to one of: "News", "Case studies",
  // "Engineering", or "Research" (or introduce a new value).
  // -----------------------------------------------------------
  const posts = [
  {
    cat: "Case studies",
    date: "2025",
    readtime: "6 min read",
    title: "What we discovered inside England's 800m tunnel with AI",
    excerpt: "How a pilot with National Highways' Historical Railways Estate turned weeks of manual review into hours of AI-quantified, engineer-validated findings on an 800m masonry tunnel.",
    href: "case-studies.html",
    mockup: 1
  }];


  // Derive categories that actually have posts (so we never show
  // a filter chip with 0 entries).
  const usedCats = Array.from(new Set(posts.map((p) => p.cat)));
  const categories = ["All", ...usedCats];
  const [active, setActive] = React.useState("All");
  // Only show the filter row when there's more than one category in play
  const showFilter = usedCats.length > 1;

  const filtered = active === "All" ? posts : posts.filter((p) => p.cat === active);
  const [featured, ...rest] = filtered;

  return (
    <>
      <Nav active="blog" />
      <PageHero
        crumb="Blog"
        eyebrow="Blog · News & writing"
        title="Notes from the field, the lab, and the engineering review desk."
        lead="Pilot outcomes, methodology pieces, and short engineering notes on what we're learning as we deploy AI into real infrastructure workflows."
        meta={[
        { label: "Cadence", value: "Roughly monthly" },
        { label: "Topics", value: usedCats.join(" · ") || "Coming soon" }]
        } />
      

      <section style={{ paddingTop: 32 }}>
        <div className="container">
          {/* Category filter — only shown when there are multiple categories */}
          {showFilter &&
          <div className="blog-filter">
              {categories.map((c) =>
            <button
              key={c}
              className={`blog-chip ${active === c ? "active" : ""}`}
              onClick={() => setActive(c)}>
              
                  {c}
                  {c !== "All" && <span className="blog-chip-count">{posts.filter((p) => p.cat === c).length}</span>}
                </button>
            )}
            </div>
          }

          {/* Featured post */}
          {featured &&
          <a href={featured.href} className="blog-featured">
              <div className="blog-featured-visual"><BlogMockup index={featured.mockup} /></div>
              <div className="blog-featured-body">
                <div className="blog-meta">
                  <span className="blog-cat">{featured.cat}</span>
                  <span className="pm-mono pm-dim">{featured.date}</span>
                  <span className="pm-mono pm-dim">{featured.readtime}</span>
                </div>
                <h2 className="blog-featured-title">{featured.title}</h2>
                <p className="blog-featured-excerpt">{featured.excerpt}</p>
                <span className="blog-read">Read article →</span>
              </div>
            </a>
          }

          {/* Rest of posts */}
          <div className="blog-grid">
            {rest.map((p, i) =>
            <a key={i} href={p.href} className="blog-card">
                <div className="blog-card-visual"><BlogMockup index={p.mockup} /></div>
                <div className="blog-card-body">
                  <div className="blog-meta">
                    <span className="blog-cat">{p.cat}</span>
                    <span className="pm-mono pm-dim">{p.date}</span>
                  </div>
                  <h3 className="blog-card-title">{p.title}</h3>
                  <p className="blog-card-excerpt">{p.excerpt}</p>
                  <span className="blog-card-foot pm-mono pm-dim">{p.readtime}</span>
                </div>
              </a>
            )}
          </div>

          {filtered.length === 0 &&
          <div className="blog-empty">
              <p className="pm-mono pm-dim">No posts in this category yet. Check back soon.</p>
            </div>
          }
        </div>
      </section>

      {/* Subscribe block */}
      <section style={{ paddingTop: 64 }}>
        <div className="container">
          <div className="blog-sub">
            <div>
              <span className="eyebrow">Stay in the loop</span>
              <h3 style={{ marginTop: 12, fontSize: "clamp(22px, 2vw, 26px)" }}>Get our writing in your inbox.</h3>
              <p style={{ marginTop: 8, color: "var(--ink-600)", fontSize: 14 }}>Occasional notes on pilots, methodology, and what we're learning. No marketing.</p>
            </div>
            <form className="blog-sub-form" name="newsletter" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={(e) => {
              e.preventDefault();
              const email = e.target.elements.email.value;
              const body = new URLSearchParams({ "form-name": "newsletter", email }).toString();
              fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body }).
              then((r) => {if (!r.ok) throw new Error();e.target.reset();e.target.querySelector("button").textContent = "✓ Subscribed";}).
              catch(() => {e.target.querySelector("button").textContent = "Try again";});
            }}>
              <input type="hidden" name="form-name" value="newsletter" />
              <p style={{ display: "none" }}><label>Don’t fill this out: <input name="bot-field" /></label></p>
              <input type="email" name="email" required placeholder="you@company.com" className="blog-sub-input" />
              <button className="btn btn-primary" type="submit">Subscribe</button>
            </form>
          </div>
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </>);

}

function BlogMockup({ index = 0 }) {
  // Real product imagery wrapped in a clean window — Mercury-style.
  // One curated visual per post; falls back to the 3D scan.
  const visuals = [
  { src: "assets/screen-overview.png", obj: "62% 38%", label: "Defect Summary · Demo Tunnel" },
  { src: "assets/screen-3d.png", obj: "58% 50%", label: "3D Digital Twin · LiDAR" },
  { src: "assets/screen-list.png", obj: "50% 30%", label: "Defect Register · 575 rows" },
  { src: "assets/screen-filters.png", obj: "45% 50%", label: "Defect Inspection · close-up" },
  { src: "assets/screen-map.png", obj: "55% 50%", label: "Network View · Demo Tunnel" },
  { src: "assets/screen-bom.png", obj: "50% 50%", label: "Bill of Quantities · export" }];

  const v = visuals[index % visuals.length];
  return (
    <div className="blog-visual-frame">
      <div className="blog-visual-bar">
        <span className="cs-mock-dot" style={{ background: "#FF5F57" }}></span>
        <span className="cs-mock-dot" style={{ background: "#FEBC2E" }}></span>
        <span className="cs-mock-dot" style={{ background: "#28C840" }}></span>
        <span className="blog-visual-label pm-mono">{v.label}</span>
      </div>
      <div className="blog-visual-img-wrap">
        <img src={v.src} alt={v.label} className="blog-visual-img" style={{ objectPosition: v.obj }} />
        <div className="blog-visual-fade"></div>
      </div>
    </div>);

}

// ============================================================
// ABOUT PAGE
// ============================================================
function AboutPage() {
  // Team disciplines — what the team brings, not who they are
  const disciplines = [
  {
    tag: "Structural engineering",
    title: "Chartered civil and structural engineers",
    body: "Direct experience inspecting tunnels and bridges in service — including on Historical Railways Estate assets — and authoring engineering review reports that hold up in chartered panel scrutiny.",
    points: ["Chartered civil engineering credentials", "Tunnel and bridge inspection backgrounds", "Engineering review and reporting"]
  },
  {
    tag: "Machine learning",
    title: "Computer vision and ML research",
    body: "Cambridge-trained researchers building defect detection models on infrastructure imagery — calibrated against engineering measurement standards, not generic anomaly detectors.",
    points: ["Cambridge Engineering PhDs", "Published work in defect detection", "Production ML systems at scale"]
  },
  {
    tag: "3D & geometry",
    title: "Point cloud and 3D analytics",
    body: "Authors of peer-reviewed work on point-cloud analytics. We process raw LiDAR into engineering-grade geometry — cross-sections, deformations, change between campaigns.",
    points: ["Published point-cloud research", "LiDAR registration and processing", "Surface reconstruction at scale"]
  }];


  // Pedigree signals — institutions, partners, customers
  const pedigree = [
  { lbl: "Founded at", val: "University of Cambridge" },
  { lbl: "Headquartered", val: "Cambridge, UK" },
  { lbl: "Working with", val: "Top UK asset owners & consultancies" },
  { lbl: "Discipline mix", val: "Civil · ML · 3D · CV" }];


  const values = [
  { num: "01", t: "Engineering judgement first", b: "AI augments engineering review — it does not replace it. Every decision is auditable and editable." },
  { num: "02", t: "Calibrated, not impressive", b: "Inspection outputs need to hold up in chartered review. We optimise for trustworthy, not flashy." },
  { num: "03", t: "Built with infrastructure teams", b: "Every feature ships after deployment with real survey, engineering, and asset-owner teams." },
  { num: "04", t: "Defensible by design", b: "Provenance, audit trail, and explainability aren't add-ons — they're foundational to the platform." },
  { num: "05", t: "Long horizons", b: "Infrastructure assets last a century. Our data model and workflows are built to outlive any single survey campaign." },
  { num: "06", t: "Open about limits", b: "We're explicit about what AI can and cannot detect today. Our customers reward honesty over hype." }];


  return (
    <>
      <Nav active="about" />
      <PageHero
        crumb="About"
        eyebrow="About InfraMind"
        title="A Cambridge spinout, on an infrastructure mission."
        lead="InfraMind is built by engineers who have stood inside the tunnels and walked the bridges. We combine that experience with modern AI to help infrastructure teams move from reactive inspection to proactive risk intelligence."
        meta={[
        { label: "Founded", value: "Cambridge · 2023" },
        { label: "Headquartered", value: "Cambridge, UK" },
        { label: "Disciplines", value: "Civil eng · AI · 3D · CV" }]
        } />
      

      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)", gap: "clamp(40px, 6vw, 96px)", alignItems: "start" }}>
            <div>
              <span className="eyebrow">Mission</span>
              <h2 style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 38px)" }}>From reactive inspection to proactive risk intelligence.</h2>
            </div>
            <div className="prose">
              <p>Modern infrastructure surveys produce more high-fidelity data than the existing review process can absorb. A single tunnel inspection now generates terabytes across LiDAR, imagery, and records — and still ends as a PDF on someone's desk.</p>
              <p>InfraMind exists to close that gap. We turn raw, multi-modal infrastructure data into ranked, evidence-backed engineering decisions, without replacing the human judgement that keeps assets safe.</p>
              <p>We work with asset owners, engineering consultants, risk engineers, and the public-sector teams who fund and audit infrastructure work. Every capability we ship is shaped by a real project and a real reviewer.</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <span className="eyebrow">Principles</span>
            <h2>How we build.</h2>
          </div>
          <div className="values-grid">
            {values.map((v) =>
            <div className="value-cell" key={v.num}>
                <span className="num">{v.num}</span>
                <h4>{v.t}</h4>
                <p>{v.b}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section style={{ paddingTop: "clamp(72px, 9vw, 128px)" }}>
        <div className="container">
          <div className="founder-msg">
            <div className="founder-msg-head">
              <span className="eyebrow">A note from the founders</span>
              <h2 style={{ marginTop: 12 }}>Why do we found InfraMind Labs.</h2>
            </div>
            <div className="founder-msg-body">
              <p>When we started this journey in Cambridge, we asked a simple question: infrastructure is part of human life and critical to public safety — so why does it not get the same attention and intelligence as healthcare?</p>
              <p>For decades, sensors like LiDAR and high-resolution imagery have been used in infrastructure. The data has always been there — but raw scans alone don't mean much. What's been missing is the ability to interpret that data with the depth of a civil engineer, and the scale of AI.</p>
              <p>That's exactly what we're building at InfraMind. Our AI analytics take fragmented data and translate it into structural intelligence — revealing hidden risks, predicting deterioration, and guiding safer decisions. The breakthrough isn't in collecting data, but in finally understanding what it means.</p>
              <p>That's why this rebrand matters. <strong>"Infra"</strong> grounds us in the industry we serve. <strong>"Mind"</strong> reflects the intelligence we're embedding into infrastructure.</p>
              <p>We believe the future of infrastructure will be one where AI makes risk predictable, safety proactive, and resilience the standard. This is the vision behind InfraMind Labs — and we're just getting started.</p>
            </div>
            <div className="founder-msg-sig">
              <div className="founder-msg-sig-name">Leo Jiang &amp; Brian Sheil</div>
              <div className="founder-msg-sig-role">Co-founders, InfraMind Labs</div>
            </div>
          </div>
        </div>
      </section>

      <section className="tech" style={{ paddingTop: "clamp(56px, 7vw, 96px)" }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <span className="eyebrow">Team</span>
            <h2>A team built for engineering scrutiny.</h2>
            <p className="lead">InfraMind is staffed by chartered structural engineers, Cambridge-trained machine learning researchers, and point-cloud and computer-vision specialists — the disciplines an infrastructure decision actually depends on.</p>
          </div>

          {/* Pedigree signal row */}
          <div className="team-pedigree">
            {pedigree.map((p) =>
            <div className="team-pedigree-item" key={p.lbl}>
                <div className="team-pedigree-lbl">{p.lbl}</div>
                <div className="team-pedigree-val">{p.val}</div>
              </div>
            )}
          </div>

          {/* Co-founders — credibility anchors, not a full directory */}
          <div className="team-founders">
            <div className="team-founder">
              <div className="team-pedigree-lbl">CO-FOUNDER & CHIEF SCIENTIST</div>
              <div className="team-anchor-name">Prof. Brian Sheil</div>
              <div className="team-anchor-role">
                Head of the <a href="https://www-smartinfrastructure.eng.cam.ac.uk/" target="_blank" rel="noopener">Cambridge Centre for Smart Infrastructure &amp; Construction</a> (CSIC),
                Department of Engineering, University of Cambridge. Leads research at one of the world's foremost centres for sensing and data-driven infrastructure management — bringing that engineering depth into how InfraMind is built.
              </div>
            </div>
            <div className="team-founder">
              <div className="team-pedigree-lbl">Co-founder &amp; CEO</div>
              <div className="team-anchor-name">Leo Jiang</div>
              <div className="team-anchor-role">Founder-operator building InfraMind from a Cambridge research lab into a company asset owners actually deploy. Sets the commercial strategy, runs partnerships with national operators and tier-one consultancies, and owns the operational discipline of getting AI inspection into business-as-usual use. Cambridge MBA; prior career across J.P. Morgan and Gemini; CFA and CPA charterholder.</div>
            </div>
          </div>

          {/* Disciplines grid */}
          <div className="team-disc-grid">
            {disciplines.map((d) =>
            <div className="team-disc" key={d.tag}>
                <div className="team-disc-tag">
                  <span className="team-disc-dot"></span>
                  <span>{d.tag}</span>
                </div>
                <h3 className="team-disc-title">{d.title}</h3>
                <p className="team-disc-body">{d.body}</p>
                <ul className="team-disc-points">
                  {d.points.map((p) => <li key={p}>{p}</li>)}
                </ul>
              </div>
            )}
          </div>

          {/* Credibility narrative + careers callout */}
          <div className="team-coda">
            <div className="team-coda-text">
              <p>We deliberately keep the team small and senior. Every inspection output InfraMind produces is reviewed by someone who has stood inside the asset it describes — and who would have to defend the result in front of a chartered engineering panel.</p>
              <p className="pm-mono pm-dim" style={{ fontSize: 12, marginTop: 16, letterSpacing: "0.04em", textTransform: "uppercase" }}>If you'd like to meet the people who'd work on your project, we'll arrange that on a demo call.</p>
            </div>
            <div className="team-coda-cta">
              <a href="contact.html" className="btn btn-primary">Book a call with the team →</a>
            </div>
          </div>

          <div id="careers" style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--grey-200)", display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 48, alignItems: "center" }}>
            <div>
              <span className="eyebrow">Careers</span>
              <h3 style={{ marginTop: 12, fontSize: 24 }}>Build infrastructure intelligence with us.</h3>
            </div>
            <div>
              <p style={{ fontSize: 15, marginBottom: 20 }}>We're hiring across structural engineering, computer vision, point-cloud analytics, and customer engineering. If you've worked on real infrastructure problems and want to build the tools the next generation of engineers will use, talk to us.</p>
              <a href="contact.html" className="btn btn-secondary">Get in touch →</a>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA />
      <Footer />
    </>);

}

// ============================================================
// CONTACT PAGE
// ============================================================
function ContactPage() {
  const [sent, setSent] = useStatePages(false);
  const [sending, setSending] = useStatePages(false);
  const [error, setError] = useStatePages(null);
  const [form, setForm] = useStatePages({
    name: "", email: "", org: "", role: "Asset owner / operator",
    assets: "Tunnels", message: ""
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const hp = e.target.querySelector('input[name="bot-field"]');
      const res = await fetch("https://formsubmit.co/ajax/leo@inframindlabs.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          Name: form.name,
          Email: form.email,
          Organisation: form.org,
          Role: form.role,
          "Asset types": form.assets,
          Message: form.message || "(none provided)",
          _subject: `New demo request — ${form.org || form.name || "InfraMind website"}`,
          _template: "table",
          _captcha: "false",
          _honey: hp ? hp.value : ""
        })
      });
      if (!res.ok) throw new Error("Submit failed");
      setSent(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setError("Couldn't submit — please email leo@inframindlabs.com directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      <Nav active="contact" />
      <PageHero
        crumb="Contact"
        eyebrow="Book a demo"
        title="See InfraMind on your infrastructure data."
        lead="Tell us a little about the assets you manage. We'll come back within two working days with a demo tailored to your inspection workflow, asset types, and review process."
        meta={[
        { label: "Response time", value: "Within 2 working days" },
        { label: "Demo format", value: "30–45 min, your data optional" }]
        } />
      

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          {sent &&
          <div className="success-banner" style={{ marginTop: 56 }}>
              <div className="check">✓</div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Thank you — we've received your request.</div>
                <div style={{ fontSize: 14, color: "var(--grey-600)" }}>One of the InfraMind team will be in touch within two working days to schedule a tailored demo.</div>
              </div>
            </div>
          }
          <div className="contact-page">
            <div className="contact-info">
              <div>
                <span className="eyebrow">Direct contact</span>
                <h2 style={{ marginTop: 16, fontSize: 28 }}>Let's talk about your infrastructure.</h2>
                <p style={{ marginTop: 16, fontSize: 16 }}>Whether you're scoping a single tunnel pilot or planning a network-scale inspection programme, we'll come prepared. Send us what you're working on and we'll match you with the right person on our team.</p>
              </div>
              <div className="block">
                <div className="lbl">Email</div>
                <div className="v">info@inframindlabs.com</div>
              </div>
              <div className="block">
                <div className="lbl">Office</div>
                <div className="v">Cambridge, United Kingdom</div>
              </div>
              <div className="block">
                <div className="lbl">Procurement & security</div>
                <div className="v small">For enterprise security questionnaires, hosting documentation, and procurement queries, please indicate this in your message and we will route accordingly.</div>
              </div>
              <div className="block">
                <div className="lbl">Follow</div>
                <div className="v small"><a href="https://www.linkedin.com/company/inframindlabs/" target="_blank" rel="noopener" style={{ color: "var(--steel-600)" }}>LinkedIn</a></div>
              </div>
            </div>

            <form className="demo-form" onSubmit={submit}>
              <p style={{ display: "none" }}><label>Don’t fill this out: <input name="bot-field" /></label></p>
              <div>
                <h3>Request a demo</h3>
                <div className="sub">All fields required unless marked optional.</div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Full name</label>
                  <input type="text" name="name" required value={form.name} onChange={update("name")} placeholder="Jane Carter" />
                </div>
                <div className="field">
                  <label>Work email</label>
                  <input type="email" name="email" required value={form.email} onChange={update("email")} placeholder="jane@network-rail.co.uk" />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Organisation</label>
                  <input type="text" name="org" required value={form.org} onChange={update("org")} placeholder="Your organisation" />
                </div>
                <div className="field">
                  <label>Your role</label>
                  <select name="role" value={form.role} onChange={update("role")}>
                    <option>Asset owner / operator</option>
                    <option>Engineering consultant</option>
                    <option>Repair / maintenance contractor</option>
                    <option>Risk engineer / insurer / due diligence</option>
                    <option>Research / academia</option>
                    <option>Other</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Asset types of interest</label>
                <select name="assets" value={form.assets} onChange={update("assets")}>
                  <option>Tunnels</option>
                  <option>Bridges</option>
                  <option>Rail infrastructure</option>
                  <option>Highways</option>
                  <option>Underground / buried assets</option>
                  <option>Multiple / portfolio</option>
                </select>
              </div>
              <div className="field">
                <label>What would you like to achieve? (optional)</label>
                <textarea name="message" value={form.message} onChange={update("message")} placeholder="A few lines about the inspection challenge or workflow you'd like to improve..." />
              </div>
              <div className="submit-row">
                <div className="legal">We'll only use your details to respond to this request.</div>
                <button type="submit" className="btn btn-primary" disabled={sending}>
                  {sending ? "Submitting…" : "Submit request"}
                </button>
              </div>
              {error && <div style={{ color: "#DC2626", fontSize: 13, marginTop: 8 }}>{error}</div>}
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </>);

}

// ============================================================
// LEGAL PAGE — shared shell for Privacy / Terms / etc.
// ============================================================
function LegalPage({ kind = "privacy" }) {
  const privacy = {
    crumb: "Legal · Privacy Policy",
    eyebrow: "Privacy Policy",
    title: "How InfraMind handles your data.",
    lead: "We handle personal data with the same engineering rigour we apply to infrastructure. This policy explains what we collect, why we collect it, and your rights.",
    meta: [
    { label: "Effective from", value: "May 2026" },
    { label: "Data hosting", value: "UK / EU regions" }],

    sections: [
    { h: "Who we are", p: "InfraMind Labs Ltd (\"InfraMind\", \"we\", \"us\") is the data controller for the personal data we process via inframindlabs.com and our platform. We are registered in England and Wales." },
    { h: "What we collect", p: "We collect (a) information you provide when you contact us, book a demo, or use the platform (name, work email, organisation, role, message contents); (b) limited operational data such as IP address, browser, and device type; and (c) usage telemetry from authenticated product use." },
    { h: "Why we use it", p: "We use this data to respond to your enquiry, operate and improve the platform, secure our services, and meet our legal obligations. We do not sell personal data, and we do not use it for advertising." },
    { h: "Customer data on the platform", p: "Infrastructure survey data, defect inventories, and engineering outputs you upload to the platform are processed under contract on behalf of the customer organisation. The customer is the controller of that data; InfraMind is the processor." },
    { h: "Data hosting and security", p: "Production data is hosted in UK / EU regions. We apply industry-standard access controls, encryption in transit and at rest, and audit logging across all environments. Detailed security documentation is available under NDA on request." },
    { h: "Your rights", p: "Under UK GDPR you have the right to access, correct, port, restrict, or delete your personal data, and to object to certain processing. Contact privacy@inframindlabs.com to exercise these rights." },
    { h: "Cookies", p: "We use a small number of essential cookies to operate the site and product. We do not use third-party tracking or advertising cookies. Analytics, where present, is privacy-preserving and aggregated." },
    { h: "Changes to this policy", p: "We will publish material updates here with a revised effective date. For questions about this policy, contact privacy@inframindlabs.com." }]

  };

  const terms = {
    crumb: "Legal · Terms",
    eyebrow: "Terms of Use",
    title: "Terms for using this website.",
    lead: "These terms apply to the inframindlabs.com website. Use of the InfraMind platform itself is governed by a separate customer agreement.",
    meta: [
    { label: "Effective from", value: "May 2026" },
    { label: "Jurisdiction", value: "England & Wales" }],

    sections: [
    { h: "Acceptance", p: "By accessing inframindlabs.com you agree to these terms. If you do not agree, please do not use the site." },
    { h: "Use of content", p: "The content on this site is provided for general information about InfraMind and its services. Copy, design, code, imagery, and trademarks are the property of InfraMind Labs Ltd or its licensors and may not be reproduced without permission, except as permitted by law or for personal, non-commercial review." },
    { h: "Forward-looking statements", p: "Pages on this site may describe capabilities, roadmap, or pilot outcomes. Such material is illustrative and not a binding commitment. Validated metrics and specifications are agreed contractually with each customer." },
    { h: "Third-party links", p: "Where we link to third-party sites or repositories, we are not responsible for their content, accuracy, or policies." },
    { h: "Limitation of liability", p: "To the maximum extent permitted by law, InfraMind is not liable for any indirect or consequential loss arising from use of this website. Nothing in these terms excludes liability that cannot be excluded under English law." },
    { h: "Changes", p: "We may update these terms from time to time. The revised version will be posted on this page with a new effective date." },
    { h: "Governing law", p: "These terms are governed by the laws of England and Wales, and any dispute is subject to the exclusive jurisdiction of the English courts." },
    { h: "Contact", p: "Questions about these terms: legal@inframindlabs.com." }]

  };

  const data = kind === "terms" ? terms : privacy;

  return (
    <>
      <Nav active="" />
      <PageHero
        crumb={data.crumb}
        eyebrow={data.eyebrow}
        title={data.title}
        lead={data.lead}
        meta={data.meta} />
      
      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="legal-doc">
            {data.sections.map((s) =>
            <section className="legal-section" key={s.h}>
                <h2>{s.h}</h2>
                <p>{s.p}</p>
              </section>
            )}
          </div>
        </div>
      </section>
      <FinalCTA />
      <Footer />
    </>);

}

Object.assign(window, {
  PageHero, PlatformPage, SolutionsPage, TechnologyPage,
  CaseStudiesPage, BlogPage, AboutPage, ContactPage,
  LegalPage
});