function ReviewCard({ name, date, body }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid #d5e7e4', borderRadius: 18,
      padding: 26, flex: '0 0 360px', display: 'flex', flexDirection: 'column', gap: 14,
      boxShadow: '0 2px 8px rgba(22,63,52,.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 42, height: 42, borderRadius: '50%', background: '#ecf4f2',
          color: '#3F8074', fontWeight: 700, fontSize: 16,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{name.split(' ').map(p => p[0]).slice(0,2).join('')}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: '#163F34' }}>{name}</div>
          <div style={{ fontSize: 12, color: '#6e8a86' }}>{date}</div>
        </div>
        <div style={{ width: 22, height: 22, borderRadius: '50%', background: '#fff', border: '1px solid #d5e7e4', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#3F8074' }}>G</div>
      </div>
      <div style={{ display: 'flex', gap: 2 }}>{[...Array(5)].map((_, i) => <Star key={i} size={15} />)}</div>
      <div style={{ fontSize: 14, color: '#345048', lineHeight: 1.6 }}>{body}</div>
    </div>
  );
}

function Reviews({ trustindexUrl, trustindexWidgetId }) {
  // Static fallback reviews — used when no Trustindex URL is configured.
  const reviews = [
    { name: 'Leroy Matticks', date: 'May 18, 2026', body: "Macen at Chekbooks has been incredible to work with. He is extremely professional, highly detail-oriented, and truly in tune with businesses' needs." },
    { name: 'Erika Chan', date: 'May 12, 2026', body: 'Macen has been a lifesaver for my small business! He is extremely thorough and professional. When I have questions, he responds right away.' },
    { name: 'Louie Zamora', date: 'May 6, 2026', body: "Working with Macen has been one of the best decisions I've made for my business. He's been with us since the beginning and has always been reliable and organized." },
    { name: 'Patrick Lynch', date: 'May 4, 2026', body: 'Macen Krauter is the kind of bookkeeper every business owner wishes they had. Detail-oriented, responsive, and genuinely invested in your financial health.' },
    { name: 'SouthPro Drilling', date: 'March 23, 2026', body: '10/10 would recommend Chekbooks to anyone that runs a business and uses QuickBooks. We get monthly reports and they had everything ready for tax season within 30 minutes.' },
  ];

  return (
    <section id="testimonials" style={{ background: '#ffffff', padding: '100px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ marginBottom: 48, textAlign: 'center', maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' }}>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#3F8074', marginBottom: 14,
          }}>WHAT CLIENTS ARE SAYING</div>
          <h2 style={{ fontSize: 'clamp(1.875rem, 2.6vw, 2.5rem)', fontWeight: 700, color: '#163F34', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
            Helping service businesses take control of their numbers and grow with confidence.
          </h2>
        </div>
      </div>

      {/* Trustindex widget (or placeholder when not yet configured) */}
      {trustindexUrl !== undefined ? (
        <div style={{ padding: '0 32px' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto' }}>
            <TrustindexEmbed loaderUrl={trustindexUrl} widgetId={trustindexWidgetId} />
          </div>
        </div>
      ) : (
        <div style={{ overflowX: 'auto', padding: '4px 32px 32px' }}>
          <div style={{ display: 'flex', gap: 20, maxWidth: 1280, margin: '0 auto' }}>
            {reviews.map(r => <ReviewCard key={r.name} {...r} />)}
          </div>
        </div>
      )}
    </section>
  );
}
Object.assign(window, { Reviews, ReviewCard });