// Production page entries — composes existing editorial sections per route
// Adds variant lighter sub-page hero, Bespoke process section, Contact form (Formspree).

const {
  Icon, BrandMark, Wordmark, Btn, Eyebrow,
  TopNav, SiteFooter, PhoneMock,
  PROCESS, BESPOKE_EXAMPLES, TIERS, SCALES, CAPABILITIES, FEATURES,
} = window;

const PG_BG = 'hsl(216 28% 7%)';
const PG_CARD = 'hsl(216 24% 11%)';
const PG_BORDER = 'hsl(216 22% 16%)';
const PG_MUTED = 'hsl(215 14% 55%)';

// Compact sub-page hero used on Bespoke / Pricing / Contact
const PageHero = ({ eyebrow, title, lede, accent }) => (
  <section style={{ position: 'relative', padding: '88px 64px 56px', overflow: 'hidden', borderBottom: '1px solid ' + PG_BORDER }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'radial-gradient(circle, #ea580c 1px, transparent 1px)',
      backgroundSize: '32px 32px', opacity: .045, pointerEvents: 'none',
    }} />
    <div style={{
      position: 'absolute', right: -120, top: -100, width: 520, height: 520,
      background: 'radial-gradient(circle, rgba(234,88,12,.16) 0%, transparent 60%)',
      pointerEvents: 'none', filter: 'blur(20px)',
    }} />
    <div style={{ position: 'relative', maxWidth: 920 }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h1 style={{
        fontSize: 76, fontWeight: 900, letterSpacing: '-.035em', color: '#fff',
        lineHeight: 1, marginTop: 22,
      }}>
        {title}
      </h1>
      <p style={{ fontSize: 18, color: 'hsl(215 14% 70%)', maxWidth: 640, marginTop: 24, lineHeight: 1.55 }}>
        {lede}
      </p>
    </div>
  </section>
);

// Bespoke process — 4 numbered cards
const BespokeProcessSection = () => (
  <section id="process" style={{ padding: '96px 64px', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
      <div>
        <Eyebrow>Whatever you need — here’s how we build it</Eyebrow>
        <h2 style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16, maxWidth: 820 }}>
          You bring the problem. We build the solution.
        </h2>
      </div>
      <p style={{ fontSize: 14.5, color: PG_MUTED, maxWidth: 360, lineHeight: 1.6 }}>
        From safety to QA to logistics — whatever construction problem your site has, our engineers scope it, build it and ship it. No implementation handoffs. The same team that builds your platform is the team you call when something needs solving.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {PROCESS.map(p => (
        <div key={p.n} style={{
          padding: '32px 26px 28px',
          background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 14,
          display: 'flex', flexDirection: 'column', gap: 14,
          minHeight: 320,
        }}>
          <div style={{ fontFamily: '"DM Mono", monospace', fontSize: 14, color: 'hsl(25 95% 60%)', letterSpacing: '.08em' }}>{p.n}</div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: PG_MUTED }}>{p.kicker}</div>
          <h3 style={{ fontSize: 19, fontWeight: 800, color: '#fff', letterSpacing: '-.01em', lineHeight: 1.25 }}>{p.title}</h3>
          <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6 }}>{p.body}</p>
        </div>
      ))}
    </div>

    {/* Bespoke examples row */}
    <div style={{ marginTop: 80 }}>
      <Eyebrow>Whatever the problem — we’ve built it</Eyebrow>
      <h3 style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-.02em', color: '#fff', marginTop: 14, maxWidth: 720 }}>
        Safety. QA. Logistics. Real builds, real timelines.
      </h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginTop: 32 }}>
        {BESPOKE_EXAMPLES.map(b => (
          <div key={b.tag} style={{
            padding: '24px 26px', background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 12,
          }}>
            <div style={{ fontSize: 11, fontFamily: '"DM Mono", monospace', textTransform: 'uppercase', letterSpacing: '.12em', color: 'hsl(25 95% 60%)' }}>{b.tag}</div>
            <p style={{ fontSize: 15, color: '#fff', marginTop: 10, lineHeight: 1.5, fontWeight: 500 }}>"{b.ask}"</p>
            <div style={{ fontSize: 12, color: 'hsl(142 71% 55%)', marginTop: 12, fontFamily: '"DM Mono", monospace' }}>● {b.shipped}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// CTA strip
const CTAStrip = ({ title, sub, primary = 'Whatever you need — let’s solve it', secondary = 'Talk to our team' }) => (
  <section style={{ padding: '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{
      maxWidth: 980, margin: '0 auto',
      padding: '56px 56px',
      background: 'linear-gradient(135deg, hsl(216 24% 11%) 0%, hsl(216 28% 8%) 100%)',
      border: '1px solid ' + PG_BORDER, borderRadius: 20,
      display: 'grid', gridTemplateColumns: '1.5fr auto', gap: 40, alignItems: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', right: -80, top: -80, width: 320, height: 320, background: 'radial-gradient(circle, rgba(234,88,12,.18) 0%, transparent 60%)', filter: 'blur(20px)' }} />
      <div style={{ position: 'relative' }}>
        <h2 style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-.025em', color: '#fff', lineHeight: 1.05 }}>{title}</h2>
        <p style={{ fontSize: 15, color: 'hsl(215 14% 65%)', marginTop: 14, maxWidth: 540, lineHeight: 1.55 }}>{sub}</p>
      </div>
      <div style={{ display: 'flex', gap: 10, position: 'relative' }}>
        <a href="contact.html" style={{ textDecoration: 'none' }}><Btn primary size="lg" icon="arrow-right">{primary}</Btn></a>
        <a href="contact.html" style={{ textDecoration: 'none' }}><Btn size="lg" icon="phone">{secondary}</Btn></a>
      </div>
    </div>
  </section>
);

// Capabilities (re-used on bespoke + pricing)
const CapabilitiesGrid = () => (
  <section style={{ padding: '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
      <Eyebrow>Capabilities & integrations</Eyebrow>
      <h2 style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 18 }}>
        Every problem solved. Every system connected.
      </h2>
      <p style={{ fontSize: 16, color: PG_MUTED, marginTop: 18, lineHeight: 1.6 }}>
        QR sign-in, SafetyWalk, OneDrive, custom reports — and a coding team that builds whatever else your construction business needs. Whatever the problem, we’ve got it covered.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, maxWidth: 1160, margin: '0 auto' }}>
      {CAPABILITIES.map(c => (
        <div key={c.title} style={{
          padding: '28px', background: PG_CARD, border: '1px solid ' + PG_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>
);

// Scales section
const ScalesSection = () => (
  <section id="scales" style={{ padding: '96px 64px', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
      <div>
        <Eyebrow>Whatever your scale — we’ve got it covered</Eyebrow>
        <h2 style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16, maxWidth: 720 }}>
          Every construction problem, at every scale.
        </h2>
      </div>
      <p style={{ fontSize: 14.5, color: PG_MUTED, maxWidth: 360, lineHeight: 1.6 }}>
        From a 30-worker fitout to a Tier-1 program — SafeGuard covers safety, QA and logistics at every scale. Whatever your site needs, we’ve got it or we’ll build it.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {SCALES.map(s => (
        <div key={s.tag} style={{
          padding: '28px 24px 24px',
          background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 12,
          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: PG_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>
);

// Pricing card — extracted component so useState hook is valid
const FullPricingCard = ({ t }) => {
  const [hov, setHov] = React.useState(false);
  const isEnterprise = !t.period;
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        padding: hov ? '36px 28px 32px' : '32px 28px 28px',
        background: hov
          ? 'linear-gradient(180deg, hsl(25 95% 10%) 0%, hsl(216 28% 9%) 100%)'
          : t.accent ? 'linear-gradient(180deg, hsl(216 24% 13%) 0%, hsl(216 28% 9%) 100%)' : PG_CARD,
        border: hov ? '1px solid hsl(25 95% 40%)' : t.accent ? '1px solid hsl(25 95% 30%)' : '1px solid ' + PG_BORDER,
        borderRadius: 14, position: 'relative',
        boxShadow: hov
          ? '0 0 60px rgba(234,88,12,.22), 0 12px 40px rgba(0,0,0,.35)'
          : t.accent ? '0 0 50px rgba(234,88,12,.10)' : 'none',
        transform: hov ? 'translateY(-6px) scale(1.01)' : 'translateY(0) scale(1)',
        transition: 'all .22s ease', cursor: 'pointer', zIndex: hov ? 2 : 1,
      }}>
      <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% 65%), transparent)' : 'transparent' }} />
      <div style={{ fontSize: 13, fontWeight: 700, color: hov || t.accent ? 'hsl(25 95% 70%)' : '#fff', letterSpacing: '.04em' }}>{t.name}</div>
      <div style={{ fontSize: 13, color: PG_MUTED, marginTop: 4 }}>{t.sub}</div>
      {/* ── PRICING — retainer hero, setup below ── */}
      <div style={{ marginTop: 22 }}>
        {isEnterprise ? (
          <>
            <div style={{ fontSize: 30, fontWeight: 900, color: '#fff', letterSpacing: '-.02em' }}>{t.starts}</div>
            <div style={{ fontSize: 13, color: PG_MUTED, marginTop: 6, lineHeight: 1.5 }}>Pricing scoped per engagement.</div>
          </>
        ) : (
          <>
            {/* Hero — monthly retainer */}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontSize: 42, fontWeight: 900, color: '#fff', letterSpacing: '-.03em' }}>
                {t.retainer.replace('+ ', '').split(' /')[0]}
              </span>
              <span style={{ fontSize: 14, color: PG_MUTED }}>/month</span>
            </div>
            {/* Sub line — setup fee */}
            <div style={{ fontSize: 13, color: 'hsl(215 14% 60%)', marginTop: 6 }}>
              + {t.starts} setup fee
            </div>
          </>
        )}
      </div>
      <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', marginTop: 16, lineHeight: 1.55 }}>{t.blurb}</p>
      <div style={{ height: 1, background: hov ? 'hsl(25 95% 25%)' : PG_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: hov ? 'hsl(25 95% 60%)' : 'hsl(142 71% 55%)', marginTop: 2 }} />
            <span>{b}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 24 }}>
        <a href={`mailto:info@safeguardapp.au?subject=Pricing%20Enquiry%20%E2%80%94%20SafeGuard%20${encodeURIComponent(t.name)}`} style={{ textDecoration: 'none' }}>
          <Btn primary={hov || t.accent} size="md" icon="mail" style={{ width: '100%', justifyContent: 'center', boxShadow: hov ? '0 0 20px rgba(234,88,12,.35)' : undefined }}>
            {isEnterprise ? 'Talk to our team' : 'Request a quote'}
          </Btn>
        </a>
      </div>
    </div>
  );
};

// Pricing detail (full)
const PricingDetail = () => (
  <section style={{ padding: '88px 64px', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
      {TIERS.map(t => <FullPricingCard key={t.name} t={t} />)}
    </div>
    <p style={{ fontSize: 13, color: PG_MUTED, marginTop: 28, textAlign: 'center', maxWidth: 720, marginInline: 'auto', lineHeight: 1.55 }}>
      All three tiers include all 14 modules, OneDrive saving, QR sign-in, Safety Walk and custom-branded PDF reports. Infrastructure is included in the monthly retainer. AI-assisted features are usage-based and billed separately at cost. Customisation and bespoke development available across all tiers — pricing on request. Australian-hosted, SafeWork Vic compliant.
    </p>
  </section>
);

// Pricing FAQ
const PricingFAQ = () => {
  const Q = [
    { q: 'What kinds of problems can you build solutions for?', a: 'Any construction system problem — safety, QA, logistics, reporting, integrations. If your site has a problem the 14 base modules don’t cover, our engineers meet with you, scope the solution and typically deliver within 4–6 weeks. Customisation is available across all tiers — pricing on request. Enterprise clients get a continuous bespoke roadmap with a dedicated delivery engineer. Fast-tracked delivery available — talk to our team.' },
    { q: 'How does the pricing work?', a: 'Both the Fitout / Small Commercial and Project tiers use a setup fee + monthly retainer model. The setup fee covers platform configuration, all 14 modules, and go-live support — paid upfront. The monthly retainer covers all hosting and infrastructure for the duration of your project. You stop the retainer when the site is closed out. Enterprise is custom-priced per engagement. AI-assisted features are usage-based and billed separately at cost. Fast-tracked setup available — talk to our team.' },
    { q: 'Do you charge per worker?', a: 'No per-seat fees. Fitout / Small Commercial supports up to 50 active users per site. The Project tier has no user limit. AI-assisted features are usage-based and billed separately at cost — usage may increase with higher worker volumes, but there is no per-seat charge.' },
    { q: 'What happens to my data if we leave?', a: 'You own it. Every report saves to your OneDrive in your folder structure as it\u2019s generated, so leaving is a non-event \u2014 you keep the files. We also export a full archive on request.' },
    { q: 'Do you integrate with our ERP / Procore?', a: 'Standard integrations with Procore, OneDrive, Microsoft 365, Xero and HR systems are available on Portfolio and Enterprise. Bespoke integrations (your ERP, your QA platform) are quoted per engagement.' },
    { q: 'How long does setup take?', a: 'Platform configuration typically takes 6–8 weeks from engagement to go-live across both the Fitout / Small Commercial and Project tiers. Enterprise programs run a structured rollout scoped per engagement. Bespoke features and customisation are typically delivered within 4–6 weeks of scoping. Fast-tracked delivery can be discussed — talk to our team.' },
  ];
  return (
    <section style={{ padding: '96px 64px', borderTop: '1px solid ' + PG_BORDER }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <Eyebrow>Common questions</Eyebrow>
        <h2 style={{ fontSize: 44, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16 }}>
          Pricing, in plain English.
        </h2>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {Q.map(item => (
            <div key={item.q} style={{ padding: '24px 26px', background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 12 }}>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: '#fff', letterSpacing: '-.005em' }}>{item.q}</h3>
              <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6, marginTop: 10 }}>{item.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Contact form (Formspree)
const FORMSPREE_ID = 'xwvyabbg'; // ← user replaces after creating Formspree form

const ContactForm = () => {
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const onSubmit = async (e) => {
    e.preventDefault();
    setBusy(true); setError(null);
    const fd = new FormData(e.currentTarget);
    try {
      const r = await fetch('https://formspree.io/f/' + FORMSPREE_ID, {
        method: 'POST', body: fd, headers: { Accept: 'application/json' },
      });
      if (r.ok) setSent(true);
      else setError('Submission failed. Please email info@safeguardapp.au.');
    } catch (err) {
      setError('Network error. Please email info@safeguardapp.au.');
    } finally { setBusy(false); }
  };

  if (sent) {
    return (
      <div style={{
        padding: '48px 40px', background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 16,
        textAlign: 'center',
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 999, margin: '0 auto 20px',
          background: 'linear-gradient(135deg, hsl(142 71% 50%), hsl(142 71% 36%))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 0 18px rgba(34,197,94,.3)',
        }}>
          <Icon name="check" size={26} style={{ color: '#fff' }} strokeWidth={3} />
        </div>
        <h3 style={{ fontSize: 28, fontWeight: 900, color: '#fff', letterSpacing: '-.02em' }}>Thanks — we'll be in touch.</h3>
        <p style={{ fontSize: 15, color: 'hsl(215 14% 65%)', marginTop: 12, maxWidth: 480, marginInline: 'auto', lineHeight: 1.55 }}>
          We read every enquiry. Expect a reply within one business day from one of our delivery engineers — not a sales rep.
        </p>
      </div>
    );
  }

  const inputStyle = {
    width: '100%', padding: '13px 14px',
    background: 'hsl(216 28% 9%)', border: '1px solid ' + PG_BORDER, borderRadius: 10,
    color: '#fff', fontSize: 14.5, fontFamily: 'inherit',
    outline: 'none', transition: 'border-color .15s',
  };
  const labelStyle = {
    display: 'block', fontSize: 11, fontWeight: 700, letterSpacing: '.14em',
    textTransform: 'uppercase', color: PG_MUTED, marginBottom: 8,
  };

  return (
    <form onSubmit={onSubmit} style={{
      padding: '40px 40px', background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 16,
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
    }}>
      <div>
        <label style={labelStyle}>Name</label>
        <input required name="name" placeholder="Jess Thornton" style={inputStyle} />
      </div>
      <div>
        <label style={labelStyle}>Company</label>
        <input required name="company" placeholder="Mont Milan Construction" style={inputStyle} />
      </div>
      <div>
        <label style={labelStyle}>Work email</label>
        <input required type="email" name="email" placeholder="jess@yourco.com.au" style={inputStyle} />
      </div>
      <div>
        <label style={labelStyle}>Phone</label>
        <input name="phone" placeholder="+61 4xx xxx xxx" style={inputStyle} />
      </div>
      <div style={{ gridColumn: 'span 2' }}>
        <label style={labelStyle}>What kind of work?</label>
        <select required name="type" style={inputStyle}>
          <option value="">Select one…</option>
          <option>Fitout / Small Commercial</option>
          <option>Mid-tier head contractor</option>
          <option>Tier-1 head contractor</option>
          <option>Developer / principal</option>
          <option>Other</option>
        </select>
      </div>
      <div style={{ gridColumn: 'span 2' }}>
        <label style={labelStyle}>Tell us about your project — and what problem you need solved</label>
        <textarea required name="message" rows={5} placeholder="e.g. A 14-month tower in Cremorne. We need safety and logistics covered, plus a custom QA hold-point register tied to our inspection plan and a logistics booking system for crane and hoist." style={{ ...inputStyle, resize: 'vertical', minHeight: 120 }} />
      </div>
      {error && (
        <div style={{ gridColumn: 'span 2', padding: '12px 14px', background: 'hsl(0 70% 50% / .12)', border: '1px solid hsl(0 70% 50% / .35)', borderRadius: 10, color: 'hsl(0 70% 75%)', fontSize: 13 }}>
          {error}
        </div>
      )}
      <div style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, gap: 16, flexWrap: 'wrap' }}>
        <p style={{ fontSize: 12, color: PG_MUTED, maxWidth: 420, lineHeight: 1.5 }}>
          We'll only use this to reply to your enquiry. Read our <a href="#" style={{ color: 'hsl(25 95% 70%)' }}>privacy policy</a>.
        </p>
        <button type="submit" disabled={busy} style={{
          padding: '14px 22px', fontSize: 15, fontWeight: 700, letterSpacing: '-.005em',
          background: busy ? 'hsl(216 22% 18%)' : 'linear-gradient(135deg, hsl(25 95% 55%), hsl(20 88% 44%))',
          color: '#fff', border: 0, borderRadius: 10, cursor: busy ? 'wait' : 'pointer',
          boxShadow: busy ? 'none' : '0 0 20px rgba(234,88,12,.30)',
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          {busy ? 'Sending…' : 'Send enquiry'}
          {!busy && <Icon name="arrow-right" size={16} />}
        </button>
      </div>
    </form>
  );
};

// Features grid (compact, used on home)
const FeaturesGrid = () => (
  <section id="features" style={{ padding: '96px 64px', background: 'hsl(216 32% 5%)', borderTop: '1px solid ' + PG_BORDER }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 40 }}>
      <div>
        <Eyebrow>14 modules. Every construction problem covered.</Eyebrow>
        <h2 style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-.03em', color: '#fff', lineHeight: 1.05, marginTop: 16, maxWidth: 760 }}>
          Safety. QA. Logistics. And anything else your site needs.
        </h2>
      </div>
      <p style={{ fontSize: 14.5, color: PG_MUTED, maxWidth: 360, lineHeight: 1.6 }}>
        14 modules covering safety, QA and logistics — fully configured to your business. And when your site needs something beyond the standard stack, our engineers build it. Whatever the problem, we’ve got it covered.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
      {FEATURES.map(f => (
        <div key={f.name} style={{
          padding: '28px 26px',
          background: PG_CARD, border: '1px solid ' + PG_BORDER, borderRadius: 14,
          minHeight: 200, display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 11,
            background: 'rgba(234,88,12,.10)', border: '1px solid rgba(234,88,12,.22)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name={f.icon} size={20} style={{ color: 'hsl(25 95% 60%)' }} />
          </div>
          <h3 style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-.01em' }}>{f.name}</h3>
          <p style={{ fontSize: 13.5, color: 'hsl(215 14% 65%)', lineHeight: 1.6 }}>{f.body}</p>
        </div>
      ))}
    </div>
  </section>
);

Object.assign(window, {
  PageHero, BespokeProcessSection, CTAStrip,
  CapabilitiesGrid, ScalesSection,
  PricingDetail, PricingFAQ,
  ContactForm, FeaturesGrid,
  PG_BG, PG_CARD, PG_BORDER, PG_MUTED,
});