// site5.jsx — Service showcase screens: Tarmac, Groundworks, Concrete Surfaces
(function () {
  const R = React, h = R.createElement;
  const { C } = window.PWKit;
  const { Btn, Tag, Ico, Eyebrow, SiteHeader, SiteFooter } = window;
  const { Section, Head, WIDTH } = window.SITE._shared;

  const SHOWCASES = [
    {
      afterKey: 'tarmac',
      eyebrow: 'Most Popular',
      badge: 'Most popular',
      title: 'Tarmac Driveways',
      intro: 'Hard-wearing, cost-effective and a clean finish — ideal for driveways, car parks and access roads across the Midlands.',
      benefits: [
        ['pound',  'Cost-effective',  'Excellent value per m² — typically from £45/m². Most competitive of all surfaces.'],
        ['shield', 'Hard-wearing',    'Stands up to daily traffic, frost and the British weather for years.'],
        ['truck',  'Quick to lay',    'Most domestic drives completed in 1–3 days with minimal disruption.'],
        ['checkC', 'Clean finish',    'Smooth, seamless and low-maintenance — looks sharp from day one.'],
      ],
    },
    {
      afterKey: 'groundworks',
      eyebrow: 'Foundation First',
      badge: 'Foundation work',
      title: 'Groundworks',
      intro: 'Every great surface starts below ground. Excavation, sub-base, drainage and edging — done once, done right.',
      benefits: [
        ['shovel', 'Full excavation',    'We remove and take away the old surface — no skips for you to arrange.'],
        ['layers', 'Type 1 sub-base',    'MOT sub-base compacted to spec — the foundation that makes surfaces last.'],
        ['rain',   'Drainage planning',  'SUDS-compliant drainage routes designed into the job from day one.'],
        ['checkC', 'All included',       'Groundworks are built into every quote — no hidden extras on the day.'],
      ],
    },
    {
      afterKey: 'concrete',
      eyebrow: 'Built to Last',
      badge: 'Commercial grade',
      title: 'Concrete Surfaces',
      intro: 'Power-floated and patterned concrete for driveways, paths, hardstanding and commercial yards — seriously durable.',
      benefits: [
        ['shield', 'Extremely durable',  'Concrete lasts 25–30 years with minimal maintenance compared to tarmac.'],
        ['home',   'Versatile finish',   'Smooth, brushed, exposed aggregate or pattern-imprinted — your choice.'],
        ['truck',  'Commercial grade',   'Ideal for heavy vehicles, loading yards and high-traffic areas.'],
        ['pound',  'Long-term value',    'Higher upfront cost, significantly lower lifetime maintenance spend.'],
      ],
    },
  ];

  /* ── Individual service card ── */
  function ServiceCard({ data, flip }) {
    const { afterKey, eyebrow, badge, title, intro, benefits } = data;
    const gridCols = flip ? '1fr 1.15fr' : '1.15fr 1fr';
    const slider = h(window.BeforeAfterImage, { beforeKey: 'old', afterKey, height: 310, radius: 8 });
    const content = h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16, justifyContent: 'center' } },
      h(Tag, { tone: 'accent' }, badge),
      h('div', null,
        h(Eyebrow, null, eyebrow),
        h('h2', { style: { margin: '10px 0 0', fontFamily: C.fontH, fontWeight: 800, fontSize: 30, lineHeight: 1.04, textTransform: 'uppercase', color: C.ink900 } }, title),
      ),
      h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 15, lineHeight: 1.65, color: C.ink600 } }, intro),
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } },
        benefits.map(([ic, bt, bd], i) =>
          h('div', { key: i, style: { background: C.ink50, borderRadius: C.radMd, padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 7 } },
            h('div', { style: { width: 32, height: 32, borderRadius: 8, background: C.blue50, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
              h(Ico, { name: ic, size: 17, color: C.blue })),
            h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 12.5, textTransform: 'uppercase', color: C.ink900 } }, bt),
            h('div', { style: { fontFamily: C.fontB, fontSize: 12, lineHeight: 1.45, color: C.ink500 } }, bd)
          )
        )
      ),
      h('div', { style: { display: 'flex', gap: 10 } },
        h(Btn, { variant: 'primary', iconR: 'arrow' }, 'Request a Quote'),
        h(Btn, { variant: 'outline' }, 'Learn More')
      )
    );

    return h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, overflow: 'hidden', boxShadow: C.shadowSm } },
      h('div', { style: { display: 'grid', gridTemplateColumns: gridCols, gap: 0 } },
        flip
          ? [h('div', { key: 'c', style: { padding: '28px 28px 28px 32px' } }, content), h('div', { key: 's', style: { padding: 20 } }, slider)]
          : [h('div', { key: 's', style: { padding: 20 } }, slider), h('div', { key: 'c', style: { padding: '28px 32px 28px 28px' } }, content)]
      )
    );
  }

  /* ══════════════════════════════════════════
     SERVICE SHOWCASES PAGE
     ══════════════════════════════════════════ */
  function ServiceShowcases() {
    return h('div', { style: { background: C.ink50, width: WIDTH } },
      h(SiteHeader, { active: 'Services' }),

      // Hero
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '52px 56px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' } },
          h('div', null,
            h(Head, { onDark: true, eyebrow: 'Key Services', title: 'See the transformation', intro: 'Every driveway starts with an idea. Drag the divider on any card to compare the before and after — then request a free, no-obligation quote.', maxW: 580 }),
            h('div', { style: { display: 'flex', gap: 12 } },
              h(Btn, { variant: 'accent', size: 'lg', iconR: 'arrow' }, 'Request a Free Quote'),
              h(Btn, { variant: 'outlineW', icon: 'phone' }, 'Call 07730 769031')
            )
          ),
          // Surface swatch strip
          h('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
            [['tarmac','Tarmac','Most popular'],['groundworks','Groundworks','Foundation work'],['concrete','Concrete','Commercial grade']].map(([key, label, sub]) =>
              h('div', { key, style: { display: 'flex', alignItems: 'center', gap: 14, background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: C.radMd, padding: '10px 14px' } },
                h('div', { style: { width: 52, height: 36, borderRadius: 6, flexShrink: 0, background: { tarmac: '#1d1d1d', groundworks: '#7a5a3a', concrete: '#c8c7c2' }[key], border: '1px solid rgba(255,255,255,0.15)' } }),
                h('div', null,
                  h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 14, textTransform: 'uppercase', color: '#fff' } }, label),
                  h('div', { style: { fontFamily: C.fontB, fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 2 } }, sub)
                ),
                h('div', { style: { marginLeft: 'auto' } }, h(Ico, { name: 'chevR', size: 16, color: 'rgba(255,255,255,0.5)' }))
              )
            )
          )
        )
      ),

      // Service cards
      h(Section, { py: 44 },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 20 } },
          SHOWCASES.map((data, i) => h(ServiceCard, { key: i, data, flip: i % 2 === 1 }))
        )
      ),

      // CTA band
      h('section', { style: { background: C.blue600, backgroundImage: 'var(--overlay-brand)', padding: '50px 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: 30, textTransform: 'uppercase', color: '#fff' } }, 'Ready for a free, no-obligation quote?'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 15.5, color: 'rgba(255,255,255,0.85)' } }, 'Send a few photos and we\'ll come back to you 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)
    );
  }

  window.SITE = Object.assign(window.SITE || {}, { ServiceShowcases });
})();