// platform-sections.jsx
// Full 14-module platform showcase page
// Built directly from reading each module's TSX source

const { Icon, Eyebrow, Btn, useBreakpoint, FEATURES } = window;
const PG_CARD   = 'hsl(216 24% 11%)';
const PG_BORDER = 'hsl(216 22% 16%)';
const PG_MUTED  = 'hsl(215 14% 55%)';
const PG_BG     = 'hsl(216 28% 7%)';
const ORANGE    = 'hsl(25 95% 55%)';

// ── Reusable components ────────────────────────────────────────────────────────
const Tag = ({ children, color = 'hsl(25 95% 55%)' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', padding: '3px 10px',
    borderRadius: 999, fontSize: 10, fontWeight: 700,
    letterSpacing: '.08em', textTransform: 'uppercase',
    background: `${color.replace(')', ' / .12)').replace('hsl(', 'hsl(')}`,
    color, boxShadow: `inset 0 0 0 1px ${color.replace(')', ' / .3)').replace('hsl(', 'hsl(')}`,
  }}>{children}</span>
);

const FeatureRow = ({ icon, title, body, color = ORANGE }) => (
  <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
    <div style={{ width: 32, height: 32, borderRadius: 8, flexShrink: 0,
      background: `${color.replace(')', ' / .10)').replace('hsl(', 'hsl(')}`,
      border: `1px solid ${color.replace(')', ' / .22)').replace('hsl(', 'hsl(')}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <Icon name={icon} size={14} style={{ color }} />
    </div>
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 2 }}>{title}</div>
      <div style={{ fontSize: 12.5, color: PG_MUTED, lineHeight: 1.5 }}>{body}</div>
    </div>
  </div>
);

const StatusPill = ({ label, color }) => (
  <span style={{
    fontSize: 9, fontWeight: 700, padding: '2px 8px', borderRadius: 999,
    textTransform: 'uppercase', letterSpacing: '.08em',
    background: `${color} / .12)`.replace('hsl(', 'hsl(').replace('/ .12)', '/ .12)'),
    color: `hsl(${color})`,
    boxShadow: `inset 0 0 0 1px hsl(${color} / .3)`,
  }}>{label}</span>
);

const ModuleCard = ({ icon, label, tag, color, children }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 4 }}>
      <div style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0,
        background: `${color} / .12)`.replace('hsl(', 'hsl('),
        border: `1px solid ${color} / .25)`.replace('hsl(', 'hsl('),
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={20} style={{ color: `hsl(${color})` }} />
      </div>
      <div>
        <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>{label}</div>
        <Tag color={`hsl(${color})`}>{tag}</Tag>
      </div>
    </div>
    {children}
  </div>
);

// ── Mock UI helpers ────────────────────────────────────────────────────────────
const MockCard = ({ children, accent }) => (
  <div style={{
    background: PG_CARD, border: `1px solid ${accent || PG_BORDER}`,
    borderRadius: 10, padding: '12px 14px', marginBottom: 8,
  }}>{children}</div>
);

const MockHeader = ({ title, sub, icon, color = ORANGE }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px',
    borderBottom: '1px solid hsl(216 22% 16%)', background: 'hsl(216 28% 9%)',
    borderRadius: '10px 10px 0 0' }}>
    <div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg, ${color}, ${color})`, opacity: .9,
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <Icon name={icon} size={14} style={{ color: '#fff' }} />
    </div>
    <div>
      <div style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>{title}</div>
      {sub && <div style={{ fontSize: 10, color: PG_MUTED }}>{sub}</div>}
    </div>
  </div>
);

const Row = ({ label, value, mono }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid hsl(216 22% 14%)', fontSize: 11 }}>
    <span style={{ color: PG_MUTED, fontWeight: 600 }}>{label}</span>
    <span style={{ color: '#fff', fontFamily: mono ? '"DM Mono", monospace' : 'inherit', fontWeight: 500 }}>{value}</span>
  </div>
);

// ── MODULE DATA ────────────────────────────────────────────────────────────────
const MODULES = [
  // 1. Incidents
  { id: 'incidents',   icon: 'alert-triangle', label: 'Incident Reports',      color: '0 70% 60%',   tag: 'Safety',    group: 'Safety' },
  // 2. Safety Walk
  { id: 'walk',        icon: 'shield',         label: 'Safety Walk',           color: '0 70% 60%',   tag: 'Safety',    group: 'Safety' },
  // 3. SWMS
  { id: 'swms',        icon: 'file-text',      label: 'SWMS',                  color: '25 95% 60%',  tag: 'Safety',    group: 'Safety' },
  // 4. Permits
  { id: 'permits',     icon: 'key',            label: 'Permits',               color: '38 92% 55%',  tag: 'Safety',    group: 'Safety' },
  // 5. Checklists
  { id: 'checklists',  icon: 'clipboard-check',label: 'Safety Checklists',     color: '142 71% 50%', tag: 'Safety',    group: 'Safety' },
  // 6. Daily Prestart
  { id: 'prestart',    icon: 'sun',            label: 'Daily Prestart',        color: '38 92% 55%',  tag: 'Operations',group: 'Operations' },
  // 7. Site Inductions
  { id: 'inductions',  icon: 'user-check',     label: 'Site Inductions',       color: '270 70% 67%', tag: 'People',    group: 'People' },
  // 8. Sign-In Register
  { id: 'signin',      icon: 'log-in',         label: 'Sign-In Register',      color: '217 91% 65%', tag: 'People',    group: 'People' },
  // 9. Plant & Equipment
  { id: 'plant',       icon: 'wrench',         label: 'Plant & Equipment',     color: '217 91% 65%', tag: 'Operations',group: 'Operations' },
  // 10. Site Logistics
  { id: 'logistics',   icon: 'truck',          label: 'Site Logistics',        color: '217 91% 65%', tag: 'Operations',group: 'Operations' },
  // 11. Subcontractors
  { id: 'subcontractors',icon:'building-2',    label: 'Subcontractors',        color: '142 71% 50%', tag: 'Operations',group: 'Operations' },
  // 12. Supervisor Diary
  { id: 'diary',       icon: 'book-marked',    label: 'Supervisor Diary',      color: '0 70% 60%',   tag: 'Records',   group: 'Records' },
  // 13. Temporary Works
  { id: 'tempworks',   icon: 'construction',   label: 'Temporary Works',       color: '25 95% 60%',  tag: 'Engineering',group: 'Engineering'},
  // 14. Projects
  { id: 'projects',    icon: 'folder-open',    label: 'Projects',              color: '270 70% 67%', tag: 'Platform',  group: 'Platform' },
];

// ── MODULE CONTENT panels ──────────────────────────────────────────────────────
function ModuleContent({ id, isMobile }) {
  const GRID = { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 32, alignItems: 'start' };

  if (id === 'incidents') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="alert-triangle" color="hsl(0 70% 60%)" title="Notifiable, lost-time, near-miss"      body="Three incident types with automatic WorkSafe Victoria notifiable flag. Scene preservation instructions triggered immediately." />
        <FeatureRow icon="camera"         color="hsl(0 70% 60%)" title="Photo and witness capture"              body="Multiple photos, voice-to-text witness statements and corrective actions — logged from the site in real time." />
        <FeatureRow icon="users"          color="hsl(0 70% 60%)" title="Review and corrective actions"          body="HC review workflow with status tracking — open, under review, closed. Corrective actions assigned with due dates." />
        <FeatureRow icon="file-down"      color="hsl(0 70% 60%)" title="PDF export"                            body="Branded incident report PDF with all evidence, witness statements and corrective action history." />
        <FeatureRow icon="phone"          color="hsl(0 70% 60%)" title="WorkSafe notification alert"           body="Notifiable incidents trigger a WorkSafe Victoria call prompt with the 13 23 60 number and 48-hour written notice reminder." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Incident Register" sub="Collins Quarter · 3 open" icon="alert-triangle" color="hsl(0 70% 60%)" />
        <div style={{ padding: 14 }}>
          {[
            { id: 'INC-014', title: 'Near miss — scaffolding L3',    sev: 'Medium', status: 'Under Review', sevC: '38 92% 50%', stC: '38 92% 50%' },
            { id: 'INC-013', title: 'Plant pre-start defect noted',   sev: 'Low',    status: 'Closed',       sevC: '217 91% 60%', stC: '142 71% 45%' },
            { id: 'INC-012', title: 'Silica exposure — no PPE worn',  sev: 'High',   status: 'Open',         sevC: '0 70% 60%', stC: '0 70% 60%' },
            { id: 'INC-011', title: 'Notifiable — fall from height',  sev: 'Critical',status: 'Open',        sevC: '0 70% 60%', stC: '0 70% 60%' },
          ].map((inc, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)', fontSize: 11 }}>
              <span style={{ fontFamily: '"DM Mono",monospace', color: PG_MUTED, fontSize: 10, flexShrink: 0 }}>{inc.id}</span>
              <span style={{ flex: 1, color: '#fff', fontWeight: 600, fontSize: 11.5 }}>{inc.title}</span>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, background: `hsl(${inc.sevC} / .12)`, color: `hsl(${inc.sevC})`, boxShadow: `inset 0 0 0 1px hsl(${inc.sevC} / .3)` }}>{inc.sev}</span>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, background: `hsl(${inc.stC} / .12)`, color: `hsl(${inc.stC})`, boxShadow: `inset 0 0 0 1px hsl(${inc.stC} / .3)` }}>{inc.status}</span>
            </div>
          ))}
          <div style={{ marginTop: 12, padding: '10px 12px', background: 'hsl(0 70% 60% / .06)', border: '1px solid hsl(0 70% 60% / .2)', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="phone" size={13} style={{ color: 'hsl(0 70% 60%)' }} />
            <div style={{ fontSize: 11 }}>
              <span style={{ fontWeight: 700, color: '#fff' }}>Notifiable incident detected — </span>
              <span style={{ color: 'hsl(0 70% 60%)' }}>Call WorkSafe Victoria 13 23 60</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  if (id === 'walk') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="camera"    color="hsl(0 70% 60%)" title="Photo capture on the spot"      body="Log a finding, photograph it and assign it to a subcontractor without leaving the screen — all from your phone on the walk." />
        <FeatureRow icon="mic"       color="hsl(0 70% 60%)" title="Voice-to-text findings"         body="Tap the mic and describe what you see. The app transcribes and suggests a category, severity and assigned trade." />
        <FeatureRow icon="sparkles"  color="hsl(0 70% 60%)" title="AI-assisted categorisation"     body="15 finding categories including PPE, Scaffold & Edge Protection, Electrical, Working at Height, Hazardous Materials and more." />
        <FeatureRow icon="send"      color="hsl(0 70% 60%)" title="Notify subcontractors instantly" body="One tap emails every subcontractor with open items — photos, due dates and severity ratings included." />
        <FeatureRow icon="filter"    color="hsl(0 70% 60%)" title="Filter by severity and status"  body="Critical, High, Medium, Low. Open, Actioned, Closed, Rejected. Filter and focus on what needs action." />
        <FeatureRow icon="file-down" color="hsl(0 70% 60%)" title="Full PDF report"               body="Every walk exports as a complete PDF — findings numbered, photos attached, assignees named. Ready for your principal." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Safety Walk" sub="Collins Quarter · 12 May 2026" icon="shield" color="hsl(0 70% 60%)" />
        <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { cat: 'Scaffold & Edge Protection', sev: 'Critical', status: 'Open',     sevC: '0 70% 60%',    stC: '0 70% 60%',    desc: 'Handrail missing — Level 5 south slab',        assigned: 'Apex Formwork' },
            { cat: 'PPE',                        sev: 'High',     status: 'Actioned', sevC: '0 70% 60%',    stC: '38 92% 50%',   desc: '2 workers without hard hats — Level 3',        assigned: 'WeAreFire' },
            { cat: 'Housekeeping',               sev: 'Medium',   status: 'Closed',   sevC: '38 92% 50%',   stC: '142 71% 45%',  desc: 'Timber offcuts near stair access — Level 2',   assigned: 'All trades' },
            { cat: 'Electrical',                 sev: 'High',     status: 'Open',     sevC: '0 70% 60%',    stC: '0 70% 60%',    desc: 'Damaged weatherproof cover — loading bay',     assigned: 'M&E Services' },
          ].map((item, i) => (
            <div key={i} style={{ background: 'hsl(216 28% 9%)', border: '1px solid hsl(216 22% 16%)', borderLeft: `3px solid hsl(${item.sevC})`, borderRadius: 8, padding: '8px 10px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                <span style={{ fontSize: 9, fontWeight: 700, color: PG_MUTED, textTransform: 'uppercase', letterSpacing: '.08em' }}>{item.cat}</span>
                <div style={{ display: 'flex', gap: 4 }}>
                  <span style={{ fontSize: 8, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: `hsl(${item.sevC} / .12)`, color: `hsl(${item.sevC})` }}>{item.sev}</span>
                  <span style={{ fontSize: 8, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: `hsl(${item.stC} / .12)`, color: `hsl(${item.stC})` }}>{item.status}</span>
                </div>
              </div>
              <div style={{ fontSize: 10, color: 'hsl(215 14% 75%)', marginBottom: 3 }}>{item.desc}</div>
              <div style={{ fontSize: 9, color: ORANGE, fontWeight: 600 }}>{item.assigned}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'swms') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="upload"       color="hsl(25 95% 60%)" title="Upload and version control"       body="Upload SWMS PDFs, track versions with version numbers, and manage superseded documents. Every change is tracked with timestamps." />
        <FeatureRow icon="search"       color="hsl(25 95% 60%)" title="Annotation and review tools"      body="Review PDFs directly in the app with annotation tools — draw, highlight, add comments. HC review with sign-off." />
        <FeatureRow icon="pen-line"     color="hsl(25 95% 60%)" title="Worker e-signature"               body="Workers sign SWMS digitally with timestamped signatures. Contractor company and role recorded for each signatory." />
        <FeatureRow icon="clipboard-check" color="hsl(25 95% 60%)" title="OHS compliance checklist"     body="10-section compliance checklist against Victorian OHS Regulations 2017 — blocking and advisory items across hazard ID, controls, authorisation." />
        <FeatureRow icon="bell"         color="hsl(25 95% 60%)" title="Review alerts and notifications"  body="Configurable review interval. HC receives alerts when SWMS review is due. Notifications when new SWMS is submitted." />
        <FeatureRow icon="cloud"        color="hsl(25 95% 60%)" title="OneDrive file saving"             body="Completed SWMS documents save directly to your OneDrive folder structure — versioned, searchable, owned by you." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="SWMS Register" sub="Collins Quarter · 4 active" icon="file-text" color="hsl(25 95% 60%)" />
        <div style={{ padding: 14 }}>
          {[
            { title: 'Concrete Pumping — Tower Core',      co: 'MMC Structures',    ver: 'v3', status: 'Approved',      signers: 8 },
            { title: 'Electrical Installation — Warehouse', co: 'M&E Services',     ver: 'v1', status: 'Under Review',   signers: 0 },
            { title: 'Scaffold Erection — Levels 4–6',    co: 'Apex Formwork',     ver: 'v2', status: 'Approved',      signers: 5 },
            { title: 'Excavation — Basement Level B2',    co: 'Boral Civil',       ver: 'v1', status: 'Draft',          signers: 0 },
          ].map((s, i) => (
            <div key={i} style={{ padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: '#fff', marginBottom: 2 }}>{s.title}</div>
                  <div style={{ fontSize: 10, color: PG_MUTED }}>{s.co} · {s.ver}{s.signers > 0 ? ` · ${s.signers} signatories` : ''}</div>
                </div>
                <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 8px', borderRadius: 999, flexShrink: 0,
                  background: s.status === 'Approved' ? 'hsl(142 71% 45% / .12)' : s.status === 'Under Review' ? 'hsl(38 92% 50% / .12)' : 'hsl(215 14% 55% / .12)',
                  color: s.status === 'Approved' ? 'hsl(142 71% 45%)' : s.status === 'Under Review' ? 'hsl(38 92% 50%)' : PG_MUTED,
                  boxShadow: `inset 0 0 0 1px ${s.status === 'Approved' ? 'hsl(142 71% 45% / .3)' : s.status === 'Under Review' ? 'hsl(38 92% 50% / .3)' : 'hsl(216 22% 22%)'}` }}>
                  {s.status}
                </span>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 10, padding: '8px 10px', background: 'hsl(38 92% 50% / .06)', border: '1px solid hsl(38 92% 50% / .2)', borderRadius: 8, fontSize: 11, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="bell" size={12} style={{ color: 'hsl(38 92% 50%)' }} />
            <span style={{ color: 'hsl(38 92% 50%)', fontWeight: 600 }}>1 SWMS due for review — 2 days overdue</span>
          </div>
        </div>
      </div>
    </div>
  );

  if (id === 'permits') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="key"       color="hsl(38 92% 55%)" title="Cutting & Coring permits"         body="CC-VICxx-xxx numbered permits covering material, silica content, scan method, PPE, equipment, worker briefings and photo evidence. HRCW flagged automatically." />
        <FeatureRow icon="shovel"    color="hsl(38 92% 55%)" title="Excavation permits"                body="EX-VICxx-xxx permits with depth, HRCW flag, services identified, edge protection checklist, daily inspection records and photo evidence." />
        <FeatureRow icon="shield-check" color="hsl(38 92% 55%)" title="HC issue workflow"              body="Draft → Submitted → Issued. Only HC roles can issue permits. issuedAt and issuedByName auto-stamped on issue." />
        <FeatureRow icon="clock"     color="hsl(38 92% 55%)" title="Auto-numbered, time-bound"         body="Permits auto-number per project. Status tracks active, issued, closed and expired. No paper, no lost copies." />
        <FeatureRow icon="camera"    color="hsl(38 92% 55%)" title="Photo evidence required"           body="Photos captured at time of permit creation and on issue. Attached to the PDF export for the audit trail." />
        <FeatureRow icon="file-down" color="hsl(38 92% 55%)" title="PDF export — audit ready"         body="Full permit PDF with all fields, worker briefings, photos and issue details. Victorian OHS Regulations compliant." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Permits" sub="Collins Quarter — Cutting & Coring" icon="key" color="hsl(38 92% 55%)" />
        <div style={{ padding: 14 }}>
          {[
            { num: 'CC-VIC01-003', desc: 'Core drill — concrete slab Level 3',  status: 'Issued',    sil: 'High',   date: '12 May' },
            { num: 'CC-VIC01-002', desc: 'Diamond saw — precast panel',          status: 'Active',    sil: 'Medium', date: '10 May' },
            { num: 'EX-VIC01-002', desc: 'Service trench — north elevation',     status: 'Issued',    sil: '—',      date: '9 May',  hrcw: true },
            { num: 'EX-VIC01-001', desc: 'Basement excavation B2 level',         status: 'Closed',    sil: '—',      date: '2 May',  hrcw: true },
          ].map((p, i) => (
            <div key={i} style={{ padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                <span style={{ fontFamily: '"DM Mono",monospace', fontSize: 9, color: ORANGE, fontWeight: 600 }}>{p.num}</span>
                {p.hrcw && <span style={{ fontSize: 8, fontWeight: 700, padding: '1px 6px', borderRadius: 999, background: 'hsl(0 70% 60% / .12)', color: 'hsl(0 70% 60%)', boxShadow: 'inset 0 0 0 1px hsl(0 70% 60% / .3)' }}>HRCW</span>}
                <span style={{ fontSize: 8, fontWeight: 700, padding: '1.5px 7px', borderRadius: 999, marginLeft: 'auto',
                  background: p.status === 'Issued' || p.status === 'Active' ? 'hsl(142 71% 45% / .12)' : 'hsl(215 14% 55% / .12)',
                  color: p.status === 'Issued' || p.status === 'Active' ? 'hsl(142 71% 45%)' : PG_MUTED }}>{p.status}</span>
              </div>
              <div style={{ fontSize: 11, color: 'hsl(215 14% 75%)' }}>{p.desc}</div>
              {p.sil !== '—' && <div style={{ fontSize: 10, color: PG_MUTED, marginTop: 2 }}>Silica: {p.sil} · {p.date}</div>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'checklists') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="clipboard-check" color="hsl(142 71% 50%)" title="SWMS Observations"            body="SO-VICxx-xxx numbered observations. 50+ PPE and hazard control checks, compliance rating, corrective actions assigned to trades, worker briefing records." />
        <FeatureRow icon="leaf"            color="hsl(142 71% 50%)" title="Environmental Inspections"    body="EI-VICxx-xxx numbered inspections. 21 environmental checks across sediment control, stormwater, waste, noise and public impact. Issues with actions and due dates." />
        <FeatureRow icon="camera"          color="hsl(142 71% 50%)" title="Photo evidence"               body="Photo capture at each checklist item. Evidence attached to the PDF export and stored against the inspection record." />
        <FeatureRow icon="star"            color="hsl(142 71% 50%)" title="Compliance rating"            body="Overall compliance rating: Compliant, Minor Issues, Major Issues, Non-Compliant. Triggers corrective action workflow." />
        <FeatureRow icon="send"            color="hsl(142 71% 50%)" title="Corrective action assignment" body="Issues assigned to a responsible person with severity and due date. Tracked through to close-out." />
        <FeatureRow icon="file-down"       color="hsl(142 71% 50%)" title="PDF export"                  body="Complete inspection report PDF — all checks, photos, ratings, corrective actions and sign-off." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Inspection Checklists" sub="SWMS Observations · Environmental" icon="clipboard-check" color="hsl(142 71% 50%)" />
        <div style={{ padding: '10px 14px 4px', display: 'flex', gap: 6, borderBottom: '1px solid hsl(216 22% 16%)' }}>
          {['SWMS Observations', 'Environmental'].map((t, i) => (
            <div key={t} style={{ padding: '5px 12px', borderRadius: 7, fontSize: 11, fontWeight: 600,
              background: i === 0 ? 'hsl(142 71% 50% / .12)' : 'transparent',
              color: i === 0 ? 'hsl(142 71% 50%)' : PG_MUTED,
              boxShadow: i === 0 ? 'inset 0 0 0 1px hsl(142 71% 50% / .3)' : 'none' }}>{t}</div>
          ))}
        </div>
        <div style={{ padding: 14 }}>
          {[
            { ref: 'SO-VIC01-002', title: 'Excavation works — north elevation',    rating: 'Minor Issues', co: 'Apex Civil',     date: '12 May', rC: '38 92% 50%' },
            { ref: 'SO-VIC01-001', title: 'Concrete pour — Level 4 slab',          rating: 'Compliant',   co: 'MMC Structures', date: '9 May',  rC: '142 71% 45%' },
          ].map((o, i) => (
            <div key={i} style={{ padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontFamily: '"DM Mono",monospace', fontSize: 9, color: ORANGE }}>{o.ref}</span>
                <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, marginLeft: 'auto',
                  background: `hsl(${o.rC} / .12)`, color: `hsl(${o.rC})`, boxShadow: `inset 0 0 0 1px hsl(${o.rC} / .3)` }}>{o.rating}</span>
              </div>
              <div style={{ fontSize: 11, color: '#fff', fontWeight: 600, marginTop: 3 }}>{o.title}</div>
              <div style={{ fontSize: 10, color: PG_MUTED }}>{o.co} · {o.date}</div>
            </div>
          ))}
          <div style={{ marginTop: 8, fontSize: 10, color: PG_MUTED, fontStyle: 'italic' }}>PPE · Hazard Controls · Compliance Rating · Corrective Actions · Photo Evidence</div>
        </div>
      </div>
    </div>
  );

  if (id === 'prestart') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="sun"      color="hsl(38 92% 55%)" title="Day, Afternoon, Night shifts"    body="Shift-based daily prestart covering Day, Afternoon and Night crews. Weather conditions, temperature and site conditions recorded." />
        <FeatureRow icon="users"    color="hsl(38 92% 55%)" title="Works planned with trades"       body="Row-by-row works planned with trade, location, activity and worker count. HC adds planned tasks before the shift starts." />
        <FeatureRow icon="list"     color="hsl(38 92% 55%)" title="Safety checks"                   body="Configurable safety check items — weather risks, hot work, working at height, confined space, plant, utilities and more." />
        <FeatureRow icon="pen-line" color="hsl(38 92% 55%)" title="Supervisor sign-off"             body="Supervisor signs off the prestart with digital signature. Timestamped and stored against the project record." />
        <FeatureRow icon="settings-2" color="hsl(38 92% 55%)" title="Configurable per project"     body="Shifts, weather options and safety check items configured per project by the HC admin. Templates carried across projects." />
        <FeatureRow icon="file-down" color="hsl(38 92% 55%)" title="PDF archive"                   body="Each submitted prestart exports as PDF and saves to OneDrive. Full archive of every shift for the life of the project." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Daily Prestart" sub="Collins Quarter · Day Shift · 12 May" icon="sun" color="hsl(38 92% 55%)" />
        <div style={{ padding: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 12 }}>
            {[['Shift', 'Day'], ['Weather', 'Fine, 22°C'], ['Workers', '47']].map(([l, v]) => (
              <div key={l} style={{ background: 'hsl(216 28% 9%)', borderRadius: 7, padding: '8px 10px' }}>
                <div style={{ fontSize: 9, color: PG_MUTED, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em' }}>{l}</div>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', color: PG_MUTED, marginBottom: 6 }}>Works Planned Today</div>
          {[
            { trade: 'Formwork', loc: 'Level 5', activity: 'Slab formwork — grid C4–D6', workers: 8 },
            { trade: 'Concrete', loc: 'Level 4', activity: 'Column pour — west elevation', workers: 5 },
            { trade: 'Steel Fix', loc: 'Level 5', activity: 'Reinforcement placement', workers: 6 },
          ].map((w, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 0', borderBottom: '1px solid hsl(216 22% 13%)', fontSize: 11 }}>
              <span style={{ color: ORANGE, fontWeight: 700, width: 64, flexShrink: 0 }}>{w.trade}</span>
              <span style={{ color: PG_MUTED, width: 50, flexShrink: 0 }}>{w.loc}</span>
              <span style={{ color: 'hsl(215 14% 75%)', flex: 1 }}>{w.activity}</span>
              <span style={{ color: PG_MUTED, fontFamily: '"DM Mono",monospace' }}>{w.workers} pax</span>
            </div>
          ))}
          <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8, fontSize: 11 }}>
            <Icon name="check-circle" size={13} style={{ color: 'hsl(142 71% 45%)' }} />
            <span style={{ color: 'hsl(142 71% 45%)', fontWeight: 600 }}>Submitted — S. Mitchell · 06:55</span>
          </div>
        </div>
      </div>
    </div>
  );

  if (id === 'inductions') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="calendar"     color="hsl(270 70% 67%)" title="Booking calendar"                 body="Day, week and month calendar views. Schedule inductees in advance — status tracks Pending, Form Sent, Form Completed, Inducted." />
        <FeatureRow icon="link"         color="hsl(270 70% 67%)" title="QR code or direct link"            body="Print a QR code for the site cabin or send a direct link. Workers complete the 5-step form on their phone before arriving." />
        <FeatureRow icon="file-text"    color="hsl(270 70% 67%)" title="5-step digital form"               body="About You → Licences & Cards → Health Declaration → Site Rules & Acknowledgements → E-Signature." />
        <FeatureRow icon="shield-check" color="hsl(270 70% 67%)" title="Licence and certificate upload"    body="White Card, HRW, First Aid, Heights, Confined Space, Asbestos — workers upload photos of each card with expiry dates." />
        <FeatureRow icon="check-circle" color="hsl(270 70% 67%)" title="HC review and one-click approval"  body="Submitted forms land in the HC review queue. Approve and the worker account is created instantly, credentials emailed." />
        <FeatureRow icon="rotate-ccw"   color="hsl(270 70% 67%)" title="Auto re-induction on rule changes" body="When site rules change, workers are flagged for re-induction automatically. No manual chasing." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Site Inductions" sub="Collins Quarter · Week of 12 May" icon="user-check" color="hsl(270 70% 67%)" />
        <div style={{ padding: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6, marginBottom: 10 }}>
            {[
              { day: 'Mon 12', items: [{n:'J. Karras',t:'08:00',s:'inducted'},{n:'L. Pham',t:'09:00',s:'form_completed'}] },
              { day: 'Tue 13', items: [{n:'A. Chen',t:'08:00',s:'inducted'}] },
              { day: 'Wed 14', items: [{n:'D. Singh',t:'08:00',s:'form_sent'},{n:'R. Torres',t:'10:00',s:'pending'}] },
              { day: 'Thu 15', items: [{n:'T. Okafor',t:'08:00',s:'form_sent'}] },
              { day: 'Fri 16', items: [{n:'C. Walsh',t:'09:00',s:'pending'},{n:'B. Chen',t:'11:00',s:'pending'}] },
            ].map(d => {
              const SC = { inducted:'142 71% 45%', form_completed:'270 70% 60%', form_sent:'217 91% 60%', pending:'25 95% 55%' };
              return (
                <div key={d.day}>
                  <div style={{ fontSize: 9, fontWeight: 700, color: PG_MUTED, textAlign: 'center', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{d.day}</div>
                  {d.items.map((b,bi) => (
                    <div key={bi} style={{ borderRadius: 5, padding: '3px 5px', marginBottom: 3, background: `hsl(${SC[b.s]} / .12)`, boxShadow: `inset 0 0 0 1px hsl(${SC[b.s]} / .3)` }}>
                      <div style={{ fontSize: 8.5, fontWeight: 700, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{b.n}</div>
                      <div style={{ fontSize: 7.5, color: PG_MUTED, fontFamily: 'monospace' }}>{b.t}</div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
          <div style={{ background: 'hsl(270 70% 60% / .06)', border: '1px solid hsl(270 70% 60% / .2)', borderRadius: 8, padding: '8px 10px', fontSize: 11 }}>
            <div style={{ fontWeight: 700, color: '#fff', marginBottom: 4 }}>Pending Review — D. Singh</div>
            <div style={{ color: PG_MUTED }}>Tradelink Plumbing · Plumber · White Card + HRW ✓</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
              <div style={{ flex: 1, padding: '5px 10px', background: 'hsl(142 71% 45% / .12)', border: '1px solid hsl(142 71% 45% / .3)', borderRadius: 6, fontSize: 10, fontWeight: 700, color: 'hsl(142 71% 45%)', textAlign: 'center' }}>Approve</div>
              <div style={{ flex: 1, padding: '5px 10px', background: 'hsl(0 70% 60% / .08)', border: '1px solid hsl(0 70% 60% / .2)', borderRadius: 6, fontSize: 10, fontWeight: 700, color: 'hsl(0 70% 60%)', textAlign: 'center' }}>Reject</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  if (id === 'signin') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="qr-code"      color="hsl(217 91% 65%)" title="QR code sign-in"                body="Print a QR code, stick it on the site cabin. Workers scan with their phone — sign-in recorded in seconds. No app install required." />
        <FeatureRow icon="user-check"   color="hsl(217 91% 65%)" title="Induction status verified"      body="Every sign-in checks induction status. If not inducted, they're flagged and can't sign in as inducted." />
        <FeatureRow icon="alert-triangle" color="hsl(217 91% 65%)" title="Expired ticket alert"         body="Licences and tickets tracked against sign-ins. Supervisor notified when a worker's credentials are due to expire." />
        <FeatureRow icon="users"        color="hsl(217 91% 65%)" title="Live on-site count"             body="Supervisor sees the live headcount on the dashboard. Drill down to see exactly who is on site and their company." />
        <FeatureRow icon="sign-out"     color="hsl(217 91% 65%)" title="Sign-out recording"             body="Workers sign out via QR. Time on site recorded automatically. Useful for fatigue management and site close-down checks." />
        <FeatureRow icon="file-down"    color="hsl(217 91% 65%)" title="Daily attendance export"        body="Download the full attendance register for any day as a spreadsheet or PDF. Includes induction status and company." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Sign-In Register" sub="Collins Quarter · 12 May · 47 on site" icon="log-in" color="hsl(217 91% 65%)" />
        <div style={{ padding: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
            {[['47', 'Workers', 'hsl(217 91% 65%)'], ['47', 'Inducted', 'hsl(142 71% 45%)']].map(([v,l,c]) => (
              <div key={l} style={{ background: 'hsl(216 28% 9%)', borderRadius: 8, padding: '10px 12px' }}>
                <div style={{ fontSize: 20, fontWeight: 800, color: c }}>{v}</div>
                <div style={{ fontSize: 10, color: PG_MUTED, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em' }}>{l}</div>
              </div>
            ))}
          </div>
          {[
            { n: 'A. Chen', r: 'Steel Fixer · Apex Civil',    t: '07:12', ok: true },
            { n: 'L. Pham',     r: 'EWP Operator · Boom Hire',    t: '07:08', ok: true },
            { n: 'D. Singh',    r: 'Plumber · Tradelink',         t: '07:05', ok: true },
            { n: 'J. Karras',   r: 'Spotter · MMC',               t: '06:58', ok: false },
          ].map((p,i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ width: 26, height: 26, borderRadius: 999, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', color: '#fff', fontSize: 9.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{p.n.split(' ').map(s=>s[0]).join('')}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 600, color: '#fff' }}>{p.n}</div>
                <div style={{ fontSize: 9.5, color: PG_MUTED }}>{p.r}</div>
              </div>
              <div style={{ fontSize: 9, fontFamily: '"DM Mono",monospace', color: PG_MUTED }}>{p.t}</div>
              <div style={{ width: 16, height: 16, borderRadius: 999, background: p.ok ? 'hsl(142 71% 45% / .15)' : 'hsl(38 92% 50% / .15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={p.ok ? 'check' : 'alert-triangle'} size={9} style={{ color: p.ok ? 'hsl(142 71% 45%)' : 'hsl(38 92% 50%)' }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'plant') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="wrench"     color="hsl(217 91% 65%)" title="Equipment register"              body="Every item of plant registered with unique ID, type, service dates, compliance status and out-of-service flagging." />
        <FeatureRow icon="clipboard-list" color="hsl(217 91% 65%)" title="Pre-acceptance checklists"  body="Comprehensive pre-acceptance inspection before plant enters site — categorised inspection items, photo evidence, pass/fail recording." />
        <FeatureRow icon="user-check" color="hsl(217 91% 65%)" title="Plant inductions"               body="Operators tied to specific equipment via plant inductions. Induction expiry tracked and flagged. Worker can't operate without valid induction." />
        <FeatureRow icon="sparkles"   color="hsl(217 91% 65%)" title="AI extraction from compliance docs" body="Upload a plant compliance certificate — AI extracts plant details, service dates and operator requirements automatically." />
        <FeatureRow icon="bell"       color="hsl(217 91% 65%)" title="Service due date alerts"         body="Upcoming service dates flagged in the register. Out-of-service tags applied automatically when service is overdue." />
        <FeatureRow icon="link"       color="hsl(217 91% 65%)" title="Tied to sign-in and inductions"  body="Plant inductions linked to site induction records. Operators verified on sign-in. Complete compliance chain." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Plant & Equipment" sub="Collins Quarter · 6 items" icon="wrench" color="hsl(217 91% 65%)" />
        <div style={{ padding: '10px 14px 4px', display: 'flex', gap: 6, borderBottom: '1px solid hsl(216 22% 16%)' }}>
          {['Equipment Register', 'Pre-Acceptance', 'Plant Inductions'].map((t,i) => (
            <div key={t} style={{ padding: '5px 10px', borderRadius: 7, fontSize: 10, fontWeight: 600,
              background: i === 0 ? 'hsl(217 91% 60% / .12)' : 'transparent',
              color: i === 0 ? 'hsl(217 91% 65%)' : PG_MUTED,
              boxShadow: i === 0 ? 'inset 0 0 0 1px hsl(217 91% 60% / .3)' : 'none' }}>{t}</div>
          ))}
        </div>
        <div style={{ padding: 14 }}>
          {[
            { id: 'PLT-001', name: 'Tower Crane TC-01',        type: 'Crane',     status: 'Active',      service: '15 Jun' },
            { id: 'PLT-002', name: 'EWP — Boom Lift 12m',      type: 'EWP',       status: 'Active',      service: '30 May' },
            { id: 'PLT-003', name: 'Excavator CAT 320',        type: 'Excavator', status: 'Out of Service', service: '—' },
            { id: 'PLT-004', name: 'Concrete Pump — Putzmeister', type: 'Plant',  status: 'Active',      service: '20 Jun' },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <span style={{ fontFamily: '"DM Mono",monospace', fontSize: 9, color: 'hsl(217 91% 65%)', flexShrink: 0 }}>{p.id}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: '#fff' }}>{p.name}</div>
                <div style={{ fontSize: 10, color: PG_MUTED }}>{p.type} · Service: {p.service}</div>
              </div>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, flexShrink: 0,
                background: p.status === 'Active' ? 'hsl(142 71% 45% / .12)' : 'hsl(0 70% 60% / .12)',
                color: p.status === 'Active' ? 'hsl(142 71% 45%)' : 'hsl(0 70% 60%)',
                boxShadow: `inset 0 0 0 1px ${p.status === 'Active' ? 'hsl(142 71% 45% / .3)' : 'hsl(0 70% 60% / .3)'}` }}>{p.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'logistics') return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <FeatureRow icon="calendar"    color="hsl(217 91% 65%)" title="Day, week and list views"       body="Full booking calendar for every resource on site. Day view shows the time-slot grid. Week view gives the full picture." />
          <FeatureRow icon="truck"       color="hsl(217 91% 65%)" title="5 resource types"               body="Loading Bay, Tower Crane, Personnel Hoist, Bin Changeover, Delivery Zone — each with operating hours and buffer time." />
          <FeatureRow icon="smartphone"  color="hsl(217 91% 65%)" title="Mobile subcontractor booking"   body="Subbies request slots from their phone. Pre-filled with company, vehicle and rego from their last booking." />
          <FeatureRow icon="check-circle" color="hsl(217 91% 65%)" title="Conflict detection"            body="No double-bookings. System checks conflicts before allowing a request. Blackout periods configurable." />
          <FeatureRow icon="qr-code"     color="hsl(217 91% 65%)" title="QR scan-in at the gate"         body="Driver scans the QR on arrival. Booking flips to On-Site instantly. Supervisor sees it live on the dashboard." />
          <FeatureRow icon="file-down"   color="hsl(217 91% 65%)" title="Daily schedule PDF export"      body="Full day schedule exported as PDF — all resources, bookings, status, company and contact details." />
        </div>
        <div style={{ fontSize: 12, color: PG_MUTED, lineHeight: 1.6, paddingTop: 4 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 8 }}>Live scheduling grid — Collins Quarter · Tue 12 May</div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
            {[['Approved','142 71% 45%'],['On Site','217 91% 60%'],['Pending','38 92% 50%']].map(([l,c])=>(
              <div key={l} style={{ display:'flex', alignItems:'center', gap:5 }}>
                <span style={{ width:7, height:7, borderRadius:999, background:`hsl(${c})` }} />
                <span style={{ fontSize:10.5 }}>{l}</span>
              </div>
            ))}
          </div>
          <div style={{ padding: '8px 12px', background: 'hsl(38 92% 50% / .08)', border: '1px solid hsl(38 92% 50% / .3)', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="alert-circle" size={13} style={{ color: 'hsl(38 92% 50%)' }} />
            <span style={{ fontSize: 11, color: 'hsl(38 92% 60%)', fontWeight: 600 }}>3 booking requests awaiting approval</span>
          </div>
        </div>
      </div>
      <LogisticsGrid cardBg={PG_CARD} border={PG_BORDER} muted={PG_MUTED} />
    </div>
  );

  if (id === 'subcontractors') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="building-2"  color="hsl(142 71% 50%)" title="Subcontractor register"         body="Every subcontractor company registered with ABN, contact details, trade, insurance documents and licence records." />
        <FeatureRow icon="file-warning" color="hsl(142 71% 50%)" title="Insurance expiry tracking"     body="Public liability and workers comp expiry dates tracked. Supervisor flagged before expiry — they don't walk on site with expired docs." />
        <FeatureRow icon="award"        color="hsl(142 71% 50%)" title="Licence and accreditation"     body="Trade licences, industry accreditations and specialist certifications stored per company. Expiry alerts on the dashboard." />
        <FeatureRow icon="link"         color="hsl(142 71% 50%)" title="Linked to SWMS and permits"    body="Subcontractor company linked to SWMS submissions, permit applications and safety walk corrective action assignments." />
        <FeatureRow icon="users"        color="hsl(142 71% 50%)" title="Worker accounts"               body="Sub admin creates worker accounts for their company. Workers access induction forms, SWMS sign-off and sign-in register." />
        <FeatureRow icon="code-2"       color="hsl(142 71% 50%)" title="Custom subcontractor workflows" body="Need a custom prequalification workflow, insurance verification integration or subcontractor portal? Our engineers build it." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Subcontractors" sub="Collins Quarter · 4 active" icon="building-2" color="hsl(142 71% 50%)" />
        <div style={{ padding: 14 }}>
          {[
            { name: 'Apex Formwork Pty Ltd',     trade: 'Formwork',   ins: '30 Sep 2026', status: 'Active' },
            { name: 'M&E Services Australia',    trade: 'Electrical', ins: '15 Apr 2026', status: 'Expiring', warn: true },
            { name: 'Tradelink Plumbing',        trade: 'Plumbing',   ins: '28 Feb 2027', status: 'Active' },
            { name: 'WeAreFire',                 trade: 'Fire Prot.', ins: '30 Jun 2026', status: 'Active' },
          ].map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'hsl(142 71% 50% / .10)', border: '1px solid hsl(142 71% 50% / .22)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800, color: 'hsl(142 71% 50%)', flexShrink: 0 }}>
                {c.name.charAt(0)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 700, color: '#fff' }}>{c.name}</div>
                <div style={{ fontSize: 10, color: PG_MUTED }}>{c.trade} · Ins: {c.ins}</div>
              </div>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, flexShrink: 0,
                background: c.warn ? 'hsl(38 92% 50% / .12)' : 'hsl(142 71% 45% / .12)',
                color: c.warn ? 'hsl(38 92% 50%)' : 'hsl(142 71% 45%)',
                boxShadow: `inset 0 0 0 1px ${c.warn ? 'hsl(38 92% 50% / .3)' : 'hsl(142 71% 45% / .3)'}` }}>{c.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'diary') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="book-marked" color="hsl(0 70% 60%)" title="Daily diary entries"              body="Date, supervisor, site, weather, temperature, workers on site — recorded every shift. Expandable entries with full detail." />
        <FeatureRow icon="cloud-sun"   color="hsl(0 70% 60%)" title="Weather and conditions"           body="Fine, Overcast, Rain, Wind, Extreme Heat, Frost — weather recorded per shift with temperature. Legally relevant for delay claims." />
        <FeatureRow icon="truck"       color="hsl(0 70% 60%)" title="Deliveries and visitors"          body="Deliveries received and visitors on site recorded. The complete site record for the day." />
        <FeatureRow icon="alert-circle" color="hsl(0 70% 60%)" title="Issues and delays"              body="Any issues, delays or RFIs recorded and timestamped. Your evidence trail if a dispute arises later." />
        <FeatureRow icon="eye"         color="hsl(0 70% 60%)" title="Safety observations"              body="Daily safety observations linked to the diary entry. Connects site conditions with the safety record." />
        <FeatureRow icon="gavel"       color="hsl(0 70% 60%)" title="Court-ready format"              body="Diary kept in the format courts recognise — dated, signed, contemporaneous. Your best defence in a dispute." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Supervisor Diary" sub="Collins Quarter — May 2026" icon="book-marked" color="hsl(0 70% 60%)" />
        <div style={{ padding: 14 }}>
          {[
            { date: 'Monday, 12 May 2026',  sup: 'S. Mitchell',    wx: 'Fine · 22°C', workers: 47, work: 'Level 5 formwork and Level 4 column pours. Steel reinforcement placement commenced on Level 5.' },
            { date: 'Friday, 9 May 2026',   sup: 'S. Mitchell',   wx: 'Overcast',    workers: 42, work: 'Excavation — north elevation trench completed. Concrete pour Level 3 columns.' },
            { date: 'Thursday, 8 May 2026', sup: 'S. Mitchell',    wx: 'Light Rain',  workers: 38, work: 'Rain delay AM. Afternoon — formwork Level 4. Principal site walk at 14:00.' },
          ].map((e, i) => (
            <div key={i} style={{ padding: '10px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>{e.date}</div>
                <span style={{ fontSize: 9, fontFamily: '"DM Mono",monospace', color: PG_MUTED }}>{e.workers} workers</span>
              </div>
              <div style={{ fontSize: 10, color: PG_MUTED, marginBottom: 4 }}>{e.sup} · {e.wx}</div>
              <div style={{ fontSize: 10.5, color: 'hsl(215 14% 75%)', lineHeight: 1.45 }}>{e.work}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'tempworks') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="construction" color="hsl(25 95% 60%)" title="Temporary works register"       body="Every temporary structure registered — shoring, propping, scaffolding, formwork. Description, location, designer and design reference." />
        <FeatureRow icon="user"         color="hsl(25 95% 60%)" title="Designer and check engineer"    body="Designer and independent check engineer recorded per item. Design reference number tracked for audit purposes." />
        <FeatureRow icon="calendar"     color="hsl(25 95% 60%)" title="Install and removal dates"      body="Planned install and removal dates tracked. Overdue removal flagged automatically — items marked with an orange border." />
        <FeatureRow icon="arrow-right"  color="hsl(25 95% 60%)" title="Status workflow"                body="Planned → Installed → Removed. Status updated with a single tap. Actual removal date auto-stamped on removal." />
        <FeatureRow icon="alert-triangle" color="hsl(25 95% 60%)" title="Overdue removal alerts"      body="When a removal date passes and status is still Installed, the item is flagged as Overdue on the register and dashboard." />
        <FeatureRow icon="code-2"       color="hsl(25 95% 60%)" title="Engineer integration — bespoke" body="Need designer sign-off integration, structural certification upload or automated principal notification? Our engineers build it." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Temporary Works Register" sub="Collins Quarter · 4 items" icon="construction" color="hsl(25 95% 60%)" />
        <div style={{ padding: 14 }}>
          {[
            { desc: 'Temporary shoring — north wall excavation', loc: 'North Elevation', designer: 'Arup Geotechnical', install: '15 Apr', removal: '30 May', status: 'Installed' },
            { desc: 'Propping — Level 3 transfer slab',          loc: 'Level 3',         designer: 'WSP Structures',     install: '2 May',  removal: '28 May', status: 'Overdue', warn: true },
            { desc: 'Scaffolding — east facade Levels 4–7',     loc: 'East Facade',     designer: 'OneSteel Scaffold',  install: '20 Apr', removal: '15 Jun', status: 'Installed' },
            { desc: 'Formwork — Level 5 slab',                  loc: 'Level 5',         designer: 'Apex Formwork',      install: '10 May', removal: '20 May', status: 'Planned' },
          ].map((tw, i) => (
            <div key={i} style={{ padding: '9px 0', borderBottom: '1px solid hsl(216 22% 13%)', borderLeft: tw.warn ? '3px solid hsl(38 92% 50%)' : '3px solid transparent', paddingLeft: tw.warn ? 8 : 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', marginBottom: 2 }}>{tw.desc}</div>
                  <div style={{ fontSize: 10, color: PG_MUTED }}>{tw.loc} · {tw.designer}</div>
                  <div style={{ fontSize: 10, color: PG_MUTED, marginTop: 1 }}>Install: {tw.install} · Remove: {tw.removal}</div>
                </div>
                <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, flexShrink: 0,
                  background: tw.status === 'Installed' ? 'hsl(142 71% 45% / .12)' : tw.status === 'Overdue' ? 'hsl(38 92% 50% / .12)' : 'hsl(215 14% 55% / .12)',
                  color: tw.status === 'Installed' ? 'hsl(142 71% 45%)' : tw.status === 'Overdue' ? 'hsl(38 92% 50%)' : PG_MUTED }}>{tw.status}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  if (id === 'projects') return (
    <div style={GRID}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FeatureRow icon="folder-open" color="hsl(270 70% 67%)" title="Stand a site up in a morning"   body="Create a project with number, address, client and status. Every module filters to the active project automatically." />
        <FeatureRow icon="users"       color="hsl(270 70% 67%)" title="Project members and SAN"         body="HC team members assigned per project with Site Access Number (SAN). Subcontractor companies linked to projects." />
        <FeatureRow icon="settings-2"  color="hsl(270 70% 67%)" title="Carry your standards site to site" body="Project templates carry your forms, checklist configurations, induction questions and prestart setup to every new project." />
        <FeatureRow icon="bar-chart"   color="hsl(270 70% 67%)" title="Per-project data isolation"      body="All module data — incidents, SWMS, permits, inductions, diary — filtered per project. Switch project in one tap." />
        <FeatureRow icon="archive"     color="hsl(270 70% 67%)" title="Project lifecycle"               body="Active, On-Hold, Completed, Archived. Completed projects archived to OneDrive with full data export." />
        <FeatureRow icon="code-2"      color="hsl(270 70% 67%)" title="Custom project dashboards"       body="Need a roll-up dashboard across all active projects, principal-level reporting or custom project fields? Our engineers build it." />
      </div>
      <div style={{ background: PG_CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
        <MockHeader title="Projects" sub="Mont Milan Pty Ltd · 3 active" icon="folder-open" color="hsl(270 70% 67%)" />
        <div style={{ padding: 14 }}>
          {[
            { num: 'VIC01', name: 'Collins Quarter',    addr: '240 Collins St Melbourne',    status: 'Active',     members: 7, val: '$28M' },
            { num: 'VIC02', name: 'South Yarra Towers', addr: '14 Commercial Rd S. Yarra',   status: 'Active',     members: 5, val: '$12M' },
            { num: 'VIC03', name: 'Cremorne Fitout',    addr: '40 Wellington St Cremorne',   status: 'On Hold',    members: 3, val: '$1.2M' },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 0', borderBottom: '1px solid hsl(216 22% 13%)' }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'hsl(270 70% 60% / .10)', border: '1px solid hsl(270 70% 60% / .22)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: '"DM Mono",monospace', fontSize: 10, fontWeight: 700, color: 'hsl(270 70% 67%)', flexShrink: 0 }}>{p.num}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#fff', marginBottom: 1 }}>{p.name}</div>
                <div style={{ fontSize: 10, color: PG_MUTED }}>{p.addr}</div>
                <div style={{ fontSize: 10, color: PG_MUTED }}>{p.members} members · {p.val}</div>
              </div>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 999, flexShrink: 0,
                background: p.status === 'Active' ? 'hsl(142 71% 45% / .12)' : 'hsl(38 92% 50% / .12)',
                color: p.status === 'Active' ? 'hsl(142 71% 45%)' : 'hsl(38 92% 50%)',
                boxShadow: `inset 0 0 0 1px ${p.status === 'Active' ? 'hsl(142 71% 45% / .3)' : 'hsl(38 92% 50% / .3)'}` }}>{p.status}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  return null;
}

// ── MAIN PlatformModules component ─────────────────────────────────────────────
const PlatformModules = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const [activeId, setActiveId] = React.useState('incidents');
  const active = MODULES.find(m => m.id === activeId);

  const groups = [...new Set(MODULES.map(m => m.group))];

  return (
    <section style={{ padding: isMobile ? '48px 20px' : isTablet ? '64px 32px' : '72px 64px', borderTop: '1px solid ' + PG_BORDER }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>

        {/* Module nav */}
        <div style={{ display: 'flex', gap: 24, marginBottom: 40, flexWrap: 'wrap' }}>
          {/* Group labels + module buttons */}
          {groups.map(group => (
            <div key={group}>
              <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.14em', color: PG_MUTED, marginBottom: 8 }}>{group}</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {MODULES.filter(m => m.group === group).map(m => (
                  <button key={m.id} onClick={() => setActiveId(m.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '7px 13px', borderRadius: 8, border: 'none',
                    background: activeId === m.id ? `hsl(${m.color} / .15)` : PG_CARD,
                    color: activeId === m.id ? `hsl(${m.color})` : PG_MUTED,
                    fontSize: 12, fontWeight: 600, cursor: 'pointer',
                    boxShadow: activeId === m.id
                      ? `inset 0 0 0 1px hsl(${m.color} / .4)`
                      : 'inset 0 0 0 1px hsl(216 22% 18%)',
                    transition: 'all .15s', fontFamily: 'inherit',
                    whiteSpace: 'nowrap',
                  }}>
                    <Icon name={m.icon} size={13} style={{ color: 'currentColor' }} />
                    {m.label}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Active module content */}
        {active && (
          <div style={{ background: PG_CARD, border: `1px solid hsl(${active.color} / .25)`, borderRadius: 16, padding: isMobile ? '20px 16px' : '32px 32px', boxShadow: `0 0 40px hsl(${active.color} / .06)` }}>
            <ModuleCard icon={active.icon} label={active.label} color={active.color} tag={active.tag}>
              <ModuleContent id={activeId} isMobile={isMobile} />
            </ModuleCard>
          </div>
        )}

        {/* Bespoke strip */}
        <div style={{ marginTop: 32, padding: '20px 24px', background: 'hsl(25 95% 55% / .06)', border: '1px solid hsl(25 95% 55% / .2)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>Need something these 14 modules don't cover?</div>
            <div style={{ fontSize: 12, color: PG_MUTED, marginTop: 3 }}>Our engineers meet with you, scope the solution and ship a new feature in weeks. Whatever the construction problem — we build it.</div>
          </div>
          <a href="bespoke.html" style={{ textDecoration: 'none', flexShrink: 0 }}>
            <Btn primary size="md" icon="arrow-right">See how bespoke works</Btn>
          </a>
        </div>

      </div>
    </section>
  );
};


// ── PDF Exports Section ────────────────────────────────────────────────────────
const PDFExportsSection = () => {
  const { isMobile, isTablet } = useBreakpoint();

  // Safety Walk PDF mock — matches SafetyWalkPrint.css structure
  const SafetyWalkPDFMock = () => (
    <div style={{ background: '#f4f5f7', borderRadius: 10, overflow: 'hidden', border: '1px solid hsl(220 14% 82%)', boxShadow: '0 4px 20px rgba(0,0,0,.15)', fontFamily: '"DM Sans",sans-serif', fontSize: 9 }}>
      <div style={{ background: '#fff', margin: 12, borderRadius: 7, overflow: 'hidden', boxShadow: '0 1px 4px rgba(0,0,0,.06)' }}>
        {/* Header */}
        <div style={{ padding: '12px 14px 10px', borderBottom: '1px solid hsl(220 14% 88%)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 26, height: 26, borderRadius: 6, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="shield-check" size={13} style={{ color: '#fff' }} />
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 900, color: 'hsl(216 28% 10%)', letterSpacing: '-.01em' }}>SafeGuard</div>
              <div style={{ fontSize: 7, color: 'hsl(215 14% 50%)', letterSpacing: '.04em', textTransform: 'uppercase' }}>Site Safety Walk Report</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 8.5, fontWeight: 700, color: 'hsl(216 28% 10%)' }}>Collins Quarter</div>
            <div style={{ fontSize: 7, color: 'hsl(215 14% 50%)', fontFamily: 'monospace' }}>12 May 2026 · S. Mitchell</div>
            <div style={{ marginTop: 3, display: 'inline-block', fontSize: 7, fontWeight: 700, padding: '1.5px 7px', borderRadius: 999, background: 'hsl(0 84% 60% / .08)', color: 'hsl(0 72% 45%)', boxShadow: 'inset 0 0 0 1px hsl(0 72% 51% / .3)' }}>2 OPEN ITEMS</div>
          </div>
        </div>
        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', borderBottom: '1px solid hsl(220 14% 88%)' }}>
          {[['4','Total','hsl(216 28% 20%)'],['2','Open','hsl(0 72% 45%)'],['1','Actioned','hsl(35 92% 38%)'],['1','Closed','hsl(142 71% 30%)']].map(([v,l,c],i)=>(
            <div key={l} style={{ padding:'8px 10px', borderRight: i<3 ? '1px solid hsl(220 14% 88%)' : 'none', background:'hsl(220 16% 97%)' }}>
              <div style={{ fontSize:16, fontWeight:800, color:c, letterSpacing:'-.02em' }}>{v}</div>
              <div style={{ fontSize:7, color:'hsl(215 14% 50%)', fontWeight:600, textTransform:'uppercase', letterSpacing:'.1em' }}>{l}</div>
            </div>
          ))}
        </div>
        {/* Findings */}
        <div style={{ padding: '8px 10px' }}>
          <div style={{ fontSize:7, fontWeight:800, textTransform:'uppercase', letterSpacing:'.14em', color:'hsl(215 14% 45%)', marginBottom:6 }}>Findings</div>
          {[
            { cat:'Scaffold & Edge Protection', loc:'Level 5 South', sev:'Critical', st:'Open', sevC:'0 72% 51%', stC:'0 84% 60%', desc:'Handrail missing on southern edge — 1.2m gap, no temporary barrier in place.', assigned:'Apex Formwork' },
            { cat:'PPE', loc:'Level 3', sev:'High', st:'Actioned', sevC:'25 95% 50%', stC:'35 92% 38%', desc:'Two workers without hard hats. Verbal warning issued.', assigned:'WeAreFire' },
          ].map((item,i) => (
            <div key={i} style={{ border:'1px solid hsl(220 14% 88%)', borderRadius:6, marginBottom:5, overflow:'hidden' }}>
              <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', padding:'5px 8px', background:'hsl(220 16% 96%)', borderBottom:'1px solid hsl(220 14% 88%)', gap:6 }}>
                <div style={{ display:'flex', gap:6, alignItems:'flex-start' }}>
                  <div style={{ width:16, height:16, borderRadius:4, background:`hsl(${item.sevC} / .10)`, boxShadow:`inset 0 0 0 1px hsl(${item.sevC} / .35)`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <span style={{ fontSize:7, fontWeight:800, color:`hsl(${item.sevC})` }}>{i+1}</span>
                  </div>
                  <div>
                    <div style={{ fontSize:7.5, fontWeight:700, color:'hsl(215 14% 40%)', textTransform:'uppercase', letterSpacing:'.06em' }}>{item.cat}</div>
                    <div style={{ fontSize:7, color:'hsl(215 14% 55%)', fontFamily:'monospace' }}>{item.loc}</div>
                  </div>
                </div>
                <div style={{ display:'flex', gap:3, flexShrink:0 }}>
                  <span style={{ fontSize:6.5, fontWeight:700, padding:'1.5px 5px', borderRadius:999, background:`hsl(${item.sevC} / .10)`, color:`hsl(${item.sevC})`, boxShadow:`inset 0 0 0 1px hsl(${item.sevC} / .3)`, textTransform:'uppercase' }}>{item.sev}</span>
                  <span style={{ fontSize:6.5, fontWeight:700, padding:'1.5px 5px', borderRadius:999, background:`hsl(${item.stC} / .10)`, color:`hsl(${item.stC})`, boxShadow:`inset 0 0 0 1px hsl(${item.stC} / .3)`, textTransform:'uppercase' }}>{item.st}</span>
                </div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 60px', gap:6, padding:'5px 8px', alignItems:'start' }}>
                <div style={{ fontSize:8, color:'hsl(215 14% 30%)', lineHeight:1.4 }}>{item.desc}</div>
                <div style={{ width:60, height:40, borderRadius:5, background:'hsl(220 16% 94%)', border:'1px dashed hsl(220 14% 78%)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name="camera" size={11} style={{ color:'hsl(215 14% 65%)' }} />
                </div>
              </div>
              <div style={{ padding:'4px 8px 5px', borderTop:'1px solid hsl(220 14% 92%)', display:'flex', alignItems:'center', gap:5 }}>
                <div style={{ fontSize:6.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'.1em', color:'hsl(215 14% 50%)' }}>Assigned</div>
                <div style={{ fontSize:7.5, fontWeight:600, color:'hsl(25 95% 45%)' }}>{item.assigned}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Footer */}
        <div style={{ padding:'6px 10px', borderTop:'1px solid hsl(220 14% 88%)', display:'flex', justifyContent:'space-between', background:'hsl(220 16% 97%)' }}>
          <div style={{ fontSize:6.5, color:'hsl(215 14% 55%)', fontFamily:'monospace' }}>Generated by SafeGuard · safeguardapp.au</div>
          <div style={{ fontSize:6.5, color:'hsl(215 14% 55%)', fontFamily:'monospace' }}>Page 1 of 1</div>
        </div>
      </div>
    </div>
  );

  // Logistics PDF mock — matches SiteLogisticsPrint.css structure
  const LogisticsPDFMock = () => (
    <div style={{ background: '#f4f5f7', borderRadius: 10, overflow: 'hidden', border: '1px solid hsl(220 14% 82%)', boxShadow: '0 4px 20px rgba(0,0,0,.15)', fontFamily: '"DM Sans",sans-serif', fontSize: 9 }}>
      <div style={{ background: '#fff', margin: 12, borderRadius: 7, overflow: 'hidden', boxShadow: '0 1px 4px rgba(0,0,0,.06)' }}>
        <div style={{ padding: '12px 14px 10px', borderBottom: '1px solid hsl(220 14% 88%)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 26, height: 26, borderRadius: 6, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="truck" size={13} style={{ color: '#fff' }} />
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 900, color: 'hsl(216 28% 10%)' }}>SafeGuard</div>
              <div style={{ fontSize: 7, color: 'hsl(215 14% 50%)', letterSpacing: '.04em', textTransform: 'uppercase' }}>Logistics Booking Schedule</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 8.5, fontWeight: 700, color: 'hsl(216 28% 10%)' }}>Collins Quarter</div>
            <div style={{ fontSize: 7, color: 'hsl(215 14% 50%)', fontFamily: 'monospace' }}>Tuesday 12 May 2026</div>
          </div>
        </div>
        <div style={{ padding: '8px 10px' }}>
          {[
            { name: 'Loading Bay 1', color: 'hsl(217 91% 60%)', bookings: [{ t:'07:00–08:30', co:'Tradelink Plumbing', sub:'12 × pallets', st:'Approved' },{ t:'10:00–11:30', co:'Hilti AU', sub:'Anchor delivery', st:'Approved' }] },
            { name: 'Tower Crane',   color: 'hsl(38 92% 50%)',  bookings: [{ t:'07:00–09:30', co:'Apex Formwork', sub:'Precast lift L5', st:'Approved' },{ t:'13:00–14:30', co:'Boral Concrete', sub:'Skip lift L7', st:'On Site' }] },
          ].map((r,ri) => (
            <div key={ri} style={{ marginBottom:8 }}>
              <div style={{ display:'flex', alignItems:'center', gap:6, padding:'5px 8px', background:'hsl(220 16% 96%)', borderRadius:'6px 6px 0 0', border:'1px solid hsl(220 14% 88%)' }}>
                <span style={{ width:7, height:7, borderRadius:999, background:r.color }} />
                <span style={{ fontSize:9, fontWeight:800, color:'hsl(216 28% 10%)' }}>{r.name}</span>
              </div>
              <div style={{ border:'1px solid hsl(220 14% 88%)', borderTop:'none', borderRadius:'0 0 6px 6px', overflow:'hidden' }}>
                {r.bookings.map((b,bi) => (
                  <div key={bi} style={{ display:'grid', gridTemplateColumns:'80px 1fr 1fr 60px', padding:'5px 8px', borderBottom: bi<r.bookings.length-1 ? '1px solid hsl(220 14% 92%)' : 'none', fontSize:8, alignItems:'center' }}>
                    <span style={{ fontFamily:'monospace', color:'hsl(215 14% 45%)', fontWeight:600 }}>{b.t}</span>
                    <span style={{ fontWeight:700, color:'hsl(216 28% 15%)' }}>{b.co}</span>
                    <span style={{ color:'hsl(215 14% 50%)' }}>{b.sub}</span>
                    <span style={{ fontSize:7, fontWeight:700, padding:'1.5px 6px', borderRadius:999, background:'hsl(142 71% 30% / .10)', color:'hsl(142 71% 30%)', textAlign:'center' }}>{b.st}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding:'6px 10px', borderTop:'1px solid hsl(220 14% 88%)', display:'flex', justifyContent:'space-between', background:'hsl(220 16% 97%)' }}>
          <div style={{ fontSize:6.5, color:'hsl(215 14% 55%)', fontFamily:'monospace' }}>Generated by SafeGuard · safeguardapp.au</div>
          <div style={{ fontSize:6.5, color:'hsl(215 14% 55%)', fontFamily:'monospace' }}>Page 1 of 1</div>
        </div>
      </div>
    </div>
  );

  return (
    <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', background: 'hsl(216 32% 5%)', borderTop: `1px solid ${PG_BORDER}` }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>

        {/* Header */}
        <div style={{ marginBottom: 48 }}>
          <Eyebrow>PDF Exports</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 30 : 44, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.06, marginTop: 14, marginBottom: 16, maxWidth: 720 }}>
            We know how sites work.<br/>
            <span style={{ fontStyle: 'italic', background: 'linear-gradient(135deg, hsl(25 95% 65%), hsl(20 88% 50%))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Printouts are sometimes needed.</span>
          </h2>
          <p style={{ fontSize: 16, color: PG_MUTED, maxWidth: 680, lineHeight: 1.7, marginBottom: 20 }}>
            Every module in SafeGuard has a built-in PDF export. These aren't generic templates — they're structured, branded reports that match the way your sites present information. And when your standard doesn't fit, our team builds a completely bespoke export to meet your needs.
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 20px', background: 'hsl(25 95% 55% / .08)', border: '1px solid hsl(25 95% 55% / .25)', borderRadius: 10 }}>
            <Icon name="palette" size={15} style={{ color: 'hsl(25 95% 60%)', flexShrink: 0 }} />
            <span style={{ fontSize: 13, fontWeight: 700, color: 'hsl(25 95% 65%)' }}>
              Your company branding, colour ways and formatting — configured by our team.
            </span>
          </div>
        </div>

        {/* Two PDF mocks side by side */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24, marginBottom: 40 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.12em', color: PG_MUTED, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="shield" size={12} style={{ color: 'hsl(0 70% 60%)' }} />
              Safety Walk Report
            </div>
            <SafetyWalkPDFMock />
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.12em', color: PG_MUTED, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="truck" size={12} style={{ color: 'hsl(217 91% 65%)' }} />
              Logistics Booking Schedule
            </div>
            <LogisticsPDFMock />
          </div>
        </div>

        {/* Feature grid */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 14, marginBottom: 32 }}>
          {[
            { icon: 'shield-check', color: 'hsl(0 70% 60%)',    title: 'Safety Walk',        body: 'All findings, photos, severity ratings, assigned trades and corrective action notes. Filtered by company, severity or status.' },
            { icon: 'truck',        color: 'hsl(217 91% 65%)',  title: 'Site Logistics',     body: 'Day or week schedule with all resources, booking times, companies, contact details and approval status.' },
            { icon: 'key',          color: 'hsl(38 92% 55%)',   title: 'Permits',            body: 'Cutting & Coring and Excavation permit PDFs with all fields, worker briefings, photos and HC issue stamp.' },
            { icon: 'user-check',   color: 'hsl(270 70% 67%)',  title: 'Inductions',         body: 'Worker induction record with licence copies, health declaration, signed acknowledgements and HC approval.' },
            { icon: 'clipboard-check', color: 'hsl(142 71% 50%)', title: 'Checklists',       body: 'SWMS observation and environmental inspection reports with compliance rating, photos and corrective actions.' },
            { icon: 'file-text',    color: 'hsl(25 95% 60%)',   title: 'SWMS',               body: 'SWMS document with version history, annotated pages, worker signatures and HC review notes.' },
            { icon: 'book-marked',  color: 'hsl(0 70% 60%)',    title: 'Supervisor Diary',   body: 'Daily diary PDFs for any date range — weather, works, deliveries, visitors, instructions. Court-ready format.' },
            { icon: 'palette',      color: 'hsl(25 95% 60%)',   title: 'Bespoke layouts',    body: 'Every export configured to your logo, brand colours, fonts and document conventions. Our team builds the layout.' },
          ].map((f, i) => (
            <div key={i} style={{ background: PG_CARD, border: `1px solid ${PG_BORDER}`, borderRadius: 12, padding: '18px 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: `${f.color.replace(')', ' / .12)').replace('hsl(', 'hsl(')}`, border: `1px solid ${f.color.replace(')', ' / .25)').replace('hsl(', 'hsl(')}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={f.icon} size={16} style={{ color: f.color }} />
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>{f.title}</div>
              <div style={{ fontSize: 12, color: PG_MUTED, lineHeight: 1.5 }}>{f.body}</div>
            </div>
          ))}
        </div>

        {/* Bespoke CTA */}
        <div style={{ padding: '24px 28px', background: 'linear-gradient(135deg, hsl(216 24% 12%), hsl(216 28% 9%))', border: '1px solid hsl(25 95% 30%)', borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -60, top: -60, width: 240, height: 240, background: 'radial-gradient(circle, rgba(234,88,12,.14) 0%, transparent 65%)', filter: 'blur(20px)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', marginBottom: 6 }}>A completely bespoke export, developed by our team to meet your needs.</div>
            <div style={{ fontSize: 13, color: PG_MUTED, maxWidth: 520 }}>Your logo, your brand colours, your document formatting. We configure every PDF export to align with your company's reporting standards and principal contractor requirements.</div>
          </div>
          <a href="contact.html" style={{ textDecoration: 'none', flexShrink: 0, position: 'relative' }}>
            <Btn primary size="md" icon="arrow-right">Talk to our team</Btn>
          </a>
        </div>

      </div>
    </section>
  );
};

Object.assign(window, { PlatformModules, PDFExportsSection });