// Maple Pavers Explorer — SOCIAL PROOF, 5 variants.
(function () {
  const { StatBlock } = window.MaplePaversDesignSystem_8de4d8;
  const { Icon, Overline, Stars } = window.MP;
  const BADGES = window.MP.data.badges;
  const PARTNERS = window.MP.data.partners;

  function PartnerRow({ onDark }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap' }}>
        {PARTNERS.map((p) => (
          <span key={p} style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '0.02em', color: onDark ? 'var(--beige-150)' : 'var(--text-strong)', opacity: 0.7 }}>{p}</span>
        ))}
      </div>
    );
  }

  // V1 — Badge wall
  function SocWall() {
    return (
      <section style={{ background: 'var(--color-bg)', padding: '48px 22px' }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <Overline>Verified &amp; Accredited</Overline>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {BADGES.map((b) => (
            <div key={b.t} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-sm)', padding: '14px' }}>
              <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-full)', background: 'var(--terracotta-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                <Icon name={b.icon} size={19} color="var(--terracotta)" />
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--text-strong)' }}>{b.t}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-muted)' }}>{b.s}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--border-subtle)', margin: '22px 0 18px' }} />
        <PartnerRow />
      </section>
    );
  }

  // V2 — Rating spotlight
  function SocRating() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '48px 22px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 64, lineHeight: 1, color: 'var(--terracotta)' }}>4.9</div>
        <div style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}><Stars count={5} size={20} /></div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', marginTop: 10 }}>
          From <strong style={{ color: 'var(--text-strong)' }}>512 Google reviews</strong> · 500+ driveways across the GTA
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
          {BADGES.map((b) => (
            <span key={b.t} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 999, padding: '7px 13px', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11, color: 'var(--text-strong)' }}>
              <Icon name={b.icon} size={14} color="var(--terracotta)" /> {b.t}
            </span>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--border-default)', margin: '22px 0 18px' }} />
        <PartnerRow />
      </section>
    );
  }

  // V3 — Marquee
  function SocMarquee() {
    const loop = [...BADGES, ...BADGES];
    return (
      <section style={{ background: 'var(--color-bg)', padding: '40px 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 18, padding: '0 22px' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--text-strong)' }}>Trusted across the GTA</span>
        </div>
        <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
          <div style={{ display: 'flex', gap: 14, width: 'max-content', animation: 'mpMarquee 18s linear infinite' }}>
            {loop.map((b, i) => (
              <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', padding: '12px 18px', whiteSpace: 'nowrap', boxShadow: 'var(--shadow-sm)' }}>
                <Icon name={b.icon} size={18} color="var(--terracotta)" />
                <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--text-strong)' }}>{b.t}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>{b.s}</span>
              </span>
            ))}
          </div>
        </div>
        <style>{'@keyframes mpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}'}</style>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 18, marginTop: 24, padding: '0 22px' }}>
          <PartnerRow />
        </div>
      </section>
    );
  }

  // V4 — Stat band (dark)
  function SocStatband() {
    return (
      <section style={{ background: 'var(--graphite)', padding: '48px 22px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '26px 12px' }}>
          <StatBlock value="30+" label="Years Building" onDark align="center" />
          <StatBlock value="500+" label="Driveways Laid" onDark align="center" />
          <StatBlock value="4.9&#9733;" label="Google Rating" onDark align="center" />
          <StatBlock value="10 yr" label="Warranty" onDark align="center" />
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', margin: '26px 0 20px' }} />
        <div style={{ display: 'flex', justifyContent: 'center', gap: 9, flexWrap: 'wrap' }}>
          {BADGES.map((b) => (
            <span key={b.t} style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--beige-150)', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 11.5 }}>
              <Icon name={b.icon} size={15} color="var(--clay)" /> {b.t}
            </span>
          ))}
        </div>
      </section>
    );
  }

  // V5 — Review-site cards
  function SocReviewCards() {
    const cards = [
      { brand: 'HomeStars', accent: '#e8633a', big: 'Best of 2025', sub: 'Toronto · Interlock & Paving', icon: 'award' },
      { brand: 'Google Reviews', accent: '#4285F4', big: '4.9 / 5.0', sub: '512 verified homeowner reviews', icon: 'star' },
    ];
    return (
      <section style={{ background: 'var(--color-bg)', padding: '48px 22px' }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <Overline>The Receipts</Overline>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {cards.map((c) => (
            <div key={c.brand} style={{ background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 50, height: 50, borderRadius: 'var(--radius)', background: c.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                <Icon name={c.icon} size={26} color="#fff" />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{c.brand}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--text-strong)', lineHeight: 1.1, margin: '2px 0' }}>{c.big}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18 }}><PartnerRow /></div>
      </section>
    );
  }

  window.MP.register('social', {
    label: 'Social proof',
    options: [
      { id: 'wall', name: '1 · Badge wall', Render: SocWall },
      { id: 'rating', name: '2 · Rating spotlight', Render: SocRating },
      { id: 'marquee', name: '3 · Logo marquee', Render: SocMarquee },
      { id: 'statband', name: '4 · Dark stat band', Render: SocStatband },
      { id: 'cards', name: '5 · Review-site cards', Render: SocReviewCards },
    ],
  });
})();