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 de Família",
      icon: Users,
      desc: "Soluções acolhedoras 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, guarda, investigação de paternidade e inventários judiciais ou extrajudiciais."
    },
    {
      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 Trabalhista",
      icon: Users,
      desc: "Defesa dos seus direitos no ambiente de trabalho. Atuamos com rescisões indiretas, cobrança de horas extras, combate ao assédio moral, reconhecimento de vínculo e proteção à gestante."
    },
    {
      title: "Direito do Consumidor",
      icon: FileText,
      desc: "Defesa firme contra abusos de fornecedores e planos de saúde. Atuamos em casos de negativações indevidas (SPC/Serasa), falhas em prestação de serviços, recusas abusivas de convênios médicos e defeitos não solucionados."
    },
    {
      title: "Contratos & Acordos",
      icon: ShieldCheck,
      desc: "Segurança total em transações, negócios e parcerias. Assessoramos na confecção e revisão de contratos particulares, locação, distratos, acordos extrajudiciais e documentações essenciais para proteção mútua."
    },
    {
      title: "Planejamento Sucessório",
      icon: HomeIcon,
      desc: "Organização do patrimônio com visão de futuro. Auxílio em testamentos, doações em vida, união estável (pacto antenupcial) e arranjos patrimoniais para evitar conflitos familiares futuros."
    }
  ];

  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-brand-gold/10 text-brand-gold transition-colors group-hover:bg-brand-gold group-hover:text-white rounded-full">
                    <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>
  );
}