'use client';

import { Shield, Heart, TrendingUp, Users } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { useEffect, useRef } from 'react';

export default function Identity() {
  const sectionRef = useRef<HTMLElement>(null);
  const aboutRef = useRef<HTMLDivElement>(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 values = [
    {
      icon: Shield,
      title: 'Confiance',
      description: 'Nous plaçons la confiance au cœur de notre relation avec les propriétaires.',
    },
    {
      icon: Heart,
      title: 'Engagement',
      description: 'Un accompagnement personnalisé et attentif à chaque étape.',
    },
    {
      icon: TrendingUp,
      title: 'Performance',
      description: 'Une gestion optimale pour maximiser la rentabilité de votre bien.',
    },
    {
      icon: Users,
      title: 'Proximité',
      description: 'Une équipe locale qui connaît parfaitement le marché immobilier régional.',
    },
  ];

  return (
    <section ref={sectionRef} id="identity" 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-0 right-0 w-96 h-96 bg-gold rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }}></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-royal 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">
              Notre Identité
            </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">
            Qui sommes-nous ?
          </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">
            Spécialisés en sous-location immobilière en Centre-Val de Loire, nous devenons votre locataire unique
            et vous garantissons un loyer mensuel régulier, sans aucune commission de gestion.
          </p>
        </div>

        <div className="mb-16 sm:mb-24 group" ref={aboutRef}>
          <article className="relative bg-gradient-to-br from-royal via-[#002d5a] to-[#003d7a] rounded-2xl sm:rounded-3xl p-6 sm:p-10 md:p-16 text-white shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-all duration-500">
            <div className="absolute inset-0 opacity-10">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(149,124,61,0.3),transparent_50%)]"></div>
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(149,124,61,0.2),transparent_50%)]"></div>
            </div>

            <div className="relative z-10">
              <div className="flex items-center mb-6 sm:mb-8">
                <div className="w-1 h-8 sm:h-12 bg-gold rounded-full mr-3 sm:mr-4"></div>
                <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gold">Notre Mission</h3>
              </div>
              <div className="space-y-4 sm:space-y-6 text-base sm:text-lg leading-relaxed">
                <p className="text-gray-100">
                  En devenant votre locataire unique, nous vous libérons de toutes les contraintes de gestion locative.
                  Vous percevez un loyer régulier chaque mois, même en cas de vacance, et profitez d'une sécurité financière
                  sans avoir à gérer les relations avec les occupants.
                </p>
                <p className="text-gray-100">
                  Basés à Orléans et Blois, nous connaissons parfaitement le marché immobilier local.
                  Notre approche vous garantit des revenus stables tout en préservant la valeur de votre patrimoine.
                </p>
              </div>

              <div className="absolute -bottom-6 -right-6 w-32 h-32 sm:w-40 sm:h-40 bg-gold/10 rounded-full blur-2xl"></div>
            </div>
          </article>
        </div>

        <div>
          <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold text-royal text-center mb-3 sm:mb-4 px-4">
            Nos Valeurs
          </h3>
          <p className="text-center text-gray-600 mb-12 sm:mb-16 text-base sm:text-lg px-4">
            Les principes qui guident notre action au quotidien
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
            {values.map((value, index) => (
              <Card
                key={index}
                className="fade-in-card border-2 border-gray-100 hover:border-gold transition-all duration-500 hover:shadow-2xl group bg-white relative overflow-hidden opacity-0 translate-y-8"
                style={{
                  animationDelay: `${index * 150}ms`,
                  transitionDelay: `${index * 150}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/10 to-gold/10 group-hover:from-gold/20 group-hover:to-gold/5 transition-all duration-500 rounded-2xl w-24 h-24 flex items-center justify-center mx-auto">
                      <value.icon className="w-12 h-12 text-gold group-hover:scale-110 transition-transform duration-500" strokeWidth={1.5} />
                    </div>
                  </div>

                  <h4 className="text-2xl font-bold text-royal mb-4 group-hover:text-gold transition-colors duration-300">
                    {value.title}
                  </h4>
                  <p className="text-gray-600 leading-relaxed">
                    {value.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}