// site2.jsx — Primeways website · Visualiser, Build-a-Quote, Quiz, Gallery
(function () {
  const R = React, h = R.createElement;
  const { C, SURFACES } = window.PWKit;
  const { Media, Btn, Tag, Ico, Eyebrow, SiteHeader, SiteFooter } = window;
  const { Stars, Section, Head, BeforeAfter, WIDTH } = window.SITE._shared;

  // styled read-only field showing example data (reads as a filled form)
  function Field({ label, value, ph, full, multiline, required }) {
    return h('label', { style: { display: 'flex', flexDirection: 'column', gap: 6, gridColumn: full ? '1 / -1' : undefined } },
      h('span', { style: { fontFamily: C.fontH, fontWeight: 600, fontSize: 11.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink700 } }, label, required && h('span', { style: { color: C.danger, marginLeft: 3 } }, '*')),
      h('div', { style: { fontFamily: C.fontB, fontSize: 14, color: value ? C.ink800 : C.ink400, background: '#fff', border: `1px solid ${value ? C.blue : C.ink300}`, borderRadius: C.radSm, padding: multiline ? '11px 13px' : '11px 13px', minHeight: multiline ? 64 : undefined } }, value || ph));
  }
  const Pill = ({ children, on }) => h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, letterSpacing: '0.04em', textTransform: 'uppercase', padding: '8px 14px', borderRadius: 99, cursor: 'pointer', color: on ? '#fff' : C.ink700, background: on ? C.blue : '#fff', border: `1.5px solid ${on ? C.blue : C.ink200}` } }, children);

  /* ============================================================
     AI DRIVEWAY VISUALISER
     ============================================================ */
  function Visualiser() {
    const steps = ['Upload photo', 'Choose surface', 'Choose finish', 'Your details', 'Preview', 'Submit'];
    const cur = 4;
    return h('div', { style: { background: C.ink50, width: WIDTH } },
      h(SiteHeader, { active: 'Visualiser' }),
      // step rail
      h('div', { style: { background: '#fff', borderBottom: `1px solid ${C.border}`, padding: '18px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 8 } },
          steps.map((s, i) => h(R.Fragment, { key: s },
            h('div', { style: { display: 'flex', alignItems: 'center', gap: 9 } },
              h('div', { style: { width: 28, height: 28, borderRadius: 99, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: C.fontH, fontWeight: 800, fontSize: 13, background: i < cur ? C.blue : i === cur ? C.accent : C.ink150, color: i <= cur ? (i === cur ? C.ink900 : '#fff') : C.ink500 } }, i < cur ? h(Ico, { name: 'check', size: 14 }) : i + 1),
              h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, textTransform: 'uppercase', color: i === cur ? C.ink900 : C.ink500 } }, s)),
            i < steps.length - 1 && h('div', { style: { flex: 1, height: 2, background: i < cur ? C.blue : C.ink150 } })))),
      ),
      h('div', { style: { maxWidth: 1180, margin: '0 auto', padding: '36px 56px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 28 } },
        // preview
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
          h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 16, boxShadow: C.shadowSm } },
            h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 } },
              h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } }, h(Ico, { name: 'spark', size: 18, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 16, textTransform: 'uppercase', color: C.ink900 } }, 'Your Driveway · Concept Preview')),
              h(Tag, { tone: 'accent' }, h(Ico, { name: 'spark', size: 12 }), 'AI Generated')),
            h(BeforeAfter, { height: 340, pos: 48, after: 'resin' }),
            h('p', { style: { margin: '12px 2px 0', fontFamily: C.fontB, fontSize: 13, color: C.ink500, display: 'flex', alignItems: 'center', gap: 8 } }, h(Ico, { name: 'move', size: 15, color: C.blue }), 'Drag the handle to compare your current surface with the new finish.')),
          // surface + finish pickers
          h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 18, display: 'flex', flexDirection: 'column', gap: 16 } },
            h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink700, marginBottom: 10 } }, 'Surface type'),
              h('div', { style: { display: 'flex', gap: 10 } }, ['tarmac', 'block', 'resin', 'gravel', 'patio', 'concrete'].map((k) =>
                h('div', { key: k, style: { textAlign: 'center', cursor: 'pointer' } },
                  h('div', { style: { width: 78, height: 54, borderRadius: 8, ...SURFACES[k].css, border: `3px solid ${k === 'resin' ? C.blue : 'transparent'}`, boxShadow: k === 'resin' ? `0 0 0 2px ${C.blue50}` : C.shadowSm } }),
                  h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 10.5, textTransform: 'uppercase', marginTop: 5, color: k === 'resin' ? C.blue : C.ink600 } }, SURFACES[k].label))))),
            h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink700, marginBottom: 10 } }, 'Finish'),
              h('div', { style: { display: 'flex', gap: 8 } }, ['Golden Quartz', 'Autumn Brown', 'Silver Grey', 'Charcoal'].map((f, i) => h(Pill, { key: f, on: i === 2 }, f)))))),
        // submit panel
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 22, display: 'flex', flexDirection: 'column', gap: 14 } },
            h('h3', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 20, textTransform: 'uppercase', color: C.ink900 } }, 'Send this design to Primeways'),
            h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
              h(Field, { label: 'Name', value: 'James Wilson', required: true }),
              h(Field, { label: 'Phone', value: '07911 123456', required: true }),
              h(Field, { label: 'Email', value: 'j.wilson@email.com', full: true }),
              h(Field, { label: 'Postcode', value: 'B79 7DN' }),
              h(Field, { label: 'Approx. size', value: '2 cars' }),
              h(Field, { label: 'Current surface', value: 'Old tarmac' }),
              h(Field, { label: 'Timeline', value: 'Within 1 month' }),
              h(Field, { label: 'Notes', value: 'Drainage issue near garage', ph: 'Anything else?', full: true, multiline: true })),
            h('label', { style: { display: 'flex', alignItems: 'center', gap: 10, fontFamily: C.fontB, fontSize: 12.5, color: C.ink600 } },
              h('span', { style: { width: 18, height: 18, borderRadius: 4, background: C.blue, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'check', size: 13, color: '#fff' })), 'I agree to be contacted about my quote.'),
            h(Btn, { variant: 'accent', size: 'lg', iconR: 'send', style: { width: '100%' } }, 'Submit Quote Request')),
          // CRM integration note
          h('div', { style: { background: C.blue50, border: `1px solid ${C.blue100}`, borderRadius: C.radLg, padding: '16px 18px', display: 'flex', gap: 12 } },
            h(Ico, { name: 'route', size: 22, color: C.blue }),
            h('div', null, h('div', { style: { fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase', color: C.blue600 } }, 'Goes straight into the system'),
              h('p', { style: { margin: '4px 0 0', fontFamily: C.fontB, fontSize: 13, lineHeight: 1.5, color: C.ink600 } }, 'Your photos, design and details land in the Primeways system as a new lead — so nothing gets missed and you hear back fast.'))))),
      h(SiteFooter, null));
  }

  /* ============================================================
     VISUALISER CONFIRMATION
     ============================================================ */
  function VisualiserDone() {
    return h('div', { style: { background: C.ink50, width: 720, minHeight: 760, display: 'flex', flexDirection: 'column' } },
      h(SiteHeader, { active: 'Visualiser' }),
      h('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48 } },
        h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, padding: 40, maxWidth: 520, textAlign: 'center', boxShadow: C.shadowMd, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 } },
          h('div', { style: { width: 72, height: 72, borderRadius: 99, background: C.success100, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'checkC', size: 40, color: C.success })),
          h('h2', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 28, textTransform: 'uppercase', color: C.ink900 } }, 'Design request received'),
          h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, lineHeight: 1.6, color: C.ink600 } }, 'Thanks, we\'ve received your driveway design request. A member of the Primeways team will review your images and get back to you shortly.'),
          h('div', { style: { width: '100%', background: C.blue50, borderRadius: C.radMd, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' } },
            h(Ico, { name: 'checkC', size: 18, color: C.blue }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: C.blue600 } }, 'Your design request has been sent to the Primeways team')),
          h('div', { style: { display: 'flex', gap: 12 } }, h(Btn, { variant: 'primary', icon: 'image' }, 'View Our Gallery'), h(Btn, { variant: 'outline', icon: 'phone' }, 'Call Us')))));
  }

  /* ============================================================
     BUILD YOUR DRIVEWAY QUOTE — multi-step (step 1 shown)
     ============================================================ */
  function QuoteBuilder() {
    const opts = [['tarmac', 'Tarmac'], ['block', 'Block Paving'], ['resin', 'Resin Bound'], ['patio', 'Patio'], ['groundworks', 'Groundworks'], ['tarmac', 'Commercial'], ['concrete', 'Concrete'], ['gravel', 'Not sure yet']];
    return h('div', { style: { background: C.ink900, width: 980, minHeight: 720, backgroundImage: 'var(--overlay-brand)' } },
      h('div', { style: { maxWidth: 820, margin: '0 auto', padding: '40px 40px 56px', display: 'flex', flexDirection: 'column', gap: 24 } },
        h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, h(window.Logo, { white: true, height: 26 }), h('span', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13, color: 'rgba(255,255,255,0.7)' } }, 'Step 1 of 6')),
        // progress
        h('div', { style: { display: 'flex', gap: 6 } }, Array.from({ length: 6 }).map((_, i) => h('div', { key: i, style: { flex: 1, height: 5, borderRadius: 99, background: i < 1 ? C.accent : 'rgba(255,255,255,0.18)' } }))),
        h('div', { style: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 } },
          h(Eyebrow, { onDark: true, style: { justifyContent: 'center' } }, 'Build Your Quote'),
          h('h1', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 36, textTransform: 'uppercase', color: '#fff' } }, 'What are you interested in?'),
          h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 16, color: 'rgba(255,255,255,0.75)' } }, 'Pick the surface closest to what you have in mind — you can change it later.')),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, marginTop: 6 } },
          opts.map((o, i) => h('div', { key: i, style: { borderRadius: C.radLg, overflow: 'hidden', background: '#fff', border: `3px solid ${i === 2 ? C.accent : 'transparent'}`, cursor: 'pointer', boxShadow: C.shadowMd } },
            h('div', { style: { height: 96, position: 'relative' } },
              h(Media, { surface: o[0], h: 96 }),
              i === 2 && h('div', { style: { position: 'absolute', top: 8, right: 8, width: 24, height: 24, borderRadius: 99, background: C.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: 'check', size: 15, color: C.ink900 }))),
            h('div', { style: { padding: '11px 12px', fontFamily: C.fontH, fontWeight: 800, fontSize: 14, textTransform: 'uppercase', color: C.ink900, textAlign: 'center' } }, o[1])))),
        h('div', { style: { display: 'flex', justifyContent: 'space-between', marginTop: 14 } },
          h(Btn, { variant: 'outlineW', icon: 'chevL' }, 'Back'),
          h(Btn, { variant: 'accent', size: 'lg', iconR: 'arrow' }, 'Continue'))));
  }

  /* ============================================================
     FIND YOUR PERFECT DRIVEWAY — quiz result
     ============================================================ */
  function Quiz() {
    return h('div', { style: { background: C.ink50, width: WIDTH } },
      h(SiteHeader, { active: 'Services' }),
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '40px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto' } }, h(Head, { onDark: true, eyebrow: 'Find Your Perfect Driveway', title: 'Your result', intro: 'Based on your six answers, here\'s the surface we\'d recommend for your home.', maxW: 640 }))),
      h('div', { style: { padding: '40px 56px 56px', display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 872, margin: '0 auto', boxSizing: 'border-box' } },
        h('div', { style: { display: 'flex', gap: 6 } }, Array.from({ length: 6 }).map((_, i) => h('div', { key: i, style: { flex: 1, height: 5, borderRadius: 99, background: C.blue } }))),
        h('div', { style: { background: '#fff', border: `1px solid ${C.border}`, borderRadius: C.radLg, overflow: 'hidden', boxShadow: C.shadowMd } },
          h(BeforeAfter, { height: 200, pos: 50, after: 'resin', radius: 0, label: false }),
          h('div', { style: { padding: 30, textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' } },
            h(Tag, { tone: 'accent' }, h(Ico, { name: 'target', size: 13 }), 'Your match'),
            h('h2', { style: { margin: 0, fontFamily: C.fontH, fontWeight: 800, fontSize: 30, textTransform: 'uppercase', color: C.ink900 } }, 'Resin-bound is your best fit'),
            h('p', { style: { margin: 0, fontFamily: C.fontB, fontSize: 15.5, lineHeight: 1.6, color: C.ink600, maxWidth: 520 } }, 'Based on your answers — low maintenance, a smooth modern look and good drainage — resin-bound (or tarmac as a value option) would suit your space well.'),
            h('div', { style: { display: 'flex', gap: 12, width: '100%', maxWidth: 440, marginTop: 6 } },
              ['resin', 'tarmac'].map((k, i) => h('div', { key: k, style: { flex: 1, borderRadius: C.radMd, overflow: 'hidden', border: `1px solid ${C.border}` } },
                h('div', { style: { height: 70, ...SURFACES[k].css } }),
                h('div', { style: { padding: '8px 0', fontFamily: C.fontH, fontWeight: 800, fontSize: 13, textTransform: 'uppercase', color: C.ink900 } }, i === 0 ? 'Recommended' : 'Value option')))),
            h('div', { style: { display: 'flex', gap: 12, marginTop: 10 } }, h(Btn, { variant: 'primary', size: 'lg', iconR: 'arrow' }, 'Send to Primeways for a Free Quote'), h(Btn, { variant: 'outline' }, 'Retake Quiz'))))),
      h(SiteFooter, null));
  }

  /* ============================================================
     PROJECT GALLERY
     ============================================================ */
  function Gallery() {
    const filters = ['All', 'Tarmac', 'Block Paving', 'Resin Bound', 'Patios', 'Commercial', 'Before & After', 'Tamworth', 'Large Drives'];
    const projects = [['tarmacAfter', 'Tarmac Driveway', 'Wilnecote', '90m²'], ['blockAfter', 'Block Paving', 'Lichfield', '60m²'], ['resin', 'Resin Bound', 'Sutton Coldfield', '70m²'], ['patioAfter', 'Porcelain Patio', 'Tamworth', '40m²'], ['gravelAfter', 'Gravel Driveway', 'Atherstone', '110m²']];
    return h('div', { style: { background: '#fff', width: WIDTH } },
      h(SiteHeader, { active: 'Gallery' }),
      h('section', { style: { background: C.ink900, backgroundImage: 'var(--overlay-brand)', padding: '48px 56px' } },
        h('div', { style: { maxWidth: 1180, margin: '0 auto' } }, h(Head, { onDark: true, eyebrow: 'Our Work', title: 'Project gallery & inspiration', intro: 'Real driveways, patios and commercial jobs across the Midlands. Filter by surface, location or size — then ask us for something similar.', maxW: 680 }))),
      h(Section, { py: 44 },
        h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 26 } }, filters.map((f, i) => h(Pill, { key: f, on: i === 0 }, f))),
        h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 } },
          projects.map((p, i) => h('div', { key: i, style: { borderRadius: C.radLg, overflow: 'hidden', border: `1px solid ${C.border}`, boxShadow: C.shadowSm } },
            h(BeforeAfter, { height: 180, pos: 50, after: p[0], radius: 0 }),
            h('div', { style: { padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8 } },
              h('div', { style: { 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(Tag, { tone: 'neutral' }, p[3])),
              h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                h('span', { 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: { display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: C.fontH, fontWeight: 700, fontSize: 11.5, textTransform: 'uppercase', color: C.blue } }, 'Similar', h(Ico, { name: 'arrow', size: 14 })))))))),
      h(SiteFooter, null));
  }

  window.SITE = Object.assign(window.SITE || {}, { Visualiser, VisualiserDone, QuoteBuilder, Quiz, Gallery, _shared2: { Field, Pill } });
})();