// Especialidades.jsx — Specialties section
const especialidades = [
  { title: 'Diabetes Tipo 1 e 2', desc: 'Diagnóstico, controle glicêmico, uso de tecnologias (sensor, bomba) e prevenção de complicações.' },
  { title: 'Tireoide', desc: 'Hipotireoidismo, hipertireoidismo, nódulos tireoidianos e bócio multinodular.' },
  { title: 'Obesidade', desc: 'Avaliação metabólica completa, medicamentos modernos e acompanhamento multidisciplinar.' },
  { title: 'Síndrome Metabólica', desc: 'Tratamento integrado de dislipidemia, resistência insulínica e hipertensão.' },
  { title: 'Emagrecimento', desc: 'Protocolos individualizados de perda de peso com base em evidências científicas.' },
];

const Especialidades = ({ onNavigate }) => (
  <section id="especialidades" style={{ background: '#33395B', padding: '100px 40px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <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' }}>Áreas de atuação</span>
          <div style={{ width: 40, height: 1, background: '#B8960C' }}/>
        </div>
        <h2 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 40, fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.2 }}>
          Especialidades
        </h2>
      </div>

      {/* Cards grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {especialidades.map((esp, i) => (
          <div key={i} style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(184,150,12,0.2)',
            borderTop: '2px solid #B8960C',
            borderRadius: 10,
            padding: '32px 28px',
            transition: 'background 0.2s',
            cursor: 'default',
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 6, background: 'rgba(184,150,12,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B8960C" strokeWidth="1.5">
                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>
                <path d="M12 8v4l3 3"/>
              </svg>
            </div>
            <h3 style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 16, fontWeight: 600, color: '#fff', margin: '0 0 12px 0' }}>{esp.title}</h3>
            <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7, margin: 0 }}>{esp.desc}</p>
          </div>
        ))}
        {/* CTA card */}
        <div style={{
          background: '#B8960C',
          borderRadius: 10, padding: '32px 28px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
        }}>
          <h3 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 24, fontWeight: 400, color: '#33395B', margin: 0, lineHeight: 1.3 }}>
            Pronto para cuidar da sua saúde?
          </h3>
          <button onClick={() => onNavigate('contato')} style={{
            alignSelf: 'flex-start', fontFamily: "'Montserrat',sans-serif", fontSize: 12, fontWeight: 600,
            letterSpacing: '0.08em', padding: '10px 22px',
            background: '#33395B', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer',
          }}>Agendar Consulta</button>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Especialidades });