'use client';

import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Github, Terminal } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

export function Header() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Animated Background */}
      <div className="absolute inset-0 z-0">
        {/* Floating Bees - Constrained to viewport */}
        <motion.div
          animate={{
            x: [0, 60, 0],
            y: [0, -30, 0],
          }}
          transition={{
            duration: 8,
            repeat: Number.POSITIVE_INFINITY,
            ease: 'easeInOut',
          }}
          className="absolute top-20 left-4 md:left-10"
        >
          <Image
            src="/images/bee.png"
            alt="Flying bee"
            width={60}
            height={60}
            className="md:w-20 md:h-20 drop-shadow-lg"
          />
        </motion.div>

        <motion.div
          animate={{
            x: [0, -50, 0],
            y: [0, 40, 0],
            rotate: [0, 8, -8, 0],
          }}
          transition={{
            duration: 10,
            repeat: Number.POSITIVE_INFINITY,
            ease: 'easeInOut',
            delay: 2,
          }}
          className="absolute top-40 right-4 md:right-20"
        >
          <Image
            src="/images/bee.png"
            alt="Flying bee"
            width={45}
            height={45}
            className="md:w-16 md:h-16 drop-shadow-lg"
          />
        </motion.div>

        <motion.div
          animate={{
            x: [0, 80, 0],
            y: [0, -50, 0],
            rotate: [0, -12, 12, 0],
          }}
          transition={{
            duration: 12,
            repeat: Number.POSITIVE_INFINITY,
            ease: 'easeInOut',
            delay: 4,
          }}
          className="absolute bottom-40 left-1/4 hidden sm:block"
        >
          <Image
            src="/images/bee.png"
            alt="Flying bee"
            width={70}
            height={70}
            className="drop-shadow-lg"
          />
        </motion.div>

        <motion.div
          animate={{
            x: [0, -40, 0],
            y: [0, 30, 0],
            rotate: [0, 15, -4, 0],
          }}
          transition={{
            duration: 9,
            repeat: Number.POSITIVE_INFINITY,
            ease: 'easeInOut',
            delay: 1,
          }}
          className="absolute top-60 right-1/3 hidden md:block"
        >
          <Image
            src="/images/bee.png"
            alt="Flying bee"
            width={50}
            height={50}
            className="drop-shadow-lg"
          />
        </motion.div>

        {/* Hive - Responsive sizing */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{
            scale: [0.8, 1, 0.95, 1],
            opacity: 1,
            rotate: [0, 1, -1, 0],
          }}
          transition={{
            duration: 2,
            delay: 1,
            rotate: {
              duration: 6,
              repeat: Number.POSITIVE_INFINITY,
              ease: 'easeInOut',
            },
          }}
          className="absolute top-1/2 right-2 md:right-10 transform -translate-y-1/2"
        >
          <Image
            src="/images/hive.png"
            alt="Bee hive"
            width={120}
            height={144}
            className="md:w-[200px] md:h-[240px] drop-shadow-2xl"
          />
        </motion.div>
      </div>

      {/* Content */}
      <div className="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.2 }}
          className="mb-8"
        >
          <h1 className="text-6xl md:text-8xl lg:text-9xl font-bold text-amber-900 mb-4 tracking-tight">
            Ruch
          </h1>
          <div className="w-16 md:w-24 h-1 bg-gradient-to-r from-amber-400 to-orange-500 mx-auto mb-6"></div>
        </motion.div>

        <motion.p
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="text-lg md:text-2xl lg:text-3xl text-amber-800 mb-12 font-light px-4"
        >
          Structure your front-end beautifully. Visualize it effortlessly.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.8 }}
          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
        >
          <Button
            size="lg"
            className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white px-6 md:px-8 py-3 md:py-4 text-base md:text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 w-full sm:w-auto"
            asChild
          >
            <Link href="/cli-docs">
              <Terminal className="mr-2 h-4 w-4 md:h-5 md:w-5" />
              Try Ruch Now
            </Link>
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="border-2 border-amber-500 text-amber-700 hover:bg-amber-50 px-6 md:px-8 py-3 md:py-4 text-base md:text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 w-full sm:w-auto"
          >
            <Github className="mr-2 h-4 w-4 md:h-5 md:w-5" />
            View on GitHub
          </Button>
        </motion.div>
      </div>

      {/* Scroll indicator */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 2, duration: 1 }}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
      >
        <motion.div
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2 }}
          className="w-6 h-10 border-2 border-amber-500 rounded-full flex justify-center"
        >
          <motion.div
            animate={{ y: [0, 12, 0] }}
            transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2 }}
            className="w-1 h-3 bg-amber-500 rounded-full mt-2"
          />
        </motion.div>
      </motion.div>
    </section>
  );
}