// site.jsx — Primeways website (Part 1) · shared sections + Home / Services / Service detail
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES } = window.PWKit;
  const { Media, Btn, Tag, Ico, Eyebrow, SiteHeader, SiteFooter, TrustStrip } = window;
  const WIDTH = 1280;

  /* ---------- shared bits ---------- */
  function Stars({ n = 5, size = 16 }) {
    return h('span', { style: { display: 'inline-flex', gap: 1 } },
      Array.from({ length: 5 }).map((_, i) => h(Ico, { key: i, name: 'star', size, fill: i < n ? 'currentColor' : 'none', color: i < n ? C.accent : C.ink300 })));
  }
  const Section = ({ bg, children, py = 64, px = 56, style }) =>
    h('section', { style: { background: bg || C.white, padding: `${py}px ${px}px`, ...style } },
      h('div', { style: { maxWidth: 1180, margin: '0 auto' } }, children));
  const Head = ({ eyebrow, title, intro, onDark, center, maxW = 640 }) =>
    h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12, alignItems: center ? 'center' : 'flex-start', textAlign: center ? 'center' : 'left', maxWidth: maxW, marginInline: center ? 'auto' : undefined, marginBottom: 36 } },
      eyebrow && h(Eyebrow, { onDark }, eyebrow),
      h('h2', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 38, lineHeight: 1.04, letterSpacing: '-0.01em', textTransform: 'uppercase', color: onDark ? '#fff' : C.ink900, textWrap: 'balance' } }, title),
      intro && h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 17, lineHeight: 1.6, color: onDark ? 'rgba(255,255,255,0.78)' : C.ink500, textWrap: 'pretty' } }, intro));

  // Before/after diagonal wipe — uses canvas-generated driveway scene images
  function BeforeAfter({ height = 360, pos = 56, after = 'tarmac', radius = 10, label = true, shadow = true }) {
    const gen = typeof window.generateDrivewayImage === 'function' ? window.generateDrivewayImage : null;
    const afterSrc = gen ? gen(after) : null;
    const oldSrc = gen ? gen('old') : null;
    const imgStyle = { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block', pointerEvents: 'none' };
    const seam = h('div', { style: { position: 'absolute', top: 0, bottom: 0, left: `${pos - 4}%`, width: 4, background: C.accent, transform: 'skewX(-5deg)', boxShadow: '0 0 18px rgba(0,0,0,0.4)' } });
    const handle = h('div', { style: { position: 'absolute', top: '50%', left: `${pos - 4}%`, transform: 'translate(-50%,-50%)', width: 44, height: 44, borderRadius: 99, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: C.shadowMd } },
      h(Ico, { name: 'move', size: 20, color: C.blue }));
    const beforeLabel = label && h('span', { style: { position: 'absolute', top: 14, left: 14, fontFamily: C.fontH, fontWeight: 800, fontSize: 12, letterSpacing: '0.1em', color: '#fff', background: 'rgba(15,15,15,0.6)', padding: '5px 11px', borderRadius: 4 } }, 'BEFORE');
    const afterLabel = label && h('span', { style: { position: 'absolute', top: 14, right: 14, fontFamily: C.fontH, fontWeight: 800, fontSize: 12, letterSpacing: '0.1em', color: C.ink900, background: C.accent, padding: '5px 11px', borderRadius: 4 } }, 'AFTER');
    if (afterSrc && oldSrc) {
      return h('div', { style: { position: 'relative', height, borderRadius: radius, overflow: 'hidden', boxShadow: shadow ? C.shadowMd : 'none', background: '#ccc' } },
        h('img', { src: afterSrc, style: imgStyle, draggable: false, alt: '' }),
        h('div', { style: { position: 'absolute', inset: 0, clipPath: `polygon(0 0,${pos}% 0,${pos - 8}% 100%,0 100%)` } },
          h('img', { src: oldSrc, style: imgStyle, draggable: false, alt: '' })),
        seam, handle, beforeLabel, afterLabel);
    }
    // CSS fallback
    return h('div', { style: { position: 'relative', height, borderRadius: radius, overflow: 'hidden', boxShadow: shadow ? C.shadowMd : 'none' } },
      h('div', { style: { position: 'absolute', inset: 0, ...SURFACES[after].css } }),
      h('div', { style: { position: 'absolute', inset: 0, clipPath: `polygon(0 0,${pos}% 0,${pos - 8}% 100%,0 100%)`, ...SURFACES.old.css } }),
      seam, handle, beforeLabel, afterLabel);
  }

  const SERVICES = [
    ['tarmac', 'Tarmac Driveways', 'Hard-wearing, cost-effective and a clean finish — ideal for driveways and car parks.', 'Most popular'],
    ['block', 'Block Paving', 'Brindle and charcoal blocks laid to last, with crisp edging and pattern detail.'],
    ['resin', 'Resin Bound', 'Smooth, permeable golden gravel — modern kerb appeal that drains beautifully.', 'Premium'],
    ['patio', 'Patios', 'Porcelain and natural stone patios built level, square and ready to enjoy.'],
    ['groundworks', 'Groundworks', 'Excavation, foundations, drainage and sub-bases done right from the ground up.'],
    ['gravel', 'Gravel Driveways', 'Loose aggregate with proper edging and membrane — affordable and quick.'],
    ['concrete', 'Concrete Surfaces', 'Power-floated and patterned concrete for drives, paths and hardstanding.'],
    ['tarmac', 'Commercial Surfacing', 'Car parks, yards and access roads surfaced to commercial standards.', 'Commercial'],
    ['gravel', 'Aggregate Sales', 'Type 1, MOT, decorative gravels and resin aggregates — supplied and delivered.'],
  ];
  function ServiceTile({ s }) {
    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, overflow: 'hidden', boxShadow: C.shadowSm, display: 'flex', flexDirection: 'column' } },
      h(Media, { surface: s[0], h: 158, overlay: 'bottom', caption: s[1], badge: s[3] }),
      h('div', { style: { padding: '16px 18px 18px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 } },
        h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 14, lineHeight: 1.5, color: C.ink500, flex: 1 } }, s[2]),
        h('div', { style: { display: 'flex', gap: 8 } },
          h(Btn, { size: 'sm', variant: 'primary', iconR: 'arrow' }, 'View Service'),
          h(Btn, { size: 'sm', variant: 'outline' }, 'Quote'))));
  }

  function Timeline({ onDark }) {
    const steps = [['msg', 'Enquiry', 'Call, form or visualiser — we capture it instantly.'], ['pin', 'Site Visit', 'We measure up and talk through options.'], ['file', 'Free Quote', 'A clear, itemised quote — no pressure.'], ['truck', 'Work Starts', 'Prep, base and surface, on your agreed date.'], ['checkC', 'Finished', 'A driveway built to last, left clean and tidy.']];
    return h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 0, position: 'relative' } },
      h('div', { style: { position: 'absolute', top: 27, left: '10%', right: '10%', height: 3, background: onDark ? 'rgba(255,255,255,0.2)' : C.ink200 } }),
      steps.map(([ic, t, d], i) => h('div', { key: i, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12, position: 'relative', padding: '0 12px' } },
        h('div', { style: { width: 56, height: 56, borderRadius: 99, background: i < 1 ? C.accent : C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `4px solid ${onDark ? C.ink900 : '#fff'}`, boxShadow: C.shadowSm } },
          h(Ico, { name: ic, size: 24, color: i < 1 ? C.ink900 : '#fff' })),
        h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, textTransform: 'uppercase', color: onDark ? '#fff' : C.ink900 } }, `${i + 1}. ${t}`),
        h('div', { style: { fontFamily: C.fontB, fontSize: 12.5, lineHeight: 1.45, color: onDark ? 'rgba(255,255,255,0.7)' : C.ink500 } }, d))));
  }

  const REVIEWS = [
    ['google', 'Sarah M.', 'Wilnecote, Tamworth', 'New tarmac drive and dropped kerb. Turned up when they said, tidied up every day, and the finish is spot on. Couldn\'t be happier.', 'Tarmac driveway'],
    ['checkC', 'David & Karen P.', 'Lichfield', 'Resin-bound front and a porcelain patio out back. Professional from the quote to the clean-up. Neighbours keep asking who did it.', 'Resin + patio'],
    ['fb', 'Mark T.', 'Sutton Coldfield', 'Had three quotes — Primeways explained everything and weren\'t the cheapest, but you can see where the money went. Proper job.', 'Block paving'],
  ];
  function ReviewCard({ r }) {
    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 22, boxShadow: C.shadowSm, display: 'flex', flexDirection: 'column', gap: 14 } },
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, h(Stars, { n: 5 }),
        h('div', { style: { width: 28, height: 28, borderRadius: 6, background: C.ink100, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: r[0], size: 16, color: C.ink600 }))),
      h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 14.5, lineHeight: 1.6, color: C.ink700 } }, `“${r[3]}”`),
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${C.border}`, paddingTop: 12 } },
        h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13.5, color: C.ink900 } }, r[1]), h('div', { style: { fontSize: 12, color: C.ink500 } }, r[2])),
        h(Tag, { tone: 'brand' }, r[4])));
  }

  /* ============================================================
     HOMEPAGE
     ============================================================ */
  function Home() {
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Home' }),
      // HERO
      h('section', { style: { position: 'relative' } },
        h(Media, { photo: 'houseGarage', h: 680 }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'var(--overlay-brand)' } }),
        h('div', { style: { position: 'absolute', inset: 0, padding: '0 56px', display: 'flex', alignItems: 'center' } },
          h('div', { style: { maxWidth: 1180, margin: '0 auto', width: '100%' } },
            h('div', { style: { maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 22 } },
              h(Eyebrow, { onDark: true }, 'Tamworth & the Midlands · Est. 1999'),
              h('h1', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: 56, lineHeight: 0.97, letterSpacing: '-0.015em', textTransform: 'uppercase', color: '#fff', textWrap: 'balance' } }, 'Driveways, Tarmac & Groundworks Built to Last'),
              h('p', { style: { margin: 0, maxWidth: 500, fontFamily: C.fontB, fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)' } }, 'A family-run team with over 20 years\' experience surfacing homes and commercial sites across the Midlands. Hard-wearing finishes, done properly — and left clean and tidy.'),
              h('div', { style: { display: 'flex', gap: 13, flexWrap: 'wrap' } },
                h(Btn, { size: 'lg', variant: 'accent', iconR: 'arrow' }, 'Request a Free Quote'),
                h(Btn, { size: 'lg', variant: 'outlineW', icon: 'spark' }, 'Try the Driveway Visualiser')),
              h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, paddingTop: 4, paddingBottom: 32 } },
                h(Stars, { n: 5, size: 18 }),
                h('span', { style: { color: 'rgba(255,255,255,0.85)', fontFamily: C.fontB, fontSize: 14 } }, 'Rated 5★ by homeowners across the Midlands'),
                h('span', { style: { width: 1, height: 22, background: 'rgba(255,255,255,0.2)' } }),
                h('a', { style: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: C.fontH, fontWeight: 800, fontSize: 17, color: '#fff', textDecoration: 'none' } }, h(Ico, { name: 'phone', size: 17, color: C.accent }), '07730 769031')))))),

      h(TrustStrip, null),
      // SERVICES
      h(Section, { bg: C.white, py: 60 },
        h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 } },
          h(Head, { eyebrow: 'Our Services', title: 'Surfacing for homes & businesses', intro: 'From a single domestic driveway to a full commercial car park — one team, done right.', maxW: 560 }),
          h(Btn, { variant: 'outline', iconR: 'arrow' }, 'All Services')),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } },
          SERVICES.slice(0, 6).map((s, i) => h(ServiceTile, { key: i, s })))),
      // VISUALISER PROMO
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '60px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' } },
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
            h(Tag, { tone: 'accent' }, h(Ico, { name: 'spark', size: 13 }), 'AI Driveway Visualiser'),
            h('h2', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 38, lineHeight: 1.04, textTransform: 'uppercase', color: '#fff' } }, 'See your new driveway before we lay it'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.8)' } }, 'Upload a photo of your current drive, pick a surface and finish, and preview the transformation in seconds. Like what you see? Send it straight to our team for a free quote.'),
            h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { size: 'lg', variant: 'accent', icon: 'spark' }, 'Try the Visualiser'))),
          h('div', { style: { background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 14, padding: 14 } },
            h('div', { style: { position: 'relative', height: 280, borderRadius: 8, overflow: 'hidden' } },
              h('img', { src: window.generateDrivewayImage('resin'), alt: 'Resin-bound driveway preview', draggable: false, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' } }),
              h('span', { style: { position: 'absolute', top: 14, right: 14, fontFamily: C.fontH, fontWeight: 800, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.ink900, background: C.accent, padding: '5px 11px', borderRadius: 4 } }, 'Resin Bound')),
            h('div', { style: { display: 'flex', gap: 8, marginTop: 12 } }, ['Tarmac', 'Block', 'Resin', 'Gravel', 'Patio'].map((t, i) =>
              h('span', { key: t, style: { flex: 1, textAlign: 'center', fontFamily: C.fontH, fontWeight: 700, fontSize: 11, padding: '7px 0', borderRadius: 6, textTransform: 'uppercase', color: i === 2 ? C.ink900 : 'rgba(255,255,255,0.8)', background: i === 2 ? C.accent : 'rgba(255,255,255,0.08)' } }, t)))))),
      // HOW IT WORKS
      h(Section, { bg: C.ink50, py: 60 },
        h(Head, { center: true, eyebrow: 'How It Works', title: 'From first call to finished drive', intro: 'A simple, transparent process — you always know what happens next.', maxW: 600 }),
        h(Timeline, null)),
      // FEATURED PROJECTS
      h(Section, { bg: C.white, py: 60 },
        h(Head, { eyebrow: 'Recent Projects', title: 'Transformations across the Midlands' }),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } },
          [['tarmac', 'Tarmac Driveway', 'Wilnecote, Tamworth', '90m² · 3 days'], ['block', 'Block Paving', 'Lichfield', '60m² · herringbone'], ['resin', 'Resin Bound Drive', 'Sutton Coldfield', '70m² · permeable']].map((p, i) =>
            h('div', { key: i, style: { borderRadius: C.radLg, overflow: 'hidden', border: `1px solid ${C.border}`, boxShadow: C.shadowSm } },
              h(Media, { surface: p[0], h: 200 }),
              h('div', { style: { padding: 16, display: 'flex', flexDirection: 'column', gap: 6 } },
                h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 16, textTransform: 'uppercase', color: C.ink900 } }, p[1]), h(Tag, { tone: 'neutral' }, p[3])),
                h('div', { style: { display: 'flex', alignItems: 'center', gap: 6, fontFamily: C.fontB, fontSize: 13, color: C.ink500 } }, h(Ico, { name: 'pin', size: 14, color: C.blue }), p[2]),
                h('a', { style: { marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: C.blue } }, 'Want something similar?', h(Ico, { name: 'arrow', size: 15 }))))))),
      // REVIEWS
      h(Section, { bg: C.ink50, py: 60 },
        h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 30 } },
          h(Head, { eyebrow: 'Why Choose Us', title: 'Trusted by homeowners & businesses' }),
          h('div', { style: { display: 'flex', gap: 24, alignItems: 'center' } },
            [['google', '4.9', 'Google'], ['checkC', '9.8', 'Checkatrade'], ['fb', '5.0', 'Facebook']].map((b, i) =>
              h('div', { key: i, style: { textAlign: 'center' } },
                h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 26, color: C.ink900 } }, b[1]),
                h('div', { style: { display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: C.ink500, fontFamily: C.fontH, fontWeight: 700, textTransform: 'uppercase' } }, h(Ico, { name: b[0], size: 13, color: C.blue }), b[2]))))),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } }, REVIEWS.map((r, i) => h(ReviewCard, { key: i, r })))),
      // DOMESTIC / COMMERCIAL SPLIT
      h('section', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr' } },
        [['houseGarage', 'Domestic', 'Driveways, patios & paths', 'Beautiful, hard-wearing surfaces that lift your home\'s kerb appeal and last for years.'],
         ['office', 'Commercial', 'Car parks, yards & access roads', 'Reliable surfacing for businesses — minimal disruption, finished to spec and on schedule.']].map((p, i) =>
          h('div', { key: i, style: { position: 'relative', minHeight: 320 } },
            h(Media, { photo: p[0], h: 360, grayscale: false }),
            h('div', { style: { position: 'absolute', inset: 0, background: i ? 'var(--overlay-brand)' : 'var(--overlay-tarmac)' } }),
            h('div', { style: { position: 'absolute', inset: 0, padding: '40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 12 } },
              h(Tag, { tone: 'accent' }, p[1]),
              h('h3', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 28, textTransform: 'uppercase', color: '#fff' } }, p[2]),
              h('p', { style: { margin: 0, maxWidth: 360, fontFamily: C.fontB, fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)' } }, p[3]),
              h('div', null, h(Btn, { variant: 'accent', size: 'sm', iconR: 'arrow' }, i ? 'Commercial Enquiries' : 'Domestic Quotes')))))),
      // QUOTE CTA BAND
      h('section', { style: { background: C.blue600, backgroundImage: 'var(--overlay-brand)', padding: '54px 56px' } },
        h('div', { style: { maxWidth: 1000, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' } },
          h('div', null,
            h('h2', { style: { margin: '0 0 8px', fontFamily: C.fontH, fontWeight: 800, fontSize: 34, textTransform: 'uppercase', color: '#fff' } }, 'Ready for a free, no-obligation quote?'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, color: 'rgba(255,255,255,0.85)' } }, 'Send a few photos and we\'ll come back to you fast. Most quotes within 48 hours.')),
          h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { size: 'lg', variant: 'accent', iconR: 'arrow' }, 'Get My Quote'), h(Btn, { size: 'lg', variant: 'outlineW', icon: 'phone' }, 'Call Now')))),
      h(SiteFooter, null));
  }

  /* ============================================================
     SERVICES PAGE
     ============================================================ */
  function Services() {
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Services' }),
      h('section', { style: { position: 'relative' } },
        h(Media, { photo: 'houseModern', h: 420 }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'var(--overlay-brand)' } }),
        h('div', { style: { position: 'absolute', inset: 0, padding: '0 56px', display: 'flex', alignItems: 'center' } },
          h('div', { style: { maxWidth: 1180, margin: '0 auto', width: '100%' } },
            h(Head, { onDark: true, eyebrow: 'Our Services', title: 'Every surface, one trusted team', intro: 'Domestic and commercial surfacing across Tamworth and the Midlands — explore what we do and request a quote in a couple of clicks.', maxW: 680 })))),
      h(Section, { py: 56 },
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } }, SERVICES.map((s, i) => h(ServiceTile, { key: i, s })))),
      h('section', { style: { background: C.ink50, padding: '48px 56px' } },
        h('div', { style: { maxWidth: 900, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center' } },
          h(Ico, { name: 'spark', size: 36, color: C.blue }),
          h('h2', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 30, textTransform: 'uppercase', color: C.ink900 } }, 'Not sure which surface is right?'),
          h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, color: C.ink500, maxWidth: 560 } }, 'Take our 60-second quiz or upload a photo to the visualiser — we\'ll recommend the best fit for your space and budget.'),
          h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { variant: 'primary', iconR: 'arrow' }, 'Find Your Perfect Driveway'), h(Btn, { variant: 'outline', icon: 'spark' }, 'Open Visualiser')))),
      h(SiteFooter, null));
  }

  /* ============================================================
     SERVICE DETAIL (Tarmac template)
     ============================================================ */
  function ServiceDetail() {
    const faqs = [['How long does a tarmac driveway take?', 'Most domestic drives are completed in 1–3 days, depending on size, excavation and drainage.'], ['How soon can I park on it?', 'We advise keeping vehicles off for 2–3 days while the surface fully hardens — longer in hot weather.'], ['Do you remove the old surface?', 'Yes. Excavation, waste removal and a properly compacted sub-base are all included in your quote.'], ['Is it suitable for commercial use?', 'Absolutely — tarmac is ideal for car parks, yards and access roads with heavy traffic.']];
    const benefits = [['pound', 'Cost-effective', 'Excellent value per m² versus block or resin.'], ['shield', 'Hard-wearing', 'Stands up to daily traffic and the British weather.'], ['truck', 'Quick to lay', 'Most drives finished in a few days.'], ['checkC', 'Clean finish', 'Smooth, seamless and low-maintenance.']];
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Services' }),
      // hero
      h('section', { style: { position: 'relative' } },
        h(Media, { photo: 'houseGarage', h: 380 }),
        h('div', { style: { position: 'absolute', inset: 0, background: 'var(--overlay-brand)' } }),
        h('div', { style: { position: 'absolute', inset: 0, padding: '0 56px', display: 'flex', alignItems: 'center' } },
          h('div', { style: { maxWidth: 1180, margin: '0 auto', width: '100%' } },
            h('div', { style: { maxWidth: 620, display: 'flex', flexDirection: 'column', gap: 18 } },
              h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' } }, 'Services', h(Ico, { name: 'chevR', size: 13 }), h('span', { style: { color: C.accent } }, 'Tarmac Driveways')),
              h('h1', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: 46, lineHeight: 1, textTransform: 'uppercase', color: '#fff' } }, 'Professional Tarmac Driveways in Tamworth & the Midlands'),
              h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { size: 'lg', variant: 'accent', iconR: 'arrow' }, 'Get a Tarmac Quote'), h(Btn, { size: 'lg', variant: 'outlineW', icon: 'phone' }, 'Call Now')))))),
      // intro + benefits
      h(Section, { py: 56 },
        h('div', { style: { display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48 } },
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            h(Head, { eyebrow: 'Best for', title: 'Durable surfaces, smartly priced', maxW: 520 }),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, lineHeight: 1.65, color: C.ink600 } }, 'Tarmac is the go-to for hard-wearing, great-value surfacing. It\'s ideal for driveways, car parks, access roads and large hardstanding areas where you need a clean, durable finish without the cost of block or resin.'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, lineHeight: 1.65, color: C.ink600 } }, 'We excavate to the right depth, lay and compact a proper sub-base, then finish with quality hot-rolled tarmac and crisp edging. The result lasts for years and shrugs off daily use.')),
          h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
            benefits.map((b, i) => h('div', { key: i, style: { background: C.ink50, borderRadius: C.radLg, padding: 18, display: 'flex', flexDirection: 'column', gap: 9 } },
              h('div', { style: { width: 40, height: 40, borderRadius: 10, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: b[0], size: 20, color: C.blue })),
              h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 15, textTransform: 'uppercase', color: C.ink900 } }, b[1]),
              h('div', { style: { fontFamily: C.fontB, fontSize: 13, lineHeight: 1.45, color: C.ink500 } }, b[2])))))),
      // before/after + process
      h(Section, { bg: C.ink50, py: 56 },
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' } },
          h('div', null, h(Head, { eyebrow: 'Recent Work', title: 'See the difference', maxW: 420 }),
            h('div', { style: { position: 'relative', height: 300, borderRadius: 10, overflow: 'hidden', boxShadow: 'var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12))' } },
              h('img', { src: window.generateDrivewayImage('tarmac'), alt: 'Finished tarmac driveway', draggable: false, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' } }),
              h('span', { style: { position: 'absolute', top: 14, left: 14, fontFamily: C.fontH, fontWeight: 800, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: C.ink900, background: C.accent, padding: '5px 11px', borderRadius: 4 } }, 'Tarmac'))),
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } }, h(Head, { eyebrow: 'Our Process', title: 'How we lay your drive', maxW: 420 }),
            ['Excavate & remove the existing surface', 'Lay and compact a Type 1 MOT sub-base', 'Apply binder course and edge restraints', 'Lay and roll the tarmac wearing course', 'Clean down — your drive is ready to use'].map((s, i) =>
              h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 14, background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radMd, padding: '12px 16px' } },
                h('div', { style: { width: 30, height: 30, borderRadius: 99, background: C.blue, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: C.fontH, fontWeight: 800, fontSize: 14, flexShrink: 0 } }, i + 1),
                h('span', { style: { fontFamily: C.fontB, fontSize: 14.5, color: C.ink700 } }, s))))),
      ),
      // FAQ + CTA
      h(Section, { py: 56 },
        h('div', { style: { display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 } },
          h('div', null, h(Head, { eyebrow: 'FAQs', title: 'Tarmac, answered', maxW: 420 }),
            h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, faqs.map((f, i) =>
              h('div', { key: i, style: { border: `1px solid ${C.border}`, borderRadius: C.radMd, padding: '16px 18px' } },
                h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 } },
                  h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 15, color: C.ink900 } }, f[0]), h(Ico, { name: i === 0 ? 'chevD' : 'chevR', size: 18, color: C.ink400 })),
                i === 0 && h('p', { style: { margin: '10px 0 0', fontFamily: C.fontB, fontSize: 14, lineHeight: 1.55, color: C.ink500 } }, f[1]))))),
          h('div', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', borderRadius: C.radLg, padding: 28, display: 'flex', flexDirection: 'column', gap: 16, alignSelf: 'start' } },
            h(Stars, { n: 5, size: 18 }),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 15.5, lineHeight: 1.6, color: '#fff' } }, '“New tarmac drive and dropped kerb — turned up on time, tidied up every day, finish is spot on.”'),
            h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: 'rgba(255,255,255,0.8)' } }, 'Sarah M. · Wilnecote, Tamworth'),
            h('div', { style: { height: 1, background: 'rgba(255,255,255,0.15)' } }),
            h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 18, textTransform: 'uppercase', color: '#fff' } }, 'Upload photos, get a quote'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 13.5, color: 'rgba(255,255,255,0.78)' } }, 'Snap your current drive and our team will price it up — usually within 48 hours.'),
            h(Btn, { variant: 'accent', icon: 'upload' }, 'Upload & Get Quote')))),
      h(SiteFooter, null));
  }

  window.SITE = Object.assign(window.SITE || {}, { Home, Services, ServiceDetail, _shared: { Stars, Section, Head, BeforeAfter, ServiceTile, Timeline, ReviewCard, REVIEWS, SERVICES, WIDTH } });
})();