// kit.jsx — Primeways "Smart System" concept · shared kit
// Surfaces (CSS material textures), real-photo registry, icon set, brand
// helpers and shared chrome (site header/footer, CRM shell, app bars).
// Exports everything to window so the screen files can compose it.
(function () {
  const R = React;
  const h = R.createElement;

  /* ============================================================
     TOKENS (JS shortcuts to the DS CSS variables)
     ============================================================ */
  const C = {
    blue: 'var(--blue-500)', blueDeep: 'var(--blue-900)', blue600: 'var(--blue-600)',
    blue400: 'var(--blue-400)', blue50: 'var(--blue-50)', blue100: 'var(--blue-100)',
    ink900: 'var(--ink-900)', ink800: 'var(--ink-800)', ink700: 'var(--ink-700)',
    ink600: 'var(--ink-600)', ink500: 'var(--ink-500)', ink400: 'var(--ink-400)',
    ink300: 'var(--ink-300)', ink200: 'var(--ink-200)', ink150: 'var(--ink-150)',
    ink100: 'var(--ink-100)', ink50: 'var(--ink-50)', white: '#fff',
    accent: 'var(--accent)', accent600: 'var(--hi-vis-600)', accent100: 'var(--hi-vis-100)',
    success: 'var(--success-600)', success100: 'var(--success-100)',
    warning: 'var(--warning-500)', warning100: 'var(--warning-100)',
    danger: 'var(--danger-600)', danger100: 'var(--danger-100)',
    fontH: 'var(--font-heading)', fontB: 'var(--font-body)',
    border: 'var(--border)', shadowSm: 'var(--shadow-sm)', shadowMd: 'var(--shadow-md)',
    shadowLg: 'var(--shadow-lg)', radSm: 'var(--radius-sm)', radMd: 'var(--radius-md)',
    radLg: 'var(--radius-lg)',
  };

  /* ============================================================
     SVG SURFACE TEXTURES — material stand-ins for driveway surfaces
     ============================================================ */
  const svgUrl = (s) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`;
  function mulberry(seed) { let a = seed; return () => { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }

  const noise = (freq, oct, op) =>
    `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='${freq}' numOctaves='${oct}' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(#n)' opacity='${op}'/></svg>`;

  // pebble field for resin / gravel
  function pebbles(seed, count, rMin, rMax, palette, bg, size) {
    const rnd = mulberry(seed); let circ = '';
    for (let i = 0; i < count; i++) {
      const x = (rnd() * size).toFixed(1), y = (rnd() * size).toFixed(1);
      const r = (rMin + rnd() * (rMax - rMin)).toFixed(1);
      const col = palette[(rnd() * palette.length) | 0];
      circ += `<circle cx='${x}' cy='${y}' r='${r}' fill='${col}'/>`;
    }
    return `<svg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}'><rect width='${size}' height='${size}' fill='${bg}'/>${circ}</svg>`;
  }

  // basket-weave pavers (reads as block paving)
  function pavers(seed, cell, grout, palette) {
    const rnd = mulberry(seed); const S = cell, D = S * 2;
    const pick = () => palette[(rnd() * palette.length) | 0];
    const g = 2.2;
    const Hpair = (ox, oy) =>
      `<rect x='${ox + g}' y='${oy + g}' width='${S - 2 * g}' height='${(S - 3 * g) / 2}' rx='1' fill='${pick()}'/>` +
      `<rect x='${ox + g}' y='${oy + g + (S - 3 * g) / 2 + g}' width='${S - 2 * g}' height='${(S - 3 * g) / 2}' rx='1' fill='${pick()}'/>`;
    const Vpair = (ox, oy) =>
      `<rect x='${ox + g}' y='${oy + g}' width='${(S - 3 * g) / 2}' height='${S - 2 * g}' rx='1' fill='${pick()}'/>` +
      `<rect x='${ox + g + (S - 3 * g) / 2 + g}' y='${oy + g}' width='${(S - 3 * g) / 2}' height='${S - 2 * g}' rx='1' fill='${pick()}'/>`;
    return `<svg xmlns='http://www.w3.org/2000/svg' width='${D}' height='${D}'><rect width='${D}' height='${D}' fill='${grout}'/>${Hpair(0, 0)}${Vpair(S, 0)}${Vpair(0, S)}${Hpair(S, S)}</svg>`;
  }

  // porcelain slabs
  function slabs(grout, palette) {
    const w = 220, sh = 110;
    return `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${sh * 2}'><rect width='${w}' height='${sh * 2}' fill='${grout}'/>` +
      `<rect x='2' y='2' width='${w / 2 - 3}' height='${sh - 3}' fill='${palette[0]}'/>` +
      `<rect x='${w / 2 + 1}' y='2' width='${w / 2 - 3}' height='${sh - 3}' fill='${palette[1]}'/>` +
      `<rect x='${w / 4 + 1}' y='${sh + 1}' width='${w / 2 - 3}' height='${sh - 3}' fill='${palette[2]}'/>` +
      `<rect x='2' y='${sh + 1}' width='${w / 4 - 3}' height='${sh - 3}' fill='${palette[1]}'/>` +
      `<rect x='${(3 * w) / 4 + 1}' y='${sh + 1}' width='${w / 4 - 3}' height='${sh - 3}' fill='${palette[0]}'/></svg>`;
  }

  // weathered/cracked surface for "before"
  function cracked() {
    return `<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><rect width='240' height='240' fill='%23a8a59d'/>` +
      `<filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter>` +
      `<rect width='240' height='240' filter='url(%23m)' opacity='0.25'/>` +
      `<path d='M20 0 L60 70 L40 140 L90 200 L70 240' stroke='%23555' stroke-width='2.2' fill='none' opacity='0.6'/>` +
      `<path d='M150 0 L130 50 L180 110 L150 180 L200 240' stroke='%23555' stroke-width='1.8' fill='none' opacity='0.5'/>` +
      `<path d='M60 70 L150 90 M90 200 L160 175' stroke='%23555' stroke-width='1.4' fill='none' opacity='0.45'/>` +
      `<ellipse cx='40' cy='150' rx='16' ry='8' fill='%235b6b3a' opacity='0.55'/><ellipse cx='200' cy='60' rx='12' ry='7' fill='%235b6b3a' opacity='0.5'/></svg>`;
  }

  const SURFACES = {
    tarmac: {
      label: 'Tarmac', sub: 'Smooth asphalt',
      css: { backgroundColor: '#1d1d1d', backgroundImage: `${svgUrl(noise(0.85, 4, 0.55))}, linear-gradient(135deg,#2a2a2a,#161616)`, backgroundSize: '180px 180px, cover' },
    },
    block: {
      label: 'Block Paving', sub: 'Brindle / charcoal',
      css: { backgroundColor: '#2c2c2c', backgroundImage: svgUrl(pavers(7, 46, '#222', ['#41423f', '#4a4a48', '#37362f', '#514c40', '#3e3d3a', '#5a5346'])), backgroundSize: '92px 92px' },
    },
    resin: {
      label: 'Resin Bound', sub: 'Golden gravel',
      css: { backgroundColor: '#b89a6b', backgroundImage: svgUrl(pebbles(11, 520, 1.4, 3.1, ['#d9c39a', '#c2a06a', '#a07f4f', '#e6d6ab', '#8a6f47', '#cdb583'], '#b59669', 200)), backgroundSize: '150px 150px' },
    },
    gravel: {
      label: 'Gravel', sub: 'Loose aggregate',
      css: { backgroundColor: '#8c857a', backgroundImage: svgUrl(pebbles(23, 300, 2.4, 5.6, ['#b7afa0', '#9a9082', '#7d7468', '#c8c0b0', '#6f675c', '#a89e8c'], '#857d72', 200)), backgroundSize: '160px 160px' },
    },
    concrete: {
      label: 'Concrete', sub: 'Power-floated',
      css: { backgroundColor: '#c7c6c1', backgroundImage: `${svgUrl(noise(0.012, 2, 0.16))}, linear-gradient(120deg,#d0cfca,#bdbcb6)`, backgroundSize: '180px 180px, cover' },
    },
    patio: {
      label: 'Patio', sub: 'Porcelain slabs',
      css: { backgroundColor: '#b7b1a4', backgroundImage: svgUrl(slabs('#9c9587', ['#cfc8ba', '#c5bdac', '#d6cfc1'])), backgroundSize: '180px 180px' },
    },
    old: {
      label: 'Existing surface', sub: 'Cracked & worn',
      css: { backgroundColor: '#a8a59d', backgroundImage: svgUrl(cracked()), backgroundSize: '240px 240px' },
    },
    groundworks: {
      label: 'Groundworks', sub: 'Excavation & sub-base',
      css: { backgroundColor: '#7a5a3a', backgroundImage: `${svgUrl(noise(0.6, 4, 0.4))}, linear-gradient(135deg,#8a6a4a,#6a4a2a)`, backgroundSize: '180px 180px, cover' },
    },
  };

  /* ============================================================
     REAL PHOTOGRAPHY (verified Unsplash CDN)
     ============================================================ */
  const u = (id, w = 1200, q = 72) => `https://images.unsplash.com/photo-${id}?w=${w}&q=${q}&auto=format&fit=crop`;
  const PHOTOS = {
    houseGarage: u('1605276374104-dee2a0ed3cd6'),
    houseModern: u('1600585154340-be6161a56a0c'),
    houseDusk: u('1568605114967-8130f3a36994'),
    houseWhite: u('1570129477492-45c003edd2be'),
    houseGrey: u('1583608205776-bfd35f0d9f83'),
    housePorch: u('1572120360610-d971b9d7767c'),
    houseSunset: u('1558036117-15d82a90b9b1'),
    housePool: u('1564013799919-ab600027ffc6'),
    crew: u('1504307651254-35680f356dfd'),
    worker: u('1621905251189-08b45d6a269e'),
    tool: u('1558618666-fcd25c85cd64'),
    roofWorker: u('1632759145351-1d592919f522'),
    plans: u('1581092160562-40aa08e78837'),
    blueprint: u('1503387762-592deb58ef4e'),
    reno: u('1517581177682-a085bb7ffb15'),
    aggregate: u('1416879595882-3373a0480b5b'),
    office: u('1497366754035-f200968a6e72'),
    building: u('1487958449943-2429e8be8625'),
    brickFacade: u('1605283176568-9b41fde3672e'),
  };

  /* ============================================================
     MEDIA — photo or surface with optional overlay/brand/caption
     ============================================================ */
  function Media({ photo, surface, h: ht = 200, ratio, radius = 0, overlay, brand, badge, caption, label, grayscale, style = {}, children }) {
    const canvasSrc = surface && typeof window.generateDrivewayImage === 'function' ? window.generateDrivewayImage(surface) : null;
    const bg = canvasSrc
      ? { backgroundImage: `url("${canvasSrc}")`, backgroundSize: 'cover', backgroundPosition: 'center' }
      : surface ? SURFACES[surface].css
      : { backgroundImage: `url("${PHOTOS[photo] || photo}")`, backgroundSize: 'cover', backgroundPosition: 'center' };
    return h('div', {
      style: {
        position: 'relative', width: '100%', height: ratio ? undefined : ht, aspectRatio: ratio,
        borderRadius: radius, overflow: 'hidden', filter: grayscale ? 'grayscale(1)' : undefined, ...bg, ...style,
      },
    },
      overlay && h('div', { style: { position: 'absolute', inset: 0, background: overlay === 'brand' ? 'var(--overlay-brand)' : overlay === 'top' ? 'linear-gradient(180deg,rgba(15,15,15,0.55),rgba(15,15,15,0))' : 'var(--overlay-tarmac)' } }),
      badge && h('span', { style: { position: 'absolute', top: 12, left: 12, zIndex: 2, fontFamily: C.fontH, fontWeight: 700, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.ink900, background: C.accent, padding: '5px 10px', borderRadius: 'var(--radius-xs)' } }, badge),
      label && h('span', { style: { position: 'absolute', top: 12, left: 12, zIndex: 2, fontFamily: C.fontH, fontWeight: 700, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#fff', background: 'rgba(15,15,15,0.6)', backdropFilter: 'blur(4px)', padding: '5px 10px', borderRadius: 'var(--radius-xs)' } }, label),
      caption && h('div', { style: { position: 'absolute', left: 16, right: 16, bottom: 14, zIndex: 2, fontFamily: C.fontH, fontWeight: 800, fontSize: 18, lineHeight: 1.1, letterSpacing: '-0.01em', textTransform: 'uppercase', color: '#fff' } }, caption),
      brand && h('div', { style: { position: 'absolute', right: 12, bottom: 11, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6, opacity: 0.92 } },
        h('img', { src: 'assets/primeways-logo-white.png', alt: 'Primeways', style: { height: 13, filter: 'drop-shadow(0 1px 3px rgba(0,0,0,0.6))' } })),
      children && h('div', { style: { position: 'relative', zIndex: 2, height: '100%' } }, children),
    );
  }

  /* ============================================================
     ICONS — focused inline-SVG set (Lucide-style 2px stroke)
     ============================================================ */
  const PATHS = {
    phone: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z',
    mail: 'M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6',
    pin: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2',
    arrow: 'M5 12h14M13 6l6 6-6 6',
    arrowUR: 'M7 17 17 7M7 7h10v10',
    chevR: 'M9 6l6 6-6 6', chevD: 'M6 9l6 6 6-6', chevL: 'M15 6l-6 6 6 6',
    check: 'M20 6 9 17l-5-5',
    checkC: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12l3 3 5-6',
    star: 'M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01z',
    camera: 'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
    upload: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12',
    image: 'M3 3h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8.5 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM21 15l-5-5L5 21',
    calendar: 'M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 10h18M8 2v4M16 2v4',
    msg: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
    bell: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
    users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75',
    user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
    layers: 'M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5',
    truck: 'M1 3h15v13H1zM16 8h4l3 3v5h-7M5.5 18.5a2 2 0 1 0 0 .01M18.5 18.5a2 2 0 1 0 0 .01',
    hammer: 'M14 10l-9.5 9.5a2.12 2.12 0 0 1-3-3L11 7M14 10l3-3M14 10l-3-3M17 7l1.5-1.5a2.12 2.12 0 0 1 3 3L20 10M17 7l3 3',
    shovel: 'M2 22l4-4M6 18l5-5M11 13l5-5 4 4-5 5zM16 8l3-3a2.83 2.83 0 0 0-4-4l-3 3',
    home: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM9 22V12h6v10',
    pound: 'M6 21h12M9 21V9a4 4 0 0 1 8 0M6 12h8',
    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 12l2 2 4-4',
    plus: 'M12 5v14M5 12h14',
    search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35',
    filter: 'M22 3H2l8 9.46V19l4 2v-8.54z',
    play: 'M5 3l14 9-14 9z',
    spark: 'M12 3l1.9 5.8L19.5 10l-5.6 1.2L12 17l-1.9-5.8L4.5 10l5.6-1.2zM19 3v4M21 5h-4M5 17v3M6.5 18.5h-3',
    menu: 'M3 6h18M3 12h18M3 18h18',
    x: 'M18 6 6 18M6 6l12 12',
    dots: 'M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM12 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM12 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
    edit: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z',
    send: 'M22 2 11 13M22 2l-7 20-4-9-9-4z',
    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3',
    route: 'M6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM9 16h6a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h3',
    mic: 'M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zM19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8',
    wifiOff: 'M2 8.82a15 15 0 0 1 4.17-2.65M10.66 5c4.01-.36 8.14.9 11.34 3.76M16.85 11.25a10 10 0 0 1 2.22 1.68M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 19.71a1 1 0 1 0 .01.01zM1 1l22 22',
    refresh: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
    clipboard: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z',
    trend: 'M23 6l-9.5 9.5-5-5L1 18M17 6h6v6',
    rain: 'M16 13v8M8 13v8M12 15v8M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25',
    sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
    grid: 'M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z',
    list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
    eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z',
    target: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    folder: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z',
    file: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6',
    share: 'M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13',
    gift: 'M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z',
    fb: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z',
    google: 'M21.35 11.1H12v3.8h5.35c-.5 2.4-2.6 3.8-5.35 3.8a6.7 6.7 0 0 1 0-13.4c1.7 0 3.2.6 4.4 1.7l2.7-2.7A10 10 0 1 0 12 22c5.5 0 9.5-3.9 9.5-9.4 0-.5 0-1-.15-1.5z',
    insta: 'M2 7a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM17.5 6.5h.01',
    award: 'M12 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM8.2 13.9 7 22l5-3 5 3-1.2-8.1',
    zap: 'M13 2 3 14h9l-1 8 10-12h-9z',
    move: 'M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20',
  };
  function Ico({ name, size = 20, color = 'currentColor', sw = 2, fill = 'none', style }) {
    const d = PATHS[name] || PATHS.checkC;
    const filled = name === 'star' && fill === 'currentColor';
    return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: filled ? color : fill, stroke: filled ? 'none' : color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', style, 'aria-hidden': true },
      d.split('M').filter(Boolean).map((seg, i) => h('path', { key: i, d: 'M' + seg })));
  }

  /* ============================================================
     SMALL PRIMITIVES
     ============================================================ */
  function Logo({ white, height = 30 }) {
    return h('img', { src: white ? 'assets/primeways-logo-white.png' : 'assets/primeways-logo.png', alt: 'Primeways Home Improvements', style: { height, width: Math.round(height * (1003 / 189)), display: 'block', flexShrink: 0, objectFit: 'contain' } });
  }
  // compact monogram for app icons / tight spaces
  function Mark({ size = 40, dark }) {
    return h('div', { style: { width: size, height: size, borderRadius: size * 0.24, background: dark ? C.white : 'var(--overlay-brand), ' + C.blue, backgroundImage: 'var(--overlay-brand)', backgroundColor: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)' } },
      h('span', { style: { fontFamily: C.fontH, fontWeight: 800, fontStyle: 'italic', fontSize: size * 0.5, color: dark ? C.blue600 : '#fff', letterSpacing: '-0.04em' } }, 'P'));
  }

  function Tag({ children, tone = 'neutral', dot, style }) {
    const map = {
      neutral: [C.ink100, C.ink700], brand: [C.blue50, C.blue600], accent: [C.accent100, C.accent600],
      success: [C.success100, C.success], warning: [C.warning100, C.warning], danger: [C.danger100, C.danger],
      dark: ['rgba(255,255,255,0.1)', '#fff'], hot: ['#FBE3DC', '#C0392B'], cold: ['#E4ECF6', '#3A5A86'],
    }[tone] || [C.ink100, C.ink700];
    return h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: C.fontH, fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: map[1], background: map[0], padding: '5px 9px', borderRadius: C.radSm, lineHeight: 1, ...style } },
      dot && h('span', { style: { width: 6, height: 6, borderRadius: 6, background: map[1] } }), children);
  }

  function Eyebrow({ children, onDark, style }) {
    return h('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: C.fontH, fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: onDark ? C.accent : C.blue, ...style } },
      h('span', { style: { width: 26, height: 3, background: C.accent } }), children);
  }

  /* ============================================================
     WEBSITE CHROME
     ============================================================ */
  const NAV = ['Home', 'Services', 'Visualiser', 'Gallery', 'Reviews', 'Contact'];
  function SiteHeader({ active = 'Home', dark }) {
    return h('header', { style: { display: 'flex', alignItems: 'center', gap: 28, padding: '0 40px', height: 78, background: dark ? 'rgba(15,15,15,0.55)' : C.white, borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : C.border}`, position: 'relative', zIndex: 5, backdropFilter: dark ? 'blur(8px)' : undefined } },
      h(Logo, { white: dark, height: 30 }),
      h('nav', { style: { display: 'flex', gap: 26, marginLeft: 18 } },
        NAV.map((n) => h('span', { key: n, style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 13.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: n === active ? (dark ? '#fff' : C.blue) : (dark ? 'rgba(255,255,255,0.75)' : C.ink700), borderBottom: n === active ? `3px solid ${C.accent}` : '3px solid transparent', paddingBottom: 4 } }, n))),
      h('div', { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 18 } },
        h('a', { style: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: C.fontH, fontWeight: 800, fontSize: 16, color: dark ? '#fff' : C.ink900, textDecoration: 'none' } },
          h(Ico, { name: 'phone', size: 17, color: C.accent }), '07730 769031'),
        h(Btn, { variant: 'accent' }, 'Get a Free Quote')));
  }

  function Btn({ children, variant = 'primary', size = 'md', icon, iconR, style, ...rest }) {
    const pal = {
      primary: ['var(--brand)', '#fff', 'var(--brand)'], accent: ['var(--accent)', 'var(--ink-900)', 'var(--accent)'],
      secondary: ['var(--ink-800)', '#fff', 'var(--ink-800)'], outline: ['transparent', 'var(--brand)', 'var(--brand)'],
      outlineW: ['transparent', '#fff', 'rgba(255,255,255,0.6)'], ghost: ['transparent', 'var(--brand)', 'transparent'],
    }[variant];
    const sz = { sm: ['9px 15px', 12.5], md: ['13px 22px', 14], lg: ['16px 30px', 15.5] }[size];
    return h('button', { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, fontFamily: C.fontH, fontWeight: 700, fontSize: sz[1], letterSpacing: '0.06em', textTransform: 'uppercase', lineHeight: 1, padding: sz[0], color: pal[1], background: pal[0], border: `2px solid ${pal[2]}`, borderRadius: C.radSm, cursor: 'pointer', whiteSpace: 'nowrap', ...style }, ...rest },
      icon && h(Ico, { name: icon, size: 17 }), children, iconR && h(Ico, { name: iconR, size: 17 }));
  }

  function SiteFooter() {
    const col = (title, items) => h('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
      h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: C.accent } }, title),
      items.map((it, i) => h('div', { key: i, style: { fontFamily: C.fontB, fontSize: 14, color: 'rgba(255,255,255,0.72)', display: 'flex', alignItems: 'center', gap: 9 } }, it)));
    return h('footer', { style: { background: C.ink900, padding: '56px 40px 30px' } },
      h('div', { style: { display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 40, paddingBottom: 36, borderBottom: '1px solid rgba(255,255,255,0.12)' } },
        h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          h(Logo, { white: true, height: 32 }),
          h('p', { style: { fontFamily: C.fontB, fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', maxWidth: 300, margin: 0 } }, 'Family-run tarmac, resin & groundwork specialists serving Tamworth and the Midlands. Over 20 years of hard-wearing, high-standard surfacing.'),
          h('div', { style: { display: 'flex', gap: 10 } }, ['fb', 'google', 'insta'].map((n) => h('div', { key: n, style: { width: 36, height: 36, borderRadius: C.radSm, border: '1px solid rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h(Ico, { name: n, size: 17, color: 'rgba(255,255,255,0.8)' }))))),
        col('Services', ['Tarmac Driveways', 'Resin Bound', 'Block Paving', 'Patios & Groundworks', 'Commercial Surfacing']),
        col('Company', ['About Us', 'Our Work', 'Reviews', 'Cost Guide', 'Areas We Cover']),
        col('Get in touch', [
          h(R.Fragment, null, h(Ico, { name: 'phone', size: 15, color: C.accent }), '07730 769031'),
          h(R.Fragment, null, h(Ico, { name: 'mail', size: 15, color: C.accent }), 'info@primeways.co.uk'),
          h(R.Fragment, null, h(Ico, { name: 'pin', size: 15, color: C.accent }), '94 Briar, Tamworth, B77 4DZ'),
          h(R.Fragment, null, h(Ico, { name: 'clock', size: 15, color: C.accent }), 'Mon–Fri 7am–8pm · Sat 7am–4pm'),
        ])),
      h('div', { style: { display: 'flex', justifyContent: 'space-between', paddingTop: 22, fontFamily: C.fontB, fontSize: 12.5, color: 'rgba(255,255,255,0.5)' } },
        h('span', null, '© 2026 Primeways Home Improvements Ltd · Company No. 13216512 · VAT GB 390 7082 86'),
        h('span', null, 'Family-run · Fully insured · Free quotations')));
  }

  function TrustStrip({ dark }) {
    const items = [['shield', 'Family-run · Est. 1999'], ['award', '20+ years experience'], ['pound', 'Free, no-obligation quotes'], ['truck', 'Domestic & commercial'], ['checkC', 'VAT registered & insured']];
    return h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 28, justifyContent: 'center', alignItems: 'center', padding: '20px 40px', background: dark ? 'transparent' : C.ink50, borderTop: dark ? '1px solid rgba(255,255,255,0.1)' : 'none', borderBottom: dark ? 'none' : `1px solid ${C.border}` } },
      items.map(([ic, t], i) => h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 9, fontFamily: C.fontH, fontWeight: 700, fontSize: 12.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,0.85)' : C.ink700 } },
        h(Ico, { name: ic, size: 18, color: C.accent }), t)));
  }

  Object.assign(window, { PWKit: { C, SURFACES, PHOTOS, svgUrl }, Media, Ico, Logo, Mark, Tag, Eyebrow, Btn, SiteHeader, SiteFooter, TrustStrip });
})();