// ─────────────────────────────────────────────────────────────────────
// DIRECTION A — EDITORIAL DARK
// Refined product-led. Big DM Sans Black display type. Asymmetric.
// Phone mock floats right with subtle orange glow. Linear-meets-Stripe.
// ─────────────────────────────────────────────────────────────────────

const ED_BG = 'hsl(216 28% 7%)';
const ED_CARD = 'hsl(216 24% 11%)';
const ED_BORDER = 'hsl(216 22% 16%)';
const ED_MUTED = 'hsl(215 14% 55%)';
const useBreakpoint = window.useBreakpoint;

// Mini app screen for the phone mock — Sign-In Register live view
const EditorialPhoneScreen = () => (
  <div style={{ padding: '36px 16px 16px', height: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'hsl(25 95% 60%)' }}>On Site Today</div>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#fff', marginTop: 2, letterSpacing: '-.02em' }}>Sign-In Register</div>
      </div>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'hsl(216 22% 16%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="qr-code" size={14} style={{ color: '#fff' }} />
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
      <div style={{ background: 'hsl(216 24% 11%)', border: '1px solid hsl(216 22% 16%)', borderRadius: 10, padding: 10 }}>
        <div style={{ fontSize: 9, color: ED_MUTED, letterSpacing: '.1em', textTransform: 'uppercase' }}>Workers</div>
        <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', marginTop: 2 }}>47</div>
      </div>
      <div style={{ background: 'hsl(216 24% 11%)', border: '1px solid hsl(216 22% 16%)', borderRadius: 10, padding: 10, borderTop: '2px solid hsl(142 71% 50%)' }}>
        <div style={{ fontSize: 9, color: ED_MUTED, letterSpacing: '.1em', textTransform: 'uppercase' }}>Inducted</div>
        <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', marginTop: 2 }}>47<span style={{ fontSize: 11, color: 'hsl(142 71% 55%)', marginLeft: 4 }}>100%</span></div>
      </div>
    </div>
    <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: ED_MUTED, marginTop: 4 }}>Latest sign-ins</div>
    {[
      { n: 'A. Chen', r: 'Steel Fixer · Apex Civil', t: '07:12', tag: 'Inducted' },
      { n: 'L. Pham',     r: 'EWP Operator · Boom Hire',  t: '07:08', tag: 'Inducted' },
      { n: 'D. Singh',    r: 'Carpenter · MMC',           t: '06:55', tag: 'Inducted' },
      { n: 'J. Karras',   r: 'Spotter · MMC',             t: '06:48', tag: 'Reviewed' },
    ].map(p => (
      <div key={p.n} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 9px', background: 'hsl(216 24% 11%)', border: '1px solid hsl(216 22% 16%)', borderRadius: 9 }}>
        <div style={{ width: 26, height: 26, borderRadius: 9999, 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' }}>{p.n.split(' ').map(s => s[0]).join('')}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: '#fff' }}>{p.n}</div>
          <div style={{ fontSize: 9.5, color: ED_MUTED }}>{p.r}</div>
        </div>
        <div style={{ fontSize: 9, fontFamily: '"DM Mono", monospace', color: ED_MUTED }}>{p.t}</div>
      </div>
    ))}
    <div style={{
      marginTop: 'auto',
      background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))',
      color: '#fff', textAlign: 'center', padding: '12px', borderRadius: 11,
      fontSize: 12, fontWeight: 700, letterSpacing: '-.005em',
      boxShadow: '0 0 14px rgba(234,88,12,.30)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
    }}>
      <Icon name="qr-code" size={14} style={{ color: '#fff' }} />
      Sign In Worker
    </div>
  </div>
);

// Hero
const EditorialHero = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ position: 'relative', padding: isMobile ? '48px 20px 40px' : isTablet ? '64px 32px 56px' : '88px 64px 72px', overflow: 'hidden' }}>
    {/* dot grid backdrop */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'radial-gradient(circle, #ea580c 1px, transparent 1px)',
      backgroundSize: '32px 32px', opacity: .045, pointerEvents: 'none',
    }} />
    {/* ambient glow */}
    <div style={{
      position: 'absolute', right: -120, top: -60, width: 580, height: 580,
      background: 'radial-gradient(circle, rgba(234,88,12,.18) 0%, transparent 60%)',
      pointerEvents: 'none', filter: 'blur(20px)',
    }} />

    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : '1.25fr .9fr', gap: isMobile ? 40 : 56, alignItems: 'center' }}>
      <div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 9999, background: 'rgba(234,88,12,.08)', border: '1px solid rgba(234,88,12,.22)', marginBottom: 28 }}>
          <span style={{ width: 6, height: 6, borderRadius: 9999, background: 'hsl(25 95% 55%)' }} />
          <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.04em', color: 'hsl(25 95% 78%)' }}>Construction tech that solves what others can’t · Melbourne</span>
        </div>
        <h1 style={{
          fontSize: isMobile ? 42 : isTablet ? 56 : 78, lineHeight: .98, fontWeight: 900, letterSpacing: '-.035em',
          color: '#fff',
        }}>
          Every construction problem.<br/><span style={{
            background: 'linear-gradient(135deg, hsl(25 95% 65%) 0%, hsl(20 88% 50%) 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
            fontStyle: 'italic', fontWeight: 900,
          }}>One platform. Built around you.</span>
        </h1>
        <p style={{ marginTop: isMobile ? 16 : 26, maxWidth: 540, fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'hsl(215 14% 70%)' }}>
          Every builder runs their sites differently. SafeGuard is configured around yours — your trades, your workflows, your compliance requirements. We build the bespoke modules you can’t get anywhere else.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: isMobile ? 24 : 36 }}>
          <Btn primary size="lg" icon="arrow-right">Book a tailored demo</Btn>
          <Btn size="lg" icon="play">See it on a real site</Btn>
        </div>
        <div style={{ marginTop: isMobile ? 28 : 48, display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 22, fontSize: isMobile ? 11 : 12, color: ED_MUTED, fontFamily: '"DM Mono", monospace', letterSpacing: '.02em', flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={13} style={{ color: 'hsl(142 71% 55%)' }} />Safety. QA. Logistics.</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={13} style={{ color: 'hsl(142 71% 55%)' }} />14 modules included</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={13} style={{ color: 'hsl(142 71% 55%)' }} />Bespoke features built on request</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="check" size={13} style={{ color: 'hsl(142 71% 55%)' }} />SafeWork Vic compliant</span>
        </div>
      </div>

      {!isMobile && <div style={{ position: 'relative', justifySelf: 'center' }}>
        <div style={{
          position: 'absolute', inset: -40,
          background: 'radial-gradient(circle, rgba(234,88,12,.22) 0%, transparent 65%)',
          filter: 'blur(24px)', pointerEvents: 'none',
        }} />
        <PhoneMock>
          <EditorialPhoneScreen />
        </PhoneMock>
        {/* Floating chip — bespoke callout */}
        <div style={{
          position: 'absolute', top: 64, left: -110,
          background: 'hsl(216 24% 11%)', border: '1px solid hsl(216 22% 18%)',
          borderRadius: 12, padding: '10px 14px', boxShadow: '0 12px 30px rgba(0,0,0,.5)',
          width: 200,
        }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'hsl(25 95% 60%)' }}>Customer request</div>
          <div style={{ fontSize: 12, color: '#fff', marginTop: 4, lineHeight: 1.4 }}>"Add an asbestos awareness module for heritage sites"</div>
          <div style={{ fontSize: 10, color: 'hsl(142 71% 55%)', marginTop: 6, fontFamily: '"DM Mono", monospace' }}>● Shipped · 9 days</div>
        </div>
        <div style={{
          position: 'absolute', bottom: 84, right: -100,
          background: 'hsl(216 24% 11%)', border: '1px solid hsl(216 22% 18%)',
          borderRadius: 12, padding: '10px 14px', boxShadow: '0 12px 30px rgba(0,0,0,.5)',
          width: 184,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <Icon name="alert-triangle" size={14} style={{ color: 'hsl(0 70% 60%)' }} />
            <span style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>Notifiable incident</span>
          </div>
          <div style={{ fontSize: 10.5, color: ED_MUTED, marginTop: 5, lineHeight: 1.45 }}>WorkSafe notified in 3 mins. Scene preserved. Records held for 5 years.</div>
        </div>
      </div>}
    </div>

    {/* Mission statement strip */}
    <div style={{ position: 'relative', marginTop: isMobile ? 48 : 88, paddingTop: isMobile ? 32 : 48, borderTop: '1px solid hsl(216 22% 14%)' }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'hsl(25 95% 60%)', marginBottom: 24 }}>
        WHATEVER YOUR SITE NEEDS — WE’VE GOT IT, OR WE’LL BUILD IT.
      </div>
      <h3 style={{ fontSize: isMobile ? 20 : 28, fontWeight: 800, letterSpacing: '-.025em', color: '#fff', lineHeight: 1.15, marginBottom: 20, maxWidth: 720 }}>
        Every construction problem. One platform. Built around you.
      </h3>
      <p style={{ fontSize: 15, lineHeight: 1.7, color: 'hsl(215 14% 65%)', maxWidth: 800, marginBottom: 28 }}>
        Most construction platforms solve part of the problem. SafeGuard solves all of it — safety, QA, logistics and beyond. The 14 base modules cover most sites. Platform configuration takes 6–8 weeks from engagement. When your business needs something bespoke, our engineering team scopes it with you and typically delivers in 4–6 weeks. Fast-tracked delivery available on request.
      </p>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '12px 20px',
        background: 'hsl(25 95% 55% / 0.08)',
        border: '1px solid hsl(25 95% 55% / 0.25)',
        borderRadius: 10,
      }}>
        <Icon name="code-2" size={15} style={{ color: 'hsl(25 95% 60%)', flexShrink: 0 }} />
        <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.01em', color: 'hsl(25 95% 65%)' }}>
          14 modules included. Configured in 6–8 weeks. Bespoke in 4–6 weeks.
        </span>
      </div>
    </div>
  </section>
  );
};

// Bespoke section (the big one)
const EditorialBespoke = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + ED_BORDER }}>
    <div style={{ display: 'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1.4fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
      <div style={{ position: isMobile || isTablet ? 'relative' : 'sticky', top: isMobile || isTablet ? 'auto' : 24 }}>
        <Eyebrow>Whatever your site needs — we’ve got it, or we’ll build it</Eyebrow>
        <h2 style={{ fontSize: isMobile ? 36 : 52, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.04, marginTop: 18 }}>
          SafeGuard solves every<br/><span style={{ fontStyle: 'italic', fontWeight: 900, background: 'linear-gradient(135deg, hsl(25 95% 65%), hsl(20 88% 50%))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>construction problem.</span>
        </h2>
        <p style={{ marginTop: 22, fontSize: 16, lineHeight: 1.6, color: 'hsl(215 14% 65%)' }}>
          SafeGuard isn’t just a safety app. It’s a construction tech platform that covers safety, QA, logistics and beyond. Platform setup takes 6–8 weeks from engagement. Need something bespoke? Our engineers scope it with you and typically deliver in 4–6 weeks — with fast-tracked options available.
        </p>
        <div style={{ marginTop: 28, padding: 18, border: '1px solid ' + ED_BORDER, borderRadius: 12, background: ED_CARD }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Icon name="zap" size={14} style={{ color: 'hsl(25 95% 60%)' }} />
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: '#fff' }}>The build promise</span>
          </div>
          <p style={{ fontSize: 13.5, color: ED_MUTED, lineHeight: 1.55 }}>
            You ask. We build. Bespoke features are scoped, coded and typically delivered within 4–6 weeks by the same engineers who know your platform. Fast-tracked delivery available — talk to our team.
          </p>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {PROCESS.map((step, i) => (
          <div key={step.n} style={{
            display: 'grid', gridTemplateColumns: '64px 1fr', gap: 28,
            padding: '32px 32px 36px',
            background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 14,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ fontFamily: '"DM Mono", monospace', fontSize: 13, color: 'hsl(25 95% 60%)', fontWeight: 600, letterSpacing: '.08em' }}>{step.n}</div>
            <div>
              <Eyebrow color={ED_MUTED} style={{ color: ED_MUTED }}>{step.kicker}</Eyebrow>
              <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-.02em', color: '#fff', marginTop: 8, lineHeight: 1.15 }}>{step.title}</h3>
              <p style={{ fontSize: 14.5, color: 'hsl(215 14% 68%)', marginTop: 10, lineHeight: 1.6, maxWidth: 580 }}>{step.body}</p>
            </div>
          </div>
        ))}

        {/* Bespoke examples */}
        <div style={{ marginTop: 24 }}>
          <Eyebrow>Recently shipped, customer-requested</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12, marginTop: 14 }}>
            {BESPOKE_EXAMPLES.map(b => (
              <div key={b.tag} style={{ background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 10, padding: '16px 18px' }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: ED_MUTED }}>{b.tag}</div>
                <div style={{ fontSize: 14, color: '#fff', marginTop: 8, lineHeight: 1.45 }}>"{b.ask}"</div>
                <div style={{ fontSize: 11, color: 'hsl(142 71% 55%)', marginTop: 10, fontFamily: '"DM Mono", monospace', letterSpacing: '.04em' }}>● {b.shipped}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

// Features grid
const EditorialFeatures = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const [activeChip, setActiveChip] = React.useState(null);

  const activeFeature = FEATURES.find(f => f.name === activeChip);

  return (
  <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', borderTop: '1px solid ' + ED_BORDER }}>
    <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', marginBottom: isMobile ? 32 : 48, gap: 24 }}>
      <div>
        <Eyebrow>14 modules. Every problem covered.</Eyebrow>
        <h2 style={{ fontSize: isMobile ? 32 : 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16, maxWidth: 720 }}>
          Safety. QA. Logistics. And anything else your site needs.
        </h2>
      </div>
      <p style={{ fontSize: 14.5, color: ED_MUTED, maxWidth: 360, lineHeight: 1.6 }}>
        14 modules covering safety, QA, logistics and site operations. Turn on what you need. And when your site has a problem the modules don’t solve — we build the solution for you.
      </p>
    </div>

    {isMobile ? (
      <div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
          {FEATURES.map(f => {
            const isActive = activeChip === f.name;
            const chipBg = f.color.replace('hsl(', 'hsla(').replace(')', ' / .14)');
            const chipBorder = f.color.replace('hsl(', 'hsla(').replace(')', ' / .38)');
            return (
              <button
                key={f.name}
                onClick={() => setActiveChip(prev => prev === f.name ? null : f.name)}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 7,
                  padding: '8px 13px',
                  background: isActive ? chipBg : ED_CARD,
                  border: '1px solid ' + (isActive ? chipBorder : ED_BORDER),
                  borderRadius: 999,
                  cursor: 'pointer',
                  WebkitTapHighlightColor: 'transparent',
                  outline: 'none',
                  transition: 'background .15s, border-color .15s',
                }}
              >
                <Icon name={f.icon} size={13} style={{ color: isActive ? f.color : ED_MUTED, flexShrink: 0 }} />
                <span style={{ fontSize: 13, fontWeight: 600, color: isActive ? '#fff' : 'hsl(215 14% 72%)', whiteSpace: 'nowrap', letterSpacing: '-.01em' }}>{f.name}</span>
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: activeFeature ? 16 : 0 }}>
          {activeFeature && (
            <div style={{
              padding: '18px 18px',
              background: ED_CARD,
              border: '1px solid ' + activeFeature.color.replace('hsl(', 'hsla(').replace(')', ' / .3)'),
              borderLeft: '3px solid ' + activeFeature.color,
              borderRadius: 12,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8, flexShrink: 0,
                  background: activeFeature.color.replace('hsl(', 'hsla(').replace(')', ' / .15)'),
                  border: '1px solid ' + activeFeature.color.replace('hsl(', 'hsla(').replace(')', ' / .3)'),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={activeFeature.icon} size={15} style={{ color: activeFeature.color }} />
                </div>
                <span style={{ fontSize: 15, fontWeight: 700, color: '#fff', letterSpacing: '-.01em' }}>{activeFeature.name}</span>
              </div>
              <p style={{ fontSize: 14, color: 'hsl(215 14% 68%)', lineHeight: 1.6, margin: 0 }}>{activeFeature.blurb}</p>
            </div>
          )}
        </div>

        {!activeChip && (
          <p style={{ fontSize: 12.5, color: ED_MUTED, marginTop: 14 }}>Tap a module to learn more.</p>
        )}
      </div>
    ) : (
      <div style={{ display: 'grid', gridTemplateColumns: isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 16 }}>
        {FEATURES.map(f => (
          <div key={f.name} style={{
            padding: '24px 22px',
            background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 12,
            display: 'flex', flexDirection: 'column', gap: 10,
            transition: 'border-color .15s, transform .15s',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{
                width: 36, height: 36, borderRadius: 9,
                background: `${f.color.replace('hsl(', 'hsla(').replace(')', ' / .12)')}`,
                border: `1px solid ${f.color.replace('hsl(', 'hsla(').replace(')', ' / .25)')}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={f.icon} size={17} style={{ color: f.color }} />
              </div>
              <Icon name="arrow-up-right" size={14} style={{ color: ED_MUTED }} />
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 700, color: '#fff', marginTop: 4, letterSpacing: '-.005em' }}>{f.name}</h3>
            <p style={{ fontSize: 13, color: 'hsl(215 14% 65%)', lineHeight: 1.55 }}>{f.blurb}</p>
          </div>
        ))}
      </div>
    )}
  </section>
  );
};

// Scales — who SafeGuard fits, from short fitout to multi-year programs
const EditorialScales = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', borderTop: '1px solid ' + ED_BORDER }}>
    <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end', marginBottom: 48, gap: 24 }}>
      <div>
        <Eyebrow>Built for every scale</Eyebrow>
        <h2 style={{ fontSize: isMobile ? 32 : 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16, maxWidth: 720 }}>
          Whatever your scale — we’ve got it covered.
        </h2>
      </div>
      <p style={{ fontSize: 14.5, color: ED_MUTED, maxWidth: 360, lineHeight: 1.6 }}>
        From a short-run fitout to a multi-year Tier-1 program — SafeGuard covers every construction problem at every scale. Platform setup typically 6–8 weeks. Bespoke features delivered in 4–6 weeks.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 14 }}>
      {SCALES.map((s, i) => (
        <div key={s.tag} style={{
          padding: '28px 24px 24px',
          background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 12,
          position: 'relative', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', gap: 12, minHeight: 220,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: 'rgba(234,88,12,.10)', border: '1px solid rgba(234,88,12,.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name={s.icon} size={18} style={{ color: 'hsl(25 95% 60%)' }} />
          </div>
          <div style={{ fontSize: 10.5, fontFamily: '"DM Mono", monospace', color: ED_MUTED, letterSpacing: '.08em', textTransform: 'uppercase' }}>{s.range}</div>
          <h3 style={{ fontSize: 17, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>{s.tag}</h3>
          <p style={{ fontSize: 13, color: 'hsl(215 14% 65%)', lineHeight: 1.55 }}>{s.pitch}</p>
        </div>
      ))}
    </div>
  </section>
  );
};

// Capabilities — confirms QR / SafetyWalk / OneDrive / custom reports
const EditorialCapabilities = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + ED_BORDER }}>
    <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
      <Eyebrow>Capabilities &amp; integrations</Eyebrow>
      <h2 style={{ fontSize: isMobile ? 32 : 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 18 }}>
        Every problem solved. Every system connected.
      </h2>
      <p style={{ fontSize: 16, color: ED_MUTED, marginTop: 18, lineHeight: 1.6 }}>
        QR sign-in, SafetyWalk, OneDrive saving, custom reports — and a development team that builds whatever else your site needs. Whatever your construction problem, we’ve got it covered.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 14 }}>
      {CAPABILITIES.map(c => (
        <div key={c.title} style={{
          padding: '28px 28px',
          background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 14,
          display: 'grid', gridTemplateColumns: '52px 1fr', gap: 22, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 52, height: 52, borderRadius: 12,
            background: 'linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(20 88% 44%) 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 14px rgba(234,88,12,.25)',
          }}>
            <Icon name={c.icon} size={22} style={{ color: '#fff' }} strokeWidth={2} />
          </div>
          <div>
            <h3 style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>{c.title}</h3>
            <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6, marginTop: 8 }}>{c.body}</p>
          </div>
        </div>
      ))}
    </div>
  </section>
  );
};

// ── Safety Walk section ────────────────────────────────────────────────────────
const SW_ITEMS = [
  { id: 1, cat: 'Scaffold & Edge Protection', desc: 'Handrail missing on southern edge of Level 5 slab — 1.2m gap, no temporary barrier in place.', loc: 'Level 5 South', sev: 'critical', status: 'open',     assigned: 'Apex Formwork' },
  { id: 2, cat: 'PPE',                        desc: 'Two workers observed on Level 3 without hard hats. Verbal warning issued on site.', loc: 'Level 3',       sev: 'high',     status: 'actioned',  assigned: 'WeAreFire' },
  { id: 3, cat: 'Housekeeping',               desc: 'Timber offcuts and metal offcuts accumulating near stair access on Level 2.', loc: 'Level 2 Stair', sev: 'medium',   status: 'closed',    assigned: 'All trades' },
  { id: 4, cat: 'Electrical',                 desc: 'Temporary power board near loading bay has damaged weatherproof cover — exposed to elements.', loc: 'Loading Bay',  sev: 'high',     status: 'open',     assigned: 'M&E Services' },
];
const SEV_COLOR = {
  critical: { bg: 'hsl(0 72% 51% / .10)',    ring: 'hsl(0 72% 51% / .35)',   text: 'hsl(0 72% 51%)',    label: 'Critical' },
  high:     { bg: 'hsl(25 95% 55% / .12)',   ring: 'hsl(25 95% 50% / .3)',   text: 'hsl(20 88% 44%)',   label: 'High' },
  medium:   { bg: 'hsl(38 92% 50% / .14)',   ring: 'hsl(38 92% 50% / .35)',  text: 'hsl(38 92% 40%)',   label: 'Medium' },
  low:      { bg: 'hsl(217 91% 60% / .12)',  ring: 'hsl(217 91% 55% / .3)',  text: 'hsl(217 91% 60%)',  label: 'Low' },
};
const STAT_COLOR = {
  open:     { bg: 'hsl(0 84% 60% / .10)',    ring: 'hsl(0 84% 60% / .3)',    text: 'hsl(0 84% 60%)',    label: 'Open' },
  actioned: { bg: 'hsl(38 92% 50% / .12)',   ring: 'hsl(38 92% 50% / .3)',   text: 'hsl(38 92% 45%)',   label: 'Actioned' },
  closed:   { bg: 'hsl(142 71% 45% / .10)',  ring: 'hsl(142 71% 45% / .3)',  text: 'hsl(142 71% 40%)',  label: 'Closed' },
};

// Reusable pill
const Pill = ({ color, label }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', borderRadius: 9999,
    padding: '2px 9px', fontSize: 9, fontWeight: 700,
    letterSpacing: '.08em', textTransform: 'uppercase', whiteSpace: 'nowrap',
    background: color.bg, color: color.text,
    boxShadow: `inset 0 0 0 1px ${color.ring}`,
  }}>{label}</span>
);

// iPhone frame wrapper
const IPhone = ({ children, style = {} }) => (
  <div style={{
    width: 220, flexShrink: 0,
    background: 'hsl(216 28% 7%)',
    borderRadius: 38,
    border: '6px solid hsl(216 20% 18%)',
    boxShadow: '0 0 0 1px hsl(216 20% 12%), 0 32px 80px rgba(0,0,0,.55), 0 0 60px rgba(0,0,0,.3)',
    overflow: 'hidden', position: 'relative',
    ...style,
  }}>
    {/* Notch */}
    <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 80, height: 22, background: 'hsl(216 28% 7%)', borderRadius: '0 0 16px 16px', zIndex: 10 }} />
    <div style={{ height: 22 }} />
    {children}
  </div>
);

// Phone screen 1: Walk list
const PhoneWalkList = () => (
  <IPhone>
    <div style={{ background: 'hsl(216 28% 9%)', minHeight: 440, padding: '10px 0' }}>
      {/* Header */}
      <div style={{ padding: '8px 14px 10px', borderBottom: '1px solid hsl(216 22% 14%)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>Safety Walks</div>
          <div style={{ width: 24, height: 24, borderRadius: 7, background: 'hsl(25 95% 55%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </div>
        </div>
        {/* Stats row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 5 }}>
          {[['3', 'Open', 'hsl(0 84% 60%)'], ['2', 'Actioned', 'hsl(38 92% 50%)'], ['8', 'Closed', 'hsl(142 71% 45%)']].map(([v, l, c]) => (
            <div key={l} style={{ background: 'hsl(216 28% 12%)', borderRadius: 7, padding: '6px 8px', textAlign: 'center' }}>
              <div style={{ fontSize: 15, fontWeight: 800, color: c }}>{v}</div>
              <div style={{ fontSize: 8, color: 'hsl(215 14% 55%)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      {/* Walk cards */}
      {[
        { date: '12 May 2026', proj: 'Collins Quarter', items: 4, open: 2, who: 'S. Mitchell' },
        { date: '9 May 2026',  proj: 'Collins Quarter', items: 6, open: 1, who: 'S. Mitchell' },
        { date: '5 May 2026',  proj: 'South Yarra',     items: 3, open: 0, who: 'S. Mitchell' },
      ].map((w, i) => (
        <div key={i} style={{ margin: '6px 10px', background: 'hsl(216 28% 12%)', border: '1px solid hsl(216 22% 18%)', borderRadius: 10, padding: '10px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
            <div>
              <div style={{ fontSize: 10, fontWeight: 700, color: '#fff' }}>{w.proj}</div>
              <div style={{ fontSize: 8, color: 'hsl(215 14% 55%)', marginTop: 1, fontFamily: 'monospace' }}>{w.date}</div>
            </div>
            <span style={{ fontSize: 8, fontWeight: 700, padding: '2px 7px', borderRadius: 999, background: w.open > 0 ? 'hsl(0 84% 60% / .12)' : 'hsl(142 71% 45% / .12)', color: w.open > 0 ? 'hsl(0 84% 60%)' : 'hsl(142 71% 45%)', boxShadow: `inset 0 0 0 1px ${w.open > 0 ? 'hsl(0 84% 60% / .3)' : 'hsl(142 71% 45% / .3)'}` }}>
              {w.open > 0 ? `${w.open} Open` : 'Closed'}
            </span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{ fontSize: 8, color: 'hsl(215 14% 55%)' }}>{w.items} findings · {w.who}</div>
          </div>
        </div>
      ))}
    </div>
  </IPhone>
);

// Phone screen 2: Walk items / findings
const PhoneWalkItems = () => (
  <IPhone style={{ marginTop: 48 }}>
    <div style={{ background: 'hsl(216 28% 9%)', minHeight: 440 }}>
      {/* Back nav */}
      <div style={{ padding: '8px 12px', borderBottom: '1px solid hsl(216 22% 14%)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="hsl(25 95% 60%)" strokeWidth="2.5" strokeLinecap="round"><polyline points="15 18 9 12 15 6"/></svg>
        <span style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>Collins Quarter · 12 May</span>
      </div>
      {/* Items */}
      <div style={{ padding: '6px 8px' }}>
        {SW_ITEMS.map((item, i) => {
          const s = SEV_COLOR[item.sev];
          const st = STAT_COLOR[item.status];
          return (
            <div key={i} style={{ background: 'hsl(216 28% 12%)', border: `1px solid hsl(216 22% 16%)`, borderLeft: `3px solid ${s.text}`, borderRadius: 8, padding: '8px 10px', marginBottom: 6 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                <span style={{ fontSize: 8, fontWeight: 700, color: 'hsl(215 14% 55%)', textTransform: 'uppercase', letterSpacing: '.08em' }}>{item.cat}</span>
                <div style={{ display: 'flex', gap: 4 }}>
                  <span style={{ fontSize: 7.5, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: s.bg, color: s.text, boxShadow: `inset 0 0 0 1px ${s.ring}` }}>{s.label}</span>
                  <span style={{ fontSize: 7.5, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: st.bg, color: st.text, boxShadow: `inset 0 0 0 1px ${st.ring}` }}>{st.label}</span>
                </div>
              </div>
              <div style={{ fontSize: 9, color: 'hsl(215 14% 75%)', lineHeight: 1.4, marginBottom: 4 }}>{item.desc.slice(0, 60)}{item.desc.length > 60 ? '…' : ''}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 7.5, color: 'hsl(215 14% 50%)', fontFamily: 'monospace' }}>{item.loc}</span>
                <span style={{ fontSize: 7.5, color: 'hsl(25 95% 60%)', fontWeight: 600 }}>{item.assigned}</span>
              </div>
            </div>
          );
        })}
        {/* Add button */}
        <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
          <div style={{ flex: 1, background: 'hsl(25 95% 55%)', borderRadius: 8, padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            <span style={{ fontSize: 9, fontWeight: 700, color: '#fff' }}>Log Finding</span>
          </div>
          <div style={{ width: 34, background: 'hsl(216 28% 16%)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid hsl(216 22% 22%)' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="hsl(215 14% 60%)" strokeWidth="2" strokeLinecap="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <div style={{ width: 34, background: 'hsl(216 28% 16%)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid hsl(216 22% 22%)' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="hsl(215 14% 60%)" strokeWidth="2" strokeLinecap="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/></svg>
          </div>
        </div>
      </div>
    </div>
  </IPhone>
);

// PDF Report mock
const PDFReport = () => (
  <div style={{
    background: '#f4f5f7', borderRadius: 12, overflow: 'hidden',
    border: '1px solid hsl(220 14% 82%)',
    boxShadow: '0 4px 24px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.08)',
    fontFamily: '"DM Sans", sans-serif',
    fontSize: 9,
  }}>
    {/* Page */}
    <div style={{ background: '#fff', margin: 16, borderRadius: 8, overflow: 'hidden', boxShadow: '0 1px 6px rgba(0,0,0,.06)' }}>
      {/* Report header */}
      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid hsl(220 14% 88%)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 800, color: 'hsl(216 28% 10%)', letterSpacing: '-.01em' }}>SafeGuard</div>
            <div style={{ fontSize: 7.5, color: 'hsl(215 14% 50%)', marginTop: 1 }}>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.5, color: 'hsl(215 14% 50%)', fontFamily: 'monospace' }}>12 May 2026 · S. Mitchell</div>
          <div style={{ marginTop: 4, display: 'inline-block', fontSize: 7.5, fontWeight: 700, padding: '2px 8px', 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>
      {/* Summary cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderBottom: '1px solid hsl(220 14% 88%)' }}>
        {[['4', 'Total Findings', 'hsl(216 28% 10%)'], ['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: '10px 12px', borderRight: i < 3 ? '1px solid hsl(220 14% 88%)' : 'none', background: 'hsl(220 16% 97%)' }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: c, letterSpacing: '-.02em' }}>{v}</div>
            <div style={{ fontSize: 7.5, color: 'hsl(215 14% 50%)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.1em', marginTop: 1 }}>{l}</div>
          </div>
        ))}
      </div>
      {/* Findings */}
      <div style={{ padding: '10px 12px' }}>
        <div style={{ fontSize: 7.5, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.14em', color: 'hsl(215 14% 45%)', marginBottom: 8 }}>Findings</div>
        {SW_ITEMS.map((item, i) => {
          const s = SEV_COLOR[item.sev];
          const st = STAT_COLOR[item.status];
          return (
            <div key={i} style={{ border: '1px solid hsl(220 14% 88%)', borderRadius: 8, marginBottom: 7, overflow: 'hidden' }}>
              {/* Finding header */}
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '7px 10px', background: 'hsl(220 16% 96%)', borderBottom: '1px solid hsl(220 14% 88%)', gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, minWidth: 0 }}>
                  <div style={{ width: 18, height: 18, borderRadius: 5, background: s.bg, boxShadow: `inset 0 0 0 1px ${s.ring}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <span style={{ fontSize: 7.5, fontWeight: 800, color: s.text }}>{i + 1}</span>
                  </div>
                  <div>
                    <div style={{ fontSize: 8, fontWeight: 700, color: 'hsl(215 14% 40%)', textTransform: 'uppercase', letterSpacing: '.08em' }}>{item.cat}</div>
                    <div style={{ fontSize: 7.5, color: 'hsl(215 14% 55%)', fontFamily: 'monospace', marginTop: 1 }}>{item.loc}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                  <span style={{ fontSize: 7, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: s.bg, color: s.text, boxShadow: `inset 0 0 0 1px ${s.ring}`, textTransform: 'uppercase', letterSpacing: '.08em' }}>{s.label}</span>
                  <span style={{ fontSize: 7, fontWeight: 700, padding: '1.5px 6px', borderRadius: 999, background: st.bg, color: st.text, boxShadow: `inset 0 0 0 1px ${st.ring}`, textTransform: 'uppercase', letterSpacing: '.08em' }}>{st.label}</span>
                </div>
              </div>
              {/* Finding body */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, padding: '7px 10px', alignItems: 'start' }}>
                <div style={{ fontSize: 8.5, color: 'hsl(215 14% 30%)', lineHeight: 1.45 }}>{item.desc}</div>
                <div style={{ width: 70, height: 50, borderRadius: 6, background: 'hsl(220 16% 94%)', border: '1px dashed hsl(220 14% 78%)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <div style={{ textAlign: 'center' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="hsl(215 14% 65%)" strokeWidth="1.5" strokeLinecap="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                    <div style={{ fontSize: 6.5, color: 'hsl(215 14% 60%)', marginTop: 2 }}>Photo</div>
                  </div>
                </div>
              </div>
              {/* Assigned row */}
              <div style={{ padding: '5px 10px 7px', borderTop: '1px solid hsl(220 14% 92%)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ fontSize: 7, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', color: 'hsl(215 14% 50%)' }}>Assigned</div>
                <div style={{ fontSize: 8, fontWeight: 600, color: 'hsl(25 95% 45%)' }}>{item.assigned}</div>
              </div>
            </div>
          );
        })}
      </div>
      {/* Footer */}
      <div style={{ padding: '8px 12px', borderTop: '1px solid hsl(220 14% 88%)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'hsl(220 16% 97%)' }}>
        <div style={{ fontSize: 7, color: 'hsl(215 14% 55%)', fontFamily: 'monospace' }}>Generated by SafeGuard · safeguardapp.au</div>
        <div style={{ fontSize: 7, color: 'hsl(215 14% 55%)', fontFamily: 'monospace' }}>Page 1 of 1</div>
      </div>
    </div>
  </div>
);

const EditorialSafetyWalk = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const BG = 'hsl(216 32% 6%)';
  const BORDER = 'hsl(216 22% 13%)';
  const CARD = 'hsl(216 28% 10%)';
  const MUTED = 'hsl(215 14% 55%)';

  const features = [
    { icon: 'camera',        title: 'Photo capture on the spot',       body: 'Log a finding, take a photo and assign it to a subcontractor without leaving the screen. All from your phone on the walk.' },
    { icon: 'mic',           title: 'Voice-to-text findings',           body: 'Tap the mic and describe what you see. The app transcribes it and suggests a category, severity and assignee.' },
    { icon: 'sparkles',      title: 'AI-assisted categorisation',       body: 'Describe a finding in plain English and the AI suggests the category, severity rating and which trade to assign it to.' },
    { icon: 'send',          title: 'Notify subcontractors instantly',   body: 'One tap sends email notifications to every subcontractor with open items assigned to them — with photos and due dates included.' },
    { icon: 'filter',        title: 'Filter by severity & status',      body: 'View open, actioned and closed items. Filter by critical, high, medium or low severity to focus on what needs action first.' },
    { icon: 'file-down',     title: 'PDF export with photos',           body: 'Export a complete walk report as PDF — every finding, photo, severity rating, assignee and corrective action in one document.' },
  ];

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

        {/* Section header */}
        <div style={{ marginBottom: 56 }}>
          <Eyebrow>Safety Walk</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 32 : 44, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.06, marginTop: 14, marginBottom: 16, maxWidth: 640 }}>
            Walk the site.<br/>
            <span style={{ fontStyle: 'italic', background: 'linear-gradient(135deg, hsl(25 95% 65%), hsl(20 88% 50%))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Log it. Assign it. Close it.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: MUTED, maxWidth: 560 }}>
            Site safety walks happen faster with SafeGuard. Log findings with photos and voice, assign corrective actions to subcontractors in real time, and export a complete PDF report before you're back at the site cabin.
          </p>
        </div>

        {/* Main content — phones left, features right */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 64, alignItems: 'start', marginBottom: 72 }}>

          {/* Phone mocks */}
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'row', gap: 16, justifyContent: 'center', alignItems: 'flex-start', padding: '0 20px' }}>
            {/* Glow */}
            <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', width: 300, height: 300, background: 'radial-gradient(circle, hsl(25 95% 55% / .12) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
            <PhoneWalkList />
            {!isMobile && <PhoneWalkItems />}
          </div>

          {/* Feature list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: 8 }}>
            {features.map((f, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: 'hsl(25 95% 55% / .10)', border: '1px solid hsl(25 95% 55% / .22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name={f.icon} size={15} style={{ color: 'hsl(25 95% 60%)' }} />
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: '#fff', marginBottom: 3 }}>{f.title}</div>
                  <div style={{ fontSize: 13, color: MUTED, lineHeight: 1.55 }}>{f.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* PDF Report preview */}
        <div style={{ borderTop: '1px solid ' + BORDER, paddingTop: 56 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <Eyebrow>PDF Export</Eyebrow>
              <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-.02em', color: '#fff', marginTop: 8 }}>
                A complete record, ready to send.
              </h3>
              <p style={{ fontSize: 14, color: MUTED, marginTop: 8, maxWidth: 480, lineHeight: 1.6 }}>
                Every walk exports as a structured PDF — findings numbered, photos attached, severity rated, subcontractors named. Admissible. Archivable. Ready for your principal contractor in one tap.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: isMobile ? 16 : 0 }}>
              {['Photos included', 'Severity rated', 'Subcontractors named', 'One tap export'].map(t => (
                <span key={t} style={{ fontSize: 11, fontWeight: 600, padding: '5px 12px', borderRadius: 999, background: CARD, border: '1px solid ' + BORDER, color: MUTED }}>✓ {t}</span>
              ))}
            </div>
          </div>
          <PDFReport />
        </div>

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

// Site Logistics — booking widget showcase
const LOGISTICS_RESOURCES = [
  { id: 'bay',   name: 'Loading Bay 1', hours: '06:00–18:00', color: 'hsl(217 91% 60%)' },
  { id: 'crane', name: 'Tower Crane',   hours: '07:00–17:00', color: 'hsl(38 92% 50%)' },
  { id: 'hoist', name: 'Personnel Hoist', hours: '06:00–18:00', color: 'hsl(270 70% 62%)' },
  { id: 'bin',   name: 'Bin Changeover', hours: '06:00–16:00', color: 'hsl(142 71% 45%)' },
];
const LOGISTICS_BOOKINGS = [
  // Loading Bay 1 — full day except smoko 09:30-10:00 and lunch 12:30-13:00
  { res: 'bay', start: '07:00', end: '08:30', co: 'Tradelink Plumbing',  sub: '12 × copper pipe pallets — Level 4', status: 'approved' },
  { res: 'bay', start: '08:30', end: '09:30', co: 'BlueScope Steel',     sub: '2 × steel beams — Level 6 east', status: 'approved' },
  // smoko break 09:30–10:00
  { res: 'bay', start: '10:00', end: '11:30', co: 'Hilti AU',            sub: 'Anchor bolt delivery — Level 3', status: 'approved' },
  { res: 'bay', start: '11:30', end: '12:30', co: 'Boral Concrete',      sub: 'Bagged cement — ground floor', status: 'approved' },
  // lunch 12:30–13:00
  { res: 'bay', start: '13:00', end: '14:30', co: 'CSR Bradford',        sub: 'Insulation rolls — Level 8', status: 'requested' },
  { res: 'bay', start: '14:30', end: '16:00', co: 'Stramit Roofing',     sub: 'Roof sheet delivery — Grid J7', status: 'approved' },

  // Tower Crane — full day except breaks
  { res: 'crane', start: '07:00', end: '09:30', co: 'Apex Formwork',     sub: 'Precast panel lift — Level 5 south', status: 'approved' },
  // smoko 09:30–10:00
  { res: 'crane', start: '10:00', end: '12:30', co: 'MMC Structures',    sub: 'Steel column lift — Grid C4', status: 'approved' },
  // lunch 12:30–13:00
  { res: 'crane', start: '13:00', end: '14:30', co: 'Boral Concrete',    sub: 'Skip lift — Level 7 east', status: 'checked_in' },
  { res: 'crane', start: '14:30', end: '16:00', co: 'WeAreFire',         sub: 'Plant lift — Level 9 roof', status: 'approved' },

  // Personnel Hoist — full day except breaks
  { res: 'hoist', start: '06:30', end: '09:30', co: 'M&E Services',      sub: '4 pax — Level 9 plant room', status: 'approved' },
  // smoko 09:30–10:00
  { res: 'hoist', start: '10:00', end: '12:30', co: 'Tradelink Plumbing',sub: '3 pax + tools — Level 4', status: 'approved' },
  // lunch 12:30–13:00
  { res: 'hoist', start: '13:00', end: '14:30', co: 'WeAreFire',         sub: '2 pax + sprinkler heads — Level 7', status: 'requested' },
  { res: 'hoist', start: '14:30', end: '16:30', co: 'Stramit Roofing',   sub: '2 pax — Level 11 roof', status: 'approved' },

  // Bin Changeover — full day except breaks
  { res: 'bin', start: '06:30', end: '09:30', co: 'CleanAway',           sub: 'Mixed waste — north skip', status: 'approved' },
  // smoko 09:30–10:00
  { res: 'bin', start: '10:00', end: '12:30', co: 'Veolia',              sub: 'Concrete waste — east yard', status: 'approved' },
  // lunch 12:30–13:00
  { res: 'bin', start: '13:00', end: '15:30', co: 'CleanAway',           sub: 'Cardboard — south skip', status: 'requested' },
  { res: 'bin', start: '15:30', end: '17:00', co: 'Veolia',              sub: 'General waste — north', status: 'approved' },
];
const LOGISTICS_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 STATUS_TINT = {
  approved:   { ring: 'rgba(34,197,94,.45)',  dot: 'hsl(142 71% 45%)', label: 'Approved' },
  requested:  { ring: 'rgba(245,158,11,.45)', dot: 'hsl(38 92% 50%)',  label: 'Requested' },
  checked_in: { ring: 'rgba(59,130,246,.55)', dot: 'hsl(217 91% 60%)', label: 'On site' },
};

const EditorialLogistics = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const slotMin = (s) => parseInt(s.split(':')[0]) * 60 + parseInt(s.split(':')[1]);
  const gridStart = slotMin('06:30');
  const gridEnd = slotMin('17:00');
  const totalMin = gridEnd - gridStart;
  return (
    <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', borderTop: '1px solid ' + ED_BORDER }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1.05fr', gap: isMobile ? 24 : 56, alignItems: 'flex-start', marginBottom: 36 }}>
        <div>
          <Eyebrow>Site Logistics — Whatever your site needs, we’ve got it covered</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 30 : 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16 }}>
            One calendar for every loading&nbsp;bay, crane, hoist and skip on the&nbsp;site.
          </h2>
        </div>
        <div style={{ paddingTop: 20 }}>
          <p style={{ fontSize: 16, color: ED_MUTED, lineHeight: 1.65 }}>
            Crane, hoist, loading bay, delivery zones — all coordinated in one calendar. Subbies request from their phone, your supervisor approves with a tap. No whiteboards, no clashes. And if your site needs something beyond the standard — our team builds it.
          </p>
          <div style={{ display: 'flex', gap: 22, marginTop: 22, flexWrap: 'wrap' }}>
            {[
              { k: 'Day', v: 'Slot grid' },
              { k: 'Week', v: '7-day plan' },
              { k: 'List', v: 'Approval queue' },
            ].map(t => (
              <div key={t.k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontSize: 11, fontFamily: '"DM Mono", monospace', textTransform: 'uppercase', letterSpacing: '.12em', color: 'hsl(25 95% 60%)' }}>{t.k}</span>
                <span style={{ fontSize: 14, color: '#fff', fontWeight: 600 }}>{t.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Widget mock — horizontally scrollable on mobile */}
      <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch', marginLeft: isMobile ? -20 : 0, marginRight: isMobile ? -20 : 0 }}>
      <div style={{
        background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: isMobile ? 0 : 16,
        overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,.5)',
        minWidth: 640,
      }}>
        {/* widget topbar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px',
          borderBottom: '1px solid ' + ED_BORDER, background: 'hsl(216 28% 9%)',
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="truck" size={14} style={{ color: '#fff' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>Site Logistics</span>
            <span style={{ fontSize: 11, color: ED_MUTED, fontFamily: '"DM Mono", monospace' }}>Carlton Tower · Day view</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ display: 'flex', gap: 2, padding: 2, background: 'hsl(216 22% 14%)', borderRadius: 8 }}>
              {['Day','Week','List'].map((v, i) => (
                <div key={v} style={{
                  padding: '5px 12px', borderRadius: 6, fontSize: 11.5, fontWeight: 600,
                  background: i === 0 ? ED_CARD : 'transparent',
                  color: i === 0 ? '#fff' : ED_MUTED,
                  boxShadow: i === 0 ? '0 1px 2px rgba(0,0,0,.4)' : 'none',
                }}>{v}</div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 26, height: 26, borderRadius: 6, border: '1px solid ' + ED_BORDER, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="chevron-left" size={13} style={{ color: ED_MUTED }} />
              </div>
              <span style={{ fontSize: 12.5, fontWeight: 600, color: '#fff', padding: '0 6px' }}>Tue, 12 May</span>
              <div style={{ width: 26, height: 26, borderRadius: 6, border: '1px solid ' + ED_BORDER, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="chevron-right" size={13} style={{ color: ED_MUTED }} />
              </div>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '6px 11px', borderRadius: 7,
              background: 'hsl(25 95% 55%)', color: '#fff',
              fontSize: 11.5, fontWeight: 600,
            }}>
              <Icon name="plus" size={12} /> New booking
            </div>
          </div>
        </div>

        {/* pending request banner */}
        <div style={{
          margin: '12px 14px 0', padding: '9px 14px',
          background: 'hsl(38 92% 50% / .08)', border: '1px solid hsl(38 92% 50% / .3)',
          borderRadius: 9, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Icon name="alert-circle" size={14} style={{ color: 'hsl(38 92% 50%)' }} />
          <span style={{ fontSize: 12, color: 'hsl(38 92% 60%)', fontWeight: 500 }}>
            <strong style={{ fontWeight: 700 }}>3 booking requests</strong> awaiting approval
          </span>
          <span style={{
            marginLeft: 'auto', fontSize: 10.5, padding: '3px 9px', borderRadius: 5,
            border: '1px solid hsl(38 92% 50% / .4)', color: 'hsl(38 92% 60%)', fontWeight: 600,
          }}>Review</span>
        </div>

        {/* calendar grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '76px repeat(4, 1fr)', padding: 14, gap: 0 }}>
          {/* header row */}
          <div style={{ padding: '10px 8px', fontSize: 10.5, fontFamily: '"DM Mono", monospace', textTransform: 'uppercase', letterSpacing: '.12em', color: ED_MUTED }}>
            Time
          </div>
          {LOGISTICS_RESOURCES.map(r => (
            <div key={r.id} style={{ padding: '10px 12px', borderBottom: '1px solid ' + ED_BORDER }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: r.color }} />
                <span style={{ fontSize: 12.5, fontWeight: 700, color: '#fff' }}>{r.name}</span>
              </div>
              <span style={{ fontSize: 10.5, color: ED_MUTED, fontFamily: '"DM Mono", monospace', marginLeft: 15 }}>{r.hours}</span>
            </div>
          ))}

          {/* time labels column */}
          <div style={{ position: 'relative', borderRight: '1px solid ' + ED_BORDER }}>
            {LOGISTICS_SLOTS.map(s => (
              <div key={s} style={{
                height: 44, padding: '4px 8px',
                fontSize: 11, fontFamily: '"DM Mono", monospace', color: ED_MUTED,
                borderBottom: '1px solid ' + ED_BORDER,
              }}>{s}</div>
            ))}
          </div>

          {/* resource columns */}
          {LOGISTICS_RESOURCES.map(r => {
            const colBookings = LOGISTICS_BOOKINGS.filter(b => b.res === r.id);
            return (
              <div key={r.id} style={{ position: 'relative', borderRight: '1px solid ' + ED_BORDER }}>
                {/* slot lines */}
                {LOGISTICS_SLOTS.map(s => (
                  <div key={s} style={{ height: 44, borderBottom: '1px solid ' + ED_BORDER }} />
                ))}
                {/* booking blocks absolutely positioned */}
                {colBookings.map((b, i) => {
                  const top = ((slotMin(b.start) - gridStart) / 60) * 44 + 2;
                  const height = ((slotMin(b.end) - slotMin(b.start)) / 60) * 44 - 4;
                  const tint = STATUS_TINT[b.status];
                  return (
                    <div key={i} style={{
                      position: 'absolute', left: 4, right: 4, top, height,
                      borderRadius: 7,
                      background: r.color.replace('hsl(', 'hsl(').replace(')', ' / .14)'),
                      border: '1px solid ' + tint.ring,
                      padding: '5px 7px', display: 'flex', flexDirection: 'column', gap: 2,
                      overflow: 'hidden',
                    }}>
                      <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.5, fontFamily: '"DM Mono", monospace', color: ED_MUTED }}>{b.start}–{b.end}</span>
                      </div>
                      <span style={{ fontSize: 11, 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.5, color: ED_MUTED, lineHeight: 1.3, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{b.sub}</span>}
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>

        {/* footer legend */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 22, padding: '12px 18px',
          borderTop: '1px solid ' + ED_BORDER, background: 'hsl(216 28% 9%)',
        }}>
          {Object.entries(STATUS_TINT).map(([k, v]) => (
            <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: v.dot }} />
              <span style={{ fontSize: 11.5, color: ED_MUTED, fontWeight: 500 }}>{v.label}</span>
            </div>
          ))}
          <span style={{ marginLeft: 'auto', fontSize: 10.5, fontFamily: '"DM Mono", monospace', color: ED_MUTED, letterSpacing: '.06em' }}>
            18 BOOKINGS · 1 ON SITE · 3 PENDING · BREAKS: 09:30–10:00 / 12:30–13:00
          </span>
        </div>
      </div>

      </div>

      {/* Two callouts under the widget */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14, marginTop: 32 }}>
        <div style={{ padding: '24px 26px', background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Icon name="smartphone" size={16} style={{ color: 'hsl(25 95% 60%)' }} />
            <span style={{ fontSize: 11.5, fontFamily: '"DM Mono", monospace', textTransform: 'uppercase', letterSpacing: '.12em', color: 'hsl(25 95% 60%)' }}>Subcontractor view</span>
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>Request from the cab.</h3>
          <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6, marginTop: 8 }}>
            Subbies pick a resource, time and load type from their phone — pre-filled with company, vehicle and rego from their last booking. They get a push notification the moment your super approves.
          </p>
        </div>
        <div style={{ padding: '24px 26px', background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Icon name="qr-code" size={16} style={{ color: 'hsl(25 95% 60%)' }} />
            <span style={{ fontSize: 11.5, fontFamily: '"DM Mono", monospace', textTransform: 'uppercase', letterSpacing: '.12em', color: 'hsl(25 95% 60%)' }}>At the gate</span>
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>Scan in. Auto-checked in.</h3>
          <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6, marginTop: 8 }}>
            The driver scans the same QR used for site sign-in. The booking flips to <em>On site</em>, the supervisor sees it live, and the daily logistics report writes itself for end-of-shift.
          </p>
        </div>
      </div>
    </section>
  );
};

// Pricing
const EditorialPricing = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + ED_BORDER }}>
    <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
      <Eyebrow>Pricing</Eyebrow>
      <h2 style={{ fontSize: isMobile ? 34 : 52, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.04, marginTop: 18 }}>
        Whatever your site needs — <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'hsl(215 14% 70%)' }}>we’ve got it covered.</span>
      </h2>
      <p style={{ fontSize: 16, color: ED_MUTED, marginTop: 18, lineHeight: 1.6 }}>
        Four starting points. Every quote built around your sites, your construction problems and the bespoke features you need solved. Safety, QA, logistics — and anything else your business requires.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4,1fr)', gap: 12 }}>
      {TIERS.map(t => (
        <div key={t.name} style={{
          padding: '32px 28px 28px',
          background: t.accent ? 'linear-gradient(180deg, hsl(216 24% 13%) 0%, hsl(216 28% 9%) 100%)' : ED_CARD,
          border: t.accent ? '1px solid hsl(25 95% 30%)' : '1px solid ' + ED_BORDER,
          borderRadius: 14,
          position: 'relative',
          boxShadow: t.accent ? '0 0 50px rgba(234,88,12,.10)' : 'none',
        }}>
          {t.accent && (
            <div style={{ position: 'absolute', top: -1, left: -1, right: -1, height: 2, borderRadius: '14px 14px 0 0', background: 'linear-gradient(90deg, transparent, hsl(25 95% 55%), transparent)' }} />
          )}
          <div style={{ fontSize: 13, fontWeight: 700, color: t.accent ? 'hsl(25 95% 65%)' : '#fff', letterSpacing: '.04em' }}>{t.name}</div>
          <div style={{ fontSize: 13, color: ED_MUTED, marginTop: 4 }}>{t.sub}</div>
          <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontSize: 36, fontWeight: 900, color: '#fff', letterSpacing: '-.02em' }}>{t.starts}</span>
            <span style={{ fontSize: 13, color: ED_MUTED }}>{t.period}</span>
          </div>
          <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', marginTop: 14, lineHeight: 1.55 }}>{t.blurb}</p>
          <div style={{ height: 1, background: ED_BORDER, margin: '22px 0' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {t.bullets.map(b => (
              <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'hsl(215 14% 75%)' }}>
                <Icon name="check" size={14} style={{ color: 'hsl(142 71% 55%)', marginTop: 2 }} />
                <span>{b}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24 }}>
            <Btn primary={t.accent} size="md" icon="arrow-right" style={{ width: '100%', justifyContent: 'center' }}>
              {t.starts === 'Custom' ? 'Talk to sales' : 'Get a quote'}
            </Btn>
          </div>
        </div>
      ))}
    </div>
  </section>
  );
};

// Final CTA + Contact
const EditorialContact = () => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <section style={{ padding: isMobile ? '64px 20px' : isTablet ? '80px 32px' : '120px 64px', position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'radial-gradient(circle, #ea580c 1px, transparent 1px)',
      backgroundSize: '40px 40px', opacity: .04, pointerEvents: 'none',
    }} />
    <div style={{ position: 'relative', maxWidth: 920, margin: '0 auto', textAlign: 'center' }}>
      <Eyebrow>Get started</Eyebrow>
      <h2 style={{ fontSize: isMobile ? 40 : isTablet ? 56 : 76, fontWeight: 900, letterSpacing: '-.035em', color: '#fff', lineHeight: 1, marginTop: 22 }}>
        Whatever your site needs —<br/>let’s solve it together.
      </h2>
      <p style={{ fontSize: 17, color: 'hsl(215 14% 70%)', marginTop: 26, maxWidth: 560, marginInline: 'auto', lineHeight: 1.55 }}>
        SafeGuard covers safety, QA, logistics and every construction problem in between. Book 30 minutes with our engineering team. We’ll show the platform on a real project and start scoping whatever your site needs built.
      </p>
      <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center' }}>
        <a href="contact.html" style={{ textDecoration: 'none' }}><Btn primary size="lg" icon="calendar">Book a tailored demo</Btn></a>
        <a href="contact.html" style={{ textDecoration: 'none' }}><Btn size="lg" icon="phone">Talk to our team</Btn></a>
      </div>
      <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4,1fr)', gap: 16, maxWidth: 960, margin: '60px auto 0' }}>
        {[
          { i: 'mail',     l: 'Enquiries', v: 'info@safeguardapp.au',     href: 'mailto:info@safeguardapp.au' },
          { i: 'life-buoy',l: 'Support',   v: 'support@safeguardapp.au',  href: 'mailto:support@safeguardapp.au' },
          { i: 'phone',    l: 'Phone',     v: '+61 3 9000 0000',          href: 'tel:+61390000000' },
          { i: 'map-pin',  l: 'Office',    v: 'Cremorne, Naarm/Melbourne' },
        ].map(c => {
          const Inner = (
            <>
              <Icon name={c.i} size={18} style={{ color: 'hsl(25 95% 60%)' }} />
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: ED_MUTED, marginTop: 12 }}>{c.l}</div>
              <div style={{ fontSize: 14, color: '#fff', marginTop: 4, fontWeight: 600 }}>{c.v}</div>
            </>
          );
          const baseStyle = { display: 'block', background: ED_CARD, border: '1px solid ' + ED_BORDER, borderRadius: 12, padding: 20, textAlign: 'left', textDecoration: 'none' };
          return c.href
            ? <a key={c.l} href={c.href} style={baseStyle}>{Inner}</a>
            : <div key={c.l} style={baseStyle}>{Inner}</div>;
        })}
      </div>
    </div>
  </section>
  );
};



// ── Tabbed Showcase — Safety Walk + Logistics in one compact section ──
const EditorialShowcase = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const [tab, setTab] = React.useState('walk');
  const BORDER = 'hsl(216 22% 13%)';
  const CARD   = 'hsl(216 28% 10%)';
  const MUTED  = 'hsl(215 14% 55%)';

  const tabs = [
    { id: 'walk',       label: 'Safety Walk',     icon: 'shield' },
    { id: 'logistics',  label: 'Site Logistics',   icon: 'truck' },
    { id: 'signin',     label: 'Sign-In Register', icon: 'log-in' },
    { id: 'inductions', label: 'Inductions',       icon: 'user-check' },
  ];

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

        {/* Header */}
        <div style={{ marginBottom: 40 }}>
          <Eyebrow>See it in action</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 30 : 44, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.06, marginTop: 14 }}>
            Safety. QA. Logistics.<br/>
            <span style={{ fontStyle: 'italic', background: 'linear-gradient(135deg, hsl(25 95% 65%), hsl(20 88% 50%))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
              Whatever your site needs.
            </span>
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: MUTED, marginTop: 14, maxWidth: 560, lineHeight: 1.6 }}>
            Three of the 14 modules — live and configured to a real project. Whatever problem your site has, SafeGuard covers it or our engineers build the solution.
          </p>
        </div>

        {/* Tab selector */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '9px 18px', borderRadius: 9, border: 'none',
              background: tab === t.id ? 'hsl(25 95% 55%)' : CARD,
              color: tab === t.id ? '#fff' : MUTED,
              fontSize: 13, fontWeight: 700, cursor: 'pointer',
              boxShadow: tab === t.id ? '0 0 20px hsl(25 95% 55% / .25)' : `inset 0 0 0 1px hsl(216 22% 18%)`,
              transition: 'all .15s',
              fontFamily: 'inherit',
            }}>
              <Icon name={t.icon} size={14} style={{ color: 'currentColor' }} />
              {t.label}
            </button>
          ))}
          <a href="platform.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, marginLeft: 'auto',
            fontSize: 12, fontWeight: 600, color: 'hsl(25 95% 60%)',
            textDecoration: 'none', padding: '9px 14px',
          }}>
            All 14 modules <Icon name="arrow-right" size={12} style={{ color: 'hsl(25 95% 60%)' }} />
          </a>
        </div>

        {/* ── Safety Walk tab — HERO moments from SafetyWalk.tsx ── */}
        {tab === 'walk' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>

            {/* Row 1 — phones + core features */}
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 40, alignItems: 'start' }}>
              <div style={{ display: 'flex', gap: 14, justifyContent: 'center', position: 'relative' }}>
                <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', width: 260, height: 260, background: 'radial-gradient(circle, hsl(0 70% 60% / .10) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
                <PhoneWalkList />
                {!isMobile && <PhoneWalkItems />}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 4 }}>
                {[
                  { icon: 'mic',       color: 'hsl(0 70% 60%)',    title: 'Voice-to-text — en-AU',          body: 'Tap the mic. Describe what you see in plain English. The Web Speech API transcribes it instantly and the AI triggers automatically.' },
                  { icon: 'sparkles',  color: 'hsl(270 70% 67%)',  title: 'AI categorisation — 600ms',      body: 'After 10+ characters the AI fires — suggesting category from 15 options, severity rating and which subcontractor to assign. One tap to accept.' },
                  { icon: 'camera',    color: 'hsl(217 91% 65%)',  title: 'Photo + red-pen markup',         body: 'Capture a photo then draw on it with the pen tool — circle hazards, add arrows. Undo, redraw, apply. Markup saved to the finding.' },
                  { icon: 'map-pin',   color: 'hsl(38 92% 55%)',   title: 'Location and due date',          body: 'Location field for level, grid or area. Due date with calendar picker. Category from 15 options — PPE, Scaffold, Electrical, Working at Height and more.' },
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <div style={{ width: 30, height: 30, borderRadius: 8, background: `${f.color.replace(')', ' / .12)').replace('hsl(', 'hsl(')}`, border: `1px solid ${f.color.replace(')', ' / .25)').replace('hsl(', 'hsl(')}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name={f.icon} size={13} style={{ color: f.color }} />
                    </div>
                    <div>
                      <div style={{ fontSize: 12.5, fontWeight: 700, color: '#fff', marginBottom: 1 }}>{f.title}</div>
                      <div style={{ fontSize: 12, color: MUTED, lineHeight: 1.45 }}>{f.body}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Row 2 — action workflow + notify + export panel mocks */}
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: 12 }}>

              {/* Notify All panel */}
              <div style={{ background: CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, padding: '16px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <Icon name="bell" size={14} style={{ color: 'hsl(217 91% 60%)' }} />
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Notify All — one tap</span>
                </div>
                <p style={{ fontSize: 11.5, color: MUTED, lineHeight: 1.5 }}>Sends one batched email per subcontractor company — every open finding assigned to them, with photo and due date. Notification timestamp recorded on the walk.</p>
                <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, background: 'hsl(217 91% 60% / .10)', border: '1px solid hsl(217 91% 60% / .3)' }}>
                  <Icon name="bell" size={12} style={{ color: 'hsl(217 91% 60%)' }} />
                  <span style={{ fontSize: 11, fontWeight: 600, color: 'hsl(217 91% 65%)' }}>Notify All</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 8, background: 'hsl(142 71% 45% / .10)', border: '1px solid hsl(142 71% 45% / .3)' }}>
                  <Icon name="check-check" size={12} style={{ color: 'hsl(142 71% 45%)' }} />
                  <span style={{ fontSize: 11, fontWeight: 600, color: 'hsl(142 71% 45%)' }}>Notified 09:47 ✓</span>
                </div>
              </div>

              {/* Action workflow panel */}
              <div style={{ background: CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, padding: '16px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <Icon name="git-pull-request" size={14} style={{ color: 'hsl(25 95% 60%)' }} />
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Three-step close workflow</span>
                </div>
                <p style={{ fontSize: 11.5, color: MUTED, lineHeight: 1.5 }}>Subcontractor marks finding as Actioned with a note. HC reviews — Approve & Close or Reject with reason. Rejected items return to Open for rework.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
                  {[
                    { label: 'Open', color: 'hsl(0 70% 60%)', icon: 'circle' },
                    { label: '→ Sub marks Actioned', color: 'hsl(217 91% 60%)', icon: 'send' },
                    { label: '→ HC Approve & Close', color: 'hsl(142 71% 45%)', icon: 'check-circle' },
                    { label: '→ HC Reject & Return', color: 'hsl(0 70% 60%)', icon: 'x-circle' },
                  ].map((step, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11, color: step.color, fontWeight: 600 }}>
                      <Icon name={step.icon} size={11} style={{ color: step.color }} />
                      {step.label}
                    </div>
                  ))}
                </div>
              </div>

              {/* Export filter panel */}
              <div style={{ background: CARD, border: '1px solid hsl(270 70% 60% / .3)', borderRadius: 12, padding: '16px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <Icon name="sliders-horizontal" size={14} style={{ color: 'hsl(270 70% 65%)' }} />
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>Filtered PDF export</span>
                </div>
                <p style={{ fontSize: 11.5, color: MUTED, lineHeight: 1.5 }}>Export by company, severity, status and due date range. Send Apex Formwork only their critical open items. View in browser or print-to-PDF.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
                  {[
                    { label: 'Filter by company', val: 'Apex Formwork' },
                    { label: 'Filter by severity', val: 'Critical / High' },
                    { label: 'Filter by status', val: 'Open · Actioned' },
                    { label: 'Due date range', val: '12–19 May 2026' },
                  ].map((f, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, padding: '4px 0', borderBottom: '1px solid hsl(216 22% 14%)' }}>
                      <span style={{ color: MUTED }}>{f.label}</span>
                      <span style={{ color: '#fff', fontWeight: 600 }}>{f.val}</span>
                    </div>
                  ))}
                  <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
                    <div style={{ flex: 1, padding: '6px 10px', borderRadius: 7, border: '1px solid hsl(216 22% 22%)', fontSize: 10.5, fontWeight: 600, color: '#fff', textAlign: 'center' }}>View Report</div>
                    <div style={{ flex: 1, padding: '6px 10px', borderRadius: 7, background: 'hsl(270 70% 55%)', fontSize: 10.5, fontWeight: 600, color: '#fff', textAlign: 'center' }}>Print / Save PDF</div>
                  </div>
                </div>
              </div>
            </div>

            <a href="bespoke.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'hsl(25 95% 60%)', textDecoration: 'none' }}>
              See how we build custom walk modules <Icon name="arrow-right" size={13} style={{ color: 'hsl(25 95% 60%)' }} />
            </a>
          </div>
        )}

        {/* ── Logistics tab ── */}
        {tab === 'logistics' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr', gap: isMobile ? 20 : 32, alignItems: 'start', marginBottom: 16 }}>
              <div>
                <h3 style={{ fontSize: isMobile ? 20 : 24, fontWeight: 800, color: '#fff', letterSpacing: '-.02em', marginBottom: 10 }}>
                  One calendar for every loading bay, crane and hoist on site.
                </h3>
                <p style={{ fontSize: 13.5, color: MUTED, lineHeight: 1.65 }}>
                  Subbies request a slot from their phone. Your supervisor approves with a tap. The driver scans in at the gate and the day logs itself. No whiteboards, no clashes.
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { icon: 'alert-circle',  label: 'Conflict detection' },
                  { icon: 'smartphone',    label: 'Mobile booking' },
                  { icon: 'check-circle',  label: 'One-tap approval' },
                  { icon: 'download',      label: 'PDF schedule export' },
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'hsl(215 14% 75%)' }}>
                    <Icon name={f.icon} size={13} style={{ color: 'hsl(25 95% 60%)' }} />
                    {f.label}
                  </div>
                ))}
              </div>
            </div>
            <LogisticsGrid cardBg={CARD} border="hsl(216 22% 18%)" muted={MUTED} />
            <a href="bespoke.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'hsl(25 95% 60%)', textDecoration: 'none' }}>
              Need custom logistics features? We build them. <Icon name="arrow-right" size={13} style={{ color: 'hsl(25 95% 60%)' }} />
            </a>
          </div>
        )}

        {/* ── Sign-In Register tab ── */}
        {tab === 'signin' && (
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 48, alignItems: 'start' }}>
            {/* Phone mock — reuse existing */}
            <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
              <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', width: 260, height: 260, background: 'radial-gradient(circle, hsl(217 91% 60% / .12) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
              <PhoneMock>
                <EditorialPhoneScreen />
              </PhoneMock>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8 }}>
              <h3 style={{ fontSize: isMobile ? 20 : 26, fontWeight: 800, color: '#fff', letterSpacing: '-.02em' }}>
                Live site attendance. Inductions verified. Every entry logged.
              </h3>
              <p style={{ fontSize: 14, color: MUTED, lineHeight: 1.65 }}>
                Workers scan a QR code on the cabin door. Induction status checked, ticket expiry flagged, live count updated. Your supervisor sees who's on site in real time.
              </p>
              {[
                { icon: 'qr-code',      label: 'QR sign-in — print and stick on the cabin' },
                { icon: 'user-check',   label: 'Induction status verified on every entry' },
                { icon: 'alert-triangle',label: 'Expired tickets flagged before they walk on' },
                { icon: 'users',        label: 'Live on-site count for your supervisor' },
                { icon: 'file-down',    label: 'Daily attendance PDF export' },
                { icon: 'code-2',       label: 'Custom sign-on flows built on request' },
              ].map((f, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'hsl(215 14% 75%)' }}>
                  <Icon name={f.icon} size={14} style={{ color: 'hsl(25 95% 60%)' }} />
                  {f.label}
                </div>
              ))}
              <a href="bespoke.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 13, fontWeight: 600, color: 'hsl(25 95% 60%)', textDecoration: 'none' }}>
                Need a custom sign-on flow? We build them. <Icon name="arrow-right" size={13} style={{ color: 'hsl(25 95% 60%)' }} />
              </a>
            </div>
          </div>
        )}


        {/* ── Inductions tab ── */}
        {tab === 'inductions' && (
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 48, alignItems: 'start' }}>

            {/* Left — Booking calendar mock */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {/* Calendar header */}
              <div style={{ background: CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 12, overflow: 'hidden' }}>
                <div style={{ padding: '12px 16px', borderBottom: '1px solid hsl(216 22% 16%)', background: 'hsl(216 28% 9%)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ width: 28, height: 28, borderRadius: 7, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="user-check" size={13} style={{ color: '#fff' }} />
                    </div>
                    <span style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>Induction Bookings</span>
                  </div>
                  <div style={{ display: 'flex', gap: 2, padding: 2, background: 'hsl(216 22% 14%)', borderRadius: 7 }}>
                    {['Day','Week','Month'].map((v, i) => (
                      <div key={v} style={{ padding: '4px 10px', borderRadius: 5, fontSize: 11, fontWeight: 600, background: i === 1 ? CARD : 'transparent', color: i === 1 ? '#fff' : MUTED, boxShadow: i === 1 ? '0 1px 2px rgba(0,0,0,.4)' : 'none' }}>{v}</div>
                    ))}
                  </div>
                </div>

                {/* Week grid */}
                <div style={{ padding: '12px 14px' }}>
                  {/* Day headers */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6, marginBottom: 8 }}>
                    {[
                      { day: 'Mon', date: '12', bookings: [
                        { name: 'J. Karras',    co: 'Apex Civil',     time: '08:00', status: 'inducted' },
                        { name: 'L. Pham',      co: 'Boom Hire',      time: '09:00', status: 'form_completed' },
                      ]},
                      { day: 'Tue', date: '13', bookings: [
                        { name: 'A. Chen',  co: 'MMC Group',      time: '08:00', status: 'inducted' },
                      ]},
                      { day: 'Wed', date: '14', bookings: [
                        { name: 'D. Singh',     co: 'Tradelink',      time: '08:00', status: 'form_sent' },
                        { name: 'R. Torres',    co: 'WeAreFire',      time: '10:00', status: 'pending' },
                        { name: 'S. Nguyen',    co: 'Apex Civil',     time: '14:00', status: 'pending' },
                      ]},
                      { day: 'Thu', date: '15', bookings: [
                        { name: 'T. Okafor',    co: 'BlueScope',      time: '08:00', status: 'form_sent' },
                      ]},
                      { day: 'Fri', date: '16', bookings: [
                        { name: 'C. Walsh',     co: 'Hilti AU',       time: '09:00', status: 'pending' },
                        { name: 'B. Chen',      co: 'Stramit',        time: '11:00', status: 'pending' },
                      ]},
                    ].map(d => {
                      const STATUS_BG = {
                        inducted:       { bg: 'hsl(142 71% 45% / .12)', ring: 'hsl(142 71% 45% / .3)',  text: 'hsl(142 71% 45%)',  label: 'Inducted' },
                        form_completed: { bg: 'hsl(270 70% 60% / .12)', ring: 'hsl(270 70% 60% / .3)',  text: 'hsl(270 70% 60%)',  label: 'Completed' },
                        form_sent:      { bg: 'hsl(217 91% 60% / .12)', ring: 'hsl(217 91% 60% / .3)',  text: 'hsl(217 91% 60%)',  label: 'Form Sent' },
                        pending:        { bg: 'hsl(25 95% 55% / .10)',  ring: 'hsl(25 95% 55% / .3)',   text: 'hsl(25 95% 60%)',   label: 'Pending' },
                      };
                      return (
                        <div key={d.day}>
                          <div style={{ textAlign: 'center', marginBottom: 6 }}>
                            <div style={{ fontSize: 9, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.1em', color: MUTED }}>{d.day}</div>
                            <div style={{ fontSize: 14, fontWeight: 800, color: d.date === '14' ? 'hsl(25 95% 60%)' : '#fff', width: 24, height: 24, borderRadius: 999, background: d.date === '14' ? 'hsl(25 95% 55% / .15)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '2px auto 0' }}>{d.date}</div>
                          </div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minHeight: 80 }}>
                            {d.bookings.map((b, bi) => {
                              const st = STATUS_BG[b.status] || STATUS_BG.pending;
                              return (
                                <div key={bi} style={{ borderRadius: 6, padding: '4px 6px', background: st.bg, boxShadow: `inset 0 0 0 1px ${st.ring}` }}>
                                  <div style={{ fontSize: 9, fontWeight: 700, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{b.name}</div>
                                  <div style={{ fontSize: 8, color: MUTED, fontFamily: 'monospace' }}>{b.time}</div>
                                  <div style={{ fontSize: 7.5, fontWeight: 600, color: st.text }}>{st.label}</div>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                  {/* Legend */}
                  <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', paddingTop: 8, borderTop: '1px solid hsl(216 22% 16%)' }}>
                    {[
                      { color: 'hsl(142 71% 45%)', label: 'Inducted' },
                      { color: 'hsl(270 70% 60%)', label: 'Form Completed' },
                      { color: 'hsl(217 91% 60%)', label: 'Form Sent' },
                      { color: 'hsl(25 95% 60%)',  label: 'Pending' },
                    ].map(l => (
                      <div key={l.label} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 9.5, color: MUTED }}>
                        <span style={{ width: 6, height: 6, borderRadius: 999, background: l.color }} />
                        {l.label}
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* 5-step form progress mock */}
              <div style={{ background: CARD, border: '1px solid hsl(216 22% 18%)', borderRadius: 10, padding: '12px 14px' }}>
                <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.12em', color: MUTED, marginBottom: 10 }}>Worker induction form — 5 steps</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
                  {['About You', 'Your Cards', 'Health', 'Site Rules', 'Sign'].map((step, i) => (
                    <React.Fragment key={step}>
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: 1 }}>
                        <div style={{ width: 22, height: 22, borderRadius: 999, background: i < 2 ? 'hsl(142 71% 45%)' : i === 2 ? 'hsl(25 95% 55%)' : 'hsl(216 24% 16%)', border: i >= 3 ? '1px solid hsl(216 22% 22%)' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8.5, fontWeight: 800, color: '#fff' }}>
                          {i < 2 ? <Icon name="check" size={11} style={{ color: '#fff' }} /> : i + 1}
                        </div>
                        <div style={{ fontSize: 7.5, fontWeight: 600, color: i === 2 ? 'hsl(25 95% 60%)' : i < 2 ? 'hsl(142 71% 45%)' : MUTED, textAlign: 'center', lineHeight: 1.2 }}>{step}</div>
                      </div>
                      {i < 4 && <div style={{ flex: 1, height: 2, background: i < 2 ? 'hsl(142 71% 45%)' : 'hsl(216 22% 20%)', marginBottom: 18 }} />}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </div>

            {/* Right — feature list */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 4 }}>
              <h3 style={{ fontSize: isMobile ? 20 : 26, fontWeight: 800, color: '#fff', letterSpacing: '-.02em' }}>
                Digital inductions, booking calendar and automatic account creation.
              </h3>
              <p style={{ fontSize: 14, color: MUTED, lineHeight: 1.65 }}>
                Book inductions in advance with a day, week or month calendar. Workers complete a 5-step digital form — licences, health declaration, site rules and e-signature. HC reviews, approves, and the worker account is created automatically.
              </p>
              {[
                { icon: 'calendar',    title: 'Induction booking calendar',         body: 'Day, week and month views. Schedule inductees in advance, see status at a glance — Pending, Form Sent, Form Completed, Inducted.' },
                { icon: 'link',        title: 'QR code or direct link',             body: 'Print a QR code for the site cabin or send a direct link. Workers complete the form on their phone before they arrive.' },
                { icon: 'file-text',   title: '5-step digital form',                body: 'About You → Licences & Cards → Health Declaration → Site Rules → E-Signature. HC-configurable questions for each project.' },
                { icon: 'shield-check',title: 'Licence & certificate upload',       body: 'White Card, HRW, First Aid, Heights, Confined Space — workers upload photos of each card. Expiry dates tracked and flagged.' },
                { icon: 'check-circle',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.' },
                { icon: 'rotate-ccw',  title: 'Automatic re-induction on changes',  body: 'When site rules change, the system flags workers for re-induction. No manual chasing required.' },
              ].map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: 'hsl(270 70% 60% / .10)', border: '1px solid hsl(270 70% 60% / .22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={f.icon} size={14} style={{ color: 'hsl(270 70% 67%)' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 2 }}>{f.title}</div>
                    <div style={{ fontSize: 12.5, color: MUTED, lineHeight: 1.5 }}>{f.body}</div>
                  </div>
                </div>
              ))}
              <a href="bespoke.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 13, fontWeight: 600, color: 'hsl(25 95% 60%)', textDecoration: 'none' }}>
                Need a custom induction workflow? We build them. <Icon name="arrow-right" size={13} style={{ color: 'hsl(25 95% 60%)' }} />
              </a>
            </div>
          </div>
        )}

        {/* Bottom strip */}
        <div style={{ marginTop: 48, 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' }}>Whatever your site needs — we've got it, or we'll build it.</div>
            <div style={{ fontSize: 12, color: MUTED, marginTop: 3 }}>14 modules included. New features scoped, coded and shipped in weeks.</div>
          </div>
          <a href="bespoke.html" style={{ textDecoration: 'none' }}>
            <Btn primary size="md" icon="arrow-right">See how bespoke works</Btn>
          </a>
        </div>

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


// ── Pricing card — extracted so useState hook is valid ─────────────────────────
const TeaserPricingCard = ({ t }) => {
  const [hov, setHov] = React.useState(false);
  const isEnterprise = !t.period;
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        padding: hov ? '28px 22px' : '24px 22px',
        background: hov
          ? 'linear-gradient(180deg, hsl(25 95% 12%) 0%, hsl(216 28% 9%) 100%)'
          : t.accent ? 'linear-gradient(180deg, hsl(216 24% 13%) 0%, hsl(216 28% 9%) 100%)'
          : 'hsl(216 24% 11%)',
        border: hov ? '1px solid hsl(25 95% 40%)' : t.accent ? '1px solid hsl(25 95% 30%)' : '1px solid hsl(216 22% 16%)',
        borderRadius: 14, position: 'relative',
        boxShadow: hov ? '0 0 40px rgba(234,88,12,.18), 0 8px 32px rgba(0,0,0,.3)' : t.accent ? '0 0 40px rgba(234,88,12,.08)' : 'none',
        transform: hov ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all .2s ease', cursor: 'pointer',
      }}>
      {/* Top accent line */}
      <div style={{ position: 'absolute', top: -1, left: -1, right: -1, height: 2, borderRadius: '14px 14px 0 0', background: hov || t.accent ? 'linear-gradient(90deg, transparent, hsl(25 95% 55%), transparent)' : 'transparent' }} />
      {/* Tier name + sub */}
      <div style={{ fontSize: 13, fontWeight: 700, color: hov || t.accent ? 'hsl(25 95% 65%)' : '#fff' }}>{t.name}</div>
      <div style={{ fontSize: 12, color: 'hsl(215 14% 55%)', marginTop: 3 }}>{t.sub}</div>
      {/* ── PRICING — retainer hero, setup below ── */}
      <div style={{ marginTop: 16 }}>
        {isEnterprise ? (
          <>
            <div style={{ fontSize: 22, fontWeight: 900, color: '#fff', letterSpacing: '-.02em' }}>{t.starts}</div>
            <div style={{ fontSize: 11, color: 'hsl(215 14% 55%)', marginTop: 4 }}>Pricing scoped per engagement.</div>
          </>
        ) : (
          <>
            {/* Hero — monthly retainer */}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontSize: 30, fontWeight: 900, color: '#fff', letterSpacing: '-.03em' }}>
                {t.retainer.replace('+ ', '').split(' /')[0]}
              </span>
              <span style={{ fontSize: 12, color: 'hsl(215 14% 55%)' }}>/month</span>
            </div>
            {/* Sub — setup fee */}
            <div style={{ fontSize: 12, color: 'hsl(215 14% 55%)', marginTop: 4 }}>
              + {t.starts} setup fee
            </div>
          </>
        )}
      </div>
      <div style={{ height: 1, background: hov ? 'hsl(25 95% 30%)' : 'hsl(216 22% 16%)', margin: '16px 0' }} />
      {/* Bullets — top 3 */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
        {t.bullets.slice(0, 3).map(b => (
          <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12, color: 'hsl(215 14% 70%)' }}>
            <Icon name="check" size={12} style={{ color: hov ? 'hsl(25 95% 60%)' : 'hsl(142 71% 55%)', marginTop: 2, flexShrink: 0 }} />
            <span>{b}</span>
          </div>
        ))}
      </div>
      {/* Hover CTA */}
      {hov && (
        <a href="mailto:info@safeguardapp.au?subject=Pricing%20Enquiry%20%E2%80%94%20SafeGuard" style={{ textDecoration: 'none', display: 'block', marginTop: 16 }}>
          <div style={{ padding: '8px 14px', borderRadius: 8, background: 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))', color: '#fff', fontSize: 12, fontWeight: 700, textAlign: 'center', boxShadow: '0 0 16px rgba(234,88,12,.3)' }}>
            Request a quote →
          </div>
        </a>
      )}
    </div>
  );
};

// ── Pricing teaser — condensed 3-card version for homepage ────────────
const EditorialPricingTeaser = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const ED_BORDER_LOCAL = 'hsl(216 22% 16%)';
  return (
    <section style={{ padding: isMobile ? '56px 20px' : isTablet ? '72px 32px' : '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid hsl(216 22% 16%)' }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
        <Eyebrow>Pricing</Eyebrow>
        <h2 style={{ fontSize: isMobile ? 30 : 44, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.06, marginTop: 14 }}>
          Whatever your site needs —<br/>
          <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'hsl(215 14% 65%)' }}>we've got it covered.</span>
        </h2>
        <p style={{ fontSize: 14, color: 'hsl(215 14% 55%)', marginTop: 14, lineHeight: 1.6 }}>
          Three options. Every quote built around your sites, your trades and whatever construction problems you need solved.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 12, maxWidth: 1160, margin: '0 auto 32px' }}>
        {TIERS.map(t => <TeaserPricingCard key={t.name} t={t} />)}
      </div>
      <div style={{ textAlign: 'center', display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="pricing.html" style={{ textDecoration: 'none' }}><Btn size="md" icon="arrow-right">See full pricing</Btn></a>
        <a href="mailto:info@safeguardapp.au?subject=Pricing%20Enquiry%20%E2%80%94%20SafeGuard" style={{ textDecoration: 'none' }}><Btn primary size="md" icon="mail">Request a quote</Btn></a>
      </div>
    </section>
  );
};

const SiteEditorial = () => (
  <div className="sg-site" style={{ background: ED_BG }}>
    <TopNav variant="editorial" />
    <EditorialHero />
    <EditorialFeatures />
    <EditorialShowcase />
    <EditorialPricingTeaser />
    <EditorialContact />
    <SiteFooter />
  </div>
);

window.SiteEditorial = SiteEditorial;