"use client";

import { motion } from "framer-motion";
import { company } from "@/constants";

export default function Hero() {
  return (
    <section
      id="home"
      aria-label="Introduction"
      className="relative flex min-h-[100svh] items-center justify-center overflow-hidden bg-white"
    >
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden">
        {/* Floating geometric shapes */}
        <motion.div
          className="absolute top-20 left-10 w-64 h-64 bg-gradient-to-br from-navy-100 to-gold/20 rounded-full blur-3xl"
          animate={{
            x: [0, 30, 0],
            y: [0, -30, 0],
            scale: [1, 1.1, 1],
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
        <motion.div
          className="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-br from-gold/10 to-navy-50 rounded-full blur-3xl"
          animate={{
            x: [0, -30, 0],
            y: [0, 30, 0],
            scale: [1, 1.2, 1],
          }}
          transition={{
            duration: 10,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />
      </div>

      {/* SVG Background Pattern */}
      <svg
        className="absolute inset-0 w-full h-full opacity-5"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <pattern
            id="grid"
            width="40"
            height="40"
            patternUnits="userSpaceOnUse"
          >
            <path
              d="M 40 0 L 0 0 0 40"
              fill="none"
              stroke="currentColor"
              strokeWidth="0.5"
            />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" className="text-navy" />
      </svg>

      {/* Floating drone illustration */}
      <motion.div
        className="absolute right-0 top-1/4 w-1/3 max-w-2xl opacity-20 hidden lg:block pointer-events-none"
        animate={{
          y: [0, -20, 0],
          rotate: [0, 2, -2, 0],
        }}
        transition={{
          duration: 6,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      >
        <svg viewBox="0 0 400 400" className="w-full h-auto">
          {/* Drone body */}
          <ellipse cx="200" cy="200" rx="80" ry="30" fill="#0b1f45" opacity="0.3" />
          <rect x="160" y="185" width="80" height="30" rx="5" fill="#c9a24b" opacity="0.5" />

          {/* Rotors */}
          <g>
            <ellipse cx="300" cy="200" rx="35" ry="8" fill="#0b1f45" opacity="0.2" />
            <motion.circle
              cx="300"
              cy="200"
              r="30"
              fill="none"
              stroke="#c9a24b"
              strokeWidth="2"
              opacity="0.3"
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            />
          </g>
          <g>
            <ellipse cx="100" cy="200" rx="35" ry="8" fill="#0b1f45" opacity="0.2" />
            <motion.circle
              cx="100"
              cy="200"
              r="30"
              fill="none"
              stroke="#c9a24b"
              strokeWidth="2"
              opacity="0.3"
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            />
          </g>
          <g>
            <ellipse cx="200" cy="120" rx="35" ry="8" fill="#0b1f45" opacity="0.2" />
            <motion.circle
              cx="200"
              cy="120"
              r="30"
              fill="none"
              stroke="#c9a24b"
              strokeWidth="2"
              opacity="0.3"
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            />
          </g>
          <g>
            <ellipse cx="200" cy="280" rx="35" ry="8" fill="#0b1f45" opacity="0.2" />
            <motion.circle
              cx="200"
              cy="280"
              r="30"
              fill="none"
              stroke="#c9a24b"
              strokeWidth="2"
              opacity="0.3"
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            />
          </g>

          {/* Camera under drone */}
          <circle cx="200" cy="240" r="15" fill="#0b1f45" opacity="0.3" />
          <circle cx="200" cy="240" r="8" fill="#c9a24b" opacity="0.5" />
        </svg>
      </motion.div>

      {/* Main content */}
      <div className="container-x relative z-10">
        <div className="max-w-4xl">
          {/* Animated label */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-gold-600 font-semibold uppercase tracking-[0.2em] text-sm mb-6"
          >
            Aviation &amp; Autonomous Drone Technology
          </motion.p>

          {/* Main heading */}
          <motion.h1
            className="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-[1.1] tracking-tightest text-navy mb-6"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          >
            Build to{" "}
            <motion.span
              className="text-gold inline-block"
              animate={{
                backgroundPosition: ["0%", "100%"]
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                repeatType: "reverse",
                ease: "linear"
              }}
              style={{
                background: "linear-gradient(90deg, #c9a24b, #ecd79b, #c9a24b)",
                backgroundSize: "200% auto",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
              }}
            >
              outperform.
            </motion.span>
          </motion.h1>

          {/* Description */}
          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="text-lg sm:text-xl text-navy-600 leading-relaxed max-w-2xl mb-10"
          >
            {company.name} delivers high-precision flight operations, unmanned
            aerial technology, and industry-certified aerospace education —
            built for absolute reliability and zero-compromise execution.
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.7 }}
            className="flex flex-col sm:flex-row gap-4"
          >
            <motion.a
              href="#contact"
              className="btn-gold"
              whileHover={{ scale: 1.05, y: -2 }}
              whileTap={{ scale: 0.98 }}
              transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
            >
              Talk to our team
            </motion.a>
            <motion.a
              href="#portfolio"
              className="btn-outline !text-navy !border-navy/30 hover:!border-navy"
              whileHover={{ scale: 1.05, y: -2 }}
              whileTap={{ scale: 0.98 }}
              transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
            >
              Explore capabilities
            </motion.a>
          </motion.div>

          {/* Partners */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.9, duration: 0.8 }}
            className="mt-16 pt-8 border-t border-navy/10"
          >
            <motion.p
              className="text-xs font-semibold uppercase tracking-[0.2em] text-navy-40 mb-6"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 1 }}
            >
              Trusted partners
            </motion.p>
            <div className="flex flex-wrap items-center gap-8">
              {[
                { name: "BATS Aviation", image: "/images/partners/bats.avif" },
                { name: "Leonardo", image: "/images/partners/leonardo.svg" },
                { name: "PBSM", image: "/images/partners/pbsm.png" },
              ].map((partner, index) => (
                <motion.div
                  key={partner.name}
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1, transition: { delay: 1.1 + index * 0.1 } }}
                  transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
                  whileHover={{ scale: 1.05 }}
                  className="relative"
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={partner.image}
                    alt={`${partner.name} logo`}
                    className="h-10 w-auto max-w-full opacity-60 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300"
                  />
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>

      {/* Scroll indicator */}
      <motion.div
        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-navy-40"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.3, duration: 0.8 }}
      >
        <motion.span
          className="text-[0.6rem] font-semibold uppercase tracking-[0.2em]"
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 2, repeat: Infinity }}
        >
          Scroll
        </motion.span>
        <motion.svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          animate={{ y: [0, 5, 0] }}
          transition={{ duration: 1.5, repeat: Infinity }}
        >
          <path d="M12 5v14M19 12l-7 7-7-7" />
        </motion.svg>
      </motion.div>
    </section>
  );
}