// OtherAreas.jsx — Morato & Costa — demais áreas com advogados parceiros

const OTHER_AREAS = ['Trabalhista', 'Consumidor', 'Criminal', 'Execuções', 'Usucapião', 'Inventário', 'Família', 'Indenizações contra bancos'];

const OtherAreas = () => {
  return (
  <div>
    <section className="mc-oa-top" style={oaS.top}>
      <div className="mc-oa-top-inner" style={oaS.topInner}>
        <div style={oaS.eyebrow}>
          <span style={oaS.rule}></span>
          <span style={oaS.eyebrowText}>Demais Áreas de Atuação</span>
        </div>
        <h2 className="mc-oa-h1" style={oaS.h1}>Sua demanda não é previdenciária? Direcionamos você para um profissional especialista conforme sua necessidade.</h2>
        <p style={oaS.lead}>Além do direito previdenciário, contamos com advogados parceiros, de confiança e especialistas na área da sua necessidade.</p>
      </div>
    </section>
    <section className="mc-oa-section" style={oaS.section}>
      <div className="mc-oa-inner" style={oaS.inner}>
        <div className="mc-oa-head" style={oaS.head}>
          <span style={oaS.ruleWide}></span>
          <span className="mc-oa-head-text" style={oaS.headText}>Áreas de atuação com advogados parceiros</span>
          <span style={oaS.ruleWide}></span>
        </div>
        <div className="mc-oa-grid" style={oaS.grid}>
          {OTHER_AREAS.map(area => (
            <article key={area} className="mc-oa-card" style={oaS.card}>
              <span style={oaS.dot}></span>
              <h3 className="mc-oa-card-title" style={oaS.cardTitle}>{area}</h3>
            </article>
          ))}
        </div>
      </div>
    </section>
  </div>
  );
};

const oaS = {
  top: { background: '#436355', padding: '78px 0 70px' },
  topInner: { maxWidth: 1200, margin: '0 auto', padding: '0 40px' },
  eyebrow: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 },
  rule: { display: 'block', width: 32, height: 1, background: '#C4A76E' },
  ruleWide: { display: 'block', width: 48, height: 1, background: '#C4A76E', flexShrink: 0 },
  eyebrowText: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#C4A76E' },
  h1: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontWeight: 400, fontSize: 44, color: '#fff', lineHeight: 1.2, marginBottom: 18, maxWidth: 660, textWrap: 'pretty' },
  lead: { fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 300, color: 'rgba(255,255,255,0.82)', lineHeight: 1.75, maxWidth: 600, textWrap: 'pretty' },
  section: { background: '#fff', padding: '80px 0' },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 40px' },
  head: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, marginBottom: 48 },
  headText: { fontFamily: "'DM Sans', sans-serif", fontSize: 20, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', color: '#C4A76E', lineHeight: 1.35, maxWidth: 640, textAlign: 'center', textWrap: 'pretty' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 },
  card: { background: '#fff', border: '1px solid #E4E4E4', borderRadius: 30, boxShadow: '0 4px 20px rgba(0,0,0,0.06)', padding: '26px 28px', display: 'flex', alignItems: 'center', gap: 16, cursor: 'default', transition: 'box-shadow 0.2s, border-color 0.2s' },
  dot: { display: 'block', width: 8, height: 8, borderRadius: '50%', background: '#C4A76E', flexShrink: 0 },
  cardTitle: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontWeight: 400, fontSize: 24, color: '#000', lineHeight: 1.25, textWrap: 'pretty' },
};

Object.assign(window, { OtherAreas, OTHER_AREAS });