const Hero = ({ onNavigate }) => (
  <section className="mc-hero-section" style={hrS.section}>
    <div className="mc-hero-overlay" style={hrS.overlay}></div>
    <div className="mc-hero-group" style={hrS.group}>
      <div className="mc-hero-card" style={hrS.card}>
        <div style={hrS.eyebrow}>
          <span style={hrS.eyebrowLine}></span>
          <span style={hrS.eyebrowText}>Advocacia Previdenciária</span>
        </div>
        <img src="../../assets/logo-2cores-v1.png" alt="Morato & Costa" className="mc-hero-logo" style={hrS.logo} />
        <p className="mc-hero-sub" style={hrS.sub}>
          Especialistas em benefícios previdenciários e assistenciais. Estamos ao seu lado para cuidar do seu caso com atenção e ética.
        </p>
        <button style={hrS.btn} onClick={() => onNavigate('services')}>Nossos Serviços</button>
      </div>
    </div>
  </section>
);

const hrS = {
  section: {
    minHeight: '100vh',
    backgroundColor: '#101814',
    backgroundImage: 'url(../../assets/hero-bg.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    position: 'relative', overflow: 'hidden',
  },
  overlay: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    background: 'linear-gradient(90deg, rgba(16,24,20,0.18) 0%, rgba(16,24,20,0.05) 40%, rgba(16,24,20,0.22) 100%)',
  },
  group: {
    position: 'absolute', top: '50%', right: 0, transform: 'translateY(-50%)',
    width: 480, maxWidth: '92vw', zIndex: 2,
  },
  card: {
    background: 'rgba(237,237,237,0.95)', backdropFilter: 'blur(8px)',
    border: '1px solid rgba(255,255,255,0.5)', borderRadius: '36px 0 0 36px',
    boxShadow: '-26px 24px 60px rgba(0,0,0,0.32)',
    padding: '40px 40px 40px 44px',
  },
  eyebrow: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 },
  eyebrowLine: { display: 'block', width: 32, height: 1, background: '#C4A76E' },
  eyebrowText: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#436355' },
  logo: { width: '100%', maxWidth: 280, objectFit: 'contain', display: 'block', margin: '0 auto 24px' },
  sub: { fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 300, color: '#000', lineHeight: 1.7, marginBottom: 26 },
  btn: { background: '#436355', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff', padding: '14px 32px', borderRadius: 30 },
};

Object.assign(window, { Hero });