// Maple Pavers Explorer — TESTIMONIALS, 5 variants.
(function () {
  const { Testimonial } = window.MaplePaversDesignSystem_8de4d8;
  const { Icon, Overline, Stars } = window.MP;
  const T = window.MP.data.testimonials;

  const Heading = ({ onDark }) => (
    <div style={{ textAlign: 'center', marginBottom: 24 }}>
      <Overline onDark>Homeowner Reviews</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' }}>From the homeowners who hired us.</h2>
    </div>
  );

  function initials(name) { return name.split(/[ &]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join(''); }

  // V1 — Carousel
  function TestCarousel() {
    const [i, setI] = React.useState(0);
    const ref = React.useRef(null);
    const onScroll = () => { const el = ref.current; if (el) setI(Math.round(el.scrollLeft / el.clientWidth)); };
    return (
      <section style={{ background: 'var(--color-bg)', padding: '54px 0' }}>
        <div style={{ padding: '0 22px' }}><Heading /></div>
        <div ref={ref} onScroll={onScroll} className="mp-hide-sb" style={{ display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
          {T.map((t) => (
            <div key={t.author} style={{ flex: '0 0 100%', scrollSnapAlign: 'center', padding: '0 22px', boxSizing: 'border-box' }}>
              <Testimonial {...t} />
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 7, marginTop: 18 }}>
          {T.map((_, d) => <span key={d} style={{ width: d === i ? 20 : 7, height: 7, borderRadius: 999, background: d === i ? 'var(--terracotta)' : 'var(--border-default)', transition: 'all var(--dur)' }} />)}
        </div>
      </section>
    );
  }

  // V2 — Stacked cards
  function TestStacked() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '54px 22px' }}>
        <Heading />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {T.slice(0, 3).map((t) => <Testimonial key={t.author} {...t} />)}
        </div>
      </section>
    );
  }

  // V3 — Featured pull-quote
  function TestFeatured() {
    const f = T[0];
    return (
      <section style={{ background: 'var(--graphite)', padding: '56px 22px', textAlign: 'center' }}>
        <Icon name="quote" size={36} color="var(--clay)" style={{ margin: '0 auto' }} />
        <blockquote style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, lineHeight: 1.32, color: 'var(--beige-150)', margin: '18px 0 20px' }}>
          &ldquo;{f.quote}&rdquo;
        </blockquote>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}><Stars count={5} size={16} /></div>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--beige-150)' }}>{f.author}</div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-on-dark-muted)' }}>{f.location}</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 22 }}>
          {T.map((_, d) => <span key={d} style={{ width: 6, height: 6, borderRadius: 999, background: d === 0 ? 'var(--clay)' : 'rgba(255,255,255,0.25)' }} />)}
        </div>
      </section>
    );
  }

  // V4 — Marquee (two rows, alternating directions)
  function TestMarquee() {
    const rowA = [...T, ...T];
    function Card({ t }) {
      return (
        <div style={{ flex: '0 0 248px', background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-sm)', padding: '16px 18px', whiteSpace: 'normal' }}>
          <Stars count={5} size={13} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: '19px', color: 'var(--text-body)', margin: '8px 0 10px' }}>&ldquo;{t.quote}&rdquo;</p>
          <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, color: 'var(--text-strong)' }}>{t.author} · <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{t.location}</span></div>
        </div>
      );
    }
    return (
      <section style={{ background: 'var(--color-bg)', padding: '54px 0' }}>
        <div style={{ padding: '0 22px' }}><Heading /></div>
        <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)' }}>
          <div style={{ display: 'flex', gap: 12, width: 'max-content', animation: 'mpTmarq 26s linear infinite', alignItems: 'stretch' }}>
            {rowA.map((t, i) => <Card key={i} t={t} />)}
          </div>
        </div>
        <style>{'@keyframes mpTmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}'}</style>
      </section>
    );
  }

  // V5 — With avatar initials
  function TestAvatars() {
    return (
      <section style={{ background: 'var(--beige-300)', padding: '54px 22px' }}>
        <Heading />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {T.slice(0, 3).map((t) => (
            <div key={t.author} style={{ background: 'var(--color-surface)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: '18px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 'var(--radius-full)', background: 'var(--terracotta)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, flex: 'none' }}>{initials(t.author)}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13.5, color: 'var(--text-strong)' }}>{t.author}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, color: 'var(--text-muted)' }}>{t.location}</div>
                </div>
                <Stars count={5} size={13} />
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: '21px', color: 'var(--text-body)', margin: 0 }}>&ldquo;{t.quote}&rdquo;</p>
            </div>
          ))}
        </div>
      </section>
    );
  }

  window.MP.register('testimonials', {
    label: 'Testimonials',
    options: [
      { id: 'carousel', name: '1 · Swipe carousel', Render: TestCarousel },
      { id: 'stacked', name: '2 · Stacked cards', Render: TestStacked },
      { id: 'featured', name: '3 · Featured quote', Render: TestFeatured },
      { id: 'marquee', name: '4 · Marquee', Render: TestMarquee },
      { id: 'avatars', name: '5 · With avatars', Render: TestAvatars },
    ],
  });
})();