'use client';

import { Phone, Home, FileCheck, Key } from 'lucide-react';
import { useEffect, useRef } from 'react';

export default function Process() {
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
          }
        });
      },
      { threshold: 0.1 }
    );

    const cards = sectionRef.current?.querySelectorAll('.fade-in-step');
    cards?.forEach((card) => observer.observe(card));

    return () => observer.disconnect();
  }, []);

  const steps = [
    {
      icon: Phone,
      title: 'Premier Contact',
      description: 'Vous nous contactez pour nous présenter votre bien et vos attentes. Nous prenons le temps d\'écouter vos besoins et de répondre à toutes vos questions.',
      number: '01',
    },
    {
      icon: Home,
      title: 'Visite du Bien',
      description: 'Nous organisons une visite de votre logement pour évaluer son potentiel et vous proposer une offre de sous-location personnalisée adaptée au marché local.',
      number: '02',
    },
    {
      icon: FileCheck,
      title: 'Signature du Contrat',
      description: 'Signature d\'un contrat de sous-location transparent et sécurisé qui définit les conditions de notre collaboration et protège vos intérêts.',
      number: '03',
    },
    {
      icon: Key,
      title: 'Prise en Charge Totale',
      description: 'Vous recevez votre loyer tous les mois et ne vous occupez plus de rien. Nous gérons tout : locataires, entretien, démarches administratives.',
      number: '04',
    },
  ];

  return (
    <section ref={sectionRef} id="process" className="py-32 bg-gradient-to-br from-gray-50 via-white to-gray-50 relative overflow-hidden">
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-royal rounded-full blur-3xl animate-pulse" style={{ animationDuration: '7s' }}></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gold rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }}></div>
      </div>

      <div className="absolute top-10 right-10 w-64 h-64 border-2 border-gold/10 rounded-full"></div>
      <div className="absolute bottom-10 left-10 w-48 h-48 border-2 border-royal/10 rounded-full"></div>
      <div className="absolute top-1/2 right-20 w-32 h-32 border-2 border-gold/10 rounded-full"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center mb-16 sm:mb-20">
          <div className="inline-block mb-4 sm:mb-6">
            <span className="text-gold text-xs sm:text-sm font-semibold tracking-widest uppercase px-3 sm:px-4 py-1.5 sm:py-2 bg-gold/10 rounded-full">
              Notre Processus
            </span>
          </div>
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-royal mb-6 sm:mb-8 tracking-tight px-4">
            Un Parcours Simple
          </h2>
          <div className="flex items-center justify-center space-x-2 sm:space-x-3 mb-8 sm:mb-10">
            <div className="w-12 sm:w-16 h-0.5 bg-gradient-to-r from-transparent via-gold to-transparent"></div>
            <div className="w-2 h-2 sm:w-3 sm:h-3 bg-gold rounded-full"></div>
            <div className="w-12 sm:w-16 h-0.5 bg-gradient-to-r from-gold via-gold to-transparent"></div>
          </div>
          <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-700 max-w-4xl mx-auto leading-relaxed font-light px-4">
            Un parcours simple et transparent en 4 étapes pour confier la gestion de votre bien en toute sérénité.
          </p>
        </div>

        <div className="relative mb-20">
          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 transform -translate-y-1/2 z-0">
            <div className="h-full bg-gradient-to-r from-gold/20 via-gold/40 to-gold/20 relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gold/60 to-transparent w-1/4 animate-pulse" style={{ animationDuration: '3s' }}></div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
            {steps.map((step, index) => (
              <div
                key={index}
                className="fade-in-step relative group opacity-0 translate-y-8 transition-all duration-700"
                style={{
                  animationDelay: `${index * 150}ms`,
                  transitionDelay: `${index * 150}ms`,
                }}
              >
                <div className="bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-500 border-2 border-transparent hover:border-gold/30 h-full transform hover:-translate-y-2">
                  <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 z-20">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gold/30 rounded-full blur-xl group-hover:blur-2xl transition-all duration-500"></div>
                      <div className="relative bg-gradient-to-br from-royal to-[#003d7a] rounded-full w-20 h-20 flex items-center justify-center border-4 border-white shadow-2xl group-hover:scale-110 group-hover:rotate-6 transition-all duration-500">
                        <step.icon className="w-10 h-10 text-gold" strokeWidth={2} />
                      </div>
                    </div>
                  </div>

                  <div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <div className="w-16 h-16 bg-gold/5 rounded-full"></div>
                  </div>

                  <div className="text-right mb-6 mt-8">
                    <span className="text-7xl font-bold bg-gradient-to-br from-gold/20 to-gold/5 bg-clip-text text-transparent group-hover:from-gold/40 group-hover:to-gold/10 transition-all duration-500">
                      {step.number}
                    </span>
                  </div>

                  <h3 className="text-2xl font-bold text-royal mb-4 group-hover:text-gold transition-colors duration-300">
                    {step.title}
                  </h3>

                  <p className="text-gray-600 leading-relaxed text-base">
                    {step.description}
                  </p>

                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-gold/0 via-gold/50 to-gold/0 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 rounded-b-3xl"></div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="text-center">
          <div className="relative inline-block">
            <div className="absolute inset-0 bg-gold/10 blur-2xl rounded-3xl"></div>
            <div className="relative bg-white rounded-3xl p-10 md:p-16 shadow-2xl border-2 border-gold/20 hover:border-gold/40 transition-all duration-500 max-w-3xl mx-auto">
              <h3 className="text-3xl font-bold text-royal mb-6">
                Prêt à nous confier votre bien ?
              </h3>
              <p className="text-gray-700 text-xl mb-4 leading-relaxed font-light">
                Contactez-nous dès aujourd'hui pour découvrir comment nous pouvons
                simplifier la gestion de votre bien immobilier.
              </p>
              <div className="flex items-center justify-center space-x-2 text-gold">
                <div className="w-2 h-2 bg-gold rounded-full animate-pulse"></div>
                <p className="text-sm font-medium">Réponse sous 24h</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}