import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ArrowRight, Phone } from 'lucide-react';

const Hero = () => {
  const heroRef = useRef<HTMLElement>(null);
  const headlineRef = useRef<HTMLHeadingElement>(null);
  const subheadlineRef = useRef<HTMLParagraphElement>(null);
  const ctaRef = useRef<HTMLDivElement>(null);
  const dashboardRef = useRef<HTMLDivElement>(null);
  const shapesRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Headline word animation
      const words = headlineRef.current?.querySelectorAll('.word');
      if (words) {
        gsap.fromTo(
          words,
          {
            clipPath: 'inset(100% 0 0 0)',
            y: 40,
            opacity: 0,
          },
          {
            clipPath: 'inset(0% 0 0 0)',
            y: 0,
            opacity: 1,
            duration: 0.8,
            stagger: 0.1,
            ease: 'expo.out',
            delay: 0.3,
          }
        );
      }

      // Subheadline animation
      gsap.fromTo(
        subheadlineRef.current,
        { y: 30, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.6, ease: 'expo.out', delay: 0.9 }
      );

      // CTA buttons animation
      gsap.fromTo(
        ctaRef.current?.children || [],
        { scale: 0, opacity: 0 },
        {
          scale: 1,
          opacity: 1,
          duration: 0.7,
          stagger: 0.1,
          ease: 'elastic.out(1, 0.5)',
          delay: 1.1,
        }
      );

      // Dashboard 3D animation
      gsap.fromTo(
        dashboardRef.current,
        {
          rotateY: -45,
          rotateX: 15,
          opacity: 0,
        },
        {
          rotateY: -15,
          rotateX: 5,
          opacity: 1,
          duration: 1.2,
          ease: 'expo.out',
          delay: 0.6,
        }
      );

      // Floating shapes animation
      const shapes = shapesRef.current?.querySelectorAll('.floating-shape');
      if (shapes) {
        shapes.forEach((shape, i) => {
          gsap.fromTo(
            shape,
            { scale: 0, opacity: 0 },
            {
              scale: 1,
              opacity: 1,
              duration: 0.5,
              ease: 'elastic.out(1, 0.5)',
              delay: 0.8 + i * 0.15,
            }
          );

          // Continuous floating animation
          gsap.to(shape, {
            y: `random(-15, 15)`,
            x: `random(-10, 10)`,
            rotation: `random(-5, 5)`,
            duration: `random(6, 12)`,
            repeat: -1,
            yoyo: true,
            ease: 'sine.inOut',
          });
        });
      }
    }, heroRef);

    return () => ctx.revert();
  }, []);

  const headlineWords = ['We Build', 'Fast,', 'Secure', '& Modern', 'Web Solutions'];

  return (
    <section
      id="home"
      ref={heroRef}
      className="relative min-h-screen flex items-center overflow-hidden pt-20"
    >
      {/* Animated Background */}
      <div className="absolute inset-0 bg-[#050714]">
        {/* Gradient Orbs */}
        <div className="absolute top-0 right-0 w-[600px] h-[600px] rounded-full bg-gradient-radial from-[#3b6aff]/30 to-transparent opacity-60 blur-3xl" />
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full bg-gradient-radial from-[#8b5cf6]/25 to-transparent opacity-50 blur-3xl" />
        <div className="absolute top-1/2 left-1/3 w-[300px] h-[300px] rounded-full bg-gradient-radial from-[#06b6d4]/20 to-transparent opacity-40 blur-3xl" />
        
        {/* Grid Pattern */}
        <div 
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `
              linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
            `,
            backgroundSize: '40px 40px',
          }}
        />
      </div>

      {/* Floating Shapes */}
      <div ref={shapesRef} className="absolute inset-0 pointer-events-none">
        <div className="floating-shape absolute top-[15%] right-[15%] w-8 h-8 rounded-full bg-[#3b6aff]/50" />
        <div className="floating-shape absolute top-[25%] right-[25%] w-6 h-6 rounded-full bg-[#8b5cf6]/40" />
        <div className="floating-shape absolute bottom-[20%] right-[20%] w-8 h-8 rounded-full bg-[#06b6d4]/40" />
        <div className="floating-shape absolute bottom-[30%] left-[20%] w-10 h-10 rounded-lg bg-[#8b5cf6]/30 rotate-45" />
        <div className="floating-shape absolute top-[40%] left-[10%] w-4 h-4 rounded-full bg-[#3b6aff]/40" />
        <div className="floating-shape absolute bottom-[40%] right-[10%] w-12 h-12 rounded-xl bg-gradient-to-br from-[#3b6aff]/30 to-[#8b5cf6]/30" />
      </div>

      <div className="relative z-10 section-padding w-full">
        <div className="container-max">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
            {/* Left Column - Content */}
            <div className="max-w-2xl">
              <h1
                ref={headlineRef}
                className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6 font-['Outfit']"
              >
                {headlineWords.map((word, i) => (
                  <span
                    key={i}
                    className={`word inline-block mr-3 ${
                      word === 'Fast,' || word === 'Secure' || word === 'Modern'
                        ? 'gradient-text'
                        : 'text-white'
                    }`}
                  >
                    {word}
                  </span>
                ))}
              </h1>

              <p
                ref={subheadlineRef}
                className="text-base sm:text-lg text-[#94a3b8] mb-8 leading-relaxed"
              >
                Patil Web Solutions is a full-stack web agency in Chhatrapati Sambhajinagar. 
                We develop custom websites, SaaS platforms, and SEO-friendly solutions tailored 
                to grow your business.
              </p>

              <div ref={ctaRef} className="flex flex-wrap gap-4 mb-8">
                <a href="#contact" className="btn-primary inline-flex items-center gap-2 group">
                  Start Your Project
                  <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
                </a>
                <a href="#services" className="btn-secondary">
                  View Services
                </a>
              </div>

              <div className="flex items-center gap-3 text-[#94a3b8]">
                <div className="w-10 h-10 rounded-full bg-[#3b6aff]/20 flex items-center justify-center">
                  <Phone size={18} className="text-[#3b6aff]" />
                </div>
                <div>
                  <span className="text-sm">Call:</span>
                  <a href="tel:+917057830490" className="ml-2 text-white hover:text-[#3b6aff] transition-colors">
                    +91 70578 30490
                  </a>
                </div>
              </div>
            </div>

            {/* Right Column - Dashboard Mockup */}
            <div
              ref={dashboardRef}
              className="relative hidden lg:block"
              style={{ perspective: '1000px' }}
            >
              <div
                className="relative"
                style={{
                  transform: 'rotateY(-15deg) rotateX(5deg)',
                  transformStyle: 'preserve-3d',
                }}
              >
                {/* Dashboard Card */}
                <div className="glass-card p-6 shadow-2xl shadow-black/50">
                  {/* Window Controls */}
                  <div className="flex gap-2 mb-6">
                    <div className="w-3 h-3 rounded-full bg-red-500" />
                    <div className="w-3 h-3 rounded-full bg-yellow-500" />
                    <div className="w-3 h-3 rounded-full bg-green-500" />
                  </div>

                  {/* Dashboard Content */}
                  <div className="mb-4">
                    <h3 className="text-lg font-semibold text-white mb-1">Performance Metrics</h3>
                    <p className="text-sm text-[#94a3b8]">Real-time website analytics</p>
                  </div>

                  {/* Chart Bars */}
                  <div className="flex items-end gap-3 h-32 mb-6">
                    {[40, 65, 45, 80, 55, 90, 70].map((height, i) => (
                      <div
                        key={i}
                        className="flex-1 rounded-t-lg bg-gradient-to-t from-[#3b6aff] to-[#8b5cf6] transition-all duration-500"
                        style={{
                          height: `${height}%`,
                          animationDelay: `${i * 0.1}s`,
                        }}
                      />
                    ))}
                  </div>

                  {/* SEO Score Badge */}
                  <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/10">
                    <div>
                      <p className="text-sm text-[#94a3b8]">SEO Score</p>
                      <p className="text-2xl font-bold text-white">98/100</p>
                    </div>
                    <div className="w-16 h-16 rounded-full border-4 border-[#10b981] flex items-center justify-center">
                      <span className="text-lg font-bold text-[#10b981]">98</span>
                    </div>
                  </div>
                </div>

                {/* Glow Effect */}
                <div className="absolute -inset-4 bg-gradient-to-r from-[#3b6aff]/20 to-[#8b5cf6]/20 rounded-3xl blur-2xl -z-10" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;