'use client';

import { Coins, Clock, Shield, Wrench, FileText, Headphones } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { useEffect, useRef } from 'react';

export default function Advantages() {
  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-card');
    cards?.forEach((card) => observer.observe(card));

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

  const advantages = [
    {
      icon: Coins,
      title: 'Loyer Garanti',
      description: 'Percevez votre loyer tous les mois, même en cas de vacance locative. Des revenus réguliers et prévisibles pour votre patrimoine.',
      gradient: 'from-[#b8975a] to-gold',
    },
    {
      icon: Clock,
      title: 'Gain de Temps',
      description: 'Plus besoin de gérer les visites, les appels ou les démarches administratives. Nous nous occupons de tout pour vous.',
      gradient: 'from-royal to-[#003d7a]',
    },
    {
      icon: Shield,
      title: 'Sécurité Juridique',
      description: 'Un contrat en bonne et due forme qui protège vos intérêts et respecte toutes les réglementations en vigueur.',
      gradient: 'from-[#b8975a] to-gold',
    },
    {
      icon: Wrench,
      title: 'Entretien Assuré',
      description: 'Nous prenons en charge l\'entretien courant et veillons à ce que votre bien soit toujours en parfait état.',
      gradient: 'from-royal to-[#003d7a]',
    },
    {
      icon: FileText,
      title: 'Gestion Administrative',
      description: 'États des lieux, assurances, déclarations : toute la paperasse est gérée par nos soins avec professionnalisme.',
      gradient: 'from-[#b8975a] to-gold',
    },
    {
      icon: Headphones,
      title: 'Accompagnement Personnalisé',
      description: 'Une équipe dédiée et accessible qui répond à vos questions et vous tient informé régulièrement.',
      gradient: 'from-royal to-[#003d7a]',
    },
  ];

  return (
    <section ref={sectionRef} id="advantages" className="py-32 bg-gradient-to-b from-white via-gray-50/30 to-white relative overflow-hidden">
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-1/3 right-0 w-96 h-96 bg-royal rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }}></div>
        <div className="absolute bottom-1/3 left-0 w-96 h-96 bg-gold rounded-full blur-3xl animate-pulse" style={{ animationDuration: '5s' }}></div>
      </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">
              Nos Avantages
            </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">
            Pourquoi Choisir Loc'Pro ?
          </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">
            Une solution de sous-location complète qui vous offre sécurité et tranquillité d'esprit,
            tout en maximisant la rentabilité de votre bien.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 mb-16 sm:mb-24">
          {advantages.map((advantage, index) => (
            <Card
              key={index}
              className="fade-in-card border-2 border-gray-100 hover:border-gold/30 transition-all duration-500 hover:shadow-2xl group bg-white relative overflow-hidden opacity-0 translate-y-8"
              style={{
                animationDelay: `${index * 100}ms`,
                transitionDelay: `${index * 100}ms`,
              }}
            >
              <div className="absolute inset-0 bg-gradient-to-br from-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

              <CardContent className="p-8 relative z-10">
                <div className="relative inline-block mb-6">
                  <div className="absolute inset-0 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <div className={`w-20 h-20 bg-gradient-to-br ${advantage.gradient} rounded-2xl`}></div>
                  </div>
                  <div className={`relative bg-gradient-to-br ${advantage.gradient} rounded-2xl w-20 h-20 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-lg`}>
                    <advantage.icon className="w-10 h-10 text-white" strokeWidth={2} />
                  </div>
                </div>

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

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

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

        <div className="relative">
          <div className="absolute inset-0 bg-gold/5 blur-3xl rounded-3xl"></div>
          <div className="relative bg-gradient-to-br from-royal via-[#002d5a] to-[#003d7a] rounded-2xl sm:rounded-3xl p-6 sm:p-10 md:p-20 text-white shadow-2xl overflow-hidden">
            <div className="absolute inset-0 opacity-10">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(149,124,61,0.4),transparent_70%)]"></div>
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(149,124,61,0.3),transparent_70%)]"></div>
            </div>

            <div className="absolute top-6 right-6 sm:top-10 sm:right-10 w-24 h-24 sm:w-32 sm:h-32 border-2 border-gold/20 rounded-full"></div>
            <div className="absolute bottom-6 left-6 sm:bottom-10 sm:left-10 w-20 h-20 sm:w-24 sm:h-24 border-2 border-gold/20 rounded-full"></div>

            <div className="relative z-10 text-center">
              <div className="inline-block mb-4 sm:mb-6">
                <div className="px-4 sm:px-6 py-1.5 sm:py-2 bg-gold/20 backdrop-blur-sm rounded-full border border-gold/30">
                  <p className="text-gold text-xs sm:text-sm font-semibold tracking-wider uppercase">L'Excellence au Service de Votre Patrimoine</p>
                </div>
              </div>

              <h3 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-6 sm:mb-8 tracking-tight px-4">
                La Tranquillité d'Esprit en Plus
              </h3>

              <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-100 max-w-3xl mx-auto leading-relaxed mb-8 sm:mb-12 font-light px-4">
                Avec Loc'Pro & Co, bénéficiez d'une gestion locative complète et professionnelle.
                Profitez de vos revenus sans les contraintes, en toute sérénité.
              </p>

              <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-4 sm:gap-6 md:gap-8 text-base sm:text-lg mb-6 sm:mb-8 px-4">
                {['Zéro impayé', 'Zéro vacance', 'Zéro souci'].map((item, index) => (
                  <div key={index} className="group/item flex items-center justify-center space-x-2 sm:space-x-3 px-4 sm:px-6 py-2 sm:py-3 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 hover:bg-white/20 transition-all duration-300">
                    <div className="relative">
                      <div className="absolute inset-0 bg-gold/50 blur-md rounded-full group-hover/item:blur-lg transition-all duration-300"></div>
                      <div className="relative w-2.5 h-2.5 sm:w-3 sm:h-3 bg-gold rounded-full"></div>
                    </div>
                    <span className="font-medium">{item}</span>
                  </div>
                ))}
              </div>

              <div className="inline-block px-6 sm:px-8 py-3 sm:py-4 bg-gold/10 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-gold/30">
                <p className="text-gold text-base sm:text-lg font-medium">Votre patrimoine entre de bonnes mains</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}