// Maple Pavers Explorer — shared registry, icons, content data, and chrome.
(function () {
  const DS = window.MaplePaversDesignSystem_8de4d8 || {};

  // ---- Section registry ----------------------------------------------------
  // Merge rather than replace so anything set on window.MP before this script
  // runs (e.g. an inline demoBaseUrl override in site.html) is preserved.
  const MP = window.MP = Object.assign(window.MP || {}, {
    PHOTO: 'assets/photos/',
    ASSET: 'assets/',
    PHONE: '(647) 242-8442',
    sections: {},
    order: ['hero', 'quote', 'process', 'services', 'gallery', 'why', 'social', 'testimonials', 'cta', 'footer'],
    register(key, def) { this.sections[key] = def; },
    // Quote tool lives elsewhere (user has the code) — these are entry points.
    startQuote(e) { if (e && e.preventDefault) e.preventDefault(); window.dispatchEvent(new CustomEvent('mp-quote')); },
  });

  // ---- Inline icon set (stroke, currentColor) ------------------------------
  const P = {
    phone: '<path d="M3 5c0 9.4 6.6 16 16 16 .9 0 1.7-.6 1.9-1.5l.6-2.5a1.5 1.5 0 0 0-.9-1.7l-3-1.2a1.5 1.5 0 0 0-1.7.4l-1 1.2a12 12 0 0 1-5.3-5.3l1.2-1a1.5 1.5 0 0 0 .4-1.7L9.7 3.4A1.5 1.5 0 0 0 8 2.5L5.5 3.1A2 2 0 0 0 4 5z"/>',
    shield: '<path d="M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6z"/>',
    'badge-check': '<path d="M12 3l2.1 1.6 2.6-.3 1 2.4 2.2 1.4-.7 2.5.7 2.5-2.2 1.4-1 2.4-2.6-.3L12 21l-2.1-1.6-2.6.3-1-2.4-2.2-1.4.7-2.5L4.1 11l2.2-1.4 1-2.4 2.6.3z"/><path d="M9 12l2 2 4-4"/>',
    gem: '<path d="M6 3h12l3 5-9 13L3 8z"/><path d="M3 8h18M9 3 7 8l5 13M15 3l2 5-5 13"/>',
    award: '<circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/>',
    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
    check: '<path d="M4 12l5 5L20 6"/>',
    star: '<path d="M12 3l2.7 5.8 6.3.8-4.7 4.3 1.3 6.3L12 17.8 6.4 20.5l1.3-6.3L3 9.9l6.3-.8z"/>',
    search: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>',
    ruler: '<path d="M3 9l6-6 12 12-6 6z"/><path d="M9 5l2 2M7 7l2 2M11 7l2 2M9 9l2 2M13 9l2 2M11 11l2 2M15 11l2 2"/>',
    hammer: '<path d="M14 7l4-4 3 3-4 4-3-3z"/><path d="M14 7l-9 9 3 3 9-9"/>',
    arrow: '<path d="M4 12h15"/><path d="M13 6l6 6-6 6"/>',
    'map-pin': '<path d="M12 21s7-6.3 7-12a7 7 0 1 0-14 0c0 5.7 7 12 7 12z"/><circle cx="12" cy="9" r="2.6"/>',
    sparkles: '<path d="M12 3l1.8 4.7L18.5 9.5 13.8 11.3 12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/><path d="M19 14l.8 2.2 2.2.8-2.2.8L19 20l-.8-2.2-2.2-.8 2.2-.8z"/>',
    image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5L5 21"/>',
    upload: '<path d="M12 15V4"/><path d="M7.5 8.5L12 4l4.5 4.5"/><path d="M4 15v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/>',
    layers: '<path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/><path d="M3 16.5l9 5 9-5"/>',
    tag: '<path d="M3 12.5V4.5a1.5 1.5 0 0 1 1.5-1.5h8L21 11.5a1.5 1.5 0 0 1 0 2.1l-7.4 7.4a1.5 1.5 0 0 1-2.1 0L3.5 13.6A1.5 1.5 0 0 1 3 12.5z"/><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor" stroke="none"/>',
    leaf: '<path d="M4 20C4 11 11 4 20 4c0 9-7 16-16 16z"/><path d="M4 20C8 16 12 13 18 10"/>',
    'chevron-right': '<path d="M9 6l6 6-6 6"/>',
    menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
    instagram: '<rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/>',
    facebook: '<path d="M14 8h2V5h-2c-2 0-3 1.3-3 3v2H9v3h2v8h3v-8h2.2l.8-3H14V8.2c0-.1.1-.2.3-.2z"/>',
    mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7l8 6 8-6"/>',
    x: '<path d="M6 6l12 12M18 6L6 18"/>',
    'move-h': '<path d="M8 9l-3 3 3 3M16 9l3 3-3 3M5 12h14"/>',
    quote: '<path d="M7 7H4v6h6V7H7c0-1.5 1-2.5 2.5-2.5M19 7h-3v6h6V7h-3c0-1.5 1-2.5 2.5-2.5"/>',
    truck: '<path d="M3 6h11v9H3z"/><path d="M14 9h4l3 3v3h-7z"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/>',
    calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/>',
    'thumbs-up': '<path d="M7 11v9H4v-9zM7 11l4-7c1.3 0 2 .9 2 2v3h5a2 2 0 0 1 2 2.3l-1 6A2 2 0 0 1 17 20H7"/>',
    wifi: '<path d="M2 8a16 16 0 0 1 20 0M5 11.5a11 11 0 0 1 14 0M8.5 15a6 6 0 0 1 7 0"/><circle cx="12" cy="18.5" r="1" fill="currentColor" stroke="none"/>',
    battery: '<rect x="2" y="8" width="18" height="9" rx="2"/><path d="M22 11v3"/><rect x="4" y="10" width="13" height="5" rx="1" fill="currentColor" stroke="none"/>',
    signal: '<path d="M4 18v-3M9 18v-7M14 18v-10M19 18V6" stroke-width="2.4"/>',
  };

  function Icon({ name, size = 20, stroke = 2, color = 'currentColor', style }) {
    return React.createElement('svg', {
      width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
      stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round',
      style: { flex: 'none', ...style },
      dangerouslySetInnerHTML: { __html: P[name] || '' },
    });
  }
  MP.Icon = Icon;

  // ---- Shared content ------------------------------------------------------
  MP.data = {
    services: [
      { t: 'Paver Driveways', d: 'Built to shrug off 30 Toronto winters.', img: 'svc-driveways.jpg', icon: 'truck' },
      { t: 'Patios', d: 'The backyard you actually use.', img: 'svc-patios.jpg', icon: 'leaf' },
      { t: 'Walkways', d: 'A first impression that lasts.', img: 'svc-walkways.jpg', icon: 'map-pin' },
      { t: 'Steps & Stairs', d: 'Precision-cut, slip-safe, sharp.', img: 'svc-steps.jpg', icon: 'ruler' },
      { t: 'Retaining Walls', d: 'Engineered to hold their ground.', img: 'svc-retaining-walls.jpg', icon: 'shield' },
      { t: 'Custom Stonework', d: 'Fire features, seating & more.', img: 'svc-outdoor-living.jpg', icon: 'gem' },
    ],
    process: [
      { icon: 'search', t: 'Design Yours', d: 'Add a picture and choose your look. See your home with a brand-new driveway.' },
      { icon: 'ruler', t: 'Honest Estimate', d: 'A real price range. No pressure. No pushy follow-ups.' },
      { icon: 'hammer', t: 'We Do the Work', d: 'The same hands every time. Owner on-site, start to finish.' },
      { icon: 'badge-check', t: 'Built to Outlast', d: 'A 10-year workmanship warranty in writing. We stand behind every job.' },
    ],
    pillars: [
      { icon: 'gem', t: 'Premium Materials Only', d: 'Unilock, Techo-Bloc & Belgard. We don\u2019t cut corners we\u2019d have to come back and fix.' },
      { icon: 'shield', t: '10-Year Workmanship Warranty', d: 'Double the industry standard. In writing, every job.' },
      { icon: 'badge-check', t: 'Owner On-Site, Every Job', d: 'Not a sales rep. The person who quotes it runs the crew that builds it.' },
    ],
    reasons: [
      { icon: 'gem', t: 'Premium Materials', d: 'Trusted North-American manufacturers only.' },
      { icon: 'badge-check', t: 'Owner On-Site', d: 'The owner runs every crew, every job.' },
      { icon: 'clock', t: 'On-Time, On-Budget', d: 'Upfront pricing. Zero surprises.' },
      { icon: 'shield', t: '10-Year Warranty', d: 'Double the field on workmanship.' },
    ],
    testimonials: [
      { quote: 'The render looked exactly like what they built. Crew was spotless, owner showed up day one. Best driveway on the street.', author: 'Karen M.', location: 'Forest Hill, Toronto', rating: 5 },
      { quote: 'Got three quotes. Maple was the only one who showed me what it\u2019d look like first. No-brainer.', author: 'Jason T.', location: 'Etobicoke', rating: 5 },
      { quote: 'Our patio is the heart of the backyard now. Worth every dollar, and the warranty is real.', author: 'Linda & Mark D.', location: 'North York', rating: 5 },
      { quote: 'Booked the render at 9pm, had a real quote in 48 hours. They actually do what the website says.', author: 'Priya S.', location: 'Markham', rating: 5 },
      { quote: 'Twenty years of asphalt patches gone. Interlock done right the first time. Highly recommend.', author: 'Rob & Helen C.', location: 'Oakville', rating: 5 },
    ],
    // Gallery, ordered for a deliberate mix: editorial / relatable / editorial,
    // not all-luxury-front. Final entry is an honest asphalt resurface to
    // signal range without leading with it. Every entry has a real before/after
    // pair — no more grayscale fake.
    gallery: [
      { title: 'Autumn Stone Estate', cat: 'Driveways', before: 'gallery-autumn-stone-estate-before.jpg', after: 'gallery-autumn-stone-estate-after.jpg', img: 'gallery-autumn-stone-estate-after.jpg' },
      { title: 'Sunset Herringbone', cat: 'Driveways', before: 'gallery-sunset-herringbone-before.jpg', after: 'gallery-sunset-herringbone-after.jpg', img: 'gallery-sunset-herringbone-after.jpg' },
      { title: 'Dusk Patio & Firepit', cat: 'Patios', before: 'gallery-dusk-patio-firepit-before.jpg', after: 'gallery-dusk-patio-firepit-after.jpg', img: 'gallery-dusk-patio-firepit-after.jpg' },
      { title: 'Carriage House Drive', cat: 'Driveways', before: 'gallery-carriage-house-drive-before.jpg', after: 'gallery-carriage-house-drive-after.jpg', img: 'gallery-carriage-house-drive-after.jpg' },
      { title: 'Stone Manor Walk', cat: 'Walkways', before: 'gallery-stone-manor-walk-before.jpg', after: 'gallery-stone-manor-walk-after.jpg', img: 'gallery-stone-manor-walk-after.jpg' },
      { title: 'Family Home Refresh', cat: 'Driveways', before: 'gallery-family-home-refresh-before.jpg', after: 'gallery-family-home-refresh-after.jpg', img: 'gallery-family-home-refresh-after.jpg' },
      { title: 'Hillside Stone Wall', cat: 'Walls', before: 'gallery-hillside-stone-wall-before.jpg', after: 'gallery-hillside-stone-wall-after.jpg', img: 'gallery-hillside-stone-wall-after.jpg' },
      { title: 'Asphalt Resurface', cat: 'Asphalt', before: 'gallery-asphalt-resurface-before.jpg', after: 'gallery-asphalt-resurface-after.jpg', img: 'gallery-asphalt-resurface-after.jpg' },
    ],
    areas: ['Toronto', 'Markham', 'Vaughan', 'Mississauga', 'Oakville', 'Etobicoke', 'Richmond Hill', 'Burlington', 'North York', 'Leaside'],
    badges: [
      { t: 'HomeStars', s: 'Best of 2025', icon: 'award' },
      { t: 'Google', s: '4.9 \u2605 · 512 reviews', icon: 'star' },
      { t: 'BBB', s: 'A+ Accredited', icon: 'badge-check' },
      { t: 'WSIB', s: 'Compliant', icon: 'shield' },
    ],
    partners: ['UNILOCK', 'TECHO-BLOC', 'BELGARD'],
  };

  // ---- Small shared presentational helpers ---------------------------------
  function Overline({ children, onDark, color, style }) {
    return React.createElement('span', {
      style: {
        fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: color || (onDark ? 'var(--clay)' : 'var(--terracotta)'), ...style,
      },
    }, children);
  }
  MP.Overline = Overline;

  function Stars({ count = 5, size = 15, color = 'var(--terracotta)' }) {
    return React.createElement('div', { style: { display: 'flex', gap: 2, color, fontSize: size, lineHeight: 1 } },
      Array.from({ length: 5 }).map((_, i) => React.createElement('span', { key: i, style: { opacity: i < count ? 1 : 0.25 } }, '\u2605')));
  }
  MP.Stars = Stars;

  // section vertical padding helper
  MP.pad = '0 22px';
  MP.Sec = function Sec({ bg, color, pad = '54px 22px', children, style, ...rest }) {
    return React.createElement('section', { style: { background: bg, color, padding: pad, ...style }, ...rest }, children);
  };

  // ---- Chrome: status bar --------------------------------------------------
  function StatusBar({ onDark }) {
    return (
      <div className={'mp-statusbar' + (onDark ? ' on-dark' : '')}>
        <span>9:41</span>
        <span className="mp-sb-icons">
          <Icon name="signal" size={17} stroke={2} />
          <Icon name="wifi" size={16} stroke={1.8} />
          <Icon name="battery" size={22} stroke={1.6} />
        </span>
      </div>
    );
  }
  MP.StatusBar = StatusBar;

  // ---- Chrome: sticky header ----------------------------------------------
  function Header({ onDark = true }) {
    const [open, setOpen] = React.useState(false);
    const bg = onDark ? 'var(--graphite)' : 'var(--color-surface)';
    const fg = onDark ? 'var(--beige-150)' : 'var(--text-strong)';
    const logo = onDark ? 'logo-horizontal-dark.png' : 'logo-horizontal.png';
    return (
      <header style={{ position: 'sticky', top: 46, zIndex: 55 }}>
        <div style={{
          background: bg, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '11px 18px', borderBottom: onDark ? '1px solid rgba(255,255,255,0.07)' : '1px solid var(--border-subtle)',
        }}>
          <img src={MP.ASSET + logo} alt="Maple Pavers" style={{ height: 30 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <DS.Button variant="primary" size="sm" onClick={MP.startQuote}>Design My Driveway</DS.Button>
          </div>
        </div>
      </header>
    );
  }
  MP.Header = Header;

  // ---- Chrome: sticky bottom quote bar (mobile compulsory) ----------------
  function BottomBar() {
    return (
      <div style={{ position: 'sticky', bottom: 0, zIndex: 55, marginTop: 'auto' }}>
        <div style={{
          background: 'var(--graphite)', borderTop: '1px solid rgba(255,255,255,0.08)',
          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
        }}>
          <button onClick={MP.startQuote} className="mp-press" style={{
            border: 0, cursor: 'pointer', width: '100%',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            padding: '15px 8px', background: 'var(--terracotta)', color: '#fff', fontFamily: 'var(--font-body)',
            fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}><Icon name="sparkles" size={17} /> Design My Driveway</button>
        </div>
      </div>
    );
  }
  MP.BottomBar = BottomBar;
})();