function Credibility() {
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="cred-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)',
          background: 'var(--surface)', overflow: 'hidden',
        }}>
          <CredCell value="35+" label="anos de mercado · desde 1989" />
          <CredCell value="13" label="premiações como melhor corretora" />
          <CredCell value="10+" label="seguradoras parceiras" />
          <CredCell value="13 UFs" label="estados com clientes ativos" last />
        </div>

        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: '1fr', gap: 40 }}>
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="eyebrow">O que dizem nossos clientes</span>
            <h2 style={{ maxWidth: 720 }}>Atendimento que aparece quando mais importa.</h2>
          </div>
        </div>

        <div className="testimonial-grid" style={{
          marginTop: 40,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          <Testimonial
            quote="Tive um problema com o carro num domingo à noite e fui atendido em 20 minutos. O Soriani é parceiro de verdade — não some depois da venda."
            name="N. S."
            role="Cliente Auto · 6 anos"
          />
          <Testimonial
            quote="Migrei toda a frota da minha transportadora para a SOSSEG. Reduzi 18% no prêmio e ganhei um gestor que conhece cada veículo pelo nome."
            name="L. T. F."
            role="Frota · 11 veículos"
          />
          <Testimonial
            quote="Atendimento humano, profissional e rápido. Já indiquei para meus pais e três amigos — todos satisfeitos."
            name="M. R."
            role="Vida + Residencial"
          />
        </div>

        <div style={{ marginTop: 80, padding: '32px 36px',
          background: 'var(--primary-50)',
          border: '1px solid color-mix(in oklab, var(--primary) 12%, transparent)',
          borderRadius: 'var(--radius-lg)',
          display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14, background: 'var(--surface)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'var(--shadow-sm)',
            }}>
              <Icon.Shield width="28" height="28" style={{ color: 'var(--primary)' }} />
            </div>
            <div>
              <div className="eyebrow">Reconhecimento</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4, maxWidth: 540, lineHeight: 1.25 }}>
                13 premiações como melhor corretora desde 2010 — reconhecida pelas principais seguradoras do país.
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <Award year="2023" />
            <Award year="2024" />
            <Award year="2025" />
          </div>
        </div>
      </div>
    </section>
  );
}

function CredCell({ value, label, last }) {
  return (
    <div style={{
      padding: '36px 28px',
      borderRight: last ? 'none' : '1px solid var(--line)',
      textAlign: 'left',
    }} className="cred-cell">
      <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)' }}>
        {value}
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>{label}</div>
    </div>
  );
}

function Testimonial({ quote, name, role }) {
  return (
    <div style={{
      background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)',
      padding: 28, display: 'flex', flexDirection: 'column', gap: 18, position: 'relative',
    }}>
      <Icon.Quote width="22" height="22" style={{ color: 'var(--accent)', opacity: .7 }} />
      <p style={{ color: 'var(--ink)', fontSize: 15.5, lineHeight: 1.55, flex: 1 }}>{quote}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
        <div style={{
          width: 40, height: 40, borderRadius: '50%',
          background: 'var(--warm)', color: 'var(--ink-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500,
        }}>{name.split(' ').map(s => s[0]).join('').slice(0,2)}</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>{role}</div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 2, color: '#F59E0B' }}>
          {[1,2,3,4,5].map(i => <Icon.Star key={i} width="13" height="13" />)}
        </div>
      </div>
    </div>
  );
}

function Award({ year }) {
  return (
    <div style={{
      width: 72, height: 96, borderRadius: 10,
      background: 'var(--surface)', border: '1px solid var(--line)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 4,
    }}>
      <Icon.Star width="22" height="22" style={{ color: '#D97706' }} />
      <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)' }}>{year}</div>
    </div>
  );
}

window.Credibility = Credibility;