// ============================================================
// WATER MANAGEMENT PLATFORM — placeholder screens.
// This was an internal Rio Tinto tool, so production screens
// cannot be shared. These are labelled placeholders standing in
// for recreations, to be swapped for real images when supplied.
// Reuses Mockup (browser chrome) from imprint-screens.jsx.
// ============================================================

// fill=true fills its parent (use inside Mockup's fixed 960x640 canvas);
// otherwise renders at the given standalone height.
function ScreenPlaceholder({ label, height = 360, fill = false }) {
  return (
    <div className="cs-ph" style={fill ? { height: '100%', width: '100%' } : { minHeight: height, width: '100%' }}>
      <div className="lbl">🖼 Screenshot placeholder<br />{label}</div>
    </div>
  );
}

Object.assign(window, { ScreenPlaceholder });
// ============================================================
// WATER MANAGEMENT PLATFORM — ported product screens.
// Source: Figma Make prototype (Water Management Platform Mockups).
// Ported from TSX to plain JSX for this site's build-less Babel
// setup — logic and content unchanged, only TypeScript syntax and
// npm imports removed. Icons come from rio-tinto-icons.jsx (global),
// charts from Recharts (loaded via CDN in index.html).
// ============================================================
const { useState: useStateWMP } = React;
const {
  LineChart, Line, BarChart, Bar, AreaChart, Area,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
  ResponsiveContainer, Treemap, Cell,
} = Recharts;

// ═══════════════════════════════════════ DATA ════════════════════════════════

const DOWNTIME_ROWS = [
  { id: "BR-0341", site: "Site 1 – Central",        reason: "Valve Fault",         dur: "5h 03m", sev: "CRITICAL", start: "06:14", op: "T. Okafor"  },
  { id: "BR-0472", site: "Site 4 – North Pit",      reason: "Mechanical Failure",  dur: "4h 22m", sev: "CRITICAL", start: "07:03", op: "P. Nguyen"  },
  { id: "BR-0588", site: "Site 7 – West Quarry",    reason: "Mechanical Failure",  dur: "3h 15m", sev: "CRITICAL", start: "08:10", op: "R. Marsh"   },
  { id: "BR-0405", site: "Site 5 – Deep Basin",     reason: "Pump Failure",        dur: "2h 31m", sev: "HIGH",     start: "08:54", op: "L. Chen"    },
  { id: "BR-0831", site: "Site 5 – Deep Basin",     reason: "Valve Fault",         dur: "1h 05m", sev: "HIGH",     start: "10:15", op: "L. Chen"    },
  { id: "BR-0091", site: "Site 2 – East Flats",     reason: "Power Outage",        dur: "2h 07m", sev: "HIGH",     start: "09:18", op: "S. Patel"   },
  { id: "BR-0317", site: "Site 6 – South Ridge",    reason: "Pump Failure",        dur: "1h 48m", sev: "HIGH",     start: "09:37", op: "M. Watts"   },
  { id: "BR-0289", site: "Site 3 – North Plateau",  reason: "Sensor Fault",        dur: "1h 29m", sev: "MEDIUM",   start: "09:56", op: "J. Tan"     },
  { id: "BR-0619", site: "Site 4 – North Pit",      reason: "Power Outage",        dur: "1h 12m", sev: "MEDIUM",   start: "10:03", op: "P. Nguyen"  },
  { id: "BR-0123", site: "Site 3 – North Plateau",  reason: "Sensor Fault",        dur: "0h 55m", sev: "MEDIUM",   start: "10:20", op: "J. Tan"     },
  { id: "BR-0077", site: "Site 2 – East Flats",     reason: "Mechanical Failure",  dur: "0h 43m", sev: "MEDIUM",   start: "10:42", op: "S. Patel"   },
  { id: "BR-0204", site: "Site 1 – Central",        reason: "Scheduled Maint.",    dur: "0h 34m", sev: "LOW",      start: "11:01", op: "T. Okafor"  },
  { id: "BR-0715", site: "Site 7 – West Quarry",    reason: "Sensor Fault",        dur: "0h 27m", sev: "LOW",      start: "11:14", op: "R. Marsh"   },
  { id: "BR-0512", site: "Site 6 – South Ridge",    reason: "Scheduled Maint.",    dur: "0h 18m", sev: "LOW",      start: "11:07", op: "M. Watts"   },
];

const WEEKLY_EVENTS = [
  { wk: "Wk 1",  s1:3,  s2:2,  s3:1,  s4:5,  s5:2,  s6:1,  s7:3  },
  { wk: "Wk 2",  s1:2,  s2:4,  s3:2,  s4:6,  s5:3,  s6:2,  s7:2  },
  { wk: "Wk 3",  s1:4,  s2:3,  s3:1,  s4:4,  s5:2,  s6:3,  s7:4  },
  { wk: "Wk 4",  s1:3,  s2:2,  s3:3,  s4:7,  s5:1,  s6:2,  s7:3  },
  { wk: "Wk 5",  s1:5,  s2:5,  s3:2,  s4:8,  s5:4,  s6:1,  s7:2  },
  { wk: "Wk 6",  s1:2,  s2:3,  s3:4,  s4:5,  s5:3,  s6:4,  s7:5  },
  { wk: "Wk 7",  s1:4,  s2:4,  s3:2,  s4:9,  s5:2,  s6:3,  s7:3  },
  { wk: "Wk 8",  s1:3,  s2:2,  s3:1,  s4:6,  s5:5,  s6:2,  s7:4  },
  { wk: "Wk 9",  s1:6,  s2:3,  s3:3,  s4:7,  s5:3,  s6:1,  s7:2  },
  { wk: "Wk 10", s1:4,  s2:5,  s3:2,  s4:10, s5:4,  s6:3,  s7:3  },
  { wk: "Wk 11", s1:3,  s2:4,  s3:4,  s4:8,  s5:2,  s6:4,  s7:5  },
  { wk: "Wk 12", s1:5,  s2:3,  s3:3,  s4:11, s5:6,  s6:2,  s7:4  },
];

const SITE_DURATIONS = [
  { site: "S1 Central",    hours: 47.2, fill: "#c8723c" },
  { site: "S2 E.Flats",   hours: 63.8, fill: "#d97706" },
  { site: "S3 N.Plateau", hours: 31.4, fill: "#2563eb" },
  { site: "S4 N.Pit",     hours: 89.5, fill: "#dc2626" },
  { site: "S5 D.Basin",   hours: 55.1, fill: "#7c3aed" },
  { site: "S6 S.Ridge",   hours: 42.7, fill: "#16a34a" },
  { site: "S7 W.Quarry",  hours: 28.3, fill: "#0891b2" },
];

const REASON_TREE = [
  { name: "Mechanical Failure",  size: 47, fill: "#c8723c" },
  { name: "Pump Failure",        size: 31, fill: "#d97706" },
  { name: "Power Outage",        size: 24, fill: "#2563eb" },
  { name: "Sensor Fault",        size: 18, fill: "#7c3aed" },
  { name: "Scheduled Maint.",    size: 15, fill: "#16a34a" },
  { name: "Valve Fault",         size: 12, fill: "#db2777" },
  { name: "Other",               size:  8, fill: "#94a3b8" },
];

const BORE_PERF = [
  { day: "Jun 13", rate: 1.24, target: 1.5 }, { day: "Jun 14", rate: 1.31, target: 1.5 },
  { day: "Jun 15", rate: 1.19, target: 1.5 }, { day: "Jun 16", rate: 1.42, target: 1.5 },
  { day: "Jun 17", rate: 1.38, target: 1.5 }, { day: "Jun 18", rate: 1.27, target: 1.5 },
  { day: "Jun 19", rate: 1.35, target: 1.5 }, { day: "Jun 20", rate: 0,    target: 1.5 },
  { day: "Jun 21", rate: 0,    target: 1.5 }, { day: "Jun 22", rate: 1.18, target: 1.5 },
  { day: "Jun 23", rate: 1.29, target: 1.5 }, { day: "Jun 24", rate: 1.44, target: 1.5 },
  { day: "Jun 25", rate: 1.37, target: 1.5 }, { day: "Jun 26", rate: 1.22, target: 1.5 },
  { day: "Jun 27", rate: 1.41, target: 1.5 }, { day: "Jun 28", rate: 1.33, target: 1.5 },
  { day: "Jun 29", rate: 1.28, target: 1.5 }, { day: "Jun 30", rate: 0,    target: 1.5 },
  { day: "Jul 1",  rate: 1.15, target: 1.5 }, { day: "Jul 2",  rate: 1.36, target: 1.5 },
  { day: "Jul 3",  rate: 1.48, target: 1.5 }, { day: "Jul 4",  rate: 1.25, target: 1.5 },
  { day: "Jul 5",  rate: 1.39, target: 1.5 }, { day: "Jul 6",  rate: 1.32, target: 1.5 },
  { day: "Jul 7",  rate: 1.27, target: 1.5 }, { day: "Jul 8",  rate: 1.41, target: 1.5 },
  { day: "Jul 9",  rate: 1.35, target: 1.5 }, { day: "Jul 10", rate: 1.43, target: 1.5 },
  { day: "Jul 11", rate: 1.29, target: 1.5 }, { day: "Jul 12", rate: 0,    target: 1.5 },
];

const BORE_HISTORY = [
  { id: "DT-2847", date: "12 Jul 2025", reason: "Mechanical Failure", dur: "4h 22m", status: "ACTIVE",   notes: "Shaft coupling failure. Spare parts ETA 16:30."     },
  { id: "DT-2791", date: "02 Jul 2025", reason: "Power Outage",       dur: "1h 15m", status: "RESOLVED", notes: "Grid outage Site 4. Restored at 14:20."              },
  { id: "DT-2739", date: "25 Jun 2025", reason: "Sensor Fault",       dur: "0h 47m", status: "RESOLVED", notes: "Flow meter calibration drift. Recalibrated on-site." },
  { id: "DT-2701", date: "18 Jun 2025", reason: "Scheduled Maint.",   dur: "2h 00m", status: "RESOLVED", notes: "Q2 pump inspection — no issues found."               },
];

const LEGACY_DAILY = [
  { name: "Mon", abs: 1.21 }, { name: "Tue", abs: 1.35 }, { name: "Wed", abs: 1.19 },
  { name: "Thu", abs: 1.42 }, { name: "Fri", abs: 1.28 }, { name: "Sat", abs: 0.89 }, { name: "Sun", abs: 0.72 },
];
const LEGACY_WEEKLY = [
  { name: "Wk 1", abs: 8.40 }, { name: "Wk 2", abs: 9.13 }, { name: "Wk 3", abs: 7.84 },
  { name: "Wk 4", abs: 8.92 }, { name: "Wk 5", abs: 9.41 }, { name: "Wk 6", abs: 8.21 },
];
const LEGACY_TABLE = [
  { id: "BR-0041", site: "Site 4", today: "1.23", yest: "1.19", avg: "1.21", status: "Active"  },
  { id: "BR-0091", site: "Site 2", today: "0.98", yest: "1.05", avg: "1.02", status: "Active"  },
  { id: "BR-0123", site: "Site 3", today: "1.47", yest: "1.41", avg: "1.44", status: "Active"  },
  { id: "BR-0204", site: "Site 1", today: "0.63", yest: "0.71", avg: "0.68", status: "Maint."  },
  { id: "BR-0317", site: "Site 6", today: "1.15", yest: "1.22", avg: "1.18", status: "Active"  },
  { id: "BR-0405", site: "Site 5", today: "1.38", yest: "1.31", avg: "1.35", status: "Offline" },
];

// ─── NEW DATA (screens 2, 7, 3, 4, 9, 10–12) ────────────────────────────────

const LEGACY_BORE_HIST = [
  { name: "Jun 16", abs: 1.31 }, { name: "Jun 23", abs: 1.24 },
  { name: "Jun 30", abs: 0.00 }, { name: "Jul 7",  abs: 1.29 },
  { name: "Jul 12", abs: 1.23 },
];
const LEGACY_BORE_READINGS = [
  { date: "12 Jul", ml: "1.23", status: "Normal"  },
  { date: "11 Jul", ml: "1.19", status: "Normal"  },
  { date: "10 Jul", ml: "1.31", status: "Normal"  },
  { date: "09 Jul", ml: "0.00", status: "Offline" },
  { date: "08 Jul", ml: "1.27", status: "Normal"  },
  { date: "07 Jul", ml: "1.34", status: "Normal"  },
  { date: "06 Jul", ml: "1.28", status: "Normal"  },
];

const RESOLVED_DOWNTIMES = [
  { id: "DT-2831", bore: "BR-0091", site: "Site 2 – East Flats",    reason: "Mechanical Failure",  started: "09 Jul · 09:44", dur: "3h 41m", resolvedBy: "S. Patel",  notes: "Replaced impeller shaft coupling."           },
  { id: "DT-2819", bore: "BR-0204", site: "Site 1 – Central",       reason: "Sensor Fault",        started: "07 Jul · 14:18", dur: "0h 52m", resolvedBy: "T. Okafor", notes: "Recalibrated flow meter — drift detected."    },
  { id: "DT-2807", bore: "BR-0317", site: "Site 6 – South Ridge",   reason: "Pump Failure",        started: "05 Jul · 07:31", dur: "2h 18m", resolvedBy: "M. Watts",  notes: "Pump replaced. Test run completed OK."        },
  { id: "DT-2796", bore: "BR-0472", site: "Site 4 – North Pit",     reason: "Power Outage",        started: "02 Jul · 13:05", dur: "1h 15m", resolvedBy: "P. Nguyen", notes: "Grid restored. No equipment damage."          },
  { id: "DT-2784", bore: "BR-0588", site: "Site 7 – West Quarry",   reason: "Mechanical Failure",  started: "30 Jun · 06:22", dur: "4h 07m", resolvedBy: "R. Marsh",  notes: "Bearing pack replaced. Full load test OK."    },
  { id: "DT-2772", bore: "BR-0405", site: "Site 5 – Deep Basin",    reason: "Scheduled Maint.",    started: "28 Jun · 08:00", dur: "2h 00m", resolvedBy: "L. Chen",   notes: "Q2 pump inspection complete. No faults."      },
  { id: "DT-2761", bore: "BR-0123", site: "Site 3 – North Plateau", reason: "Valve Fault",         started: "25 Jun · 11:47", dur: "1h 33m", resolvedBy: "J. Tan",    notes: "Non-return valve replaced."                  },
  { id: "DT-2749", bore: "BR-0619", site: "Site 4 – North Pit",     reason: "Sensor Fault",        started: "22 Jun · 15:29", dur: "0h 41m", resolvedBy: "P. Nguyen", notes: "Pressure transducer replaced."                },
  { id: "DT-2738", bore: "BR-0831", site: "Site 5 – Deep Basin",    reason: "Pump Failure",        started: "19 Jun · 09:03", dur: "3h 22m", resolvedBy: "L. Chen",   notes: "Pump impeller replaced. Reinstated full cap." },
  { id: "DT-2726", bore: "BR-0289", site: "Site 3 – North Plateau", reason: "Mechanical Failure",  started: "16 Jun · 08:11", dur: "2h 55m", resolvedBy: "J. Tan",    notes: "Drive coupling repaired. 48hr monitoring."    },
  { id: "DT-2714", bore: "BR-0077", site: "Site 2 – East Flats",    reason: "Power Outage",        started: "13 Jun · 10:47", dur: "0h 58m", resolvedBy: "S. Patel",  notes: "Grid fault cleared by network operator."      },
  { id: "DT-2703", bore: "BR-0341", site: "Site 1 – Central",       reason: "Scheduled Maint.",    started: "10 Jun · 07:00", dur: "2h 00m", resolvedBy: "T. Okafor", notes: "Annual servicing complete. All checks passed." },
];

const AQUIFER_DATA = [
  { mo: "Jan", s1: -8.2, s2: -7.1, s3: -9.4, s4: -11.2 },
  { mo: "Feb", s1: -8.5, s2: -7.4, s3: -9.8, s4: -11.8 },
  { mo: "Mar", s1: -9.1, s2: -7.8, s3:-10.1, s4: -12.3 },
  { mo: "Apr", s1: -8.8, s2: -7.5, s3: -9.9, s4: -12.0 },
  { mo: "May", s1: -8.3, s2: -7.2, s3: -9.5, s4: -11.5 },
  { mo: "Jun", s1: -8.0, s2: -6.9, s3: -9.2, s4: -11.1 },
  { mo: "Jul", s1: -8.6, s2: -7.3, s3: -9.7, s4: -11.9 },
];

const BORE_YIELD_DATA = [
  { site: "Site 1", actual: 1.2, target: 1.5 },
  { site: "Site 2", actual: 0.9, target: 1.2 },
  { site: "Site 3", actual: 1.4, target: 1.5 },
  { site: "Site 4", actual: 0.0, target: 2.1 },
  { site: "Site 5", actual: 1.1, target: 1.4 },
  { site: "Site 6", actual: 0.8, target: 1.0 },
  { site: "Site 7", actual: 0.7, target: 0.9 },
];

const ABSTRACTION_MULTI = [
  { day: "Jul 1",  s1:1.21, s2:0.98, s3:1.31, s4:1.18, s5:1.09 },
  { day: "Jul 2",  s1:1.19, s2:1.01, s3:1.28, s4:1.22, s5:1.12 },
  { day: "Jul 3",  s1:1.24, s2:0.95, s3:1.33, s4:1.15, s5:1.07 },
  { day: "Jul 4",  s1:1.28, s2:1.04, s3:1.41, s4:1.31, s5:1.15 },
  { day: "Jul 5",  s1:1.22, s2:0.97, s3:1.35, s4:1.24, s5:1.10 },
  { day: "Jul 6",  s1:1.18, s2:0.92, s3:1.29, s4:1.19, s5:1.05 },
  { day: "Jul 7",  s1:1.31, s2:1.06, s3:1.44, s4:1.28, s5:1.18 },
  { day: "Jul 8",  s1:1.25, s2:0.99, s3:1.38, s4:0.00, s5:1.12 },
  { day: "Jul 9",  s1:1.20, s2:0.94, s3:1.32, s4:0.00, s5:1.08 },
  { day: "Jul 10", s1:1.33, s2:1.08, s3:1.47, s4:0.00, s5:1.21 },
  { day: "Jul 11", s1:1.27, s2:1.02, s3:1.41, s4:1.35, s5:1.16 },
  { day: "Jul 12", s1:1.24, s2:0.98, s3:1.37, s4:0.00, s5:1.13 },
];

const WEEKLY_SITE_ABS = [
  { wk: "Wk 8",  s1:8.4, s2:6.7, s3:9.1, s4:8.2, s5:7.6, s6:5.9, s7:5.2 },
  { wk: "Wk 9",  s1:8.7, s2:7.0, s3:9.4, s4:7.8, s5:7.9, s6:6.1, s7:5.5 },
  { wk: "Wk 10", s1:8.1, s2:6.5, s3:9.0, s4:5.2, s5:7.4, s6:5.8, s7:5.0 },
  { wk: "Wk 11", s1:8.8, s2:7.1, s3:9.6, s4:8.9, s5:8.1, s6:6.3, s7:5.7 },
  { wk: "Wk 12", s1:8.5, s2:6.8, s3:9.3, s4:3.1, s5:7.7, s6:6.0, s7:5.3 },
];

const COMPREHENSIVE_BORES = [
  { id:"BR-0041", site:"S4", pump:"Running", temp:72, flow:1.23, hrs:4201, alert:false },
  { id:"BR-0091", site:"S2", pump:"Stopped", temp:84, flow:0.00, hrs:3847, alert:true  },
  { id:"BR-0123", site:"S3", pump:"Running", temp:68, flow:1.47, hrs:5102, alert:false },
  { id:"BR-0204", site:"S1", pump:"Maint.",  temp:55, flow:0.00, hrs:2913, alert:false },
  { id:"BR-0289", site:"S3", pump:"Running", temp:71, flow:1.29, hrs:4388, alert:false },
  { id:"BR-0317", site:"S6", pump:"Fault",   temp:91, flow:0.00, hrs:6031, alert:true  },
  { id:"BR-0341", site:"S1", pump:"Stopped", temp:77, flow:0.00, hrs:3204, alert:true  },
  { id:"BR-0405", site:"S5", pump:"Running", temp:69, flow:1.38, hrs:4720, alert:false },
];

// ═══════════════════════════════════════ PALETTE ════════════════════════════

const P = {
  appBg:   "#ede9e3",
  sidebar: "#dedad3",
  topbar:  "#e8e3dc",
  card:    "#faf8f5",
  inner:   "#f0ede8",
  inner2:  "#e8e4de",
  text:    "#1c2838",
  text2:   "#3a4f63",
  muted:   "#6b7a8a",
  dim:     "#95a5b5",
  vdim:    "#b0bec9",
  border:  "rgba(0,0,0,0.09)",
  borderMd:"rgba(0,0,0,0.12)",
  borderLt:"rgba(0,0,0,0.06)",
  rust:    "#c8723c",
  amber:   "#d97706",
  red:     "#dc2626",
  green:   "#16a34a",
  blue:    "#2563eb",
  yellow:  "#f0b429",
};

const SEV = {
  CRITICAL: { color: "#dc2626", bg: "rgba(220,38,38,0.08)"   },
  HIGH:     { color: "#d97706", bg: "rgba(217,119,6,0.08)"   },
  MEDIUM:   { color: "#ca8a04", bg: "rgba(202,138,4,0.08)"   },
  LOW:      { color: "#6b7a8a", bg: "rgba(107,122,138,0.08)" },
};
const SITE_COLORS = ["#c8723c","#d97706","#2563eb","#7c3aed","#16a34a","#db2777","#0891b2"];

// ═══════════════════════════════════════ SHARED ══════════════════════════════

function SevBadge({ sev }) {
  const s = SEV[sev] ?? SEV.LOW;
  return (
    <span style={{ display:"inline-flex", alignItems:"center", gap:5, padding:"2px 8px", borderRadius:2, background:s.bg, color:s.color, fontFamily:"'Barlow Condensed',sans-serif", fontSize:11, fontWeight:700, letterSpacing:"0.07em", border:`1px solid ${s.color}30` }}>
      <span style={{ width:5, height:5, borderRadius:"50%", background:s.color }} />{sev}
    </span>
  );
}

function StatusBadge({ status }) {
  const cfg = {
    ACTIVE:   { color:"#dc2626", bg:"rgba(220,38,38,0.08)"  },
    RESOLVED: { color:"#16a34a", bg:"rgba(22,163,74,0.08)"  },
  };
  const s = cfg[status] ?? { color:P.muted, bg:"rgba(107,122,138,0.08)" };
  return (
    <span style={{ display:"inline-flex", alignItems:"center", gap:4, padding:"2px 8px", borderRadius:2, background:s.bg, color:s.color, fontFamily:"'DM Mono',monospace", fontSize:10, fontWeight:500, letterSpacing:"0.05em" }}>
      {status}
    </span>
  );
}

function LightTooltip({ active, payload, label }) {
  if (!active || !payload?.length) return null;
  return (
    <div style={{ background:"#fff", border:`1px solid ${P.borderMd}`, borderRadius:3, padding:"8px 12px", boxShadow:"0 4px 16px rgba(0,0,0,0.1)" }}>
      <div style={{ color:P.muted, fontSize:10, marginBottom:5, fontFamily:"'DM Mono',monospace" }}>{label}</div>
      {payload.map(p => (
        <div key={p.name} style={{ display:"flex", gap:10, alignItems:"center", marginBottom:2 }}>
          <span style={{ width:8, height:2, background:p.color, display:"inline-block" }} />
          <span style={{ fontSize:11, color:P.text2, fontFamily:"'Inter',sans-serif" }}>{p.name}</span>
          <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:p.color, fontWeight:500 }}>{p.value}</span>
        </div>
      ))}
    </div>
  );
}

function TreemapCell(props) {
  const { x=0, y=0, width=0, height=0, name="", depth, root } = props;
  if (root || depth===0 || width<2 || height<2) return null;
  const item = REASON_TREE.find(r => r.name===name);
  const fill = item?.fill ?? "#94a3b8";
  const fs = Math.min(13, Math.floor(width/7));
  return (
    <g>
      <rect x={x+1} y={y+1} width={width-2} height={height-2} fill={fill} fillOpacity={0.88} stroke="#faf8f5" strokeWidth={2} rx={1} />
      {width>50 && height>22 && (
        <text x={x+width/2} y={y+height/2+(width>70&&height>44?-8:4)} textAnchor="middle" fill="rgba(255,255,255,0.95)" fontSize={fs} fontFamily="'Barlow Condensed',sans-serif" fontWeight={600}>
          {name.length*fs*0.55>width-10 ? name.split(" ")[0] : name}
        </text>
      )}
      {width>70 && height>44 && (
        <text x={x+width/2} y={y+height/2+8} textAnchor="middle" fill="rgba(255,255,255,0.6)" fontSize={9} fontFamily="'DM Mono',monospace">
          {item?.size ?? 0} events
        </text>
      )}
    </g>
  );
}

function Panel({ title, children, style, action }) {
  return (
    <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, boxShadow:"0 1px 3px rgba(0,0,0,0.06)", ...style }}>
      {title && (
        <div style={{ padding:"9px 14px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
          <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted }}>{title}</span>
          {action && <span>{action}</span>}
        </div>
      )}
      {children}
    </div>
  );
}

function StatCard({ label, value, unit, sub, color }) {
  return (
    <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, padding:"14px 16px", boxShadow:"0 1px 3px rgba(0,0,0,0.05)" }}>
      <div style={{ fontSize:10, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:6 }}>{label}</div>
      <div style={{ display:"flex", alignItems:"baseline", gap:4 }}>
        <span style={{ fontFamily:"'DM Mono',monospace", fontSize:26, fontWeight:500, color:color??P.text, lineHeight:1 }}>{value}</span>
        {unit && <span style={{ fontSize:12, color:P.muted, fontFamily:"'DM Mono',monospace" }}>{unit}</span>}
      </div>
      {sub && <div style={{ marginTop:4, fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif" }}>{sub}</div>}
    </div>
  );
}

function DirectionBanner({ label, status }) {
  const rejected = status==="rejected";
  return (
    <div style={{ padding:"7px 24px", background:rejected?"rgba(202,138,4,0.05)":"rgba(22,163,74,0.05)", borderBottom:`1px solid ${rejected?"rgba(202,138,4,0.18)":"rgba(22,163,74,0.18)"}`, display:"flex", alignItems:"center", gap:10, flexShrink:0 }}>
      <span style={{ padding:"2px 8px", borderRadius:2, background:rejected?"rgba(202,138,4,0.1)":"rgba(22,163,74,0.1)", color:rejected?"#92400e":"#14532d", fontSize:9, fontFamily:"'DM Mono',monospace", fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase" }}>
        {rejected ? "REJECTED" : "SELECTED ✓"}
      </span>
      <span style={{ fontSize:11, color:rejected?"#78350f":"#166534", fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{label}</span>
    </div>
  );
}

// ═══════════════════════════════════════ SIDEBAR ════════════════════════════

const NAV_ITEMS = [
  { icon:Home,          label:"Overview",  id:"overview"  },
  { icon:AlertTriangle, label:"Downtimes", id:"downtimes" },
  { icon:Activity,      label:"Bores",     id:"bores"     },
  { icon:BarChart2,     label:"Reports",   id:"reports"   },
  { icon:LayoutGrid,    label:"Dashboard", id:"dashboard" },
  { icon:Settings,      label:"Settings",  id:"settings"  },
];

function Sidebar({ active }) {
  return (
    <div style={{ width:220, flexShrink:0, background:P.sidebar, borderRight:`1px solid ${P.border}`, display:"flex", flexDirection:"column" }}>
      <div style={{ padding:"18px 18px 14px", borderBottom:`1px solid ${P.border}` }}>
        <div style={{ display:"flex", alignItems:"center", gap:10 }}>
          <div style={{ width:30, height:30, borderRadius:2, flexShrink:0, background:"linear-gradient(135deg,#c8723c 0%,#d49a3a 100%)", display:"flex", alignItems:"center", justifyContent:"center" }}>
            <Droplets size={14} color="#fff" strokeWidth={2.5} />
          </div>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:13, letterSpacing:"0.08em", color:P.text, textTransform:"uppercase" }}>Water Mgmt</div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:400, fontSize:9, color:P.muted, letterSpacing:"0.1em", textTransform:"uppercase" }}>Platform · v3.4.1</div>
          </div>
        </div>
      </div>
      <nav style={{ padding:"10px 0", flex:1 }}>
        <div style={{ padding:"4px 18px 8px", fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase" }}>Navigation</div>
        {NAV_ITEMS.map(({ icon:Icon, label, id }) => {
          const isActive = id===active;
          return (
            <div key={id} style={{ display:"flex", alignItems:"center", gap:10, padding:"9px 18px", background:isActive?"rgba(200,114,60,0.1)":"transparent", borderLeft:`2px solid ${isActive?P.rust:"transparent"}`, cursor:"pointer" }}>
              <Icon size={14} color={isActive?P.rust:P.vdim} />
              <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:13, fontWeight:isActive?600:400, letterSpacing:"0.06em", textTransform:"uppercase", color:isActive?P.text:P.muted }}>{label}</span>
              {id==="downtimes" && <span style={{ marginLeft:"auto", fontSize:9, fontFamily:"'DM Mono',monospace", color:P.red, background:"rgba(220,38,38,0.1)", padding:"1px 5px", borderRadius:2 }}>14</span>}
            </div>
          );
        })}
      </nav>
      <div style={{ padding:"10px 18px", borderTop:`1px solid ${P.border}` }}>
        <div style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:6 }}>Active View</div>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"6px 10px", background:"rgba(0,0,0,0.05)", border:`1px solid ${P.border}`, borderRadius:2, cursor:"pointer" }}>
          <span style={{ fontSize:12, color:P.text, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600 }}>All Sites (7)</span>
          <ChevronDown size={11} color={P.vdim} />
        </div>
      </div>
      <div style={{ padding:"10px 18px 14px", borderTop:`1px solid ${P.border}`, display:"flex", alignItems:"center", gap:9 }}>
        <div style={{ width:28, height:28, borderRadius:"50%", background:"rgba(0,0,0,0.08)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
          <User size={12} color={P.muted} />
        </div>
        <div>
          <div style={{ fontSize:12, color:P.text, fontFamily:"'Inter',sans-serif", fontWeight:500 }}>J. Pemberton</div>
          <div style={{ fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Hydrogeologist</div>
        </div>
        <Bell size={13} color={P.vdim} style={{ marginLeft:"auto", cursor:"pointer" }} />
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 01 — METRICS PAGE (BEFORE — legacy)
// ═══════════════════════════════════════════════════════════════════════════

const LegacyTopBar = () => (
  <>
    <div style={{ background:"#1e3a5c", padding:"0 20px", height:36, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
      <div style={{ display:"flex", alignItems:"center", gap:10 }}>
        <span style={{ color:"#fff", fontSize:14, fontWeight:"bold" }}>MiningCo Operations</span>
        <span style={{ color:"#7aadda", fontSize:11 }}>|</span>
        <span style={{ color:"#9ac3e0", fontSize:12 }}>Bore Metrics System v2.1</span>
      </div>
      <div style={{ display:"flex", alignItems:"center", gap:16, fontSize:11, color:"#9ac3e0" }}>
        <span>Logged in: JPEMBERTON</span>
        <span style={{ color:"#7aadda" }}>|</span>
        <span style={{ cursor:"pointer", textDecoration:"underline" }}>Logout</span>
      </div>
    </div>
    <div style={{ background:"#fff", borderBottom:"2px solid #1e3a5c", padding:"0 20px", height:32, display:"flex", alignItems:"center" }}>
      {["Home","Bore Data","Reports","Alerts (3)","Administration","Help"].map((item,i) => (
        <a key={i} href="#" onClick={e=>e.preventDefault()} style={{ padding:"0 14px", height:"100%", display:"flex", alignItems:"center", fontSize:12, color:i===1?"#fff":"#0055aa", background:i===1?"#1e3a5c":"transparent", textDecoration:"none", borderRight:"1px solid #ddd" }}>{item}</a>
      ))}
    </div>
  </>
);

const LegacyFooter = () => (
  <div style={{ background:"#1e3a5c", padding:"8px 24px", marginTop:24, fontSize:10, color:"#9ac3e0", display:"flex", justifyContent:"space-between" }}>
    <span>Last updated: 11 Jul 2025 23:45 AWST</span>
    <span>Bore Metrics System v2.1.4 · IT Services · <a href="#" style={{ color:"#9ac3e0" }}>Contact Support</a></span>
  </div>
);

function LegacyScreen() {
  const [period, setPeriod] = useStateWMP("Daily");
  return (
    <div style={{ width:1440, background:"#f0f0f0", minHeight:900, fontFamily:"Arial, Helvetica, sans-serif", color:"#333" }}>
      <LegacyTopBar />
      <div style={{ padding:"16px 24px" }}>
        <div style={{ fontSize:11, color:"#666", marginBottom:10 }}>
          <span style={{ color:"#0055aa", cursor:"pointer" }}>Home</span> &gt;&nbsp;
          <span style={{ color:"#0055aa", cursor:"pointer" }}>Bore Data</span> &gt;&nbsp;Abstraction Report
        </div>
        <h1 style={{ fontSize:18, fontWeight:"bold", color:"#1e3a5c", marginBottom:14, borderBottom:"1px solid #ccc", paddingBottom:8 }}>Bore Abstraction Report</h1>
        <div style={{ display:"flex", alignItems:"center", gap:12, marginBottom:16, padding:"10px 12px", background:"#e8e8e8", border:"1px solid #ccc" }}>
          <label style={{ fontSize:12, color:"#444" }}>Site:</label>
          <select style={{ fontSize:12, padding:"2px 6px", border:"1px solid #aaa", background:"#fff", borderRadius:0 }}><option>All Sites</option></select>
          <label style={{ fontSize:12, color:"#444" }}>Period:</label>
          {["Daily","Weekly","Monthly"].map(p => (
            <button key={p} onClick={()=>setPeriod(p)} style={{ fontSize:11, padding:"2px 10px", cursor:"pointer", background:period===p?"#0055aa":"#fff", color:period===p?"#fff":"#0055aa", border:"1px solid #0055aa", borderRadius:0 }}>{p}</button>
          ))}
          <label style={{ fontSize:12, color:"#444" }}>From:</label>
          <input type="text" defaultValue="01/07/2025" style={{ fontSize:12, padding:"2px 6px", border:"1px solid #aaa", width:90, borderRadius:0 }} />
          <label style={{ fontSize:12, color:"#444" }}>To:</label>
          <input type="text" defaultValue="12/07/2025" style={{ fontSize:12, padding:"2px 6px", border:"1px solid #aaa", width:90, borderRadius:0 }} />
          <button style={{ fontSize:12, padding:"3px 14px", background:"#0055aa", color:"#fff", border:"1px solid #003d82", cursor:"pointer", borderRadius:0 }}>View Report</button>
          <button style={{ fontSize:12, padding:"3px 14px", background:"#666", color:"#fff", border:"1px solid #444", cursor:"pointer", borderRadius:0 }}>Export</button>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:16 }}>
          <div style={{ background:"#fff", border:"1px solid #ccc", padding:12 }}>
            <div style={{ fontSize:13, fontWeight:"bold", color:"#333", marginBottom:10, borderBottom:"1px solid #eee", paddingBottom:6 }}>Daily Abstraction (ML/day)</div>
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={LEGACY_DAILY} barCategoryGap="40%">
                <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
                <XAxis dataKey="name" tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} />
                <YAxis tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} domain={[0,2]} />
                <Tooltip contentStyle={{ fontSize:11, fontFamily:"Arial" }} />
                <Bar dataKey="abs" name="Abstraction (ML)" fill="#0055aa" />
              </BarChart>
            </ResponsiveContainer>
          </div>
          <div style={{ background:"#fff", border:"1px solid #ccc", padding:12 }}>
            <div style={{ fontSize:13, fontWeight:"bold", color:"#333", marginBottom:10, borderBottom:"1px solid #eee", paddingBottom:6 }}>Weekly Trend (ML total)</div>
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={LEGACY_WEEKLY}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
                <XAxis dataKey="name" tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} />
                <YAxis tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} domain={[6,11]} />
                <Tooltip contentStyle={{ fontSize:11, fontFamily:"Arial" }} />
                <Line dataKey="abs" name="Total (ML)" stroke="#0055aa" strokeWidth={1.5} dot={{ r:3, fill:"#0055aa" }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
        <div style={{ background:"#fff", border:"1px solid #ccc" }}>
          <div style={{ fontSize:13, fontWeight:"bold", color:"#333", padding:"8px 12px", background:"#f5f5f5", borderBottom:"1px solid #ccc" }}>Bore Data Summary — All Sites</div>
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
            <thead><tr style={{ background:"#e0e8f0" }}>
              {["Bore ID","Site","Today (ML)","Yesterday (ML)","7-Day Avg (ML)","Status"].map(h => (
                <th key={h} style={{ padding:"6px 12px", textAlign:"left", borderBottom:"1px solid #bbb", fontWeight:"bold", color:"#1e3a5c", whiteSpace:"nowrap" }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {LEGACY_TABLE.map((row,i) => (
                <tr key={row.id} style={{ background:i%2===0?"#fff":"#f7f7f7" }}>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", color:"#0055aa", cursor:"pointer" }}>{row.id}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee" }}>{row.site}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", fontFamily:"Courier New,monospace" }}>{row.today}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", fontFamily:"Courier New,monospace" }}>{row.yest}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", fontFamily:"Courier New,monospace" }}>{row.avg}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee" }}>
                    <span style={{ color:row.status==="Active"?"green":row.status==="Offline"?"red":"#cc7700", fontSize:11 }}>{row.status}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ padding:"6px 12px", fontSize:11, color:"#666", borderTop:"1px solid #eee", display:"flex", justifyContent:"space-between" }}>
            <span>Showing 6 of 6 bores</span>
            <span><a href="#" style={{ color:"#0055aa" }}>Export to Excel</a></span>
          </div>
        </div>
      </div>
      <LegacyFooter />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 02 — BORE DETAIL (BEFORE — legacy / sparse)
// ═══════════════════════════════════════════════════════════════════════════

function LegacyBoreDetailScreen() {
  return (
    <div style={{ width:1440, background:"#f0f0f0", minHeight:900, fontFamily:"Arial, Helvetica, sans-serif", color:"#333" }}>
      <LegacyTopBar />
      <div style={{ padding:"16px 24px" }}>
        <div style={{ fontSize:11, color:"#666", marginBottom:10 }}>
          <span style={{ color:"#0055aa", cursor:"pointer" }}>Home</span> &gt;&nbsp;
          <span style={{ color:"#0055aa", cursor:"pointer" }}>Bore Data</span> &gt;&nbsp;Bore Detail
        </div>
        <h1 style={{ fontSize:18, fontWeight:"bold", color:"#1e3a5c", marginBottom:14, borderBottom:"1px solid #ccc", paddingBottom:8 }}>Bore Detail — BR-0041</h1>
        <div style={{ display:"grid", gridTemplateColumns:"420px 1fr", gap:16, marginBottom:16 }}>
          <div style={{ background:"#fff", border:"1px solid #ccc", padding:12 }}>
            <div style={{ fontSize:13, fontWeight:"bold", color:"#333", marginBottom:10, borderBottom:"1px solid #eee", paddingBottom:6 }}>Bore Information</div>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
              <tbody>
                {[
                  ["Bore ID","BR-0041"],
                  ["Site","Site 4"],
                  ["Location Ref.","N: 7,588,412 / E: 411,982"],
                  ["Installation Date","14 March 2019"],
                  ["Rated Capacity","1.50 ML/day"],
                  ["Current Status","Active"],
                  ["Last Inspection","08 April 2025"],
                  ["Pump Model","Grundfos SP-60"],
                  ["Casing Diameter","250 mm"],
                  ["Install Depth","87.4 m"],
                ].map(([k,v]) => (
                  <tr key={k} style={{ borderBottom:"1px solid #f0f0f0" }}>
                    <td style={{ padding:"5px 12px 5px 0", color:"#666", width:160, whiteSpace:"nowrap", verticalAlign:"top" }}>{k}</td>
                    <td style={{ padding:"5px 0", color:k==="Current Status"?"green":"#333", fontWeight:k==="Current Status"?"bold":"normal" }}>{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ marginTop:12, padding:"8px 0", borderTop:"1px solid #eee", fontSize:11, color:"#666" }}>
              <span style={{ color:"#0055aa", cursor:"pointer" }}>← Back to Bore List</span>
              &nbsp;&nbsp;|&nbsp;&nbsp;
              <span style={{ color:"#0055aa", cursor:"pointer" }}>Print</span>
              &nbsp;&nbsp;|&nbsp;&nbsp;
              <span style={{ color:"#0055aa", cursor:"pointer" }}>Export</span>
            </div>
          </div>
          <div style={{ background:"#fff", border:"1px solid #ccc", padding:12 }}>
            <div style={{ fontSize:13, fontWeight:"bold", color:"#333", marginBottom:10, borderBottom:"1px solid #eee", paddingBottom:6 }}>Historical Abstraction (ML/day) — Last 5 Weeks</div>
            <ResponsiveContainer width="100%" height={260}>
              <LineChart data={LEGACY_BORE_HIST}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
                <XAxis dataKey="name" tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} />
                <YAxis tick={{ fontSize:11, fontFamily:"Arial", fill:"#555" }} domain={[0,2]} />
                <Tooltip contentStyle={{ fontSize:11, fontFamily:"Arial" }} />
                <Line dataKey="abs" name="Abstraction (ML/day)" stroke="#0055aa" strokeWidth={1.5} dot={{ r:4, fill:"#0055aa" }} />
              </LineChart>
            </ResponsiveContainer>
            <div style={{ fontSize:11, color:"#888", marginTop:8 }}>Note: Zero values indicate bore was offline (no data recorded).</div>
          </div>
        </div>
        <div style={{ background:"#fff", border:"1px solid #ccc" }}>
          <div style={{ fontSize:13, fontWeight:"bold", color:"#333", padding:"8px 12px", background:"#f5f5f5", borderBottom:"1px solid #ccc" }}>Recent Readings — Last 7 Days</div>
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
            <thead><tr style={{ background:"#e0e8f0" }}>
              {["Date","Abstraction (ML/day)","Status","Notes"].map(h => (
                <th key={h} style={{ padding:"6px 12px", textAlign:"left", borderBottom:"1px solid #bbb", fontWeight:"bold", color:"#1e3a5c" }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {LEGACY_BORE_READINGS.map((r,i) => (
                <tr key={r.date} style={{ background:i%2===0?"#fff":"#f7f7f7" }}>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee" }}>{r.date}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", fontFamily:"Courier New,monospace", color:r.ml==="0.00"?"#cc0000":"#333" }}>{r.ml}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", color:r.status==="Normal"?"green":"red" }}>{r.status}</td>
                  <td style={{ padding:"5px 12px", borderBottom:"1px solid #eee", color:"#666" }}>{r.status==="Offline"?"Equipment offline — no data recorded for this date":"—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ padding:"6px 12px", fontSize:11, color:"#666", borderTop:"1px solid #eee" }}>
            Showing 7 days &nbsp;|&nbsp; <a href="#" style={{ color:"#0055aa" }}>Export to Excel</a>
          </div>
        </div>
      </div>
      <LegacyFooter />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 03 — CONCEPT A: ALL-IN-ONE DASHBOARD (rejected — dense/overwhelming)
// ═══════════════════════════════════════════════════════════════════════════

function ConceptAllInOneScreen() {
  const tinyLabel = { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:9, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted };
  const microCard = (label:string, value:string, color?:string, unit?:string) => (
    <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, padding:"8px 10px" }}>
      <div style={tinyLabel}>{label}</div>
      <div style={{ fontFamily:"'DM Mono',monospace", fontSize:18, fontWeight:500, color:color??P.text, lineHeight:1.2, marginTop:3 }}>{value}<span style={{ fontSize:9, color:P.muted }}> {unit}</span></div>
    </div>
  );
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="overview" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:50, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:17, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Operational Overview — All Sites</div>
            <div style={{ fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace" }}>All metrics · All sites · 12 Jul 2025</div>
          </div>
          <div style={{ display:"flex", gap:6 }}>
            {["Site Filter","Date Range","Export"].map(b => (
              <button key={b} style={{ padding:"4px 10px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:10, color:P.muted, cursor:"pointer", fontFamily:"'Barlow Condensed',sans-serif" }}>{b}</button>
            ))}
          </div>
        </div>
        <DirectionBanner label="Design Direction A: Unified Dashboard — all operational metrics on one screen" status="rejected" />
        <div style={{ padding:"10px 20px", flex:1, display:"flex", flexDirection:"column", gap:8 }}>
          {/* Row 1: 6 micro stat cards */}
          <div style={{ display:"grid", gridTemplateColumns:"repeat(6,1fr)", gap:8 }}>
            {microCard("Active Bores","71","#16a34a")}
            {microCard("Bores Offline","6",P.red)}
            {microCard("Total Abstraction","7.82","","ML/day")}
            {microCard("vs. Target","-8.4%",P.red)}
            {microCard("Active Downtimes","14",P.red)}
            {microCard("Avg Aquifer Level","-9.7","","m")}
          </div>
          {/* Row 2: 3 charts */}
          <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8 }}>
            <Panel title="Abstraction Trend — All Sites (ML/day)">
              <div style={{ padding:"8px 10px 4px" }}>
                <ResponsiveContainer width="100%" height={155}>
                  <AreaChart data={ABSTRACTION_MULTI}>
                    <defs><linearGradient id="cg1" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor={P.rust} stopOpacity={0.15}/><stop offset="95%" stopColor={P.rust} stopOpacity={0}/></linearGradient></defs>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="day" tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false} interval={2}/>
                    <YAxis tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    {["s1","s2","s3","s5"].map((k,i)=><Area key={k} dataKey={k} stroke={SITE_COLORS[i]} strokeWidth={1.5} fill="none" dot={false}/>)}
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Downtime Events — 12 Wk">
              <div style={{ padding:"8px 10px 4px" }}>
                <ResponsiveContainer width="100%" height={155}>
                  <BarChart data={WEEKLY_EVENTS.slice(-6)} barCategoryGap="40%">
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                    <XAxis dataKey="wk" tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="s4" name="Site 4" fill={P.red} radius={[1,1,0,0]}/>
                    <Bar dataKey="s1" name="Site 1" fill={P.rust} radius={[1,1,0,0]}/>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Site Abstraction vs. Target">
              <div style={{ padding:"8px 10px 4px" }}>
                <ResponsiveContainer width="100%" height={155}>
                  <BarChart data={BORE_YIELD_DATA} barCategoryGap="30%" layout="vertical">
                    <XAxis type="number" tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2.5]}/>
                    <YAxis type="category" dataKey="site" tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false} width={36}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="actual" name="Actual" fill={P.blue} radius={[0,1,1,0]}/>
                    <Bar dataKey="target" name="Target" fill={P.vdim} radius={[0,1,1,0]}/>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Panel>
          </div>
          {/* Row 3: 3 dense panels */}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:8 }}>
            <Panel title="Active Downtimes">
              <table style={{ width:"100%", borderCollapse:"collapse" }}>
                <thead><tr>
                  {["Bore","Site","Reason","Dur","Sev"].map(h=><th key={h} style={{ padding:"4px 8px", fontSize:8, color:P.muted, fontFamily:"'DM Mono',monospace", textAlign:"left", borderBottom:`1px solid ${P.borderLt}` }}>{h}</th>)}
                </tr></thead>
                <tbody>
                  {DOWNTIME_ROWS.slice(0,7).map((r,i)=>(
                    <tr key={r.id} style={{ background:i%2===0?"transparent":P.inner, borderBottom:`1px solid ${P.borderLt}` }}>
                      <td style={{ padding:"3px 8px", fontFamily:"'DM Mono',monospace", fontSize:10, color:P.rust }}>{r.id}</td>
                      <td style={{ padding:"3px 8px", fontSize:10, color:P.text2 }}>{r.site.split("–")[0].trim()}</td>
                      <td style={{ padding:"3px 8px", fontSize:10, color:P.text2 }}>{r.reason.split(" ")[0]}</td>
                      <td style={{ padding:"3px 8px", fontFamily:"'DM Mono',monospace", fontSize:10, color:SEV[r.sev]?.color }}>{r.dur}</td>
                      <td style={{ padding:"3px 8px" }}><span style={{ fontSize:8, fontFamily:"'DM Mono',monospace", color:SEV[r.sev]?.color, fontWeight:700 }}>{r.sev[0]}</span></td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ padding:"4px 8px", fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace", borderTop:`1px solid ${P.borderLt}` }}>+7 more events</div>
            </Panel>
            <Panel title="Equipment Health — All Bores">
              <div style={{ padding:"8px 10px" }}>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:4, marginBottom:8 }}>
                  {[["OK","48","#16a34a"],["WARN","9",P.amber],["DOWN","14",P.red],["MAINT","4",P.blue]].map(([l,n,c])=>(
                    <div key={l} style={{ textAlign:"center", padding:"5px 3px", background:P.inner, border:`1px solid ${c}20`, borderRadius:2 }}>
                      <div style={{ fontFamily:"'DM Mono',monospace", fontSize:16, fontWeight:500, color:c }}>{n}</div>
                      <div style={{ fontSize:8, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.04em" }}>{l}</div>
                    </div>
                  ))}
                </div>
                {COMPREHENSIVE_BORES.map(b => (
                  <div key={b.id} style={{ display:"flex", alignItems:"center", gap:6, padding:"3px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ width:6, height:6, borderRadius:"50%", background:b.pump==="Running"?"#16a34a":b.pump==="Fault"?P.red:P.amber, flexShrink:0 }}/>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:10, color:P.rust, width:60 }}>{b.id}</span>
                    <span style={{ fontSize:9, color:P.muted, flex:1 }}>{b.pump}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:9, color:b.temp>85?P.red:b.temp>75?P.amber:P.text }}>{b.temp}°C</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:9, color:P.text }}>{b.flow} ML</span>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Maintenance Schedule — Upcoming">
              <div style={{ padding:"8px 10px" }}>
                <div style={{ fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace", marginBottom:8 }}>Next 30 days · 7 events scheduled</div>
                {[
                  { date:"14 Jul", bore:"BR-0204", type:"Quarterly Inspection" },
                  { date:"16 Jul", bore:"BR-0715", type:"Pump Service" },
                  { date:"19 Jul", bore:"BR-0405", type:"Bearing Replacement" },
                  { date:"22 Jul", bore:"BR-0123", type:"Calibration Check" },
                  { date:"25 Jul", bore:"BR-0341", type:"Annual Overhaul" },
                  { date:"28 Jul", bore:"BR-0512", type:"Quarterly Inspection" },
                  { date:"02 Aug", bore:"BR-0077", type:"Pump Service" },
                ].map(m => (
                  <div key={m.bore+m.date} style={{ display:"flex", gap:8, alignItems:"center", padding:"4px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:9, color:P.blue, width:46, flexShrink:0 }}>{m.date}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:9, color:P.rust, width:60, flexShrink:0 }}>{m.bore}</span>
                    <span style={{ fontSize:10, color:P.text2 }}>{m.type}</span>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
          {/* Row 4: Aquifer data + full table */}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 2fr", gap:8 }}>
            <Panel title="Aquifer Levels — Key Sites (m BGL)">
              <div style={{ padding:"8px 10px 4px" }}>
                <ResponsiveContainer width="100%" height={130}>
                  <LineChart data={AQUIFER_DATA}>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="mo" tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:8, fill:P.muted }} axisLine={false} tickLine={false}/>
                    <Tooltip content={<LightTooltip/>}/>
                    {["s1","s2","s3","s4"].map((k,i)=><Line key={k} dataKey={k} name={`Site ${i+1}`} stroke={SITE_COLORS[i]} strokeWidth={1.5} dot={false}/>)}
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Bore Status — All Sites">
              <table style={{ width:"100%", borderCollapse:"collapse" }}>
                <thead><tr>
                  {["Bore ID","Site","Pump","Temp","Flow","Running Hrs","Alert"].map(h=><th key={h} style={{ padding:"4px 10px", fontSize:8, color:P.muted, fontFamily:"'DM Mono',monospace", textAlign:"left", borderBottom:`1px solid ${P.borderLt}` }}>{h}</th>)}
                </tr></thead>
                <tbody>
                  {COMPREHENSIVE_BORES.map((b,i)=>(
                    <tr key={b.id} style={{ background:i%2===0?"transparent":P.inner, borderBottom:`1px solid ${P.borderLt}` }}>
                      <td style={{ padding:"4px 10px", fontFamily:"'DM Mono',monospace", fontSize:10, color:P.rust }}>{b.id}</td>
                      <td style={{ padding:"4px 10px", fontSize:10, color:P.text2 }}>{b.site}</td>
                      <td style={{ padding:"4px 10px", fontSize:10 }}><span style={{ color:b.pump==="Running"?"#16a34a":b.pump==="Fault"?P.red:P.amber }}>{b.pump}</span></td>
                      <td style={{ padding:"4px 10px", fontFamily:"'DM Mono',monospace", fontSize:10, color:b.temp>85?P.red:b.temp>75?P.amber:P.text }}>{b.temp}°C</td>
                      <td style={{ padding:"4px 10px", fontFamily:"'DM Mono',monospace", fontSize:10 }}>{b.flow} ML</td>
                      <td style={{ padding:"4px 10px", fontFamily:"'DM Mono',monospace", fontSize:10, color:P.muted }}>{b.hrs.toLocaleString()}</td>
                      <td style={{ padding:"4px 10px" }}>{b.alert?<span style={{ fontSize:9, color:P.red, fontFamily:"'DM Mono',monospace", fontWeight:700 }}>▲</span>:<span style={{ fontSize:9, color:P.green }}>—</span>}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Panel>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 04 — CONCEPT B: ROLE-SPECIFIC DASHBOARD (Hydrogeologist)
// ═══════════════════════════════════════════════════════════════════════════

function ConceptRoleSpecificScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="dashboard" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ display:"flex", alignItems:"center", gap:10 }}>
              <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>My Dashboard</div>
              <span style={{ padding:"3px 10px", borderRadius:2, background:"rgba(37,99,235,0.1)", border:"1px solid rgba(37,99,235,0.2)", fontSize:10, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, letterSpacing:"0.07em", color:P.blue }}>HYDROGEOLOGIST VIEW</span>
            </div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>J. Pemberton · Groundwater & Aquifer metrics · All Sites</div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <div style={{ position:"relative" }}>
              <select style={{ appearance:"none", padding:"5px 28px 5px 10px", background:P.card, border:`1px solid ${P.borderMd}`, borderRadius:2, fontSize:12, color:P.blue, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, cursor:"pointer" }}>
                <option>Hydrogeologist</option><option>Site Supervisor</option><option>Water Engineer</option><option>Executive</option>
              </select>
              <ChevronDown size={11} color={P.blue} style={{ position:"absolute", right:8, top:"50%", transform:"translateY(-50%)", pointerEvents:"none" }}/>
            </div>
            <div style={{ fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace", background:P.inner, padding:"5px 10px", borderRadius:2, border:`1px solid ${P.border}` }}>4 role views available</div>
          </div>
        </div>
        <DirectionBanner label="Design Direction B: Role-Specific Dashboards — separate dashboard per user type, maintained independently" status="rejected" />
        <div style={{ padding:"20px 24px", flex:1 }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:18 }}>
            <StatCard label="Avg Aquifer Depth" value="-9.7" unit="m BGL" sub="↓ 0.4m vs last month" color={P.amber}/>
            <StatCard label="Total Groundwater Ext." value="7.82" unit="ML/day" sub="86% of licenced volume"/>
            <StatCard label="Extraction Deficit" value="-1.18" unit="ML/day" sub="Site 4 offline — primary cause" color={P.red}/>
            <StatCard label="Bores at Risk (drawdown)" value="3" sub="S4-NP, S2-EF, S3-NP" color={P.amber}/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"3fr 2fr", gap:14, marginBottom:14 }}>
            <Panel title="Aquifer Water Level — Key Monitoring Points (m Below Ground Level)"
              action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>Jan – Jul 2025 · 4 monitoring bores</span>}>
              <div style={{ padding:"14px 14px 8px" }}>
                <ResponsiveContainer width="100%" height={230}>
                  <LineChart data={AQUIFER_DATA}>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="mo" tick={{ fontSize:10, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:10, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Legend wrapperStyle={{ fontSize:11, fontFamily:"'Barlow Condensed',sans-serif", paddingTop:8 }}/>
                    <Line dataKey="s1" name="Site 1 – Central" stroke={SITE_COLORS[0]} strokeWidth={2} dot={false}/>
                    <Line dataKey="s2" name="Site 2 – East Flats" stroke={SITE_COLORS[1]} strokeWidth={2} dot={false}/>
                    <Line dataKey="s3" name="Site 3 – N.Plateau" stroke={SITE_COLORS[2]} strokeWidth={2} dot={false}/>
                    <Line dataKey="s4" name="Site 4 – North Pit" stroke={SITE_COLORS[3]} strokeWidth={2.5} dot={false} strokeDasharray="4 2"/>
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Bore Yield vs. Demand — All Sites"
              action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>Current day · ML/day</span>}>
              <div style={{ padding:"14px 14px 8px" }}>
                <ResponsiveContainer width="100%" height={230}>
                  <BarChart data={BORE_YIELD_DATA} barCategoryGap="30%">
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                    <XAxis dataKey="site" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2.5]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Legend wrapperStyle={{ fontSize:11, fontFamily:"'Barlow Condensed',sans-serif", paddingTop:8 }}/>
                    <Bar dataKey="actual" name="Actual (ML/day)" fill={P.rust} radius={[1,1,0,0]}/>
                    <Bar dataKey="target" name="Target (ML/day)" fill={P.vdim} fillOpacity={0.4} radius={[1,1,0,0]}/>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Panel>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14 }}>
            <Panel title="Groundwater Balance Summary">
              <div style={{ padding:"14px 16px" }}>
                {[
                  { label:"Licensed Extraction Volume", value:"9.10 ML/day", color:P.text },
                  { label:"Current Extraction",         value:"7.82 ML/day", color:P.text },
                  { label:"Extraction Deficit",         value:"−1.28 ML/day", color:P.red },
                  { label:"Estimated Recharge",         value:"2.40 ML/day", color:P.green },
                  { label:"Net Balance",                value:"−4.90 ML/day", color:P.amber },
                  { label:"Licence Utilisation",        value:"86.0%", color:P.text },
                ].map(r => (
                  <div key={r.label} style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", padding:"6px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif" }}>{r.label}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, fontWeight:500, color:r.color }}>{r.value}</span>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Bore Interference Risk">
              <div style={{ padding:"12px 14px" }}>
                <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:10 }}>Drawdown impact between adjacent bores</div>
                {[
                  { bores:"BR-0472 ↔ BR-0619", risk:"HIGH",   dist:"340m", drawdown:"1.8m" },
                  { bores:"BR-0341 ↔ BR-0204", risk:"MEDIUM", dist:"520m", drawdown:"1.1m" },
                  { bores:"BR-0091 ↔ BR-0077", risk:"MEDIUM", dist:"480m", drawdown:"0.9m" },
                  { bores:"BR-0123 ↔ BR-0289", risk:"LOW",    dist:"710m", drawdown:"0.4m" },
                  { bores:"BR-0405 ↔ BR-0831", risk:"LOW",    dist:"650m", drawdown:"0.3m" },
                ].map(r => (
                  <div key={r.bores} style={{ display:"flex", alignItems:"center", gap:8, padding:"5px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ width:7, height:7, borderRadius:"50%", background:SEV[r.risk]?.color, flexShrink:0 }}/>
                    <span style={{ fontSize:10, color:P.text2, fontFamily:"'DM Mono',monospace", flex:1 }}>{r.bores}</span>
                    <span style={{ fontSize:9, color:P.muted }}>{r.dist}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:10, color:SEV[r.risk]?.color, fontWeight:600 }}>{r.drawdown}</span>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Water Quality Indicators">
              <div style={{ padding:"12px 14px" }}>
                <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:10 }}>Latest site readings — Jul 2025</div>
                {[
                  { site:"Site 1 – Central",       ec:"1,420", ph:"7.2", tds:"908",  flag:false },
                  { site:"Site 2 – East Flats",    ec:"1,680", ph:"7.8", tds:"1,075",flag:true  },
                  { site:"Site 3 – N.Plateau",     ec:"990",  ph:"7.1", tds:"634",  flag:false },
                  { site:"Site 4 – North Pit",     ec:"—",    ph:"—",   tds:"—",    flag:true  },
                  { site:"Site 5 – Deep Basin",    ec:"1,150", ph:"6.9", tds:"736",  flag:false },
                ].map(r => (
                  <div key={r.site} style={{ padding:"4px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                    <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:2 }}>
                      <span style={{ fontSize:10, color:P.text, fontFamily:"'Inter',sans-serif" }}>{r.site}</span>
                      {r.flag && <span style={{ fontSize:8, color:P.red, fontFamily:"'DM Mono',monospace", fontWeight:700 }}>FLAG</span>}
                    </div>
                    <div style={{ display:"flex", gap:12 }}>
                      {[["EC",r.ec,"μS/cm"],["pH",r.ph,""],["TDS",r.tds,"mg/L"]].map(([k,v,u]) => (
                        <span key={k} style={{ fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace" }}>{k}: <span style={{ color:P.text2 }}>{v}{u?" "+u:""}</span></span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 05 — FINAL DIRECTION: CONFIGURABLE DASHBOARD (polished, normal mode)
// ═══════════════════════════════════════════════════════════════════════════

const MINI_ABS_F = [
  { m:"Apr", v:312 }, { m:"May", v:348 }, { m:"Jun", v:291 }, { m:"Jul", v:89 },
];
const MINI_DT_F = [
  { m:"Apr", v:21 }, { m:"May", v:17 }, { m:"Jun", v:24 }, { m:"Jul", v:14 },
];

function FinalDashboardScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="dashboard" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>My Dashboard</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>J. Pemberton · Personalised view · All Sites · 12 Jul 2025</div>
          </div>
          <div style={{ display:"flex", gap:10, alignItems:"center" }}>
            <div style={{ fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Last updated 11:29 AWST</div>
            <button style={{ padding:"6px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:11, color:P.muted, cursor:"pointer", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em" }}>Customise Layout</button>
          </div>
        </div>
        <DirectionBanner label="Final Direction: Configurable Experience — one platform, each user personalises their own data hierarchy" status="selected" />
        <div style={{ padding:"20px 24px", flex:1 }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:18 }}>
            <StatCard label="Total Abstraction (Today)" value="7.82" unit="ML/day" sub="↓ 8.4% vs target"/>
            <StatCard label="Active Downtimes" value="14" sub="3 Critical · 4 High" color={P.red}/>
            <StatCard label="Bores Operational" value="71" unit="/ 77" sub="6 offline across 7 sites"/>
            <StatCard label="Licence Utilisation" value="86" unit="%" sub="↑ 2% vs last week" color={P.amber}/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr", gap:14, marginBottom:14 }}>
            <Panel title="Water Abstraction — All Sites (ML/day)"
              action={
                <div style={{ display:"flex", gap:4 }}>
                  {["Daily","Weekly","Monthly"].map((p,i)=>(
                    <button key={p} style={{ padding:"2px 10px", fontSize:10, cursor:"pointer", background:i===0?P.rust:"transparent", color:i===0?"#fff":P.muted, border:`1px solid ${i===0?P.rust:P.border}`, borderRadius:2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.04em" }}>{p}</button>
                  ))}
                </div>
              }>
              <div style={{ padding:"14px 14px 8px" }}>
                <ResponsiveContainer width="100%" height={220}>
                  <AreaChart data={ABSTRACTION_MULTI}>
                    <defs>
                      <linearGradient id="fdGrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={P.rust} stopOpacity={0.18}/>
                        <stop offset="95%" stopColor={P.rust} stopOpacity={0}/>
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="day" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} interval={2}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Area dataKey="s1" name="Site 1 – Central" stroke={SITE_COLORS[0]} strokeWidth={2} fill="url(#fdGrad)" dot={false}/>
                    <Area dataKey="s3" name="Site 3 – N.Plateau" stroke={SITE_COLORS[2]} strokeWidth={1.5} fill="none" dot={false}/>
                    <Area dataKey="s5" name="Site 5 – Deep Basin" stroke={SITE_COLORS[4]} strokeWidth={1.5} fill="none" dot={false}/>
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
              <Panel title="Site Status" style={{ flex:1 }}>
                <div style={{ padding:"12px 14px" }}>
                  {[
                    { site:"Site 1 – Central",       status:"Operational",  bores:"12/12", color:"#16a34a" },
                    { site:"Site 2 – East Flats",    status:"1 Downtime",   bores:"10/11", color:P.amber   },
                    { site:"Site 3 – North Plateau", status:"Operational",  bores:"9/9",   color:"#16a34a" },
                    { site:"Site 4 – North Pit",     status:"3 Downtimes",  bores:"11/14", color:P.red     },
                    { site:"Site 5 – Deep Basin",    status:"2 Downtimes",  bores:"9/11",  color:P.amber   },
                    { site:"Site 6 – South Ridge",   status:"Operational",  bores:"8/8",   color:"#16a34a" },
                    { site:"Site 7 – West Quarry",   status:"1 Downtime",   bores:"7/8",   color:P.amber   },
                  ].map(s => (
                    <div key={s.site} style={{ display:"flex", alignItems:"center", gap:8, padding:"5px 0", borderBottom:`1px solid ${P.borderLt}` }}>
                      <span style={{ width:7, height:7, borderRadius:"50%", background:s.color, flexShrink:0 }}/>
                      <span style={{ fontSize:11, color:P.text, fontFamily:"'Inter',sans-serif", flex:1 }}>{s.site}</span>
                      <span style={{ fontFamily:"'DM Mono',monospace", fontSize:10, color:P.muted }}>{s.bores}</span>
                    </div>
                  ))}
                </div>
              </Panel>
            </div>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14 }}>
            <Panel title="Active Downtimes"
              action={<span style={{ fontSize:9, padding:"1px 6px", borderRadius:2, background:"rgba(220,38,38,0.08)", color:P.red, fontFamily:"'DM Mono',monospace", fontWeight:600 }}>14 LIVE</span>}>
              <div style={{ padding:"10px 0" }}>
                {DOWNTIME_ROWS.slice(0,5).map((r,i) => (
                  <div key={r.id} style={{ padding:"7px 14px", display:"flex", alignItems:"center", gap:10, borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ width:6, height:6, borderRadius:"50%", background:SEV[r.sev]?.color, flexShrink:0 }}/>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:P.rust }}>{r.id}</span>
                    <span style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif", flex:1 }}>{r.reason}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:SEV[r.sev]?.color }}>{r.dur}</span>
                  </div>
                ))}
                <div style={{ padding:"7px 14px", fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>+9 more events →</div>
              </div>
            </Panel>
            <Panel title="Equipment Health"
              action={<span style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>77 bores monitored</span>}>
              <div style={{ padding:"14px 16px" }}>
                {[
                  { label:"Engine Temperature (avg)",  value:71,  max:100, color:"#16a34a", unit:"°C"  },
                  { label:"Bearing Wear Index (avg)",  value:44,  max:100, color:P.amber,   unit:"%"   },
                  { label:"Running Hours YTD (avg)",   value:4180, max:6000, color:P.blue,  unit:"hrs" },
                ].map(g => (
                  <div key={g.label} style={{ marginBottom:14 }}>
                    <div style={{ display:"flex", justifyContent:"space-between", marginBottom:5 }}>
                      <span style={{ fontSize:10, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase" }}>{g.label}</span>
                      <span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, color:g.color, fontWeight:500 }}>{g.value.toLocaleString()} <span style={{ fontSize:9, color:P.muted }}>{g.unit}</span></span>
                    </div>
                    <div style={{ height:4, background:"rgba(0,0,0,0.07)", borderRadius:2 }}>
                      <div style={{ width:`${Math.min(100,g.value/g.max*100)}%`, height:"100%", background:g.color, borderRadius:2 }}/>
                    </div>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Weekly Abstraction — All Sites (ML)"
              action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim, padding:"1px 6px", background:P.inner, borderRadius:2 }}>Personalised ✓</span>}>
              <div style={{ padding:"10px 12px 6px" }}>
                <ResponsiveContainer width="100%" height={175}>
                  <BarChart data={WEEKLY_SITE_ABS} barCategoryGap="30%">
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                    <XAxis dataKey="wk" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="s1" name="Site 1" stackId="a" fill={SITE_COLORS[0]} radius={[0,0,0,0]}/>
                    <Bar dataKey="s2" name="Site 2" stackId="a" fill={SITE_COLORS[1]}/>
                    <Bar dataKey="s3" name="Site 3" stackId="a" fill={SITE_COLORS[2]}/>
                    <Bar dataKey="s4" name="Site 4" stackId="a" fill={SITE_COLORS[3]}/>
                    <Bar dataKey="s5" name="Site 5" stackId="a" fill={SITE_COLORS[4]}/>
                    <Bar dataKey="s6" name="Site 6" stackId="a" fill={SITE_COLORS[5]}/>
                    <Bar dataKey="s7" name="Site 7" stackId="a" fill={SITE_COLORS[6]} radius={[1,1,0,0]}/>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Panel>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 06 — DOWNTIMES: ONGOING (live active events)
// ═══════════════════════════════════════════════════════════════════════════

function DowntimesLiveScreen() {
  const [siteFilter, setSiteFilter] = useStateWMP("All Sites");
  const [sevFilter, setSevFilter] = useStateWMP("All");
  const filtered = DOWNTIME_ROWS.filter(r =>
    (siteFilter==="All Sites" || r.site.includes(siteFilter)) &&
    (sevFilter==="All" || r.sev===sevFilter)
  );
  const ss = { appearance:"none", padding:"5px 28px 5px 10px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:12, color:P.text2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, cursor:"pointer" };
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="downtimes" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <div>
              <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Downtime Monitor</div>
              <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Real-time · All Sites · 12 Jul 2025 — 11:29 AWST</div>
            </div>
            <div style={{ padding:"4px 14px", borderRadius:2, background:"rgba(220,38,38,0.08)", border:"1px solid rgba(220,38,38,0.2)", display:"flex", alignItems:"center", gap:8 }}>
              <span style={{ width:7, height:7, borderRadius:"50%", background:P.red, boxShadow:"0 0 0 2px rgba(220,38,38,0.25)" }}/>
              <span style={{ fontFamily:"'DM Mono',monospace", fontSize:12, fontWeight:500, color:P.red }}>{DOWNTIME_ROWS.length} ACTIVE EVENTS</span>
            </div>
            <div style={{ fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}>
              {DOWNTIME_ROWS.filter(r=>r.sev==="CRITICAL").length} CRITICAL · {DOWNTIME_ROWS.filter(r=>r.sev==="HIGH").length} HIGH
            </div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:12 }}>
            <div style={{ display:"flex", alignItems:"center", gap:6, fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}><RefreshCw size={12}/>Last refresh: 11:29:04</div>
            <button style={{ padding:"6px 14px", background:"rgba(200,114,60,0.1)", border:"1px solid rgba(200,114,60,0.25)", borderRadius:2, cursor:"pointer", fontSize:11, color:P.rust, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em", textTransform:"uppercase" }}>+ Log Downtime</button>
          </div>
        </div>
        <div style={{ padding:"10px 24px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", gap:10, background:P.topbar }}>
          <span style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginRight:4 }}>Filter:</span>
          {[
            { options:["All Sites","Site 1","Site 4","Site 7"], value:siteFilter, set:setSiteFilter },
            { options:["All","CRITICAL","HIGH","MEDIUM","LOW"], value:sevFilter,  set:setSevFilter  },
          ].map(({options,value,set},i) => (
            <div key={i} style={{ position:"relative" }}>
              <select value={value} onChange={e=>set(e.target.value)} style={{ ...ss, color:value!==options[0]?P.rust:P.text2 }}>
                {options.map(o=><option key={o}>{o}</option>)}
              </select>
              <ChevronDown size={11} color={P.vdim} style={{ position:"absolute", right:8, top:"50%", transform:"translateY(-50%)", pointerEvents:"none" }}/>
            </div>
          ))}
          {[["All Reasons","Mechanical Failure","Pump Failure","Power Outage"],["Today","Last 7 Days","Last 30 Days"]].map((opts,i)=>(
            <div key={i} style={{ position:"relative" }}>
              <select style={ss}>{opts.map(o=><option key={o}>{o}</option>)}</select>
              <ChevronDown size={11} color={P.vdim} style={{ position:"absolute", right:8, top:"50%", transform:"translateY(-50%)", pointerEvents:"none" }}/>
            </div>
          ))}
          <div style={{ position:"relative", flex:1, maxWidth:240 }}>
            <Search size={13} color={P.vdim} style={{ position:"absolute", left:9, top:"50%", transform:"translateY(-50%)" }}/>
            <input placeholder="Search bore ID, site..." style={{ width:"100%", padding:"5px 10px 5px 28px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:12, color:P.text2, fontFamily:"'Inter',sans-serif", outline:"none", boxSizing:"border-box" }}/>
          </div>
          <div style={{ marginLeft:"auto", fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Showing {filtered.length} of {DOWNTIME_ROWS.length}</div>
        </div>
        <div style={{ flex:1, padding:"0 24px 24px", background:P.appBg }}>
          <table style={{ width:"100%", borderCollapse:"collapse" }}>
            <thead><tr style={{ borderBottom:`1px solid ${P.borderMd}` }}>
              {["Bore ID","Site","Reason Code","Duration","Started","Operator","Severity"].map(h=>(
                <th key={h} style={{ padding:"10px 12px", textAlign:"left", fontSize:9, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {filtered.map((row,i)=>(
                <tr key={row.id} style={{ borderBottom:`1px solid ${P.borderLt}`, background:i%2===0?P.card:P.inner }}>
                  <td style={{ padding:"10px 12px" }}><span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, fontWeight:500, color:P.rust }}>{row.id}</span></td>
                  <td style={{ padding:"10px 12px", fontSize:12, color:P.text, fontFamily:"'Inter',sans-serif" }}>{row.site}</td>
                  <td style={{ padding:"10px 12px", fontSize:12, color:P.text2, fontFamily:"'Inter',sans-serif" }}>{row.reason}</td>
                  <td style={{ padding:"10px 12px" }}><span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, fontWeight:500, color:row.sev==="CRITICAL"?P.red:row.sev==="HIGH"?P.amber:P.text }}>{row.dur}</span></td>
                  <td style={{ padding:"10px 12px", fontFamily:"'DM Mono',monospace", fontSize:12, color:P.muted }}>{row.start}</td>
                  <td style={{ padding:"10px 12px", fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif" }}>{row.op}</td>
                  <td style={{ padding:"10px 12px" }}><SevBadge sev={row.sev}/></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ padding:"12px 12px 0", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
            <span style={{ fontSize:11, color:P.dim, fontFamily:"'DM Mono',monospace" }}>Page 1 of 1 · {filtered.length} records</span>
            <div style={{ display:"flex", gap:4 }}>
              {["< Prev","1","Next >"].map(b=>(
                <button key={b} style={{ padding:"4px 10px", fontSize:11, background:b==="1"?P.card:"transparent", border:`1px solid ${P.border}`, borderRadius:2, color:b==="1"?P.rust:P.muted, cursor:"pointer", fontFamily:"'DM Mono',monospace" }}>{b}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 07 — DOWNTIMES: COMPLETED (historical / resolved)
// ═══════════════════════════════════════════════════════════════════════════

function DowntimesCompletedScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="downtimes" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <div>
              <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Downtime Records</div>
              <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Historical · All Sites · Jun – Jul 2025</div>
            </div>
            <div style={{ padding:"4px 14px", borderRadius:2, background:"rgba(22,163,74,0.08)", border:"1px solid rgba(22,163,74,0.2)", display:"flex", alignItems:"center", gap:8 }}>
              <CheckCircle size={13} color={P.green}/>
              <span style={{ fontFamily:"'DM Mono',monospace", fontSize:12, fontWeight:500, color:P.green }}>47 RESOLVED — LAST 30 DAYS</span>
            </div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <div style={{ fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Avg resolution time: <span style={{ color:P.text, fontWeight:500 }}>1h 47m</span></div>
            <button style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, cursor:"pointer", fontSize:11, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em" }}>
              <Download size={12}/>Export CSV
            </button>
          </div>
        </div>
        <div style={{ padding:"10px 24px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", gap:10, background:P.topbar }}>
          <span style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginRight:4 }}>Filter:</span>
          {[
            ["Date Range",  ["Last 30 Days","Last 60 Days","Last 90 Days","Custom"]],
            ["Site",        ["All Sites","Site 1 – Central","Site 2 – East Flats","Site 4 – North Pit"]],
            ["Reason Code", ["All Reasons","Mechanical Failure","Pump Failure","Power Outage","Sensor Fault"]],
            ["Resolved By", ["All Operators","T. Okafor","S. Patel","P. Nguyen","J. Tan"]],
          ].map(([label, opts])=>(
            <div key={label} style={{ position:"relative" }}>
              <select style={{ appearance:"none", padding:"5px 28px 5px 10px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:12, color:P.text2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, cursor:"pointer" }}>
                {(opts).map(o=><option key={o}>{o}</option>)}
              </select>
              <ChevronDown size={11} color={P.vdim} style={{ position:"absolute", right:8, top:"50%", transform:"translateY(-50%)", pointerEvents:"none" }}/>
            </div>
          ))}
          <div style={{ marginLeft:"auto", fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Showing 12 of 47 records</div>
        </div>
        <div style={{ flex:1, padding:"0 24px 24px", background:P.appBg }}>
          <table style={{ width:"100%", borderCollapse:"collapse" }}>
            <thead><tr style={{ borderBottom:`1px solid ${P.borderMd}` }}>
              {["Event ID","Bore ID","Site","Reason Code","Started","Duration","Resolved By","Resolution Notes","Status"].map(h=>(
                <th key={h} style={{ padding:"10px 12px", textAlign:"left", fontSize:9, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted, whiteSpace:"nowrap" }}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {RESOLVED_DOWNTIMES.map((row,i)=>(
                <tr key={row.id} style={{ borderBottom:`1px solid ${P.borderLt}`, background:i%2===0?P.card:P.inner }}>
                  <td style={{ padding:"9px 12px", fontFamily:"'DM Mono',monospace", fontSize:11, color:P.muted }}>{row.id}</td>
                  <td style={{ padding:"9px 12px" }}><span style={{ fontFamily:"'DM Mono',monospace", fontSize:12, fontWeight:500, color:P.rust }}>{row.bore}</span></td>
                  <td style={{ padding:"9px 12px", fontSize:12, color:P.text, fontFamily:"'Inter',sans-serif" }}>{row.site}</td>
                  <td style={{ padding:"9px 12px", fontSize:12, color:P.text2, fontFamily:"'Inter',sans-serif" }}>{row.reason}</td>
                  <td style={{ padding:"9px 12px", fontFamily:"'DM Mono',monospace", fontSize:11, color:P.muted, whiteSpace:"nowrap" }}>{row.started}</td>
                  <td style={{ padding:"9px 12px", fontFamily:"'DM Mono',monospace", fontSize:12, color:P.text, fontWeight:500 }}>{row.dur}</td>
                  <td style={{ padding:"9px 12px", fontSize:11, color:P.text2, fontFamily:"'Inter',sans-serif", whiteSpace:"nowrap" }}>{row.resolvedBy}</td>
                  <td style={{ padding:"9px 12px", fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif", maxWidth:200 }}>{row.notes}</td>
                  <td style={{ padding:"9px 12px" }}><StatusBadge status="RESOLVED"/></td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ padding:"12px 12px 0", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
            <span style={{ fontSize:11, color:P.dim, fontFamily:"'DM Mono',monospace" }}>Page 1 of 4 · 47 total records</span>
            <div style={{ display:"flex", gap:4 }}>
              {["< Prev","1","2","3","4","Next >"].map(b=>(
                <button key={b} style={{ padding:"4px 10px", fontSize:11, background:b==="1"?P.card:"transparent", border:`1px solid ${P.border}`, borderRadius:2, color:b==="1"?P.rust:P.muted, cursor:"pointer", fontFamily:"'DM Mono',monospace" }}>{b}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 08 — DOWNTIMES: TRENDS (aggregated reporting)
// ═══════════════════════════════════════════════════════════════════════════

function DowntimesTrendsScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="downtimes" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Downtime Trends</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>All Sites · Apr 2025 – Jul 2025 · 12 weeks</div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <div style={{ position:"relative" }}>
              <select style={{ appearance:"none", padding:"5px 28px 5px 10px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:12, color:P.text2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, cursor:"pointer" }}>
                <option>Last 12 Weeks</option><option>Last 6 Months</option><option>Year to Date</option>
              </select>
              <ChevronDown size={11} color={P.vdim} style={{ position:"absolute", right:8, top:"50%", transform:"translateY(-50%)", pointerEvents:"none" }}/>
            </div>
            <button style={{ display:"flex", alignItems:"center", gap:6, padding:"5px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:11, color:P.muted, cursor:"pointer", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em" }}>
              <Download size={12}/>Export Report
            </button>
          </div>
        </div>
        <div style={{ padding:"20px 24px", flex:1 }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:20 }}>
            <StatCard label="Total Events (12 wk)" value="155" sub="↑ 12% vs prior period" color={P.amber}/>
            <StatCard label="Total Downtime" value="358.2" unit="hrs" sub="Across all 7 sites"/>
            <StatCard label="Most Affected Site" value="Site 4" sub="North Pit · 89.5 hrs" color={P.red}/>
            <StatCard label="Top Reason Code" value="47" unit="events" sub="Mechanical Failure" color={P.rust}/>
          </div>
          <Panel title="Downtime Events per Week — By Site" style={{ marginBottom:16 }}
            action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>Apr 28 – Jul 12 2025</span>}>
            <div style={{ padding:"16px 16px 8px" }}>
              <ResponsiveContainer width="100%" height={230}>
                <LineChart data={WEEKLY_EVENTS}>
                  <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                  <XAxis dataKey="wk" tick={{ fontSize:10, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                  <YAxis tick={{ fontSize:10, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,14]}/>
                  <Tooltip content={<LightTooltip/>}/>
                  <Legend wrapperStyle={{ fontSize:11, fontFamily:"'Barlow Condensed',sans-serif", paddingTop:8 }}/>
                  {["s1","s2","s3","s4","s5","s6","s7"].map((k,i)=>(
                    <Line key={k} dataKey={k} name={`Site ${i+1}`} stroke={SITE_COLORS[i]} strokeWidth={k==="s4"?2.5:1.5} dot={false} activeDot={{ r:4 }}/>
                  ))}
                </LineChart>
              </ResponsiveContainer>
            </div>
          </Panel>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16 }}>
            <Panel title="Cumulative Downtime Duration by Site (hrs)"
              action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>12-week rolling</span>}>
              <div style={{ padding:"16px 16px 8px" }}>
                <ResponsiveContainer width="100%" height={240}>
                  <BarChart data={SITE_DURATIONS} barCategoryGap="35%">
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                    <XAxis dataKey="site" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="hours" name="Hours" radius={[1,1,0,0]}>
                      {SITE_DURATIONS.map((_,i)=><Cell key={i} fill={SITE_DURATIONS[i].fill}/>)}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Downtime Volume by Reason Code"
              action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>155 total events</span>}>
              <div style={{ padding:"10px" }}>
                <ResponsiveContainer width="100%" height={248}>
                  <Treemap data={REASON_TREE} dataKey="size" aspectRatio={4/3} stroke="transparent" content={<TreemapCell/>}/>
                </ResponsiveContainer>
              </div>
              <div style={{ padding:"0 14px 12px", display:"flex", flexWrap:"wrap", gap:"4px 14px" }}>
                {REASON_TREE.map(r=>(
                  <div key={r.name} style={{ display:"flex", alignItems:"center", gap:5, fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif" }}>
                    <span style={{ width:8, height:8, borderRadius:1, background:r.fill, display:"inline-block", flexShrink:0 }}/>
                    {r.name} ({r.size})
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 09 — METRICS PAGE (AFTER — redesigned + interactive legend)
// ═══════════════════════════════════════════════════════════════════════════

const SERIES_META = [
  { key:"s1", label:"Site 1 – Central",        color:SITE_COLORS[0], on:true,  dragging:false },
  { key:"s3", label:"Site 3 – North Plateau",  color:SITE_COLORS[2], on:true,  dragging:true  },
  { key:"s5", label:"Site 5 – Deep Basin",     color:SITE_COLORS[4], on:true,  dragging:false },
  { key:"s2", label:"Site 2 – East Flats",     color:SITE_COLORS[1], on:false, dragging:false },
  { key:"s4", label:"Site 4 – North Pit",      color:SITE_COLORS[3], on:false, dragging:false },
];

function MetricsAfterScreen() {
  const [period, setPeriod] = useStateWMP("Daily");
  const [series, setSeries] = useStateWMP(SERIES_META.map(s=>s.on));
  const activeSites = ["S1 – Central","S3 – N.Plateau","S4 – N.Pit","S5 – Deep Basin"].map((s,i)=>({ label:s, active:i!==2 }));

  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="reports" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Metrics — Water Abstraction</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Jul 1 – Jul 12 2025 · All Sites</div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <div style={{ display:"flex", gap:2 }}>
              {["Daily","Weekly","Monthly"].map(p=>(
                <button key={p} onClick={()=>setPeriod(p)} style={{ padding:"5px 14px", fontSize:11, cursor:"pointer", background:period===p?P.rust:"transparent", color:period===p?"#fff":P.muted, border:`1px solid ${period===p?P.rust:P.border}`, borderRadius:2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.04em" }}>{p}</button>
              ))}
            </div>
            <button style={{ display:"flex", alignItems:"center", gap:6, padding:"5px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, fontSize:11, color:P.muted, cursor:"pointer", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600 }}>
              <Download size={12}/>Export
            </button>
          </div>
        </div>
        <div style={{ padding:"20px 24px", flex:1 }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:18 }}>
            <StatCard label="Current Abstraction (Today)" value="7.82" unit="ML/day" sub="↓ 1.28 ML vs licence" color={P.amber}/>
            <StatCard label="12-Day Average" value="1.29" unit="ML/bore/day" sub="↑ 0.04 vs prior 12 days"/>
            <StatCard label="Peak Recorded (12 days)" value="1.48" unit="ML/day" sub="Site 3 · Jul 3"/>
            <StatCard label="Days with Downtime Gap" value="4" unit="/ 12" sub="Sites 4 & 1 primarily" color={P.red}/>
          </div>

          <div style={{ display:"grid", gridTemplateColumns:"1fr 280px", gap:14, marginBottom:14 }}>
            <Panel title="Abstraction Rate — All Sites (ML/bore/day)"
              action={
                <div style={{ display:"flex", gap:6, alignItems:"center" }}>
                  <span style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>Jul 1 – Jul 12 2025</span>
                  {activeSites.map(s=>(
                    <span key={s.label} style={{ padding:"2px 8px", borderRadius:2, fontSize:9, fontFamily:"'DM Mono',monospace", fontWeight:500, background:s.active?"rgba(200,114,60,0.08)":"rgba(0,0,0,0.05)", color:s.active?P.rust:P.vdim, border:`1px solid ${s.active?"rgba(200,114,60,0.2)":P.borderLt}` }}>{s.label}</span>
                  ))}
                </div>
              }>
              <div style={{ padding:"14px 14px 8px" }}>
                <ResponsiveContainer width="100%" height={260}>
                  <AreaChart data={ABSTRACTION_MULTI}>
                    <defs>
                      {SERIES_META.filter((_,i)=>series[i]).map(s=>(
                        <linearGradient key={s.key} id={`mg_${s.key}`} x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor={s.color} stopOpacity={0.12}/>
                          <stop offset="95%" stopColor={s.color} stopOpacity={0}/>
                        </linearGradient>
                      ))}
                    </defs>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="day" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    {SERIES_META.filter((_,i)=>series[i]).map(s=>(
                      <Area key={s.key} dataKey={s.key} name={s.label} stroke={s.color} strokeWidth={2} fill={`url(#mg_${s.key})`} dot={false} activeDot={{ r:4 }}/>
                    ))}
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Panel>

            {/* Interactive legend panel */}
            <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, boxShadow:"0 1px 3px rgba(0,0,0,0.06)", display:"flex", flexDirection:"column" }}>
              <div style={{ padding:"10px 14px", borderBottom:`1px solid ${P.borderLt}` }}>
                <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted, marginBottom:3 }}>Legend</div>
                <div style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>Drag to reorder · Toggle to show/hide</div>
              </div>
              <div style={{ flex:1, padding:"6px 0" }}>
                {SERIES_META.map((s,i)=>{
                  const isDragging = s.dragging;
                  const isOff = !series[i];
                  return (
                    <div key={s.key} style={{
                      display:"flex", alignItems:"center", gap:8, padding:"8px 14px",
                      background:isDragging?"rgba(200,114,60,0.06)":"transparent",
                      borderBottom:`1px solid ${P.borderLt}`,
                      boxShadow:isDragging?"0 4px 12px rgba(0,0,0,0.1)":"none",
                      transform:isDragging?"translateY(-1px)":"none",
                      position:"relative", zIndex:isDragging?2:1,
                      opacity:isOff?0.45:1,
                      cursor:"grab",
                    }}>
                      <GripVertical size={12} color={isDragging?P.rust:P.vdim}/>
                      <span style={{ width:8, height:8, borderRadius:"50%", background:s.color, flexShrink:0 }}/>
                      <span style={{ fontSize:11, color:isOff?P.vdim:P.text, fontFamily:"'Inter',sans-serif", flex:1, fontSize:11 }}>{s.label}</span>
                      <button onClick={()=>setSeries(arr=>{const n=[...arr];n[i]=!n[i];return n;})} style={{ background:"none", border:"none", cursor:"pointer", padding:2, display:"flex", alignItems:"center", color:isOff?P.vdim:P.muted }}>
                        {isOff
                          ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                          : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        }
                      </button>
                    </div>
                  );
                })}
              </div>
              <div style={{ padding:"10px 14px", borderTop:`1px solid ${P.borderLt}`, fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>
                {series.filter(Boolean).length} of {SERIES_META.length} series visible
              </div>
            </div>
          </div>

          <Panel title="Weekly Abstraction Totals — By Site (ML)"
            action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>Weeks 8 – 12 · All Sites</span>}>
            <div style={{ padding:"12px 14px 8px" }}>
              <ResponsiveContainer width="100%" height={150}>
                <BarChart data={WEEKLY_SITE_ABS} barCategoryGap="30%">
                  <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                  <XAxis dataKey="wk" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                  <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                  <Tooltip content={<LightTooltip/>}/>
                  {["s1","s2","s3","s4","s5","s6","s7"].map((k,i)=>(
                    <Bar key={k} dataKey={k} name={`Site ${i+1}`} stackId="a" fill={SITE_COLORS[i]} radius={i===6?[1,1,0,0]:undefined}/>
                  ))}
                </BarChart>
              </ResponsiveContainer>
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCREEN 10–12 — CHART SNIPPETS (line · bar · treemap)
// ═══════════════════════════════════════════════════════════════════════════

function ChartSnippetsScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="reports" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>Data Visualisation Components</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Custom chart types built for the platform's reporting suite</div>
          </div>
        </div>
        <div style={{ padding:"24px", flex:1 }}>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:20, marginBottom:24 }}>
            {/* #10 Line chart */}
            <Panel title="Line Chart: Abstraction Rate Over Time"
              action={<span style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>Multi-series · Jul 1–12</span>}>
              <div style={{ padding:"14px 14px 10px" }}>
                <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:12 }}>Water extraction rate (ML/bore/day) across five monitored sites. Zero values indicate active downtime periods.</div>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={ABSTRACTION_MULTI}>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="day" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Legend wrapperStyle={{ fontSize:10, fontFamily:"'Barlow Condensed',sans-serif", paddingTop:8 }}/>
                    <Line dataKey="s1" name="Site 1 – Central"       stroke={SITE_COLORS[0]} strokeWidth={2}   dot={false} activeDot={{ r:4 }}/>
                    <Line dataKey="s2" name="Site 2 – East Flats"    stroke={SITE_COLORS[1]} strokeWidth={1.5} dot={false} activeDot={{ r:3 }}/>
                    <Line dataKey="s3" name="Site 3 – N.Plateau"     stroke={SITE_COLORS[2]} strokeWidth={2}   dot={false} activeDot={{ r:4 }}/>
                    <Line dataKey="s4" name="Site 4 – North Pit"     stroke={SITE_COLORS[3]} strokeWidth={1.5} dot={false} activeDot={{ r:3 }} strokeDasharray="4 2"/>
                    <Line dataKey="s5" name="Site 5 – Deep Basin"    stroke={SITE_COLORS[4]} strokeWidth={1.5} dot={false} activeDot={{ r:3 }}/>
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </Panel>

            {/* #11 Bar chart */}
            <Panel title="Bar Chart: Downtime Hours by Site"
              action={<span style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>12-week cumulative</span>}>
              <div style={{ padding:"14px 14px 10px" }}>
                <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:12 }}>Total downtime hours recorded per site over the 12-week rolling period. Site 4 significantly higher due to repeated mechanical failures.</div>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={SITE_DURATIONS} barCategoryGap="32%">
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt} vertical={false}/>
                    <XAxis dataKey="site" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,100]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="hours" name="Downtime Hours" radius={[2,2,0,0]}>
                      {SITE_DURATIONS.map((_,i)=><Cell key={i} fill={SITE_DURATIONS[i].fill}/>)}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
                <div style={{ display:"flex", flexWrap:"wrap", gap:"4px 14px", marginTop:8 }}>
                  {SITE_DURATIONS.map(s=>(
                    <div key={s.site} style={{ display:"flex", alignItems:"center", gap:4, fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace" }}>
                      <span style={{ width:8, height:8, borderRadius:1, background:s.fill, display:"inline-block" }}/>
                      {s.site}
                    </div>
                  ))}
                </div>
              </div>
            </Panel>

            {/* #12 Treemap */}
            <Panel title="Treemap: Downtime Volume by Reason Code"
              action={<span style={{ fontSize:9, color:P.vdim, fontFamily:"'DM Mono',monospace" }}>155 total events</span>}>
              <div style={{ padding:"14px 14px 10px" }}>
                <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:12 }}>Proportional breakdown of all 155 downtime events by root cause. Area corresponds to event frequency across all 7 sites.</div>
                <ResponsiveContainer width="100%" height={300}>
                  <Treemap data={REASON_TREE} dataKey="size" aspectRatio={1} stroke="transparent" content={<TreemapCell/>}/>
                </ResponsiveContainer>
                <div style={{ display:"flex", flexWrap:"wrap", gap:"4px 14px", marginTop:10 }}>
                  {REASON_TREE.map(r=>(
                    <div key={r.name} style={{ display:"flex", alignItems:"center", gap:4, fontSize:9, color:P.muted, fontFamily:"'Inter',sans-serif" }}>
                      <span style={{ width:8, height:8, borderRadius:1, background:r.fill, display:"inline-block", flexShrink:0 }}/>
                      {r.name} ({r.size})
                    </div>
                  ))}
                </div>
              </div>
            </Panel>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// EXTRA A — BORE DETAIL (AFTER — redesigned 360° view)
// ═══════════════════════════════════════════════════════════════════════════

function MiniMap() {
  return (
    <svg viewBox="0 0 320 200" width="100%" style={{ display:"block" }}>
      <rect width="320" height="200" fill="#dce8f0"/>
      {Array.from({length:9}).map((_,i)=><line key={`vg${i}`} x1={i*40} y1={0} x2={i*40} y2={200} stroke="rgba(0,0,0,0.06)" strokeWidth="1"/>)}
      {Array.from({length:6}).map((_,i)=><line key={`hg${i}`} x1={0} y1={i*40} x2={320} y2={i*40} stroke="rgba(0,0,0,0.06)" strokeWidth="1"/>)}
      <rect x={30} y={20} width={260} height={160} fill="none" stroke="rgba(200,114,60,0.3)" strokeWidth="1" strokeDasharray="5 4"/>
      <ellipse cx={160} cy={100} rx={85} ry={55} fill="none" stroke="rgba(200,114,60,0.25)" strokeWidth="1"/>
      <ellipse cx={160} cy={100} rx={55} ry={35} fill="none" stroke="rgba(200,114,60,0.3)" strokeWidth="1"/>
      <ellipse cx={160} cy={100} rx={28} ry={17} fill="none" stroke="rgba(200,114,60,0.38)" strokeWidth="1"/>
      {[[120,85],[195,110],[145,135],[100,115],[210,78],[175,145]].map(([cx,cy],i)=>(
        <circle key={i} cx={cx} cy={cy} r={3} fill="#94a3b8" stroke="#fff" strokeWidth="0.5"/>
      ))}
      <circle cx={160} cy={100} r={10} fill="rgba(220,38,38,0.15)"/>
      <circle cx={160} cy={100} r={5} fill={P.red}/>
      <circle cx={160} cy={100} r={2.5} fill="#fff"/>
      <line x1={165} y1={95} x2={195} y2={80} stroke="rgba(220,38,38,0.6)" strokeWidth="0.8"/>
      <text x={197} y={83} fill={P.red} fontSize="9" fontFamily="'DM Mono',monospace" fontWeight="500">BR-0472</text>
      <text x={34} y={31} fill="rgba(0,0,0,0.35)" fontSize="8" fontFamily="'DM Mono',monospace" letterSpacing="1">SITE 4 – NORTH PIT</text>
      <text x={292} y={28} fill="rgba(0,0,0,0.35)" fontSize="8" fontFamily="'DM Mono',monospace">N</text>
      <line x1={296} y1={30} x2={296} y2={42} stroke="rgba(0,0,0,0.3)" strokeWidth="1"/>
      <polygon points="293,30 296,23 299,30" fill="rgba(0,0,0,0.3)"/>
      <text x={34} y={172} fill="rgba(0,0,0,0.25)" fontSize="7" fontFamily="'DM Mono',monospace">21°47′22″S  117°08′14″E</text>
    </svg>
  );
}

function GaugeBar({ label, value, max, color, unit }) {
  const pct = Math.min(100, (value/max)*100);
  return (
    <div style={{ marginBottom:12 }}>
      <div style={{ display:"flex", justifyContent:"space-between", marginBottom:5 }}>
        <span style={{ fontSize:10, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase" }}>{label}</span>
        <span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, color, fontWeight:500 }}>{value} <span style={{ fontSize:9, color:P.muted }}>{unit}</span></span>
      </div>
      <div style={{ height:4, background:"rgba(0,0,0,0.08)", borderRadius:2 }}>
        <div style={{ width:`${pct}%`, height:"100%", background:color, borderRadius:2 }}/>
      </div>
    </div>
  );
}

function BoreDetailScreen() {
  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="bores" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <span style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Bores</span>
            <span style={{ fontSize:10, color:P.vdim }}>›</span>
            <span style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Site 4 – North Pit</span>
            <span style={{ fontSize:10, color:P.vdim }}>›</span>
            <span style={{ fontSize:10, color:P.rust, fontFamily:"'DM Mono',monospace", fontWeight:500 }}>BR-0472</span>
          </div>
          <div style={{ display:"flex", gap:8 }}>
            {["View History","Edit Asset","Log Downtime"].map((b,i)=>(
              <button key={b} style={{ padding:"6px 14px", borderRadius:2, cursor:"pointer", fontSize:11, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em", background:i===2?"rgba(220,38,38,0.08)":P.card, color:i===2?P.red:P.text2, border:i===2?"1px solid rgba(220,38,38,0.2)":`1px solid ${P.border}` }}>{b}</button>
            ))}
          </div>
        </div>
        <div style={{ padding:"20px 24px", flex:1 }}>
          <div style={{ display:"flex", alignItems:"flex-start", justifyContent:"space-between", marginBottom:18 }}>
            <div>
              <div style={{ display:"flex", alignItems:"center", gap:14, marginBottom:4 }}>
                <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:32, letterSpacing:"0.03em", color:P.text }}>BR-0472</span>
                <SevBadge sev="CRITICAL"/>
                <span style={{ padding:"3px 10px", borderRadius:2, background:"rgba(220,38,38,0.08)", border:"1px solid rgba(220,38,38,0.2)", fontSize:11, fontFamily:"'DM Mono',monospace", color:P.red }}>ACTIVE DOWNTIME</span>
              </div>
              <div style={{ fontSize:13, color:P.muted, fontFamily:"'Inter',sans-serif" }}>Site 4 – North Pit &nbsp;·&nbsp; Zone B – Northern Array &nbsp;·&nbsp; Installed 2019-03-14</div>
            </div>
            <div style={{ textAlign:"right" }}>
              <div style={{ fontSize:10, color:P.dim, fontFamily:"'DM Mono',monospace" }}>Last telemetry</div>
              <div style={{ fontSize:12, color:P.rust, fontFamily:"'DM Mono',monospace", fontWeight:500 }}>11:29:01 AWST</div>
            </div>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, marginBottom:14 }}>
            <Panel title="Asset Information">
              <div style={{ padding:"14px 16px", display:"grid", gridTemplateColumns:"1fr 1fr", gap:"10px 20px" }}>
                {[["Bore ID","BR-0472"],["Site","Site 4 – North Pit"],["Pump Model","Grundfos SP-60"],["Motor Rating","55 kW"],["Install Depth","87.4 m"],["Casing Dia.","250 mm"],["Pump Capacity","2.1 ML/day (rated)"],["Install Date","14 Mar 2019"],["Last Inspect.","08 Apr 2025"],["Asset Class","Production Bore"]].map(([k,v])=>(
                  <div key={k}>
                    <div style={{ fontSize:9, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.08em", textTransform:"uppercase", marginBottom:2 }}>{k}</div>
                    <div style={{ fontSize:12, color:P.text, fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{v}</div>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title="Live Equipment Status">
              <div style={{ padding:"14px 16px" }}>
                <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, marginBottom:16 }}>
                  {[
                    { icon:Thermometer, label:"Engine Temp", value:"84", unit:"°C",  color:P.red,  note:"↑ Above nominal (72°C)" },
                    { icon:Gauge,       label:"Pump Speed",  value:"—",  unit:"RPM", color:P.vdim, note:"Offline – downtime active" },
                    { icon:Zap,         label:"Power Draw",  value:"—",  unit:"kW",  color:P.vdim, note:"Offline – downtime active" },
                    { icon:Activity,    label:"Flow Rate",   value:"—",  unit:"L/s", color:P.vdim, note:"Offline – downtime active" },
                  ].map(({ icon:Icon, label, value, unit, color, note })=>(
                    <div key={label} style={{ padding:"10px 12px", background:P.inner, border:`1px solid ${P.border}`, borderRadius:2 }}>
                      <div style={{ display:"flex", alignItems:"center", gap:6, marginBottom:8 }}>
                        <Icon size={13} color={color}/>
                        <span style={{ fontSize:9, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.08em", textTransform:"uppercase" }}>{label}</span>
                      </div>
                      <div style={{ fontFamily:"'DM Mono',monospace", fontSize:24, fontWeight:500, color, lineHeight:1 }}>{value} <span style={{ fontSize:11 }}>{unit}</span></div>
                      <div style={{ fontSize:10, color:P.dim, fontFamily:"'Inter',sans-serif", marginTop:6 }}>{note}</div>
                    </div>
                  ))}
                </div>
                <div style={{ borderTop:`1px solid ${P.borderLt}`, paddingTop:12 }}>
                  <GaugeBar label="Engine Temp" value={84} max={100} color={P.red} unit="°C"/>
                  <GaugeBar label="Running Hours (YTD)" value={4210} max={6000} color={P.amber} unit="hrs"/>
                  <GaugeBar label="Bearing Wear Index" value={62} max={100} color="#7c3aed" unit="%"/>
                </div>
              </div>
            </Panel>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"3fr 2fr", gap:14, marginBottom:14 }}>
            <Panel title="Abstraction Rate — Last 30 Days (ML/day)"
              action={<div style={{ display:"flex", gap:12, alignItems:"center" }}><span style={{ display:"flex", alignItems:"center", gap:4, fontSize:10, color:P.rust, fontFamily:"'DM Mono',monospace" }}><span style={{ width:14, height:2, background:P.rust, display:"inline-block" }}/> Actual</span><span style={{ display:"flex", alignItems:"center", gap:4, fontSize:10, color:P.vdim, fontFamily:"'DM Mono',monospace" }}><span style={{ width:14, height:2, background:P.vdim, display:"inline-block" }}/> Target</span></div>}>
              <div style={{ padding:"12px 14px 8px" }}>
                <ResponsiveContainer width="100%" height={190}>
                  <AreaChart data={BORE_PERF}>
                    <defs><linearGradient id="rateGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor={P.rust} stopOpacity={0.2}/><stop offset="95%" stopColor={P.rust} stopOpacity={0}/></linearGradient></defs>
                    <CartesianGrid strokeDasharray="2 4" stroke={P.borderLt}/>
                    <XAxis dataKey="day" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} interval={4}/>
                    <YAxis tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false} domain={[0,2]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Area dataKey="rate" name="Abstraction (ML/day)" stroke={P.rust} strokeWidth={1.8} fill="url(#rateGrad)" dot={false}/>
                    <Line dataKey="target" name="Target (ML/day)" stroke={P.vdim} strokeDasharray="4 3" strokeWidth={1} dot={false}/>
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </Panel>
            <Panel title="Location">
              <div style={{ overflow:"hidden" }}><MiniMap/></div>
              <div style={{ padding:"10px 14px", borderTop:`1px solid ${P.borderLt}`, display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
                {[["Latitude","21°47′22″S"],["Longitude","117°08′14″E"],["Elevation","562 m AHD"],["Zone","B – Northern Array"]].map(([k,v])=>(
                  <div key={k}>
                    <div style={{ fontSize:8, color:P.vdim, fontFamily:"'DM Mono',monospace", letterSpacing:"0.08em", textTransform:"uppercase", marginBottom:2 }}>{k}</div>
                    <div style={{ fontSize:11, color:P.text2, fontFamily:"'DM Mono',monospace" }}>{v}</div>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
          <Panel title="Downtime History — BR-0472"
            action={<span style={{ fontSize:9, fontFamily:"'DM Mono',monospace", color:P.vdim }}>4 records · Last 90 days</span>}>
            {BORE_HISTORY.map((ev,i)=>(
              <div key={ev.id} style={{ padding:"12px 16px", display:"flex", alignItems:"flex-start", gap:16, borderBottom:i<BORE_HISTORY.length-1?`1px solid ${P.borderLt}`:"none" }}>
                <div style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:P.dim, whiteSpace:"nowrap", paddingTop:1 }}>{ev.id}</div>
                <div style={{ flex:1 }}>
                  <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:4 }}>
                    <span style={{ fontSize:12, color:P.text, fontFamily:"'Inter',sans-serif", fontWeight:500 }}>{ev.reason}</span>
                    <StatusBadge status={ev.status}/>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:ev.status==="ACTIVE"?P.red:P.muted }}>{ev.dur}</span>
                  </div>
                  <div style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif" }}>{ev.notes}</div>
                </div>
                <div style={{ fontFamily:"'DM Mono',monospace", fontSize:10, color:P.dim, whiteSpace:"nowrap", paddingTop:1 }}>{ev.date}</div>
              </div>
            ))}
          </Panel>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// EXTRA B — DASHBOARD EDIT MODE (interaction/drag state)
// ═══════════════════════════════════════════════════════════════════════════

const SERIES_TOGGLES_E = [
  { label:"Abstraction Volume", color:P.rust,    on:true  },
  { label:"Target Rate",        color:"#16a34a", on:true  },
  { label:"Downtime Events",    color:P.red,     on:true  },
  { label:"Cumulative Deficit", color:P.blue,    on:true  },
  { label:"Running Hours",      color:"#7c3aed", on:false },
  { label:"Equipment Temp",     color:P.amber,   on:false },
];

function ToggleSw({ on, color }) {
  return (
    <div style={{ width:32, height:17, borderRadius:9, background:on?color:"rgba(0,0,0,0.12)", position:"relative", cursor:"pointer", flexShrink:0 }}>
      <div style={{ position:"absolute", top:2.5, left:on?17:2.5, width:12, height:12, borderRadius:"50%", background:on?"#fff":"rgba(255,255,255,0.7)", boxShadow:"0 1px 3px rgba(0,0,0,0.2)", transition:"left 0.2s" }}/>
    </div>
  );
}

function DashboardConfigScreen() {
  const [dragging, setDragging] = useStateWMP(false);
  const [toggles, setToggles] = useStateWMP(SERIES_TOGGLES_E.map(s=>s.on));
  const MINI_ABS2 = MINI_ABS_F;
  const MINI_COMP = [{s:"S1",v:47},{s:"S2",v:64},{s:"S3",v:31},{s:"S4",v:89},{s:"S5",v:55},{s:"S6",v:43},{s:"S7",v:28}];

  return (
    <div style={{ width:1440, display:"flex", height:900, background:P.appBg }}>
      <Sidebar active="dashboard" />
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <div style={{ padding:"0 24px", height:56, flexShrink:0, borderBottom:`1px solid ${P.border}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:P.topbar }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, letterSpacing:"0.04em", textTransform:"uppercase", color:P.text }}>My Dashboard</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>J. Pemberton · Personalised view · All Sites</div>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <button style={{ display:"flex", alignItems:"center", gap:6, padding:"6px 16px", background:"rgba(37,99,235,0.08)", border:"1px solid rgba(37,99,235,0.25)", borderRadius:2, cursor:"pointer", fontSize:11, color:P.blue, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em" }}>
              <Edit3 size={12}/>EDIT MODE ACTIVE
            </button>
            <button style={{ padding:"6px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:2, cursor:"pointer", fontSize:11, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600 }}>+ Add Widget</button>
          </div>
        </div>
        <div style={{ padding:"8px 24px", background:"rgba(37,99,235,0.05)", borderBottom:"1px solid rgba(37,99,235,0.15)", display:"flex", alignItems:"center", gap:10 }}>
          <div style={{ width:6, height:6, borderRadius:"50%", background:P.blue }}/>
          <span style={{ fontSize:11, color:P.blue, fontFamily:"'Inter',sans-serif" }}><strong>Edit mode active</strong> — Drag cards to rearrange. Toggle series in the panel on the right. Click × on any card to remove it.</span>
        </div>
        <div style={{ flex:1, display:"flex", padding:"20px 24px", gap:16 }}>
          <div style={{ flex:1, display:"grid", gridTemplateColumns:"1fr 1fr", gridTemplateRows:"auto auto", gap:14, alignContent:"start" }}>
            <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, boxShadow:"0 1px 3px rgba(0,0,0,0.06)" }}>
              <div style={{ padding:"10px 12px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}><GripVertical size={14} color={P.vdim} style={{ cursor:"grab" }}/><span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted }}>Water Abstraction — All Sites</span></div>
                <X size={13} color={P.vdim} style={{ cursor:"pointer" }}/>
              </div>
              <div style={{ padding:"10px 12px 6px" }}>
                <div style={{ fontFamily:"'DM Mono',monospace", fontSize:26, fontWeight:500, color:P.text, marginBottom:2 }}>1,040 <span style={{ fontSize:12, color:P.muted }}>ML</span></div>
                <div style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:10 }}>Year to date · Target: 1,200 ML</div>
                <ResponsiveContainer width="100%" height={110}>
                  <AreaChart data={MINI_ABS2}>
                    <defs><linearGradient id="absG2" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor={P.rust} stopOpacity={0.2}/><stop offset="95%" stopColor={P.rust} stopOpacity={0}/></linearGradient></defs>
                    <XAxis dataKey="m" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis hide domain={[0,400]}/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Area dataKey="v" name="ML" stroke={P.rust} strokeWidth={2} fill="url(#absG2)" dot={false}/>
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div onClick={()=>setDragging(d=>!d)} style={{ position:"relative", background:P.card, borderRadius:2, cursor:"grab", border:dragging?`1.5px solid rgba(37,99,235,0.5)`:`1px solid ${P.border}`, boxShadow:dragging?"0 16px 48px rgba(0,0,0,0.15)":"0 1px 3px rgba(0,0,0,0.06)", transform:dragging?"rotate(-1.5deg) scale(1.025)":"none", zIndex:dragging?10:1 }}>
              {dragging && <div style={{ position:"absolute", top:-26, left:0, fontSize:10, color:P.blue, fontFamily:"'DM Mono',monospace", background:"rgba(37,99,235,0.08)", padding:"2px 8px", borderRadius:2 }}>↕ Dragging — release to drop</div>}
              <div style={{ padding:"10px 12px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}><GripVertical size={14} color={dragging?P.blue:P.vdim}/><span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:dragging?P.blue:P.muted }}>Site Comparison</span></div>
                <X size={13} color={P.vdim}/>
              </div>
              <div style={{ padding:"10px 12px 6px" }}>
                <div style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:8 }}>Downtime hours — 12 week rolling</div>
                <ResponsiveContainer width="100%" height={128}>
                  <BarChart data={MINI_COMP} barCategoryGap="35%">
                    <XAxis dataKey="s" tick={{ fontSize:9, fontFamily:"'DM Mono',monospace", fill:P.muted }} axisLine={false} tickLine={false}/>
                    <YAxis hide/>
                    <Tooltip content={<LightTooltip/>}/>
                    <Bar dataKey="v" name="Hours" fill={P.blue} fillOpacity={0.7} radius={[1,1,0,0]}/>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, boxShadow:"0 1px 3px rgba(0,0,0,0.06)" }}>
              <div style={{ padding:"10px 12px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}><GripVertical size={14} color={P.vdim}/><span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted }}>Equipment Health</span></div>
                <X size={13} color={P.vdim}/>
              </div>
              <div style={{ padding:"12px 14px" }}>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:8, marginBottom:10 }}>
                  {[["OK","48","#16a34a"],["WARN","9",P.amber],["DOWN","14",P.red],["MAINT","4",P.blue],["OFFLN","2",P.muted]].map(([l,n,c])=>(
                    <div key={l} style={{ textAlign:"center", padding:"8px 4px", background:P.inner, border:`1px solid ${c}22`, borderRadius:2 }}>
                      <div style={{ fontFamily:"'DM Mono',monospace", fontSize:22, fontWeight:500, color:c }}>{n}</div>
                      <div style={{ fontSize:9, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, letterSpacing:"0.06em", textTransform:"uppercase" }}>{l}</div>
                    </div>
                  ))}
                </div>
                <div style={{ display:"flex", height:6, borderRadius:3, overflow:"hidden", gap:1 }}>
                  {[[48,"#16a34a"],[9,P.amber],[14,P.red],[4,P.blue],[2,P.muted]].map(([n,c],i)=>(
                    <div key={i} style={{ flex:n, background:c }}/>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ background:P.card, border:`1px solid ${P.border}`, borderRadius:2, boxShadow:"0 1px 3px rgba(0,0,0,0.06)" }}>
              <div style={{ padding:"10px 12px", borderBottom:`1px solid ${P.borderLt}`, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}><GripVertical size={14} color={P.vdim}/><span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.muted }}>Active Downtime Summary</span></div>
                <X size={13} color={P.vdim}/>
              </div>
              <div style={{ padding:"10px 0" }}>
                <div style={{ display:"flex", gap:20, padding:"0 14px 10px", borderBottom:`1px solid ${P.borderLt}` }}>
                  {[["14","Active"],["3","Critical"],["9h 40m","Longest"]].map(([v,l])=>(
                    <div key={l}><div style={{ fontFamily:"'DM Mono',monospace", fontSize:20, fontWeight:500, color:P.text }}>{v}</div><div style={{ fontSize:9, color:P.muted, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, textTransform:"uppercase", letterSpacing:"0.07em" }}>{l}</div></div>
                  ))}
                </div>
                {DOWNTIME_ROWS.filter(r=>r.sev==="CRITICAL").map(r=>(
                  <div key={r.id} style={{ padding:"7px 14px", display:"flex", alignItems:"center", gap:10, borderBottom:`1px solid ${P.borderLt}` }}>
                    <span style={{ width:6, height:6, borderRadius:"50%", background:P.red, flexShrink:0 }}/>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:P.rust }}>{r.id}</span>
                    <span style={{ fontSize:11, color:P.muted, fontFamily:"'Inter',sans-serif", flex:1 }}>{r.site}</span>
                    <span style={{ fontFamily:"'DM Mono',monospace", fontSize:11, color:P.red }}>{r.dur}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ width:220, flexShrink:0, background:P.card, border:"1px solid rgba(37,99,235,0.2)", borderRadius:2, padding:16, alignSelf:"start", boxShadow:"0 1px 4px rgba(0,0,0,0.08)" }}>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, letterSpacing:"0.1em", textTransform:"uppercase", color:P.blue, marginBottom:4 }}>Data Series</div>
            <div style={{ fontSize:10, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:14 }}>Toggle series shown across all chart widgets</div>
            {SERIES_TOGGLES_E.map((s,i)=>(
              <div key={s.label} style={{ display:"flex", alignItems:"center", gap:10, marginBottom:12, cursor:"pointer" }} onClick={()=>setToggles(t=>{const n=[...t];n[i]=!n[i];return n;})}>
                <ToggleSw on={toggles[i]} color={s.color}/>
                <span style={{ fontSize:11, fontFamily:"'Inter',sans-serif", color:toggles[i]?P.text:P.vdim, flex:1 }}>{s.label}</span>
                <span style={{ width:8, height:8, borderRadius:"50%", background:toggles[i]?s.color:P.vdim, flexShrink:0 }}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// EXTRA C — FIELD CAPTURE (mobile)
// ═══════════════════════════════════════════════════════════════════════════

const REASON_CODES_M = ["Mechanical Failure","Pump Failure","Power Outage","Sensor Fault","Scheduled Maint.","Valve Fault","Other"];

function FieldCaptureScreen() {
  const [selectedReason, setSelectedReason] = useStateWMP("Mechanical Failure");
  const [notes, setNotes] = useStateWMP("");
  const [submitted, setSubmitted] = useStateWMP(false);
  return (
    <div style={{ width:1440, background:P.appBg, minHeight:900, display:"flex", alignItems:"flex-start", justifyContent:"center", padding:"32px 20px" }}>
      <div style={{ width:390, background:P.inner, border:`1px solid ${P.borderMd}`, borderRadius:12, overflow:"hidden", boxShadow:"0 8px 40px rgba(0,0,0,0.12)" }}>
        <div style={{ background:P.topbar, padding:"10px 20px 6px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <span style={{ fontSize:12, fontWeight:600, color:P.text, fontFamily:"'Inter',sans-serif" }}>11:29</span>
          <div style={{ display:"flex", gap:6, alignItems:"center" }}>
            <div style={{ display:"flex", gap:2, alignItems:"flex-end" }}>{[4,3,2,1].map(h=><div key={h} style={{ width:3, height:h*3, background:P.muted, borderRadius:1 }}/>)}</div>
            <div style={{ fontSize:10, color:P.muted }}>●●●</div>
          </div>
        </div>
        <div style={{ background:P.sidebar, padding:"12px 20px 14px", borderBottom:`1px solid ${P.border}` }}>
          <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:4 }}>
            <div style={{ width:26, height:26, borderRadius:2, background:"linear-gradient(135deg,#c8723c,#d49a3a)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
              <Droplets size={13} color="#fff" strokeWidth={2.5}/>
            </div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:15, letterSpacing:"0.08em", textTransform:"uppercase", color:P.text }}>WMP</div>
          </div>
          <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:22, letterSpacing:"0.03em", textTransform:"uppercase", color:P.text }}>Log Downtime</div>
          <div style={{ fontSize:11, color:P.muted, fontFamily:"'DM Mono',monospace", marginTop:2 }}>Field capture · GPS active</div>
        </div>
        {submitted ? (
          <div style={{ padding:32, textAlign:"center" }}>
            <div style={{ width:56, height:56, borderRadius:"50%", background:"rgba(22,163,74,0.1)", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 16px" }}>
              <CheckCircle size={28} color={P.green}/>
            </div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:20, color:P.green, marginBottom:8 }}>EVENT LOGGED</div>
            <div style={{ fontSize:12, color:P.muted, fontFamily:"'Inter',sans-serif", marginBottom:20 }}>DT-2848 created for BR-0472<br/>Synced to platform at 11:29 AWST</div>
            <button onClick={()=>setSubmitted(false)} style={{ width:"100%", padding:16, background:P.card, border:`1px solid ${P.border}`, borderRadius:4, cursor:"pointer", fontSize:14, color:P.text2, fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, letterSpacing:"0.06em" }}>LOG ANOTHER</button>
          </div>
        ) : (
          <div style={{ padding:"16px 20px 24px", display:"flex", flexDirection:"column", gap:18 }}>
            <div>
              <label style={{ display:"block", fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>Bore ID</label>
              <div style={{ padding:"14px 16px", background:P.card, border:`1.5px solid rgba(200,114,60,0.4)`, borderRadius:4, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <span style={{ fontFamily:"'DM Mono',monospace", fontSize:18, fontWeight:500, color:P.rust }}>BR-0472</span>
                <span style={{ fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace" }}>Site 4 – North Pit</span>
              </div>
            </div>
            <div>
              <label style={{ display:"block", fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>Timestamp</label>
              <div style={{ padding:"12px 16px", background:P.card, border:`1px solid ${P.border}`, borderRadius:4, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}><Clock size={14} color={P.muted}/><span style={{ fontFamily:"'DM Mono',monospace", fontSize:13, color:P.text2 }}>12 Jul 2025 — 11:29 AWST</span></div>
                <span style={{ fontSize:9, color:P.dim, fontFamily:"'DM Mono',monospace" }}>AUTO</span>
              </div>
            </div>
            <div>
              <label style={{ display:"block", fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>Reason Code <span style={{ color:P.red }}>*</span></label>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:8 }}>
                {REASON_CODES_M.map(r=>(
                  <button key={r} onClick={()=>setSelectedReason(r)} style={{ padding:"13px 10px", borderRadius:4, cursor:"pointer", textAlign:"left", background:selectedReason===r?"rgba(200,114,60,0.08)":P.card, border:selectedReason===r?`1.5px solid ${P.rust}`:`1px solid ${P.border}`, fontSize:12, color:selectedReason===r?P.text:P.text2, fontFamily:"'Inter',sans-serif", fontWeight:selectedReason===r?600:400, lineHeight:1.3 }}>
                    {selectedReason===r && <span style={{ width:6, height:6, borderRadius:"50%", background:P.rust, display:"inline-block", marginRight:6, verticalAlign:"middle" }}/>}{r}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label style={{ display:"block", fontSize:10, color:P.muted, fontFamily:"'DM Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>Notes <span style={{ color:P.vdim }}>(optional)</span></label>
              <textarea value={notes} onChange={e=>setNotes(e.target.value)} placeholder="Describe the issue, visible damage, or observations..." rows={3} style={{ width:"100%", padding:"12px 14px", background:P.card, border:`1px solid ${P.border}`, borderRadius:4, fontSize:13, color:P.text2, fontFamily:"'Inter',sans-serif", lineHeight:1.5, resize:"none", outline:"none", boxSizing:"border-box" }}/>
            </div>
            <button onClick={()=>setSubmitted(true)} style={{ width:"100%", padding:"18px 20px", background:"linear-gradient(135deg,#c8723c 0%,#d4863c 100%)", border:"none", borderRadius:4, cursor:"pointer", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, color:"#fff", letterSpacing:"0.08em", textTransform:"uppercase", boxShadow:"0 4px 20px rgba(200,114,60,0.3)" }}>
              LOG DOWNTIME
            </button>
            <div style={{ textAlign:"center", fontSize:10, color:P.dim, fontFamily:"'DM Mono',monospace" }}>Event will sync automatically when connected</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// APP — SCREEN SELECTOR
// ═══════════════════════════════════════════════════════════════════════════

const SCREEN_DEFS = [
  { num:"01", label:"Metrics (Before)",       sub:"Legacy — original state"           },
  { num:"02", label:"Bore Detail (Before)",   sub:"Legacy — sparse bore view"         },
  { num:"03", label:"Concept A: All-in-One",  sub:"Rejected — overwhelming density"   },
  { num:"04", label:"Concept B: Role View",   sub:"Rejected — hydrogeologist variant" },
  { num:"05", label:"Final: Configurable",    sub:"Chosen direction — clean state"    },
  { num:"06", label:"Downtimes: Live",        sub:"Active events — real-time"         },
  { num:"07", label:"Downtimes: Completed",   sub:"Historical resolved records"       },
  { num:"08", label:"Downtimes: Trends",      sub:"Aggregated reporting"              },
  { num:"09", label:"Metrics (After)",        sub:"Redesigned + interactive legend"   },
  { num:"10–12", label:"Chart Snippets",      sub:"Line · Bar · Treemap"             },
  { num:"A",  label:"Bore Detail (After)",    sub:"360° redesigned view"              },
  { num:"B",  label:"Dashboard Edit Mode",    sub:"Drag & reorder interaction"        },
  { num:"C",  label:"Field Capture",          sub:"Mobile — 390px"                    },
];

const SCREENS = [
  LegacyScreen,
  LegacyBoreDetailScreen,
  ConceptAllInOneScreen,
  ConceptRoleSpecificScreen,
  FinalDashboardScreen,
  DowntimesLiveScreen,
  DowntimesCompletedScreen,
  DowntimesTrendsScreen,
  MetricsAfterScreen,
  ChartSnippetsScreen,
  BoreDetailScreen,
  DashboardConfigScreen,
  FieldCaptureScreen,
];

// live interactive walkthrough — the same screen-switcher UI the
// prototype shipped with, embedded directly (no iframe).
function WaterManagementPrototype() {
  const [current, setCurrent] = useStateWMP(0);
  const Screen = SCREENS[current];
  const CANVAS_W = 1440, CANVAS_H = 900;
  const viewRef = React.useRef(null);
  const [scale, setScale] = useStateWMP(0.5);
  React.useEffect(() => {
    const el = viewRef.current; if (!el) return;
    const measure = () => { const w = el.clientWidth; if (w) setScale(Math.min(1, w / CANVAS_W)); };
    measure();
    const ro = new ResizeObserver(measure); ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return (
    <div style={{ background:"#e4dfd8", display:"flex", flexDirection:"column", borderRadius: 12, overflow: "hidden" }}>
      <div style={{ background:"#e0dbd3", borderBottom:`1px solid ${P.border}`, padding:"0 20px", display:"flex", alignItems:"stretch", overflowX:"auto", flexShrink:0, height:52, boxShadow:"0 1px 0 rgba(0,0,0,0.06)" }}>
        <div style={{ display:"flex", alignItems:"center", paddingRight:20, borderRight:`1px solid ${P.border}`, marginRight:12, flexShrink:0 }}>
          <span style={{ fontFamily:"'DM Mono',monospace", fontSize:9, color:P.muted, letterSpacing:"0.12em", textTransform:"uppercase" }}>WMP · Case Study</span>
        </div>
        {SCREEN_DEFS.map((s,i)=>{
          const active = current===i;
          return (
            <button key={i} onClick={()=>setCurrent(i)} style={{ display:"flex", flexDirection:"column", justifyContent:"center", padding:"0 16px", background:active?P.card:"transparent", borderBottom:active?`2px solid ${P.rust}`:"2px solid transparent", borderTop:"none", borderLeft:"none", borderRight:"none", cursor:"pointer", whiteSpace:"nowrap", boxShadow:active?"0 1px 4px rgba(0,0,0,0.08)":"none", flexShrink:0 }}>
              <div style={{ display:"flex", alignItems:"center", gap:6 }}>
                <span style={{ fontFamily:"'DM Mono',monospace", fontSize:8, color:active?P.rust:P.muted, fontWeight:500 }}>{s.num}</span>
                <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:12, letterSpacing:"0.05em", textTransform:"uppercase", color:active?P.text:P.muted }}>{s.label}</span>
              </div>
              <div style={{ fontFamily:"'DM Mono',monospace", fontSize:8, color:active?P.rust:P.vdim, textAlign:"left", marginTop:1 }}>{s.sub}</div>
            </button>
          );
        })}
      </div>
      <div ref={viewRef} style={{ height: Math.round(CANVAS_H * scale) }}>
        <div style={{ width: CANVAS_W, height: CANVAS_H, transform: 'scale(' + scale + ')', transformOrigin: 'top left' }}>
          <Screen/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  LegacyScreen, LegacyBoreDetailScreen, ConceptAllInOneScreen, ConceptRoleSpecificScreen,
  FinalDashboardScreen, DowntimesLiveScreen, DowntimesCompletedScreen, DowntimesTrendsScreen,
  MetricsAfterScreen, ChartSnippetsScreen, BoreDetailScreen, DashboardConfigScreen, FieldCaptureScreen,
  WaterManagementPrototype,
});