/* Danex Roofing — testimonials. */
function Testimonials() {
  const { Card, Rating, Eyebrow, Stat } = DS;
  const reviews = [
    { quote: 'Danny re-did our flat roof in two days flat. Clean work, fair price, and not a single leak through the winter. Wouldn\'t call anyone else.', name: 'Sarah M.', place: 'Burnaby', initials: 'SM' },
    { quote: 'Got three quotes. Danex was the only one who climbed up, took photos, and explained what was actually wrong. Honest guy, great crew.', name: 'James T.', place: 'Surrey', initials: 'JT' },
    { quote: 'Our cedar roof looks brand new. He matched the old shakes perfectly and cleaned up every nail. Highly recommend for heritage homes.', name: 'Linda K.', place: 'North Vancouver', initials: 'LK' },
  ];

  return (
    <section id="reviews" style={{ background: 'var(--surface-raised)', paddingTop: 'var(--section-y)', position: 'relative' }}>
      <div className="dx-container" style={{ paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 44 }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>Reviews</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.25rem,4vw,3.25rem)', lineHeight: 0.98, margin: '14px 0 0', fontWeight: 800 }}>
              Trusted Across The<br />Lower Mainland
            </h2>
          </div>
          <div className="dx-rev-stat" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
            <Stat value="20+" label="Years Experience" style={{ alignItems: 'flex-end', textAlign: 'right' }} />
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="dx-reviews-grid">
          {reviews.map((r, i) => (
            <Card key={r.name} className={i === 2 ? 'dx-hide-mobile' : undefined} style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-base)' }}>
              <Rating value={5} size={17} />
              <p style={{ color: 'var(--text-default)', fontSize: 15.5, lineHeight: 1.6, margin: '16px 0 22px', flex: 1 }}>"{r.quote}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
                <span style={{
                  width: 44, height: 44, borderRadius: '50%', background: 'var(--slate-900)', color: 'var(--paper-100)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 15, fontFamily: 'var(--font-display)',
                }}>{r.initials}</span>
                <div style={{ lineHeight: 1.3 }}>
                  <div style={{ fontWeight: 700, fontSize: 14.5, color: 'var(--text-strong)' }}>{r.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{r.place}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* signature roofline: the dark quote band rises into the reviews surface with a roof peak (mirrors the hero divider) */}
      <div className="dx-roofline-top" style={{ position: 'relative', zIndex: 1, height: 60, background: 'var(--slate-950)' }}></div>
    </section>
  );
}

window.Testimonials = Testimonials;