advogados02/Template-01/src/pages/Areas.tsx

import React from 'react';
import { Users, ShieldCheck, Scale, FileText, Home as HomeIcon, ArrowRight } from 'lucide-react';
import { motion } from 'motion/react';

const FadeIn = ({ children, delay = 0 }: { children: React.ReactNode, delay?: number }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: "-100px" }}
    transition={{ duration: 0.6, delay }}
  >
    {children}
  </motion.div>
);

export function Areas() {
  const areas = [
    {
      title: "Direito Trabalhista",
      icon: Users,
      desc: "Defesa dos seus direitos no ambiente de trabalho. Atuamos com rescisões indiretas, cobrança de horas extras não pagas, assédio moral no trabalho, reconhecimento de vínculo empregatício e doenças ocupacionais. Orientação tanto para empregados quanto para empresas em compliance preventivo."
    },
    {
      title: "Direito Previdenciário",
      icon: ShieldCheck,
      desc: "Garantia do seu benefício justo. Realizamos planejamento previdenciário, pedidos de aposentadoria por tempo de contribuição ou idade, aposentadorias especiais, benefícios assistenciais (BPC/LOAS), pensão por morte e reversão de auxílio-doença negado pelo INSS."
    },
    {
      title: "Direito Civil",
      icon: Scale,
      desc: "Proteção do seu patrimônio e interesses civis. Elaboração e revisão de contratos, ações de indenizações por danos morais e materiais, responsabilidade civil, regularização de propriedades e processos de cobranças diversas para recuperação de crédito."
    },
    {
      title: "Direito de Família",
      icon: Users,
      desc: "Soluções ágeis com a sensibilidade que o caso exige. Orientação em divórcios consensuais ou litigiosos, fixação e revisão de pensão alimentícia, regulamentação de guarda e convivência (visitas), além de atuação em inventários judiciais e extrajudiciais."
    },
    {
      title: "Direito do Consumidor",
      icon: FileText,
      desc: "Defesa intransigente contra abusos de empresas e prestadoras de serviço. Atuamos em casos de negativações indevidas (SPC/Serasa), falhas em prestação de serviços (telefonia, planos de saúde), atrasos e cancelamentos de voos, e defeitos não solucionados em produtos novos."
    },
    {
      title: "Direito Imobiliário",
      icon: HomeIcon,
      desc: "Segurança total em transações de imóveis. Assessoramos em usucapião para legalização de titularidade, distratos imobiliários com construtoras por atraso de obras, confecção de contratos de aluguel e venda protegidos, e ações de despejo."
    }
  ];

  return (
    <main className="w-full bg-[#f9fafb] pb-24 pt-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mb-16 text-center">
          <FadeIn>
            <h1 className="mb-4 font-serif text-3xl font-bold tracking-tight text-brand-blue sm:text-4xl sm:text-5xl">
              Áreas de Atuação
            </h1>
            <p className="mx-auto max-w-2xl text-lg text-gray-600">
              Atuação jurídica ampla e estratégica focada nos ramos mais críticos para a defesa dos seus direitos processuais e patrimoniais.
            </p>
          </FadeIn>
        </div>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {areas.map((area, index) => (
            <FadeIn key={index} delay={index * 0.1}>
              <div className="group relative flex h-full flex-col justify-between border border-gray-200 bg-white p-8 transition-all hover:border-brand-gold hover:shadow-xl">
                <div>
                  <div className="mb-6 inline-flex h-12 w-12 items-center justify-center bg-blue-50 text-brand-blue transition-colors group-hover:bg-brand-gold group-hover:text-white">
                    <area.icon className="h-6 w-6" />
                  </div>
                  <h3 className="mb-3 font-serif text-xl font-bold text-brand-blue">
                    {area.title}
                  </h3>
                  <p className="mb-8 text-gray-600 leading-relaxed text-sm">
                    {area.desc}
                  </p>
                </div>
                <a 
                  href="https://wa.me/5511999999999"
                  className="mt-auto inline-flex items-center text-sm font-semibold text-brand-gold hover:underline"
                >
                  Falar sobre o caso <ArrowRight className="ml-1 h-4 w-4" />
                </a>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </main>
  );
}