// Depoimentos.jsx — Testimonials carousel section
const depoimentos = [
  { text: 'A Dra. Ana Carolina me acolheu desde o primeiro momento. Ela explicou tudo com muita clareza e me sinto segura no tratamento.', name: 'M.S.', local: 'Brasília, DF' },
  { text: 'Excelente profissional! Além do conhecimento técnico impecável, tem uma humanidade rara. Minha tireoide agradece muito.', name: 'C.R.', local: 'Online' },
  { text: 'Em poucos meses de acompanhamento, meu diabetes está muito bem controlado. Recomendo demais!', name: 'J.L.', local: 'Brasília, DF' },
  { text: 'Me sinto ouvida e cuidada em cada consulta. Ela vai além da prescrição — cuida de você como pessoa.', name: 'F.A.', local: 'Goiânia, GO' },
];

const Depoimentos = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section id="depoimentos" style={{ background: '#F5F3EF', padding: '100px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 40, height: 1, background: '#B8960C' }}/>
            <span style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B8960C' }}>Pacientes</span>
            <div style={{ width: 40, height: 1, background: '#B8960C' }}/>
          </div>
          <h2 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 40, fontWeight: 400, color: '#1A1A2E', margin: 0 }}>Depoimentos</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {depoimentos.map((d, i) => (
            <div key={i} onClick={() => setActive(i)} style={{
              background: active === i ? '#002147' : '#fff',
              borderRadius: 10, padding: '32px',
              boxShadow: '0 4px 24px rgba(0,33,71,0.08)',
              cursor: 'pointer', transition: 'all 0.25s',
              border: active === i ? '1px solid #B8960C' : '1px solid transparent',
            }}>
              <div style={{ color: '#B8960C', fontSize: 18, marginBottom: 16, letterSpacing: 2 }}>★★★★★</div>
              <p style={{
                fontFamily: "'Alice',Georgia,serif", fontSize: 18, fontStyle: 'italic',
                color: active === i ? 'rgba(255,255,255,0.9)' : '#1A1A2E',
                lineHeight: 1.7, margin: '0 0 20px 0',
              }}>"{d.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: active === i ? 'rgba(184,150,12,0.2)' : '#F5F3EF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 14, color: '#B8960C' }}>{d.name[0]}</span>
                </div>
                <div>
                  <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 12, fontWeight: 600, color: active === i ? '#fff' : '#1A1A2E' }}>{d.name}</div>
                  <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, color: active === i ? 'rgba(255,255,255,0.5)' : '#4A4A6A' }}>{d.local}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Depoimentos });