import React from 'react';
import { MessageCircle } from 'lucide-react';
import { Link } from 'react-router-dom';
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 ComoFunciona() {
  const steps = [
    { num: "01", title: "Envie sua Dúvida", desc: "Entre em contato via WhatsApp e explique brevemente o que aconteceu. Não há barreiras burocráticas no primeiro contato." },
    { num: "02", title: "Avaliação Inicial", desc: "Faço uma análise rápida e honesta da viabilidade jurídica do seu caso, informando as chances de êxito." },
    { num: "03", title: "Orientação e Estratégia", desc: "Apresento a melhor estratégia, os custos de forma totalmente transparente e enviamos o termo de prestação de serviços." },
    { num: "04", title: "Acompanhamento", desc: "Inicio as medidas necessárias, mantendo você atualizado ativamente em cada etapa e movimentação chave do processo." }
  ];

  const points = [
    { title: "Atendimento Direto", desc: "Você fala diretamente com o advogado responsável pelo caso, sem secretárias intermediando." },
    { title: "Linguagem Clara", desc: "Sem 'juridiquês' complicado. Explico sua situação de forma simples que qualquer um entende." },
    { title: "Transparência Total", desc: "Honorários acordados no início. Sem surpresas ou cobranças ocultas no meio do processo." },
    { title: "Agilidade Online", desc: "Tenha todo o suporte por WhatsApp ou videoconferência, sem precisar sair de casa." }
  ];

  return (
    <main className="w-full bg-white pb-24 pt-32">
      <section className="bg-brand-blue py-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <FadeIn>
            <h1 className="mb-6 text-center font-serif text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl">
              Como funciona o acompanhamento
            </h1>
            <p className="mx-auto mb-16 max-w-2xl text-center text-lg text-gray-300">
              Minha prioridade é oferecer um método de atendimento moderno, simplificado e altamente eficiente.
            </p>
          </FadeIn>
          
          <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 relative">
            <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-white/20 hidden lg:block -translate-y-[15px] z-0"></div>
            
            {steps.map((step, index) => (
              <FadeIn key={index} delay={index * 0.1}>
                <div className="relative z-10 flex flex-col items-center text-center">
                  <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full border-4 border-brand-blue bg-brand-gold text-2xl font-serif font-bold text-white shadow-xl">
                    {step.num}
                  </div>
                  <h3 className="mb-3 font-serif text-xl font-bold text-white">{step.title}</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">{step.desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:items-center">
            <FadeIn>
              <h2 className="mb-6 font-serif text-3xl font-bold tracking-tight text-brand-blue sm:text-4xl">
                Por que me escolher para defender você?
              </h2>
              <p className="mb-10 text-lg text-gray-600 text-balance">
                Acredito que a advocacia moderna não precisa ser lenta, cheia de protocolos e distante do cliente. Meu modelo de atuação é focado no resultado e na tranquilidade do cliente.
              </p>
              <Link 
                to="/contato" 
                className="inline-flex items-center justify-center gap-2 bg-brand-blue px-6 py-3 font-semibold text-white transition hover:bg-brand-blue-light"
              >
                <MessageCircle className="h-5 w-5" /> Agendar Consulta
              </Link>
            </FadeIn>
            
            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
              {points.map((point, i) => (
                <FadeIn key={i} delay={i * 0.1}>
                  <div className="border-l-4 border-brand-gold pl-6">
                    <h3 className="mb-2 font-serif text-lg font-bold text-brand-blue">{point.title}</h3>
                    <p className="text-gray-600 leading-relaxed text-sm">{point.desc}</p>
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}