'use client';

import { useEffect, useRef } from 'react';
import { ArrowDown } from 'lucide-react';
import { Button } from '@/components/ui/button';

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

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!sectionRef.current) return;
      const { clientX, clientY } = e;
      const { innerWidth, innerHeight } = window;
      const xPercent = (clientX / innerWidth - 0.5) * 20;
      const yPercent = (clientY / innerHeight - 0.5) * 20;

      const layers = sectionRef.current.querySelectorAll('.parallax-layer');
      layers.forEach((layer, index) => {
        const speed = (index + 1) * 0.5;
        (layer as HTMLElement).style.transform = `translate(${xPercent * speed}px, ${yPercent * speed}px)`;
      });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  const scrollToSection = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section
      ref={sectionRef}
      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#001a35] via-royal to-[#001529]"
      style={{
        backgroundSize: '400% 400%',
        animation: 'gradient-shift 15s ease infinite',
      }}
    >
      <div className="absolute inset-0">
        <img
          src="https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1920"
          alt="Modern living room interior"
          className="w-full h-full object-cover opacity-20"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-royal/95 via-royal/90 to-[#001529]/95"></div>
      </div>

      <div className="absolute inset-0 opacity-20">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(149,124,61,0.1),transparent_50%)]"></div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(149,124,61,0.15),transparent_50%)]"></div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(149,124,61,0.15),transparent_50%)]"></div>
      </div>

      <div className="parallax-layer absolute inset-0 opacity-20">
        <div className="absolute top-20 left-10 w-72 h-72 bg-gold/10 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-royal/30 rounded-full blur-3xl"></div>
      </div>

      <div className="parallax-layer absolute inset-0">
        {[...Array(50)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-gold/30 rounded-full"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animation: `float ${3 + Math.random() * 4}s ease-in-out infinite`,
              animationDelay: `${Math.random() * 2}s`,
            }}
          ></div>
        ))}
      </div>

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div className="animate-in fade-in slide-in-from-bottom-4">
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-8xl font-bold text-white mb-6 sm:mb-8 tracking-tight relative mt-12 sm:mt-16 lg:mt-20">
            <span className="inline-block hover:scale-110 transition-transform duration-300">Loc'</span>
            <span className="text-gold inline-block hover:scale-110 transition-transform duration-300" style={{ textShadow: '0 0 40px rgba(149,124,61,0.5)' }}>Pro</span>
            <span className="inline-block hover:scale-110 transition-transform duration-300"> & Co</span>
          </h1>

          <div className="relative inline-block mb-4 sm:mb-6">
            <div className="absolute inset-0 bg-gold/10 blur-xl"></div>
            <p className="relative text-xl sm:text-2xl md:text-3xl text-white mb-2 max-w-4xl mx-auto font-light tracking-wide px-4">
              Votre partenaire en sous-location immobilière
            </p>
          </div>

          <p className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-3 sm:mb-4 max-w-3xl mx-auto font-light px-4">
            Un loyer garanti chaque mois, zéro gestion pour vous
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center sm:space-x-3 text-gold/80 mb-12 sm:mb-16 px-4">
            <div className="hidden sm:block w-8 lg:w-12 h-px bg-gradient-to-r from-transparent to-gold/50"></div>
            <p className="text-sm sm:text-base lg:text-lg tracking-wider uppercase font-light text-center">
              <span className="block sm:hidden mb-2">Centre-Val de Loire</span>
              <span className="block sm:hidden">Orléans • Blois</span>
              <span className="hidden sm:inline">Centre-Val de Loire • Orléans • Blois</span>
            </p>
            <div className="hidden sm:block w-8 lg:w-12 h-px bg-gradient-to-l from-transparent to-gold/50"></div>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center 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"
              onClick={() => scrollToSection('contact')}
            >
              <span className="relative z-10 flex items-center justify-center">
                Nous confier votre bien
                <ArrowDown className="ml-2 w-5 h-5 group-hover:translate-y-1 transition-transform duration-300" />
              </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 group border-2 border-white/30 text-white hover:bg-white hover:text-royal text-base sm:text-lg px-8 sm:px-10 py-6 sm:py-7 rounded-xl glass-effect transition-all duration-500 hover:scale-105 hover:border-white font-medium shadow-lg"
              onClick={() => scrollToSection('process')}
            >
              <span className="flex items-center justify-center">
                <span className="hidden sm:inline">Découvrir notre processus</span>
                <span className="sm:hidden">Notre processus</span>
                <ArrowDown className="ml-2 w-5 h-5 group-hover:translate-y-1 transition-transform duration-300" />
              </span>
            </Button>
          </div>

        </div>
      </div>

      <div className="absolute bottom-8 sm:bottom-12 left-1/2 transform -translate-x-1/2 z-20">
        <div className="animate-bounce">
          <div className="relative">
            <div className="absolute inset-0 blur-lg bg-gold/50 rounded-full"></div>
            <ArrowDown className="relative w-8 h-8 sm:w-10 sm:h-10 text-gold" strokeWidth={2} />
          </div>
        </div>
      </div>

      <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent pointer-events-none"></div>
    </section>
  );
}