// Hero.jsx — Dra. Ana Carolina Grillo — Hero Section
const Hero = ({ onNavigate }) => {
  return (
    <section style={{
      background: '#33395B',
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      position: 'relative',
      overflow: 'hidden',
      paddingTop: 96,
    }}>
      {/* Decorative gold line top */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(90deg, transparent, #B8960C 30%, #C9A84C 60%, transparent)' }}/>

      {/* Background geometric accent */}
      <div style={{
        position: 'absolute', right: -80, top: '10%',
        width: 600, height: 600,
        border: '1px solid rgba(184,150,12,0.12)',
        borderRadius: '50%', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', right: -40, top: '15%',
        width: 480, height: 480,
        border: '1px solid rgba(184,150,12,0.08)',
        borderRadius: '50%', pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', width: '100%', boxSizing: 'border-box' }}>
        {/* Left: text */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <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' }}>Endocrinologista · Brasília, DF</span>
          </div>

          <h1 style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 58, fontWeight: 300, color: '#fff', lineHeight: 1.1, letterSpacing: '-0.01em', margin: 0 }}>
            Cuidado<br/>
            <em style={{ fontStyle: 'italic', color: '#C9A84C' }}>especializado</em><br/>
            para a sua saúde
          </h1>

          <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 16, fontWeight: 400, color: 'rgba(255,255,255,0.72)', lineHeight: 1.8, margin: 0, maxWidth: 420 }}>
            Atendimento humanizado em Endocrinologia, com foco em diabetes, tireoide, obesidade e síndrome metabólica. Consultas presenciais em Brasília e online.
          </p>

          <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <button onClick={() => onNavigate('contato')} style={{
              fontFamily: "'Montserrat',sans-serif", fontSize: 13, fontWeight: 500,
              letterSpacing: '0.06em', padding: '14px 32px',
              background: '#B8960C', color: '#fff', border: 'none',
              borderRadius: 4, cursor: 'pointer',
            }}>Agendar Consulta</button>
            <button onClick={() => onNavigate('sobre')} style={{
              fontFamily: "'Montserrat',sans-serif", fontSize: 13, fontWeight: 400,
              letterSpacing: '0.04em', padding: '14px 0',
              background: 'none', color: 'rgba(255,255,255,0.8)', border: 'none',
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
            }}>Conheça a Dra. Ana Carolina <span style={{ color: '#B8960C' }}>→</span></button>
          </div>

          {/* Trust row */}
          <div style={{ display: 'flex', gap: 32, paddingTop: 8, borderTop: '1px solid rgba(184,150,12,0.2)' }}>
            {[['CRM', '27551/DF'], ['Experiência', '+19 anos'], ['Atendimento', 'Online & Presencial']].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: "'Alice',Georgia,serif", fontSize: 20, fontWeight: 400, color: '#B8960C' }}>{v}</div>
                <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{k}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: doctor photo */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
          <div style={{ position: 'relative', width: 420, height: 520 }}>
            <img
              src="/assets/dra-ana-carolina.jpg"
              alt="Dra. Ana Carolina Grillo"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', borderRadius: 12, display: 'block' }}
            />
            {/* Open corner frame decoration */}
            {[{top:12,left:12,bw:'2px 0 0 2px'},{top:12,right:12,bw:'2px 2px 0 0'},{bottom:12,left:12,bw:'0 0 2px 2px'},{bottom:12,right:12,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>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });