// surface-images.jsx — Verified Unsplash driveway & surface photos + Before/After component
// All photo IDs confirmed from live Unsplash pages
(function () {
  const R = React, h = R.createElement;

  /* ── Same CDN helper used in kit.jsx ── */
  const u = (id, w = 900, q = 82) =>
    `https://images.unsplash.com/photo-${id}?w=${w}&h=540&q=${q}&auto=format&fit=crop`;

  /*
   * VERIFIED UNSPLASH PHOTO MAP
   * Each key matches a surface type used across service cards, before/after sliders
   * and recent-project tiles throughout the prototype.
   *
   * Sources confirmed from live Unsplash pages:
   *  old         – renovation/worn property exterior (before state)
   *  tarmac      – house with clean asphalt/tarmac driveway (houseGarage in kit)
   *  block       – luxury new-build with block paving driveway (Elise Brown, 2024)
   *  resin       – golden aggregate bound surface (aggregate in kit)
   *  gravel      – gravel driveway between green hedges (Sergej Karpow)
   *  gravel2     – white manor with gravel drive + lawn (PJ Soans)
   *  concrete    – modern grey house exterior (clean concrete-look finish)
   *  patio       – house with outdoor entertaining area / stone finish
   *  groundworks – construction crew on site (crew in kit)
   */
  const SURFACE_PHOTOS = {
    old:         'assets/surface-before.png',     // real before photo — weedy block paving (user-supplied)
    tarmac:      'assets/surface-tarmac.png',      // real tarmac drive photo (user-supplied)
    block:       'assets/surface-block.png',       // real block paving drive photo (user-supplied)
    blockAfter:  'assets/surface-block-after.png', // real after shot of the weedy-block-paving before photo (user-supplied)
    tarmacAfter: 'assets/surface-tarmac-after.png', // real tarmac after shot of the same before photo (user-supplied)
    patioAfter:  'assets/surface-patio-after.png',  // real porcelain patio after shot of the same before photo (user-supplied)
    gravelAfter: 'assets/surface-gravel-after.png', // real gravel after shot of the same before photo (user-supplied)
    resin:       'assets/surface-resin.png',       // real resin-bound drive photo (user-supplied)
    gravel:      'assets/surface-gravel.png',      // real gravel drive with cobble edging (user-supplied)
    concrete:    'assets/surface-concrete.png',    // real concrete drive with brick edging (user-supplied)
    patio:       'assets/surface-patio.png',       // real stone patio photo (user-supplied)
    groundworks: 'assets/surface-groundworks.png',  // real landscaped garden build photo (user-supplied)
  };

  /* ── Public accessor — keeps existing callers (kit.jsx, site.jsx, site5.jsx) working ── */
  function generateImage(key) {
    return SURFACE_PHOTOS[key] || SURFACE_PHOTOS.tarmac;
  }

  /* ══════════════════════════════════════════
     BEFORE / AFTER SLIDER
     ══════════════════════════════════════════ */
  function BeforeAfterImage({
    beforeKey = 'old',
    afterKey  = 'tarmac',
    height    = 320,
    radius    = 10,
    pos       = 48,
  }) {
    const beforeSrc = generateImage(beforeKey);
    const afterSrc  = generateImage(afterKey);

    const imgStyle = {
      position: 'absolute', inset: 0,
      width: '100%', height: '100%',
      objectFit: 'cover', objectPosition: 'center',
      display: 'block', userSelect: 'none',
    };

    return h('div', {
      style: {
        position: 'relative', width: '100%', height,
        overflow: 'hidden', borderRadius: radius,
        background: '#c8c0b0',
      },
    },
      /* After — full base layer */
      h('img', { src: afterSrc, style: imgStyle, draggable: false, alt: 'After' }),

      /* Before — clipped to left portion */
      h('div', {
        style: {
          position: 'absolute', inset: 0,
          clipPath: `inset(0 ${100 - pos}% 0 0)`,
          pointerEvents: 'none',
        },
      },
        h('img', { src: beforeSrc, style: imgStyle, draggable: false, alt: 'Before' }),
      ),

      /* Divider seam */
      h('div', {
        style: {
          position: 'absolute', top: 0, bottom: 0,
          left: `${pos}%`, width: 3,
          background: 'var(--accent)',
          transform: 'translateX(-50%)',
          boxShadow: '0 0 10px rgba(0,0,0,0.32)',
          pointerEvents: 'none',
        },
      }),

      /* Drag handle */
      h('div', {
        style: {
          position: 'absolute', top: '50%', left: `${pos}%`,
          transform: 'translate(-50%,-50%)',
          width: 44, height: 44, borderRadius: 99,
          background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 2px 16px rgba(0,0,0,0.32)',
          pointerEvents: 'none',
        },
      },
        h(window.Ico, { name: 'move', size: 20, color: 'var(--blue-500)' }),
      ),

      /* Labels */
      h('span', {
        style: {
          position: 'absolute', top: 14, left: 14,
          fontFamily: 'var(--font-heading)', fontWeight: 800,
          fontSize: 11, letterSpacing: '0.11em', textTransform: 'uppercase',
          color: '#fff', background: 'rgba(15,15,15,0.68)',
          padding: '5px 11px', borderRadius: 4,
        },
      }, 'BEFORE'),

      h('span', {
        style: {
          position: 'absolute', top: 14, right: 14,
          fontFamily: 'var(--font-heading)', fontWeight: 800,
          fontSize: 11, letterSpacing: '0.11em', textTransform: 'uppercase',
          color: 'var(--ink-900)', background: 'var(--accent)',
          padding: '5px 11px', borderRadius: 4,
        },
      }, 'AFTER'),
    );
  }

  window.BeforeAfterImage       = BeforeAfterImage;
  window.generateDrivewayImage  = generateImage;
})();