// Social proof / trust section — testimonials + credentials + compliance.

const Trust = () => {
  const testimonials = [
    {
      quote: 'My acceptance on full-arch cases went from 48% to 71% in three months. The patients arrive at the consult already knowing why. I do less convincing, more dentistry.',
      name: 'Dr. Mira Halevy',
      role: 'Oral Surgeon · Riverside, Toronto',
    },
    {
      quote: 'The front desk used to spend ten minutes per call explaining what a sinus lift even is. Now patients arrive having watched the animation. We close 30% more consults to start dates.',
      name: 'Sandra Okafor',
      role: 'Treatment Coordinator · North Hill Perio',
    },
    {
      quote: 'I was skeptical about another tool. But it takes me 90 seconds to create a plan, and the patient response is night and day. It feels like the practice grew up overnight.',
      name: 'Dr. Anders Lindqvist',
      role: 'Endodontist · Mapleton',
    },
  ];

  return (
    <section style={{ position: 'relative' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
          <div className="eyebrow reveal" style={{ marginBottom: 24, justifyContent: 'center' }}>From the people running the chair</div>
          <h2 className="reveal">
            <span className="serif" style={{ color: 'var(--gold-deep)' }}>Quiet</span> wins, in their own words.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 24, marginBottom: 80 }}>
          {testimonials.map((t, i) => (
            <div key={i} className="reveal" style={{
              padding: 32,
              borderRadius: 'var(--radius-lg)',
              background: 'var(--card-solid)',
              border: '1px solid var(--line)',
              display: 'flex',
              flexDirection: 'column',
              gap: 24,
              transitionDelay: `${i * 100}ms`,
            }}>
              <div className="serif" style={{ fontSize: 56, color: 'var(--gold)', lineHeight: 0.6, marginTop: -4 }}>"</div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg)', flex: 1, textWrap: 'pretty' }}>
                {t.quote}
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                <div className="placeholder-stripes" style={{ width: 40, height: 40, borderRadius: '50%', flexShrink: 0 }}></div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-faint)' }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Compliance row */}
        <div className="reveal" style={{
          padding: '32px 36px',
          borderRadius: 'var(--radius-lg)',
          background: 'var(--bg-soft)',
          border: '1px solid var(--line)',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)',
          gap: 32,
          alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Built for healthcare</div>
            <p style={{ fontSize: 14, color: 'var(--fg-mute)', lineHeight: 1.55, margin: 0 }}>
              Patient data lives in Canadian data centers. Encryption at rest and
              in transit. Audit log for every access. No data is used to train
              third-party models.
            </p>
          </div>
          {[
            { icon: 'shield', label: 'PIPEDA', sub: 'Aligned' },
            { icon: 'lock', label: 'SOC 2 Type I', sub: 'In progress' },
            { icon: 'globe', label: 'Data residency', sub: 'Canada' },
          ].map((b) => (
            <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: 'var(--card-solid)',
                border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--gold-deep)',
              }}>
                <Icon name={b.icon} size={18} />
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{b.label}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-faint)' }}>{b.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Trust });