// site3.jsx — Primeways website · Cost Guide, Area page, Contact, Reviews, Mobile
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES, PHOTOS } = window.PWKit;
  const { Media, Btn, Tag, Ico, Eyebrow, Logo, SiteHeader, SiteFooter, TrustStrip } = window;
  const { Stars, Section, Head, BeforeAfter, ReviewCard, REVIEWS, WIDTH } = window.SITE._shared;
  const { Field } = window.SITE._shared2;

  /* ============================================================
     COST GUIDE — lead magnet landing
     ============================================================ */
  function CostGuide() {
    const benefits = ['Typical price ranges for tarmac, resin & block paving', 'What affects the cost — size, access, drainage & prep', 'Questions to ask before you accept any quote', 'How to spot a job that\'s priced too good to be true'];
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Home' }),
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)' } },
      h('div', { style: { maxWidth: 1180, margin: '0 auto', padding: '56px 56px 64px', display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 56, alignItems: 'center' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 20 } },
          h(Tag, { tone: 'accent' }, h(Ico, { name: 'download', size: 13 }), 'Free Download'),
          h('h1', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 42, lineHeight: 1.02, textTransform: 'uppercase', color: '#fff', textWrap: 'balance' } }, '2026 Driveway Cost Guide'),
          h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.82)', maxWidth: 460 } }, 'Tarmac, resin and block paving options explained — so you can budget with confidence before you call anyone.'),
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 11 } }, benefits.map((b, i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11, fontFamily: C.fontB, fontSize: 14.5, color: '#fff' } }, h(Ico, { name: 'checkC', size: 19, color: C.accent }), b))),
          h('div', { style: { background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.16)', borderRadius: C.radLg, padding: 20, display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 440 } },
            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } }, h(Field, { label: 'Name', value: 'Sarah Mitchell' }), h(Field, { label: 'Phone (optional)', value: '07700 900123' }), h(Field, { label: 'Email', value: 'sarah@email.com', full: true })),
            h(Btn, { variant: 'accent', size: 'lg', iconR: 'download', style: { width: '100%' } }, 'Download Free Guide'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 11.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.45 } }, 'We\'ll also send helpful advice on choosing the right surface for your home. No spam — unsubscribe any time.'))),
        // guide mockup — A4 booklet cover
        h('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', perspective: 1400 } },
          h('div', { style: { position: 'relative', transform: 'rotateY(-8deg) rotateX(1.5deg)', transformStyle: 'preserve-3d' } },
            // page stack behind the cover
            h('div', { style: { position: 'absolute', top: 7, left: 12, right: -9, bottom: -9, background: '#c9c9c9', borderRadius: 7, boxShadow: '28px 34px 64px rgba(0,0,0,0.55)' } }),
            h('div', { style: { position: 'absolute', top: 3, left: 6, right: -4, bottom: -4, background: '#f1f1f1', borderRadius: 7 } }),
            // cover
            h('div', { style: { position: 'relative', width: 320, height: 460, borderRadius: '5px 8px 8px 5px', overflow: 'hidden', background: C.ink900, display: 'flex', flexDirection: 'column' } },
              // cover photo
              h('div', { style: { position: 'relative', height: 180, flexShrink: 0 } },
                h(Media, { surface: 'tarmacAfter', h: 180 }),
                h('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,15,15,0.3) 0%, rgba(15,15,15,0) 38%, rgba(15,15,15,0.9) 100%)' } }),
                h('div', { style: { position: 'absolute', top: 14, left: 16, background: '#fff', borderRadius: 4, padding: '7px 10px 6px', boxShadow: '0 2px 10px rgba(0,0,0,0.35)' } }, h(Logo, { height: 15 }))),
              h('div', { style: { height: 4, background: C.accent, flexShrink: 0 } }),
              // title block
              h('div', { style: { flex: 1, padding: '15px 20px 0', display: 'flex', flexDirection: 'column', gap: 9, minHeight: 0 } },
                h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.accent } }, 'The 2026 Homeowner\'s Guide'),
                h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: 27, lineHeight: 0.98, letterSpacing: '-0.01em', textTransform: 'uppercase', color: '#fff' } }, 'Driveway Costs Explained'),
                h('div', { style: { fontFamily: C.fontB, fontSize: 11, lineHeight: 1.5, color: 'rgba(255,255,255,0.72)' } }, 'Real prices for tarmac, resin & block paving — and how to compare quotes with confidence.'),
                h('div', { style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 2 } },
                  [['tarmac', 'Tarmac', 'from £45/m²'], ['resin', 'Resin Bound', 'from £70/m²'], ['block', 'Block Paving', 'from £85/m²']].map((r) =>
                    h('div', { key: r[1], style: { display: 'flex', alignItems: 'center', gap: 9, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.11)', borderRadius: 5, padding: '5px 9px' } },
                      h('div', { style: { width: 20, height: 20, borderRadius: 3, flexShrink: 0, ...SURFACES[r[0]].css } }),
                      h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#fff' } }, r[1]),
                      h('span', { style: { marginLeft: 'auto', fontFamily: C.fontH, fontWeight: 800, fontSize: 10.5, color: C.accent } }, r[2]))))),
              // cover footer strip
              h('div', { style: { padding: '10px 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 } },
                h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 9, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.88)' } }, 'PRIMEWAYS.CO.UK'),
                h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 8.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' } }, 'Est. 1999 · Tamworth')),
              ),
            // free pdf tag
            h('div', { style: { position: 'absolute', top: -14, right: -20, background: C.accent, color: C.ink900, fontFamily: C.fontH, fontWeight: 800, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '8px 12px', borderRadius: 4, transform: 'rotate(4deg)', boxShadow: '0 6px 18px rgba(0,0,0,0.4)' } }, 'Free PDF · 24 Pages'))))),
      h(SiteFooter, null));
  }

  /* ============================================================
     AREA LANDING PAGE (Lichfield)
     ============================================================ */
  function Area() {
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Home' }),
      h('section', { style: { position: 'relative' } },
        h(Media, { photo: 'houseGrey', h: 340 }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'var(--overlay-brand)' } }),
        h('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', padding: '0 56px' } },
          h('div', { style: { maxWidth: 1180, margin: '0 auto', width: '100%' } },
            h('div', { style: { maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 16 } },
              h(Eyebrow, { onDark: true }, 'Areas We Cover · Staffordshire'),
              h('h1', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: 48, lineHeight: 1, textTransform: 'uppercase', color: '#fff' } }, 'Driveways & Resin in Lichfield'),
              h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16.5, color: 'rgba(255,255,255,0.85)', maxWidth: 500 } }, 'Your local Lichfield driveway specialists — tarmac, resin, block paving and patios, with free quotes and real local references.'),
              h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { size: 'lg', variant: 'accent', iconR: 'arrow' }, 'Free Lichfield Quote'), h(Btn, { size: 'lg', variant: 'outlineW', icon: 'phone' }, 'Call Now')))))),
      h(TrustStrip, null),
      h(Section, { py: 52 },
        h('div', { style: { display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 } },
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h(Head, { eyebrow: 'Local Specialists', title: 'Surfacing in & around Lichfield', maxW: 520 }),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, lineHeight: 1.65, color: C.ink600 } }, 'We\'ve laid driveways and patios right across Lichfield — from the city centre to Boley Park, Streethay and the surrounding villages. As a local, family-run team we know the area, turn up when we say we will, and leave every site clean and tidy.'),
            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } }, ['City Centre', 'Boley Park', 'Streethay', 'Burntwood', 'Whittington', 'Shenstone'].map((a) => h('div', { key: a, style: { display: 'flex', alignItems: 'center', gap: 8, background: C.ink50, borderRadius: C.radSm, padding: '10px 12px', fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.ink700 } }, h(Ico, { name: 'pin', size: 15, color: C.blue }), a)))),
          // coverage map placeholder
          h('div', { style: { borderRadius: C.radLg, overflow: 'hidden', border: `1px solid ${C.border}`, position: 'relative', minHeight: 300, background: C.ink100, backgroundImage: `${window.PWKit.svgUrl("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20h40M20 0v40' stroke='%23d5d8dd' stroke-width='1'/></svg>")}` } },
            h('div', { style: { position: 'absolute', top: '42%', left: '46%', width: 120, height: 120, borderRadius: 99, background: 'rgba(31,79,163,0.14)', border: `2px dashed ${C.blue}`, transform: 'translate(-50%,-50%)' } }),
            h('div', { style: { position: 'absolute', top: '42%', left: '46%', transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 } }, h(Ico, { name: 'pin', size: 30, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase', color: C.ink900, background: '#fff', padding: '3px 8px', borderRadius: 4, boxShadow: C.shadowSm } }, 'Lichfield')),
            h('div', { style: { position: 'absolute', bottom: 14, left: 14, fontFamily: C.fontH, fontWeight: 700, fontSize: 12, textTransform: 'uppercase', color: C.ink500, background: 'rgba(255,255,255,0.9)', padding: '6px 10px', borderRadius: 4 } }, '15-mile coverage from Tamworth')))),
      h(Section, { bg: C.ink50, py: 52 },
        h(Head, { eyebrow: 'Recent Lichfield Work', title: 'Local projects' }),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 } },
          [['resin', 'Resin Drive', 'Boley Park'], ['block', 'Block Paving', 'Streethay'], ['tarmac', 'Tarmac & Kerb', 'City Centre']].map((p, i) =>
            h('div', { key: i, style: { borderRadius: C.radLg, overflow: 'hidden', border: `1px solid ${C.border}`, boxShadow: C.shadowSm, background: '#fff' } },
              h(BeforeAfter, { height: 170, pos: 50, after: p[0], radius: 0 }),
              h('div', { style: { padding: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, textTransform: 'uppercase', color: C.ink900 } }, p[1]), h('span', { style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 12.5, color: C.ink500 } }, h(Ico, { name: 'pin', size: 13, color: C.blue }), p[2])))))),
      h(SiteFooter, null));
  }

  /* ============================================================
     CONTACT
     ============================================================ */
  function Contact() {
    const details = [['phone', 'Call us', '07730 769031'], ['mail', 'Email', 'info@primeways.co.uk'], ['pin', 'Address', '94 Briar, Tamworth, B77 4DZ'], ['clock', 'Opening hours', 'Mon–Fri 7am–8pm · Sat 7am–4pm · Sun closed']];
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Contact' }),
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '44px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto' } }, h(Head, { onDark: true, eyebrow: 'Get In Touch', title: 'Let\'s talk about your project', intro: 'Call, email or send a few photos — we\'ll get straight back to you with a free, no-obligation quote.', maxW: 640 }))),
      h(Section, { py: 48 },
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 44 } },
          // details
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
            details.map((d, i) => h('div', { key: i, style: { display: 'flex', gap: 14, alignItems: 'center', background: C.ink50, borderRadius: C.radLg, padding: '16px 18px' } },
              h('div', { style: { width: 46, height: 46, borderRadius: 11, background: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, h(Ico, { name: d[0], size: 22, color: '#fff' })),
              h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink500 } }, d[1]), h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: d[0] === 'phone' ? 20 : 15.5, color: C.ink900, marginTop: 2 } }, d[2])))),
            h('div', { style: { display: 'flex', gap: 12, marginTop: 4 } }, h(Btn, { variant: 'primary', icon: 'spark' }, 'Open Visualiser'), h(Btn, { variant: 'outline', icon: 'calendar' }, 'Book a Site Visit')),
            h('div', { style: { display: 'flex', gap: 16, padding: '14px 16px', background: C.blue50, borderRadius: C.radLg, fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } },
              h(Ico, { name: 'shield', size: 18, color: C.blue }), h('span', null, 'Primeways Home Improvements Ltd · Company No. 13216512 · VAT GB 390 7082 86 · Fully insured'))),
          // form + map
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 24, boxShadow: C.shadowSm } },
              h('h3', { style: { margin: '0 0 16px', fontFamily: C.fontH, fontWeight: 800, fontSize: 20, textTransform: 'uppercase', color: C.ink900 } }, 'Request a free quote'),
              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
                h(Field, { label: 'Name', ph: 'Your name', required: true }), h(Field, { label: 'Phone', ph: '07…', required: true }),
                h(Field, { label: 'Email', ph: 'you@email.com', full: true }), h(Field, { label: 'Postcode', ph: 'B77…' }), h(Field, { label: 'Service', value: 'Tarmac driveway' }),
                h(Field, { label: 'Message', ph: 'Tell us about your project…', full: true, multiline: true })),
              h('div', { style: { display: 'flex', gap: 12, marginTop: 14 } }, h(Btn, { variant: 'accent', size: 'lg', iconR: 'send' }, 'Send Enquiry'), h(Btn, { variant: 'outline', icon: 'upload' }, 'Add Photos'))),
            h('div', { style: { borderRadius: C.radLg, overflow: 'hidden', border: `1px solid ${C.border}`, position: 'relative', height: 150, background: C.ink100, backgroundImage: `${window.PWKit.svgUrl("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20h40M20 0v40' stroke='%23d5d8dd' stroke-width='1'/></svg>")}` } },
              h('div', { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 } }, h(Ico, { name: 'pin', size: 28, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12, textTransform: 'uppercase', background: '#fff', padding: '3px 8px', borderRadius: 4, boxShadow: C.shadowSm } }, 'Tamworth, B77 4DZ')))))),
      h(SiteFooter, null));
  }

  /* ============================================================
     REVIEWS / TRUST PAGE
     ============================================================ */
  function Reviews() {
    const why = [['shield', 'Fully insured & VAT registered', 'A properly run, accountable business — not a man with a van.'], ['users', 'Family-run since 1999', 'The same team from quote to clean-up. We take it personally.'], ['pound', 'Honest, itemised quotes', 'You see exactly what you\'re paying for. No surprises.'], ['truck', 'Tidy, reliable & on time', 'We protect your property and leave the site spotless.']];
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Reviews' }),
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '48px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 } },
          h(Head, { onDark: true, eyebrow: 'Reviews', title: 'What our customers say', intro: 'Don\'t just take our word for it — here\'s what homeowners and businesses across the Midlands think.', maxW: 560 }),
          h('div', { style: { display: 'flex', gap: 16 } }, [['google', '4.9', '128 reviews', 'Google'], ['checkC', '9.8', 'Checkatrade'], ['fb', '5.0', '64 reviews', 'Facebook']].map((b, i) =>
            h('div', { key: i, style: { background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: C.radLg, padding: '16px 20px', textAlign: 'center', minWidth: 120 } },
              h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 } }, h(Ico, { name: b[0], size: 18, color: C.accent }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 28, color: '#fff' } }, b[1])),
              h(Stars, { n: 5, size: 13 }),
              h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginTop: 4 } }, b[3] || b[2]))))),
      ),
      h(Section, { py: 48 },
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } }, [...REVIEWS, ...REVIEWS.slice(0, 3)].map((r, i) => h(ReviewCard, { key: i, r })))),
      h(Section, { bg: C.ink50, py: 52 },
        h(Head, { center: true, eyebrow: 'Why Choose Primeways', title: 'Trades credibility you can count on', maxW: 620 }),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 } }, why.map((w, i) => h('div', { key: i, style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 22, display: 'flex', flexDirection: 'column', gap: 12 } },
          h('div', { style: { width: 46, height: 46, borderRadius: 11, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: w[0], size: 23, color: C.blue })),
          h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15.5, lineHeight: 1.1, textTransform: 'uppercase', color: C.ink900 } }, w[1]),
          h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 13.5, lineHeight: 1.5, color: C.ink500 } }, w[2]))))),
      // proof CTA
      h('section', { style: { background: C.blue600, backgroundImage: 'var(--overlay-brand)', padding: '44px 56px', textAlign: 'center' } },
        h('h2', { style: { margin: '0 0 16px', fontFamily: C.fontH, fontWeight: 800, fontSize: 30, textTransform: 'uppercase', color: '#fff' } }, 'Join hundreds of happy Midlands customers'),
        h('div', { style: { display: 'flex', gap: 12, justifyContent: 'center' } }, h(Btn, { variant: 'accent', size: 'lg', iconR: 'arrow' }, 'Get Your Free Quote'), h(Btn, { variant: 'outlineW', icon: 'image' }, 'See Our Work'))),
      h(SiteFooter, null));
  }

  /* ============================================================
     MOBILE WEBSITE HOME (inside iOS frame)
     ============================================================ */
  function MobileHome() {
    return h('div', { style: { height: '100%', overflow: 'hidden', background: '#fff', fontFamily: C.fontB } },
      // mobile header
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '52px 16px 12px', borderBottom: `1px solid ${C.border}` } },
        h(Logo, { height: 24 }), h('div', { style: { display: 'flex', gap: 10 } }, h('div', { style: { width: 38, height: 38, borderRadius: 9, background: C.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'phone', size: 18, color: C.ink900 })), h('div', { style: { width: 38, height: 38, borderRadius: 9, border: `1px solid ${C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'menu', size: 20, color: C.ink800 })))),
      // hero — real project photo + brand overlay, matching the desktop hero
      h('div', { style: { position: 'relative', overflow: 'hidden' } },
        h('div', { style: { position: 'absolute', inset: 0, backgroundImage: `url("${PHOTOS.houseGarage}")`, backgroundSize: 'cover', backgroundPosition: 'center' } }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'var(--overlay-brand)' } }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.4) 100%)' } }),
        h('div', { style: { position: 'relative', padding: '26px 18px 24px' } },
          h(Eyebrow, { onDark: true }, 'Est. 1999'),
          h('h1', { style: { margin: '12px 0 10px', fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: 30, lineHeight: 0.98, textTransform: 'uppercase', color: '#fff' } }, 'Driveways', h('br'), h('span', { style: { whiteSpace: 'nowrap' } }, 'Built to Last')),
          h('p', { style: { margin: '0 0 16px', fontFamily: C.fontB, fontSize: 13.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)' } }, 'Family-run tarmac, resin & groundwork specialists across Tamworth & the Midlands.'),
          h(Btn, { variant: 'accent', size: 'md', iconR: 'arrow', style: { width: '100%', justifyContent: 'center' } }, 'Request a Free Quote'),
          h('div', { style: { marginTop: 10 } }, h(Btn, { variant: 'outlineW', size: 'md', icon: 'spark', style: { width: '100%', justifyContent: 'center' } }, 'Try the Visualiser')))),
      // trust strip — 2×2 with check icons
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '9px 12px', padding: '13px 18px', borderBottom: `1px solid ${C.border}` } },
        ['Family-run', 'Free quotes', 'Fully insured', 'VAT registered'].map((t) =>
          h('div', { key: t, style: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: C.fontH, fontWeight: 700, fontSize: 11.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: C.ink800, whiteSpace: 'nowrap' } },
            h(Ico, { name: 'checkC', size: 15, color: C.blue }), t))),
      // before/after — same real after photo as the project gallery
      h('div', { style: { padding: 16 } }, h(BeforeAfter, { height: 150, pos: 50, after: 'tarmacAfter' })),
      // services list
      h('div', { style: { padding: '4px 16px 16px' } },
        h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 18, textTransform: 'uppercase', color: C.ink900, marginBottom: 12 } }, 'Our Services'),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } }, [['tarmac', 'Tarmac'], ['resin', 'Resin Bound'], ['block', 'Block Paving'], ['patio', 'Patios']].map((s) =>
          h('div', { key: s[1], style: { position: 'relative', borderRadius: 10, overflow: 'hidden', border: `1px solid ${C.border}` } },
            h(Media, { surface: s[0], h: 84, overlay: true }),
            h('span', { style: { position: 'absolute', left: 10, bottom: 8, zIndex: 2, fontFamily: C.fontH, fontWeight: 800, fontSize: 12.5, textTransform: 'uppercase', color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.5)' } }, s[1]))))));
  }

  window.SITE = Object.assign(window.SITE || {}, { CostGuide, Area, Contact, Reviews, MobileHome });
})();