"use client";

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { ArrowDown, Code, Zap, Rocket } from 'lucide-react';
import Image from 'next/image';
import { LiquidHeading } from '@/components/LiquidHeading';

const Hero = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const features = [
    { icon: Code, text: 'Full-Stack Development' },
    { icon: Zap, text: 'Modern Technologies' },
    { icon: Rocket, text: 'Innovative Solutions' },
  ];

  if (!mounted) {
    return null;
  }

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8 bg-transparent">
      
      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
        {/* Domain Badge */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="mb-8 inline-block"
        >
          <div className="px-6 py-2 rounded-full glass-panel text-stone-600 font-mono text-sm tracking-wider uppercase">
            dk<span className="text-liquid-rose font-bold">0</span>.dev
          </div>
        </motion.div>

        {/* Profile Image with Organic Blob Mask */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
          className="mb-10 flex justify-center relative z-20"
        >
          <div className="relative w-64 h-64 md:w-80 md:h-80 flex items-center justify-center">
             {/* Large Rotating Liquid Blobs behind image */}
            <motion.div 
               className="absolute w-[140%] h-[140%] bg-gradient-to-tr from-liquid-mint via-liquid-blue to-liquid-lavender opacity-60 blur-3xl -z-10"
               animate={{ 
                   borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"],
                   rotate: [0, 180, 360],
                   scale: [1, 1.1, 1]
               }}
               transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
            />
             <motion.div 
               className="absolute w-[120%] h-[120%] bg-gradient-to-bl from-liquid-rose via-purple-200 to-liquid-mint opacity-40 blur-2xl -z-10"
               animate={{ 
                   borderRadius: ["40% 60% 70% 30%/40% 50% 60% 50%", "60% 30% 40% 70%/60% 40% 70% 30%", "40% 60% 70% 30%/40% 50% 60% 50%"],
                   rotate: [360, 180, 0],
                   scale: [1, 0.9, 1]
               }}
               transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
            />
            
            {/* The Image Container with Organic Border Radius - No hard border, just shadow and glass */}
            <motion.div
                className="absolute inset-0 overflow-hidden shadow-2xl bg-stone-100"
                style={{ filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.15))" }}
                animate={{
                    borderRadius: ["60% 40% 30% 70%/60% 30% 70% 40%", "30% 60% 70% 40%/50% 60% 30% 60%", "60% 40% 30% 70%/60% 30% 70% 40%"]
                }}
                transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
            >
                <Image
                  src="/images/me.jpg"
                  alt="Dennis Konkol"
                  fill
                  className="object-cover scale-105 hover:scale-110 transition-transform duration-700"
                  priority
                />
                
                {/* Glossy Overlay for Liquid Feel */}
                <div className="absolute inset-0 bg-gradient-to-tr from-white/30 via-transparent to-transparent opacity-50 pointer-events-none z-10" />
                
                {/* Inner Border/Highlight */}
                <div className="absolute inset-0 border-[3px] border-white/20 rounded-[inherit] pointer-events-none z-20" />
            </motion.div>
            
            {/* Floating Badges */}
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 1.5, type: "spring" }}
              className="absolute -top-4 right-0 md:-right-4 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
            >
              <Code size={24} />
            </motion.div>
             <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 1.7, type: "spring" }}
              className="absolute bottom-4 -left-4 md:-left-8 p-3 bg-white/90 backdrop-blur-md shadow-lg rounded-full text-stone-700 z-30"
            >
              <Zap size={24} />
            </motion.div>
          </div>
        </motion.div>

        {/* Main Title */}
        <div className="mb-6 flex flex-col items-center justify-center relative">
            <LiquidHeading 
              text="Dennis Konkol" 
              level={1} 
              className="text-5xl md:text-8xl font-bold tracking-tighter text-stone-800"
            />
            <LiquidHeading 
              text="Software Engineer" 
              level={2} 
              className="text-2xl md:text-4xl font-light tracking-wide text-stone-500 mt-2"
            />
        </div>


        {/* Description */}
        <motion.p
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1.2 }}
          className="text-lg md:text-xl text-stone-600 mb-12 max-w-2xl mx-auto leading-relaxed"
        >
          I craft digital experiences with a focus on <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-2">design</span>, <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-2">performance</span>, and <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-2">user experience</span>.
        </motion.p>

        {/* Features */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1.4 }}
          className="flex flex-wrap justify-center gap-4 mb-12"
        >
          {features.map((feature, index) => (
            <motion.div
              key={feature.text}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: 1.6 + index * 0.1 }}
              whileHover={{ scale: 1.05, y: -2 }}
              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/60 border border-white/80 shadow-sm backdrop-blur-sm liquid-hover"
            >
              <feature.icon className="w-4 h-4 text-stone-700" />
              <span className="text-stone-700 font-medium text-sm">{feature.text}</span>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA Buttons */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1.8 }}
          className="flex flex-col sm:flex-row gap-5 justify-center items-center"
        >
          <motion.a
            href="#projects"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="px-8 py-4 bg-stone-900 text-cream rounded-full font-medium shadow-lg hover:shadow-xl hover:bg-black transition-all flex items-center gap-2 liquid-hover"
          >
            <span>View My Work</span>
            <ArrowDown size={18} />
          </motion.a>
          
          <motion.a
            href="#contact"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all liquid-hover"
          >
            <span>Contact Me</span>
          </motion.a>
        </motion.div>
      </div>
    </section>
  );
};

export default Hero;