import React from 'react';
import { motion } from 'framer-motion';
import { ArrowDown } from 'lucide-react';
import Button from '../../../shared/components/Button';

export const HeroSection: React.FC = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
        delayChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 },
    },
  };

  const imageVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: { duration: 0.8 },
    },
  };

  const borderVariants = {
    hidden: { pathLength: 0 },
    visible: {
      pathLength: 1,
      transition: { duration: 2, delay: 0.6 },
    },
  };

  return (
    <section
      id="home"
      className="min-h-screen flex items-center justify-center relative overflow-hidden pt-20 px-4 sm:px-6 lg:px-8"
    >
      {/* Background gradient */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-0 left-0 w-96 h-96 bg-green-500/20 rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl"></div>
      </div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="max-w-7xl mx-auto w-full"
      >
        {/* Grid Layout: Text left, Image right on desktop, stacked on mobile */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
          {/* Text Content */}
          <div className="text-center lg:text-left">
            {/* Badge */}
            <motion.div variants={itemVariants} className="mb-8">
              <div className="inline-block px-4 py-2 border border-green-500/50 rounded-full bg-green-500/10 backdrop-blur-sm">
                <span className="text-green-400 text-sm font-medium flex items-center gap-2 justify-center lg:justify-start">
                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                  Softwareentwickler & Architektur-Enthusiast | Deutschland
                </span>
              </div>
            </motion.div>

            {/* Main Heading */}
            <motion.h1 variants={itemVariants} className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
              <span className="text-white">Robert Bretz</span>
              <br />
              <span className="bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
                Saubere, performante digitale Lösungen
              </span>
            </motion.h1>

            {/* Subtitle */}
            <motion.p
              variants={itemVariants}
              className="text-gray-300 text-lg sm:text-xl mb-8"
            >
              Ich entwickle moderne Anwendungen mit React, TypeScript, Tailwind, .NET, NestJS und sauberer Architektur.
              Mein Fokus liegt auf Performance, Vertical Slice Architecture, Docker-Deployments und skalierbaren Backend-Systemen.
            </motion.p>

            {/* Stats */}
            <motion.div
              variants={itemVariants}
              className="grid grid-cols-3 gap-3 sm:gap-6 mb-12"
            >
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
                transition={{ type: 'spring', stiffness: 300 }}
                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">4+</div>
                <div className="text-gray-400 text-xs sm:text-sm">Jahre Erfahrung</div>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
                transition={{ type: 'spring', stiffness: 300 }}
                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">30+</div>
                <div className="text-gray-400 text-xs sm:text-sm">Projekte umgesetzt</div>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.05, y: -4 }}
                transition={{ type: 'spring', stiffness: 300 }}
                className="border border-green-500/30 rounded-lg p-4 sm:p-5 bg-green-500/5 backdrop-blur-sm"
              >
                <div className="text-2xl sm:text-3xl font-bold text-green-500">99%</div>
                <div className="text-gray-400 text-xs sm:text-sm">Performance-Fokus</div>
              </motion.div>
            </motion.div>

            {/* CTA Buttons */}
            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12">
              <Button variant="primary" size="lg">
                Lass uns sprechen
              </Button>
              <Button variant="secondary" size="lg">
                Projekte ansehen
              </Button>
            </motion.div>
          </div>

          {/* Profile Image - Right side on desktop, centered on mobile */}
          <motion.div
            variants={imageVariants}
            className="flex justify-center lg:justify-end"
          >
            <div className="relative w-56 h-56 sm:w-72 sm:h-72 lg:w-96 lg:h-96">
              {/* Animated green borders on sides */}
              <svg
                className="absolute inset-0 w-full h-full pointer-events-none"
                viewBox="0 0 224 224"
                xmlns="http://www.w3.org/2000/svg"
              >
                <motion.line
                  x1="10"
                  y1="0"
                  x2="10"
                  y2="224"
                  stroke="#22c55e"
                  strokeWidth="3"
                  variants={borderVariants}
                  initial="hidden"
                  animate="visible"
                />
                <motion.line
                  x1="214"
                  y1="0"
                  x2="214"
                  y2="224"
                  stroke="#22c55e"
                  strokeWidth="3"
                  variants={borderVariants}
                  initial="hidden"
                  animate="visible"
                />
              </svg>

              {/* Profile Image */}
              <img
                src="/Bewerbungsfoto.png"
                alt="Robert Bretz"
                className="w-full h-full object-cover rounded-3xl shadow-2xl shadow-green-500/30"
              />
            </div>
          </motion.div>
        </div>

        {/* Scroll Indicator */}
        <motion.div
          variants={itemVariants}
          animate={{ y: [0, 12, 0] }}
          transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
          className="flex justify-center mt-16"
        >
          <ArrowDown className="text-green-500" size={32} />
        </motion.div>
      </motion.div>
    </section>
  );
};
