// Sobre.jsx — About section
const Sobre = ({ onNavigate }) => (
  <section id="sobre" style={{ background: '#F5F3EF', padding: '100px 40px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
      {/* Photo */}
      <div style={{ position: 'relative' }}>
        <div style={{ width: '100%', maxWidth: 380, aspectRatio: '3/4', borderRadius: 10, overflow: 'hidden', position: 'relative' }}>
          <img
            src="assets/dra-ana-carolina.jpg"
            alt="Dra. Ana Carolina Grillo"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
          />
          {[{top:16,left:16,bw:'2px 0 0 2px'},{top:16,right:16,bw:'2px 2px 0 0'},{bottom:16,left:16,bw:'0 0 2px 2px'},{bottom:16,right:16,bw:'0 2px 2px 0'}].map((s,i)=>(
            <div key={i} style={{ position:'absolute', width:28, height:28, borderStyle:'solid', borderColor:'#B8960C', borderWidth: s.bw, ...s, bw:undefined }}/>
          ))}
        </div>
        {/* Credential badge */}
        <div style={{
          position: 'absolute', bottom: -20, right: -20,
          background: '#002147', borderRadius: 8, padding: '16px 20px',
          boxShadow: '0 8px 32px rgba(0,33,71,0.18)',
        }}>
          <div style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 22, color: '#B8960C', fontWeight: 400 }}>CRM 27551/DF</div>
          <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>Endocrinologista</div>
        </div>
      </div>

      {/* Text */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 32, height: 1, background: '#B8960C' }}/>
            <span style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B8960C' }}>Sobre a médica</span>
          </div>
          <h2 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 40, fontWeight: 400, color: '#1A1A2E', lineHeight: 1.2, margin: 0 }}>
            Dra. Ana Carolina<br/>Ferreira Grillo
          </h2>
        </div>

        <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 16, color: '#4A4A6A', lineHeight: 1.8, margin: 0 }}>
          Acredito que cada paciente merece um cuidado individualizado, baseado em evidências e com escuta ativa. Minha trajetória na Endocrinologia me ensinou que a saúde hormonal e metabólica impacta profundamente a qualidade de vida.
        </p>
        <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 16, color: '#4A4A6A', lineHeight: 1.8, margin: 0 }}>
          Atendo adultos com foco em diabetes, doenças da tireoide, obesidade e síndrome metabólica, com abordagem humanizada e personalizada.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            ['Formação', 'Medicina — Especialização em Endocrinologia'],
            ['CRM', '27551/DF'],
            ['Localização', 'SGAS 614 — Asa Sul, Brasília – DF'],
            ['Atendimento', 'Presencial e Online'],
          ].map(([k, v]) => (
            <div key={k} style={{ borderLeft: '2px solid #B8960C', paddingLeft: 12 }}>
              <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, fontWeight: 600, color: '#B8960C', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{k}</div>
              <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: '#1A1A2E' }}>{v}</div>
            </div>
          ))}
        </div>

        <button onClick={() => onNavigate('contato')} style={{
          alignSelf: 'flex-start', fontFamily: "'Montserrat',sans-serif", fontSize: 13, fontWeight: 500,
          letterSpacing: '0.06em', padding: '12px 28px',
          background: '#002147', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer',
        }}>Agendar Consulta</button>
      </div>
    </div>
  </section>
);

Object.assign(window, { Sobre });