// Shared building blocks for SafeGuard website directions

// ── ICON ─────────────────────────────────────────────────────────────
// Lucide-via-CDN renders into <i data-lucide="..."> after `lucide.createIcons()`.
// We use a thin React wrapper that re-runs createIcons() after mount.
const Icon = ({ name, size = 16, strokeWidth = 1.75, style, className = "" }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      window.lucide.createIcons();
    }
  });
  return (
    <i
      ref={ref}
      data-lucide={name}
      data-stroke-width={strokeWidth}
      className={className}
      style={{ width: size, height: size, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, ...style }}
    />
  );
};

// ── BRAND MARK ───────────────────────────────────────────────────────
const BrandMark = ({ size = 32, glow = false }) => (
  <div style={{
    width: size, height: size, borderRadius: size * 0.28,
    background: 'linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(20 88% 44%) 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
    boxShadow: glow ? '0 0 18px rgba(234,88,12,.30)' : 'none',
  }}>
    <Icon name="shield-check" size={size * 0.55} strokeWidth={2.25} style={{ color: '#fff' }} />
  </div>
);

const Wordmark = ({ small = false, light = true }) => (
  <div style={{ lineHeight: 1.1 }}>
    <div style={{ color: light ? '#fff' : '#0c1116', fontSize: small ? 13 : 15, fontWeight: 700, letterSpacing: '.02em' }}>SafeGuard</div>
    <div style={{ fontSize: 9.5, opacity: .55, letterSpacing: '.06em', marginTop: 2, textTransform: 'uppercase' }}>Construction Tech</div>
  </div>
);

// ── DATA: Features ───────────────────────────────────────────────────
const FEATURES = [
  { icon: 'alert-triangle', name: 'Incident Reports',     blurb: 'Notifiable, lost-time, near-miss. Photos, witness statements, corrective actions — straight from the phone.', color: 'hsl(0 70% 60%)' },
  { icon: 'log-in',          name: 'Sign-In Register',    blurb: 'Workers and visitors sign in via QR. Inductions verified, ticket expiry flagged. Live on-site count for your supervisor.', color: 'hsl(217 91% 65%)' },
  { icon: 'file-text',       name: 'SWMS',                blurb: 'Build, version and sign Safe Work Method Statements. Every change tracked. Every signature timestamped.', color: 'hsl(25 95% 60%)' },
  { icon: 'key',             name: 'Permits',             blurb: 'Hot work, confined space, working at heights. Issued, time-bound, auto-closed. No paper, no lost copies.', color: 'hsl(38 92% 55%)' },
  { icon: 'clipboard-check', name: 'Safety Checklists',   blurb: 'Pre-start, plant, scaffold, EWP. Configurable per project. Photo evidence required where it matters.', color: 'hsl(142 71% 50%)' },
  { icon: 'user-check',      name: 'Site Inductions',     blurb: 'Booking calendar with day, week and month views. 5-step digital form — licences, health, site rules, e-signature. HC review and approval, worker account created automatically. Re-induction triggered on rule changes.', color: 'hsl(270 70% 67%)' },
  { icon: 'shield',          name: 'Safety Walk',         blurb: 'Site inspection walks with photo capture, categorised findings and severity ratings. Corrective actions assigned to subcontractors, notifications sent, PDF report out.', color: 'hsl(0 70% 60%)' },
  { icon: 'truck',           name: 'Site Logistics',      blurb: 'Crane, hoist, loading bay and delivery zone bookings. Day and week calendar views, conflict detection, blackout periods and approval workflows — per project, per resource.', color: 'hsl(217 91% 65%)' },
  { icon: 'wrench',          name: 'Plant & Equipment',   blurb: 'Register, service due dates, out-of-service tags. Operators tied to tickets, tickets tied to inductions.', color: 'hsl(217 91% 65%)' },
  { icon: 'building-2',      name: 'Subcontractors',      blurb: 'Insurance currency, ABN, licences. Documents expire, you get a flag — they don\'t walk on site.', color: 'hsl(142 71% 50%)' },
  { icon: 'book-open',       name: 'Document Library',    blurb: 'Drawings, MSDS, ITPs. Versioned, searchable, viewable offline at the cabin or in the lift.', color: 'hsl(38 92% 55%)' },
  { icon: 'book-marked',     name: 'Supervisor Diary',    blurb: 'Daily log, weather, deliveries, RFIs. The site\'s record-of-work, kept the way courts want it.', color: 'hsl(0 70% 60%)' },
  { icon: 'construction',    name: 'Temporary Works',     blurb: 'Scaffold tags, prop loads, formwork sign-off. Engineer-stamped, version-controlled, lift-by-lift.', color: 'hsl(25 95% 60%)' },
  { icon: 'folder-open',     name: 'Projects',            blurb: 'Stand a new site up in a morning. Carry your standards, your forms, your trades across every project.', color: 'hsl(270 70% 67%)' },
];

// ── DATA: Bespoke process ────────────────────────────────────────────
const PROCESS = [
  { n: '01', kicker: 'Walk the site together',  title: 'We sit with your team.',   body: 'A morning on a live site, then a workshop with your leads. We’re looking for the paper, the spreadsheets, the workarounds — every system problem your site has that technology hasn’t solved yet. That becomes our brief.' },
  { n: '02', kicker: 'Configure with you',      title: 'Modules, fields, workflows — shaped around how you work.', body: 'We activate the modules you need, configure them to your terminology, and map your approval chain. The 14 base modules cover most sites. Where they don’t — that’s where we build.' },
  { n: '03', kicker: 'You ask. We build.',     title: 'New features scoped, built and delivered.', body: 'You tell us what your site needs. Our engineers scope it with you, write the code, and typically deliver bespoke features within 4–6 weeks. A custom QA workflow, a logistics integration, a bespoke permit — whatever the problem, we build the solution. Fast-tracked delivery available — talk to our team.' },
  { n: '04', kicker: 'Your in-house tech team', title: 'We’re here. Same engineers. Same week.',  body: 'Think of us as your construction tech team on call. The platform is live, supervisors are trained, and the same engineers who built your system are the ones who pick up when something needs solving. No issue too big. No question too small. The roadmap keeps moving with your business.' },
];

// ── DATA: Bespoke examples (real-feeling custom requests) ────────────
const BESPOKE_EXAMPLES = [
  { tag: 'Tier 1 head contractor',  ask: 'Custom notifiable-incident workflow that copies our QA team and the principal contractor in parallel.', shipped: 'Delivered in 4–5 weeks.' },
  { tag: 'Civil works contractor',  ask: 'QA hold-point register tied to our inspection plan, with auto-notification to the principal on each sign-off.', shipped: 'Delivered in 4–5 weeks.' },
  { tag: 'Demolition specialist',   ask: 'Hazardous materials register tied to permits, with WorkSafe-formatted export and automated 48-hour notification.', shipped: 'Delivered in 5–6 weeks.' },
  { tag: 'Fitout contractor',       ask: 'Subbie sign-on flow with a custom asbestos awareness module for heritage sites.', shipped: 'Delivered in 4 weeks.' },
  { tag: 'Mid-tier builder',        ask: 'Logistics booking system for crane, hoist and loading bay integrated with our delivery scheduling spreadsheet.', shipped: 'Delivered in 5–6 weeks.' },
  { tag: 'Developer / principal',   ask: 'Roll-up safety dashboard across 6 active sites with weekly automated report to our board.', shipped: 'Delivered in 5–6 weeks.' },
];

// ── DATA: Pricing tiers (every quote is bespoke; these are starting points) ──
const TIERS = [
  {
    name: 'Fitout / Small Commercial',
    sub: 'Per project site.',
    blurb: 'Built for builders who don’t want cookie-cutter software. All 14 modules, configured around your site and your trades — not a hypothetical builder. Setup covers configuration and go-live. Monthly retainer covers infrastructure for the life of your project.',
    starts: '$2,000',
    period: 'setup',
    retainer: '+ $395 / month',
    bullets: [
      'All 14 modules included from day one',
      'Configured to your trades, workflows and terminology',
      'Up to 50 active users per site',
      'Safety, QA and logistics — whatever your site needs',
      'Infrastructure included in monthly rate',
      'AI features billed separately at usage cost',
      'Customisation available — pricing on request',
      'Email support',
    ],
    accent: false,
  },
  {
    name: 'Project',
    sub: 'Per project site.',
    blurb: 'For mid-tier and head contractors who need the full platform configured around a significant project. Every construction problem covered — safety, QA and logistics. No user cap. Bespoke features built to your spec, typically delivered in 4–6 weeks.',
    starts: '$2,500',
    period: 'setup',
    retainer: '+ $600 / month',
    bullets: [
      'All 14 modules included from day one',
      'Configured to your trades, workflows and compliance requirements',
      'Unlimited active users',
      'Safety, QA and logistics — every construction problem covered',
      'Infrastructure included in monthly rate',
      'AI features billed separately at usage cost',
      'Customisation available — pricing on request',
      'Phone + email support',
    ],
    accent: true,
  },
  {
    name: 'Enterprise',
    sub: 'Complex programs. Custom pricing.',
    blurb: 'For Tier-1 contractors, principals and developers with multi-site programs, complex compliance requirements or deep integration needs. Our engineering team becomes your in-house construction tech team. Whatever your sites need — we build it.',
    starts: 'Let’s talk.',
    period: '',
    bullets: [
      'Multi-site deployment',
      'All 14 modules + bespoke development',
      'Unlimited users across all sites',
      'Continuous bespoke roadmap — 4–6 week delivery cycles',
      'Dedicated delivery engineer',
      'Custom SLA and support arrangements',
      'ERP / HR / Procore / OneDrive integrations',
      'Pricing scoped per engagement',
    ],
    accent: false,
  },
];

// ── DATA: Scales — who SafeGuard is built for ───────────────────────
const SCALES = [
  { tag: 'Fitout / Small Commercial', range: 'Project duration',  pitch: 'Whatever your short-run site needs — we’ve got it. All 14 modules configured to your trades. $2,000 setup, $395/month for the project duration. Up to 50 active users. Customisation on request.', icon: 'hammer' },
  { tag: 'Mid-tier builders',        range: '6–18 months',   pitch: 'Every construction problem covered — safety, QA, logistics. Project tier at $2,500 setup + $600/month. No user cap. Bespoke features built to your spec in 4–6 weeks.', icon: 'building' },
  { tag: 'Tier-1 head contractors',  range: '1–4 years',     pitch: 'Enterprise pricing for complex programs. Our engineering team becomes your in-house construction tech team — whatever your sites need, we build it. Continuous bespoke roadmap.', icon: 'building-2' },
  { tag: 'Developers & principals',  range: 'Multi-year, multi-site', pitch: 'Enterprise tier. Multi-site deployment, roll-up reporting, deep integrations with your existing systems. Every construction problem — solved and configured to your program.', icon: 'landmark' },
];

// ── DATA: Capabilities & integrations ───────────────────────────────
const CAPABILITIES = [
  { icon: 'code-2',      title: 'Bespoke feature development',     body: 'Got a construction problem that doesn’t fit the standard modules? Our engineers meet with you, scope the solution, and typically deliver bespoke features within 4–6 weeks. Fast-tracked delivery available — talk to our team.' },
  { icon: 'qr-code',     title: 'QR sign-in, every gate',           body: 'Workers and visitors sign in via QR. Inductions verified, ticket expiry flagged, live on-site count for your supervisor. Print a QR code, stick it on the cabin, you\u2019re live.' },
  { icon: 'footprints',  title: 'SafetyWalk integration',           body: 'Native SafetyWalk module for site walks, observations and corrective actions. Photo evidence, sign-off, and an audit trail your principal can pull anytime.' },
  { icon: 'cloud',       title: 'OneDrive file saving',             body: 'Connect your tenant once. Drawings, MSDS, ITPs, completed reports \u2014 all saved straight back into your OneDrive folder structure. Versioned, searchable, owned by you.' },
  { icon: 'file-output', title: 'Custom-branded reports',           body: 'Every module exports reports styled with your logo, colours and document conventions. Match your QA system, your principal\u2019s template, your court-ready format \u2014 we build the layouts with you.' },
];

// ── PRIMARY CTA BUTTON ───────────────────────────────────────────────
const Btn = ({ children, primary = false, size = 'md', icon, style = {}, ...rest }) => {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13 },
    md: { padding: '11px 18px', fontSize: 14 },
    lg: { padding: '14px 22px', fontSize: 15 },
  };
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontWeight: 600, letterSpacing: '-.005em',
    border: '1px solid transparent', borderRadius: 9,
    transition: 'background .15s, border-color .15s, opacity .15s',
    ...sizes[size],
  };
  const styles = primary ? {
    background: 'linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(20 88% 44%) 100%)',
    color: '#fff',
    boxShadow: '0 0 18px rgba(234,88,12,.20), inset 0 1px 0 rgba(255,255,255,.18)',
  } : {
    background: 'transparent',
    border: '1px solid hsl(216 18% 24%)',
    color: '#fff',
  };
  return (
    <button {...rest} style={{ ...base, ...styles, ...style }}>
      {children}
      {icon && <Icon name={icon} size={size === 'lg' ? 16 : 14} />}
    </button>
  );
};

// ── EYEBROW ──────────────────────────────────────────────────────────
const Eyebrow = ({ children, color = 'hsl(25 95% 60%)', style = {} }) => (
  <div style={{
    fontSize: 11, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase',
    color, ...style,
  }}>{children}</div>
);

// ── RESPONSIVE BREAKPOINT HOOK ───────────────────────────────────────
const useBreakpoint = () => {
  const [w, setW] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const fn = () => setW(window.innerWidth);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return { isMobile: w < 640, isTablet: w < 1024, width: w };
};

// ── TOP NAVIGATION (responsive) ──────────────────────────────────────
const TopNav = ({ variant = 'editorial', accent = 'hsl(25 95% 55%)', current = '', base = '' }) => {
  const { isMobile, isTablet } = useBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { label: 'Home',       href: base + 'index.html',             key: 'home' },
    { label: 'Platform',   href: base + 'platform.html',          key: 'product' },
    { label: 'Bespoke',    href: base + 'bespoke.html',           key: 'bespoke' },
    { label: 'Pricing',    href: base + 'pricing.html',           key: 'pricing' },
    { label: 'Contact',    href: base + 'contact.html',           key: 'contact' },
  ];
  return (
    <header style={{ position: 'relative', zIndex: 50 }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '12px 16px' : '14px 32px',
        background: 'rgba(11,15,22,.85)',
        borderBottom: '1px solid hsl(216 22% 14%)',
        backdropFilter: 'blur(8px)',
      }}>
        <a href={base + 'index.html'} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <BrandMark size={30} glow />
          <Wordmark />
        </a>

        {/* Desktop nav */}
        {!isTablet && (
          <nav style={{ display: 'flex', alignItems: 'center', gap: 24, fontSize: 13, color: 'hsl(215 14% 65%)' }}>
            {navItems.map(n => (
              <a key={n.key} href={n.href} style={{ fontWeight: 500, color: current === n.key ? '#fff' : undefined, textDecoration: 'none' }}>{n.label}</a>
            ))}
          </nav>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {!isTablet && (
            <>
              <a href="https://app.safeguardapp.au" style={{ fontSize: 13, color: 'hsl(215 14% 65%)', fontWeight: 500, textDecoration: 'none' }}>Sign In</a>
              <a href={base + 'contact.html'} style={{ textDecoration: 'none' }}><Btn primary size="sm" icon="arrow-right">Book a demo</Btn></a>
            </>
          )}
          {isTablet && (
            <button onClick={() => setMenuOpen(o => !o)} style={{
              background: 'none', border: '1px solid hsl(216 22% 22%)', borderRadius: 8,
              width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer',
            }}>
              <Icon name={menuOpen ? 'x' : 'menu'} size={18} style={{ color: '#fff' }} />
            </button>
          )}
        </div>
      </div>

      {/* Mobile/tablet drawer */}
      {isTablet && menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'hsl(216 28% 8%)',
          borderBottom: '1px solid hsl(216 22% 14%)',
          padding: '16px 20px 20px',
          display: 'flex', flexDirection: 'column', gap: 4,
          boxShadow: '0 16px 48px rgba(0,0,0,.5)',
          zIndex: 100,
        }}>
          {navItems.map(n => (
            <a key={n.key} href={n.href} onClick={() => setMenuOpen(false)} style={{
              fontSize: 15, fontWeight: 600, color: current === n.key ? 'hsl(25 95% 60%)' : '#fff',
              textDecoration: 'none', padding: '10px 12px', borderRadius: 8,
              background: current === n.key ? 'hsl(25 95% 55% / .08)' : 'transparent',
            }}>{n.label}</a>
          ))}
          <div style={{ height: 1, background: 'hsl(216 22% 16%)', margin: '8px 0' }} />
          <a href="https://app.safeguardapp.au" style={{ fontSize: 14, fontWeight: 500, color: 'hsl(215 14% 65%)', textDecoration: 'none', padding: '10px 12px' }}>Sign In</a>
          <a href={base + 'contact.html'} style={{ textDecoration: 'none' }}>
            <Btn primary size="md" icon="arrow-right" style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}>Book a demo</Btn>
          </a>
        </div>
      )}
    </header>
  );
};

// ── FOOTER ───────────────────────────────────────────────────────────
const SiteFooter = ({ tone = 'dark' }) => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <footer style={{
    background: tone === 'darker' ? 'hsl(216 35% 5%)' : 'hsl(216 28% 6%)',
    borderTop: '1px solid hsl(216 22% 14%)',
    padding: isMobile ? '40px 20px 24px' : isTablet ? '48px 32px 24px' : '56px 64px 28px',
    color: 'hsl(215 14% 65%)',
    fontSize: 13,
  }}>
    <div style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1.4fr 1fr 1fr 1fr 1fr',
      gap: isMobile ? 32 : 32,
      marginBottom: 40,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <BrandMark size={32} glow />
          <Wordmark />
        </div>
        <p style={{ fontSize: 13, lineHeight: 1.55, color: 'hsl(215 14% 60%)', maxWidth: 280 }}>
          Whatever your site needs — we’ve got it, or we’ll build it. SafeGuard is the construction tech platform that solves every problem your site has — from safety to QA to logistics. Compliant with SafeWork Victoria.
        </p>
      </div>
      {[
        { h: 'Product', items: ['Incident Reports', 'SWMS', 'Permits', 'Sign-In Register', 'Inductions', 'Safety Walk', 'Site Logistics', 'Plant Register'] },
        { h: 'Bespoke', items: ['How it works', 'Customisation guide', 'Integrations', 'Release cycle', 'Customer roadmap'] },
        { h: 'Company', items: ['About', 'Compliance', 'Security', 'Customers', 'Contact'] },
        { h: 'Resources', items: ['Help centre', 'SafeWork Victoria', 'Status', 'Changelog', 'Login'] },
      ].map(col => (
        <div key={col.h}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff', marginBottom: 14 }}>{col.h}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {col.items.map(i => <a key={i} href="#" style={{ fontSize: 13, textDecoration: 'none', color: 'hsl(215 14% 65%)' }}>{i}</a>)}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      display: 'flex', flexDirection: isMobile ? 'column' : 'row',
      justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
      gap: 12,
      paddingTop: 24, borderTop: '1px solid hsl(216 22% 14%)',
      fontSize: 11, color: 'hsl(215 14% 50%)', fontFamily: '"DM Mono", ui-monospace, monospace',
    }}>
      <div>© 2026 SafeGuard Pty Ltd · Melbourne, Naarm</div>
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Privacy</a>
        <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Terms</a>
        <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Security</a>
        <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Status: <span style={{ color: 'hsl(142 71% 55%)' }}>● All systems normal</span></a>
      </div>
    </div>
  </footer>
  );
};

// ── PHONE MOCK (used in hero illustrations) ──────────────────────────
const PhoneMock = ({ children, style = {} }) => (
  <div style={{
    width: 280, height: 575, borderRadius: 38,
    background: '#0a0d12',
    padding: 8,
    boxShadow: '0 30px 80px rgba(0,0,0,.55), 0 0 0 1px hsl(216 22% 18%), inset 0 0 0 1px rgba(255,255,255,.04)',
    position: 'relative',
    ...style,
  }}>
    <div style={{ width: '100%', height: '100%', borderRadius: 32, overflow: 'hidden', background: 'hsl(216 28% 7%)', position: 'relative' }}>
      <div style={{
        position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)',
        width: 90, height: 24, background: '#000', borderRadius: 14, zIndex: 5,
      }} />
      {children}
    </div>
  </div>
);


// ── LOGISTICS SCHEDULING GRID (shared — used on homepage + platform page) ──────
const SCHED_RESOURCES = [
  { id: 'bay',   name: 'Loading Bay 1',   color: 'hsl(217 91% 60%)', hours: '06:30–18:00' },
  { id: 'crane', name: 'Tower Crane',     color: 'hsl(38 92% 50%)',  hours: '07:00–17:00' },
  { id: 'hoist', name: 'Personnel Hoist', color: 'hsl(270 70% 62%)', hours: '06:30–18:00' },
  { id: 'bin',   name: 'Bin Changeover',  color: 'hsl(142 71% 45%)', hours: '06:30–16:00' },
];
const SCHED_BOOKINGS = [
  { res:'bay',   start:'07:00',end:'08:30',co:'Tradelink Plumbing', sub:'12 × copper pipe pallets — Level 4', st:'approved' },
  { res:'bay',   start:'08:30',end:'09:30',co:'BlueScope Steel',    sub:'2 × steel beams — Level 6 east',    st:'approved' },
  { res:'bay',   start:'10:00',end:'11:30',co:'Hilti AU',           sub:'Anchor bolt delivery — Level 3',    st:'approved' },
  { res:'bay',   start:'11:30',end:'12:30',co:'Boral Concrete',     sub:'Bagged cement — ground floor',      st:'approved' },
  { res:'bay',   start:'13:00',end:'14:30',co:'CSR Bradford',       sub:'Insulation rolls — Level 8',        st:'requested' },
  { res:'bay',   start:'14:30',end:'16:00',co:'Stramit Roofing',    sub:'Roof sheet delivery — Grid J7',     st:'approved' },
  { res:'crane', start:'07:00',end:'09:30',co:'Apex Formwork',      sub:'Precast panel lift — Level 5 south',st:'approved' },
  { res:'crane', start:'10:00',end:'12:30',co:'MMC Structures',     sub:'Steel column lift — Grid C4',       st:'approved' },
  { res:'crane', start:'13:00',end:'14:30',co:'Boral Concrete',     sub:'Skip lift — Level 7 east',          st:'checked_in' },
  { res:'crane', start:'14:30',end:'16:00',co:'WeAreFire',          sub:'Plant lift — Level 9 roof',         st:'approved' },
  { res:'hoist', start:'06:30',end:'09:30',co:'M&E Services',       sub:'4 pax — Level 9 plant room',        st:'approved' },
  { res:'hoist', start:'10:00',end:'12:30',co:'Tradelink Plumbing', sub:'3 pax + tools — Level 4',           st:'approved' },
  { res:'hoist', start:'13:00',end:'14:30',co:'WeAreFire',          sub:'2 pax + sprinkler heads — Level 7', st:'requested' },
  { res:'hoist', start:'14:30',end:'16:30',co:'Stramit Roofing',    sub:'2 pax — Level 11 roof',             st:'approved' },
  { res:'bin',   start:'06:30',end:'09:30',co:'CleanAway',          sub:'Mixed waste — north skip',          st:'approved' },
  { res:'bin',   start:'10:00',end:'12:30',co:'Veolia',             sub:'Concrete waste — east yard',        st:'approved' },
  { res:'bin',   start:'13:00',end:'15:30',co:'CleanAway',          sub:'Cardboard — south skip',            st:'requested' },
  { res:'bin',   start:'15:30',end:'17:00',co:'Veolia',             sub:'General waste — north',             st:'approved' },
];
const SCHED_SLOTS = ['06:30','07:00','08:00','09:00','09:30','10:00','11:00','12:00','12:30','13:00','14:00','15:00','16:00','17:00'];
const SCHED_TINT  = {
  approved:   { dot:'hsl(142 71% 45%)', ring:'rgba(34,197,94,.45)',  label:'Approved' },
  requested:  { dot:'hsl(38 92% 50%)',  ring:'rgba(245,158,11,.45)', label:'Pending'  },
  checked_in: { dot:'hsl(217 91% 60%)', ring:'rgba(59,130,246,.55)', label:'On Site'  },
};

const LogisticsGrid = ({ cardBg, border, muted }) => {
  const slotMin = t => parseInt(t)*60 + parseInt(t.split(':')[1]);
  const gridStart = slotMin('06:30');
  const ROW_H = 40;
  return (
    <div style={{ overflowX:'auto', WebkitOverflowScrolling:'touch', borderRadius:12, border:`1px solid ${border}`, background:cardBg }}>
      <div style={{ minWidth:640 }}>
        <div style={{ display:'grid', gridTemplateColumns:`72px repeat(${SCHED_RESOURCES.length},1fr)`, borderBottom:`1px solid ${border}`, background:'hsl(216 28% 9%)' }}>
          <div style={{ padding:'10px 8px', fontSize:10, fontFamily:'"DM Mono",monospace', textTransform:'uppercase', letterSpacing:'.1em', color:muted }}>Time</div>
          {SCHED_RESOURCES.map(r => (
            <div key={r.id} style={{ padding:'10px 12px', borderLeft:`1px solid ${border}` }}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                <span style={{ width:7, height:7, borderRadius:999, background:r.color }} />
                <span style={{ fontSize:11.5, fontWeight:700, color:'#fff' }}>{r.name}</span>
              </div>
              <div style={{ fontSize:9.5, color:muted, fontFamily:'"DM Mono",monospace', marginTop:2 }}>{r.hours}</div>
            </div>
          ))}
        </div>
        <div style={{ display:'grid', gridTemplateColumns:`72px repeat(${SCHED_RESOURCES.length},1fr)` }}>
          <div style={{ borderRight:`1px solid ${border}` }}>
            {SCHED_SLOTS.map(t => (
              <div key={t} style={{ height:ROW_H, padding:'4px 8px', fontSize:10, fontFamily:'"DM Mono",monospace', color:muted, borderBottom:`1px solid ${border}` }}>{t}</div>
            ))}
          </div>
          {SCHED_RESOURCES.map(r => {
            const bookings = SCHED_BOOKINGS.filter(b => b.res === r.id);
            return (
              <div key={r.id} style={{ position:'relative', borderLeft:`1px solid ${border}` }}>
                {SCHED_SLOTS.map(t => <div key={t} style={{ height:ROW_H, borderBottom:`1px solid ${border}` }} />)}
                {bookings.map((b,i) => {
                  const top = ((slotMin(b.start) - gridStart) / 60) * ROW_H + 2;
                  const height = ((slotMin(b.end) - slotMin(b.start)) / 60) * ROW_H - 4;
                  const tint = SCHED_TINT[b.st] || SCHED_TINT.approved;
                  return (
                    <div key={i} style={{ position:'absolute', left:4, right:4, top, height, borderRadius:7, background:r.color.replace(')','/0.14)').replace('hsl(','hsl('), border:`1px solid ${tint.ring}`, padding:'5px 7px', overflow:'hidden', display:'flex', flexDirection:'column', gap:2 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:4 }}>
                        <span style={{ width:5, height:5, borderRadius:999, background:tint.dot, flexShrink:0 }} />
                        <span style={{ fontSize:9, fontFamily:'"DM Mono",monospace', color:muted }}>{b.start}–{b.end}</span>
                      </div>
                      <span style={{ fontSize:10.5, fontWeight:700, color:'#fff', lineHeight:1.2, overflow:'hidden', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical' }}>{b.co}</span>
                      {height > 50 && <span style={{ fontSize:9, color:muted, overflow:'hidden', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical' }}>{b.sub}</span>}
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:20, padding:'10px 16px', borderTop:`1px solid ${border}`, background:'hsl(216 28% 9%)', flexWrap:'wrap' }}>
          {Object.entries(SCHED_TINT).map(([k,v]) => (
            <div key={k} style={{ display:'flex', alignItems:'center', gap:6 }}>
              <span style={{ width:7, height:7, borderRadius:999, background:v.dot }} />
              <span style={{ fontSize:10.5, color:muted }}>{v.label}</span>
            </div>
          ))}
          <span style={{ marginLeft:'auto', fontSize:10, fontFamily:'"DM Mono",monospace', color:muted }}>BREAKS: 09:30–10:00 · 12:30–13:00</span>
        </div>
      </div>
    </div>
  );
};

// Export to window for cross-script
Object.assign(window, { Icon, BrandMark, Wordmark, FEATURES, PROCESS, BESPOKE_EXAMPLES, TIERS, SCALES, CAPABILITIES, Btn, Eyebrow, TopNav, SiteFooter, PhoneMock, useBreakpoint, LogisticsGrid, SCHED_RESOURCES, SCHED_BOOKINGS, SCHED_SLOTS, SCHED_TINT });