const SERVICES = [
  { title: 'Aposentadorias', desc: 'Aposentadorias por idade e tempo de contribuição; Aposentadoria especial; Contagem e análise do melhor tempo e valor do benefício de aposentadorias.', icon: 'M12 2L3 7v10l9 5 9-5V7L12 2z' },
  { title: 'Aposentadoria do Deficiente', desc: 'Benefício destinado às pessoas portadoras de deficiência que trabalharam nesta condição. Tem o tempo de contribuição e idade reduzidos para aposentar-se.', icon: 'M12 15a3 3 0 100-6 3 3 0 000 6zM19.428 15.341A8 8 0 006.572 5.658m12.856 9.683a8.001 8.001 0 01-12.856 0m12.856 0L21 19m-14.428-3.659L3 19m3.572-13.341L4 4m15.428 1.658L21 4' },
  { title: 'Auxílio-Doença e Aposentadoria por Invalidez', desc: 'Benefício por incapacidade temporária e benefício por incapacidade permanente, inclusive as relacionadas a acidente do trabalho.', icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z' },
  { title: 'Pensão por Morte', desc: 'Benefício destinado aos dependentes do falecido (instituidor do benefício), seja esposa, união estável, filhos enteados, dentre outros.', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
  { title: 'Auxílio-Acidente', desc: 'Benefício destinado a aquele que em decorrência de um acidente, seja ele no trabalho ou não, ficou com sequelas.', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
  { title: 'BPC / LOAS', desc: 'Benefício de Prestação Continuada (LOAS) ao deficiente e ao idoso. Benefício destinado às pessoas em situação de vulnerabilidade social, idade avançada e deficiência.', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
  { title: 'Planejamento Previdenciário', desc: 'Serviço destinado àqueles que ainda não têm tempo necessário para aposentar-se, mas quer saber quando irá aposentar e qual o valor do benefício.', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
  { title: 'Revisões em Geral', desc: 'Realização análise da concessão do benefício e cálculos para apuração de possível revisão, com a finalidade de aumentar o valor do benefício.', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' },
  { title: 'Atuação no INSS e no Judiciário', desc: 'A atuação do escritório é realizada tanto no INSS quanto no judiciário, portanto, completo em todas as esferas.', icon: 'M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3' },
];

const Services = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section className="mc-services-section" style={svS.section} id="services">
      <div className="mc-services-inner" style={svS.inner}>
        <div style={svS.head}>
          <div style={svS.eyebrow}><span style={svS.line}></span><span style={svS.eyebrowText}>Áreas de Atuação</span><span style={svS.line}></span></div>
          <h2 className="mc-services-h2" style={svS.h2}>Nossos Serviços</h2>
          <p style={svS.lead}>Atuamos nos pedidos de benefícios no INSS e no Judiciário (ação judicial).</p>
        </div>
        <div className="mc-services-grid" style={svS.grid}>
          {SERVICES.map((svc, i) => (
            <div key={i} className="mc-services-card" style={{ ...svS.card, ...(hovered === i ? svS.cardHover : {}) }} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}>
              <div style={svS.iconBox}>
                <svg viewBox="0 0 24 24" fill="none" stroke="#C4A76E" strokeWidth="1.5" width="20" height="20"><path d={svc.icon}/></svg>
              </div>
              <h3 style={svS.cardTitle}>{svc.title}</h3>
              <div style={svS.rule}></div>
              <p style={svS.cardBody}>{svc.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const svS = {
  section: { background: '#EDEDED', padding: '100px 0' },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 40px' },
  head: { textAlign: 'center', marginBottom: 60 },
  eyebrow: { display: 'flex', alignItems: 'center', justifyContent: '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', marginBottom: 16 },
  lead: { fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 300, color: '#767676', lineHeight: 1.7, maxWidth: 520, margin: '0 auto' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  card: { background: '#fff', padding: '28px 24px', borderRadius: 30, boxShadow: '0 4px 20px rgba(0,0,0,0.08)', border: '1px solid #EDEDED', transition: 'box-shadow 0.2s, border-color 0.2s', cursor: 'default' },
  cardHover: { boxShadow: '0 8px 40px rgba(0,0,0,0.12)', borderColor: '#C4A76E' },
  iconBox: { width: 44, height: 44, background: 'rgba(196,167,110,0.12)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 },
  cardTitle: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontSize: 18, fontWeight: 400, color: '#000', marginBottom: 10 },
  rule: { height: 1, background: '#C4A76E', width: 28, marginBottom: 12 },
  cardBody: { fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 300, color: '#767676', lineHeight: 1.65 },
};

Object.assign(window, { Services });