// Maple Pavers Explorer — SERVICES, 5 variants.
(function () {
  const { ServiceCard, Badge } = window.MaplePaversDesignSystem_8de4d8;
  const { Icon, Overline, PHOTO, startQuote } = window.MP;
  const SVC = window.MP.data.services;
  const Heading = ({ onDark, sub }) => (
    <div style={{ textAlign: 'center', marginBottom: 26 }}>
      <Overline onDark>Our Work</Overline>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, lineHeight: 1.12, color: onDark ? 'var(--beige-150)' : 'var(--text-strong)', margin: '10px 0 0' }}>Pavers. Patios. Walls. Done right.</h2>
      {sub && <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: '22px', color: 'var(--text-muted)', margin: '10px auto 0', maxWidth: 320 }}>{sub}</p>}
    </div>
  );

  // V1 — Photo grid (DS ServiceCard)
  function SvcGrid() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '52px 22px' }}>
        <Heading />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {SVC.map((s) => (
            <ServiceCard key={s.t} title={s.t} description={s.d} image={PHOTO + s.img} height={150} onClick={startQuote} />
          ))}
        </div>
      </section>
    );
  }

  // V2 — List rows
  function SvcList() {
    return (
      <section style={{ background: 'var(--color-bg)', padding: '52px 22px' }}>
        <Heading />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--color-surface)' }}>
          {SVC.map((s, i) => (
            <a key={s.t} href="#" onClick={startQuote} className="mp-press" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 14px', borderTop: i ? '1px solid var(--border-subtle)' : 'none', textDecoration: 'none' }}>
              <div style={{ width: 56, height: 56, borderRadius: 'var(--radius)', backgroundImage: `url(${PHOTO}${s.img})`, backgroundSize: 'cover', backgroundPosition: 'center', flex: 'none' }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)' }}>{s.t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>{s.d}</div>
              </div>
              <Icon name="chevron-right" size={20} color="var(--terracotta)" />
            </a>
          ))}
        </div>
      </section>
    );
  }

  // V3 — Horizontal carousel
  function SvcCarousel() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '52px 0 52px' }}>
        <div style={{ padding: '0 22px' }}><Heading sub="Swipe through what we do best." /></div>
        <div className="mp-hide-sb" style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 22px 6px', scrollSnapType: 'x mandatory' }}>
          {SVC.map((s) => (
            <a key={s.t} href="#" onClick={startQuote} style={{ flex: '0 0 220px', scrollSnapAlign: 'start', textDecoration: 'none' }}>
              <div style={{ position: 'relative', height: 250, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow)' }}>
                <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${PHOTO}${s.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.05) 35%, rgba(26,26,26,0.85))' }} />
                <div style={{ position: 'absolute', bottom: 0, padding: '18px 18px 20px' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, textTransform: 'uppercase', color: 'var(--beige-150)', margin: '0 0 4px' }}>{s.t}</h3>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-on-dark-muted)' }}>{s.d}</span>
                </div>
              </div>
            </a>
          ))}
          <div style={{ flex: '0 0 10px' }} />
        </div>
      </section>
    );
  }

  // V4 — Icon tiles (no photos)
  function SvcIcons() {
    return (
      <section style={{ background: 'var(--color-bg)', padding: '52px 22px' }}>
        <Heading />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {SVC.map((s) => (
            <a key={s.t} href="#" onClick={startQuote} className="mp-press" style={{ background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '20px 16px', textDecoration: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--radius)', background: 'var(--terracotta-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={s.icon} size={22} color="var(--terracotta)" />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--text-strong)', lineHeight: 1.1 }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: '18px', color: 'var(--text-muted)' }}>{s.d}</div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  // V5 — Editorial (featured + compact list)
  function SvcEditorial() {
    const [feat, ...rest] = SVC;
    return (
      <section style={{ background: 'var(--beige-300)', padding: '52px 22px' }}>
        <Heading />
        <a href="#" onClick={startQuote} style={{ display: 'block', textDecoration: 'none' }}>
          <div style={{ position: 'relative', height: 200, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow)', marginBottom: 14 }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${PHOTO}${feat.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.05) 30%, rgba(26,26,26,0.85))' }} />
            <span style={{ position: 'absolute', top: 12, left: 12 }}><Badge variant="solid" size="sm">Most Requested</Badge></span>
            <div style={{ position: 'absolute', bottom: 0, padding: '18px 20px' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--beige-150)', margin: '0 0 4px' }}>{feat.t}</h3>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-on-dark-muted)' }}>{feat.d}</span>
            </div>
          </div>
        </a>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {rest.map((s) => (
            <a key={s.t} href="#" onClick={startQuote} className="mp-press" style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', padding: '11px 12px', textDecoration: 'none' }}>
              <Icon name={s.icon} size={18} color="var(--terracotta)" />
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>{s.t}</span>
            </a>
          ))}
        </div>
      </section>
    );
  }

  window.MP.register('services', {
    label: 'Services',
    options: [
      { id: 'grid', name: '1 · Photo grid', Render: SvcGrid },
      { id: 'list', name: '2 · List rows', Render: SvcList },
      { id: 'carousel', name: '3 · Swipe carousel', Render: SvcCarousel },
      { id: 'icons', name: '4 · Icon tiles', Render: SvcIcons },
      { id: 'editorial', name: '5 · Editorial featured', Render: SvcEditorial },
    ],
  });
})();
