'use client';

import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useEffect, useRef } from 'react';

export default function Contact() {
  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 contactInfo = [
    {
      icon: MapPin,
      title: 'Notre Zone d\'Intervention',
      content: 'Centre-Val de Loire (Orléans, Blois)',
    },
    {
      icon: Phone,
      title: 'Téléphone',
      content: '+33 7 88 13 09 27',
    },
    {
      icon: Mail,
      title: 'Email',
      content: 'maelle.alincant@gmail.com',
    },
  ];

  return (
    <section ref={sectionRef} id="contact" 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-0 left-1/4 w-96 h-96 bg-gold rounded-full blur-3xl animate-pulse" style={{ animationDuration: '5s' }}></div>
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-royal rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }}></div>
      </div>

      <div className="absolute top-1/2 left-1/4 w-24 h-24 border border-gold/20 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">
              Contactez-Nous
            </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">
            Parlons de Votre Projet
          </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">
            Vous souhaitez en savoir plus ou nous confier la gestion de votre bien ?
            Nous serons ravis d'échanger avec vous.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 mb-16 sm:mb-20">
          {contactInfo.map((info, 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 text-center relative z-10">
                <div className="relative inline-block mb-6">
                  <div className="absolute inset-0 bg-gold/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  <div className="relative bg-gradient-to-br from-royal to-[#003d7a] rounded-2xl w-20 h-20 flex items-center justify-center mx-auto shadow-lg group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
                    <info.icon className="w-10 h-10 text-gold" strokeWidth={2} />
                  </div>
                </div>
                <h3 className="text-xl font-bold text-royal mb-3 group-hover:text-gold transition-colors duration-300">{info.title}</h3>
                <p className="text-gray-600 text-lg">{info.content}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="relative mb-12 sm:mb-16">
          <div className="absolute inset-0 bg-gold/5 blur-3xl rounded-3xl"></div>
          <form className="relative bg-white rounded-2xl sm:rounded-3xl shadow-2xl p-6 sm:p-10 md:p-16 border-2 border-gold/20 hover:border-gold/40 transition-all duration-500" itemScope itemType="https://schema.org/ContactPage">
            <div className="max-w-3xl mx-auto text-center">
              <div className="inline-block mb-6 sm:mb-8">
                <div className="relative">
                  <div className="absolute inset-0 bg-gold/20 blur-xl rounded-full"></div>
                  <div className="relative bg-gradient-to-br from-gold/10 to-gold/5 rounded-xl sm:rounded-2xl p-3 sm:p-4">
                    <Send className="w-10 h-10 sm:w-12 sm:h-12 text-gold" strokeWidth={1.5} />
                  </div>
                </div>
              </div>

              <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold text-royal mb-4 sm:mb-6 px-4">
                Prêt à Démarrer Votre Projet ?
              </h3>
              <p className="text-base sm:text-lg md:text-xl text-gray-700 mb-8 sm:mb-10 leading-relaxed font-light px-4">
                Confiez-nous dès maintenant la gestion de votre bien immobilier et découvrez
                une nouvelle façon de percevoir vos revenus locatifs, sans contrainte et en toute tranquillité.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center mb-8 px-4">
                <Button
                  size="lg"
                  className="w-full sm:w-auto group relative bg-gradient-to-r from-gold via-[#b8975a] to-gold bg-[length:200%_100%] hover:bg-right text-white text-base sm:text-lg px-8 sm:px-10 py-6 sm:py-7 rounded-xl shadow-[0_20px_60px_-15px_rgba(149,124,61,0.5)] transition-all duration-500 hover:shadow-[0_20px_80px_-15px_rgba(149,124,61,0.8)] hover:scale-105 font-medium overflow-hidden"
                >
                  <span className="relative z-10 flex items-center justify-center">
                    <Phone className="w-5 h-5 mr-2" />
                    Appelez-nous
                  </span>
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-1000"></div>
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full sm:w-auto border-2 border-royal text-royal hover:bg-royal hover:text-white text-base sm:text-lg px-8 sm:px-10 py-6 sm:py-7 rounded-xl transition-all duration-500 hover:scale-105 font-medium"
                >
                  <Mail className="w-5 h-5 mr-2" />
                  Envoyez un email
                </Button>
              </div>

              <div className="inline-flex items-center space-x-3 px-6 py-3 bg-gold/10 rounded-full">
                <div className="w-2 h-2 bg-gold rounded-full animate-pulse"></div>
                <p className="text-sm font-medium text-gold">Réponse garantie sous 24h</p>
              </div>
            </div>
          </form>
        </div>

        <div className="text-center px-4">
          <div className="inline-block px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-royal/5 to-gold/5 rounded-xl sm:rounded-2xl border border-gold/20">
            <p className="text-gray-700 italic text-base sm:text-lg">
              Votre satisfaction et la valorisation de votre patrimoine sont au cœur de nos préoccupations.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}