const About = ({ onNavigate }) => (
  <section className="mc-about-section" style={abS.section} id="about">
    <div className="mc-about-inner" style={abS.inner}>
      <div className="mc-about-logo-col" style={abS.logoCol}>
        <div className="mc-about-logo-bg" style={abS.logoBg}>
          <img src="../../assets/logo-2cores-v4.png" alt="Morato & Costa" style={abS.logoImg} />
        </div>
      </div>
      <div style={abS.textCol}>
        <div style={abS.eyebrow}><span style={abS.line}></span><span style={abS.eyebrowText}>Sobre o Escritório</span></div>
        <h2 className="mc-about-h2" style={abS.h2}>Tradição e<br />Comprometimento</h2>
        <div style={abS.rule}></div>
        <p style={abS.body}>Desde sua fundação, o escritório Morato & Costa tem na sua essência o atendimento humanizado. E quanto ao direto das pessoas, este é tratado com muita técnica.</p>
        <p style={abS.body}>Em nosso escritório unimos a tradição do direito com a atualização da justiça, característica fundamental para quem é especialista em direto previdenciário e assistencial.</p>
        <div className="mc-about-concept" style={abS.concept}>
          <div style={abS.conceptItem}><span style={abS.conceptLabel}>Lei</span><span style={abS.amp}>&amp;</span><span style={abS.conceptLabel}>Justiça</span></div>
          <div className="mc-about-concept-dot" style={abS.conceptDot}></div>
          <div style={abS.conceptItem}><span style={abS.conceptLabel}>Moderno</span><span style={abS.amp}>&amp;</span><span style={abS.conceptLabel}>Tradicional</span></div>
        </div>
        <button style={abS.btn} onClick={() => onNavigate('contact')}>Fale com Nossa Equipe</button>
      </div>
    </div>
  </section>
);

const abS = {
  section: { background: '#fff', padding: '100px 0' },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 40px', display: 'flex', gap: 80, alignItems: 'center' },
  logoCol: { flex: '0 0 400px' },
  logoBg: { background: '#436355', padding: 56, borderRadius: 40, boxShadow: '0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center' },
  logoImg: { width: '100%', maxWidth: 300, objectFit: 'contain' },
  textCol: { flex: 1, minWidth: 0 },
  eyebrow: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 },
  line: { display: 'block', width: 32, height: 1, background: '#C4A76E' },
  eyebrowText: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#C4A76E' },
  h2: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontSize: 38, fontWeight: 400, color: '#000', lineHeight: 1.2, marginBottom: 20 },
  rule: { height: 1, background: '#C4A76E', width: 48, marginBottom: 24 },
  body: { fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 300, color: '#3e3e3e', lineHeight: 1.75, marginBottom: 16 },
  concept: { display: 'flex', alignItems: 'center', gap: 20, margin: '28px 0 32px', padding: '20px 24px', background: '#fff', borderRadius: 30, flexWrap: 'wrap' },
  conceptItem: { display: 'flex', alignItems: 'center', gap: 10 },
  conceptLabel: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontSize: 17, color: '#000' },
  amp: { fontFamily: "'Libre Caslon Text', serif", fontSize: 20, color: '#C4A76E', fontStyle: 'italic' },
  conceptDot: { width: 6, height: 6, borderRadius: '50%', background: '#C4A76E', flexShrink: 0 },
  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, { About });