"use client";

import { motion } from "motion/react";
import GradientButton from "@/components/buttons/gradientButton";
import { cn } from "@/lib/utils";

const GridFallingLinesHero = () => {
  return (
    <div className="relative overflow-hidden bg-zinc-950 min-h-screen">
      <div className="relative z-20 mx-auto flex max-w-6xl flex-col items-center justify-center px-4 py-24 md:px-8 md:py-36">
        <motion.div
          className="relative mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <span className="relative z-10 inline-block rounded-full border border-zinc-800 bg-transparent px-4 py-2 text-sm text-purple-200 backdrop-blur-sm">
            <span className="flex items-center gap-2">
              OPEN-SOURCE AND FREE TO USE
            </span>
            <span className="absolute bottom-0 left-3 right-3 h-[1px] bg-gradient-to-r from-neutral-500/0 via-neutral-400 to-neutral-500/0 " />
          </span>
        </motion.div>

        <motion.h1
          className="mb-6 text-center text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl lg:text-7xl"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.2 }}
        >
          <span className="block">Transform your digital</span>
          <span className="bg-gradient-to-r from-purple-400 via-violet-400 to-indigo-500 bg-clip-text text-transparent">experience</span>
        </motion.h1>

        <motion.p
          className="mb-10 max-w-2xl text-center text-base leading-relaxed text-slate-300 sm:text-lg md:text-xl"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.4 }}
        >
          Create stunning interfaces with our next-generation design system.
          Built for developers who value elegance and performance.
        </motion.p>

        <motion.div
          className="flex flex-col items-center gap-6 sm:flex-row"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.6 }}
        >
          <GradientButton text={"Try it now"} href="" variant={"purple"} className="" />
          <button className="rounded-md px-4 py-2 text-zinc-100 transition-all hover:scale-[1.02] hover:bg-zinc-800 active:scale-[0.98] cursor-pointer">
            Learn more
          </button>
        </motion.div>
      </div>


      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 0, left: 32 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.5,
          ease: "easeInOut",
          repeat: Infinity,
          repeatDelay: 1.5
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 384, left: 128 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.2,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 0.4,
          repeatDelay: 1.3
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 96, left: 351 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 0.8,
          repeatDelay: 1
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 0, left: 704 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.3,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 1.2,
          repeatDelay: 1.2
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 288, left: 768 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.1,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 1.6,
          repeatDelay: 1.4
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 64, left: 992 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.4,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 2.0,
          repeatDelay: 1.1
        }}
      />

      <motion.div
        className="absolute z-10 h-16 w-[2px] bg-gradient-to-b from-purple-500/0 to-purple-500"
        style={{ top: 64, left: 1406 }}
        initial={{ opacity: 0, transform: 'translateY(-20px)' }}
        animate={{
          opacity: [0, 1, 0],
          transform: ['translateY(-20px)', 'translateY(256px)']
        }}
        transition={{
          duration: 2.2,
          ease: "easeInOut",
          repeat: Infinity,
          delay: 2.4,
          repeatDelay: 1.3
        }}
      />

      <div className="absolute inset-0 z-0">
        <div
          className={cn(
            "absolute inset-0",
            "[background-size:32px_32px]",
            "[background-image:linear-gradient(to_right,rgba(139,92,246,0.15)_1.5px,transparent_1.5px),linear-gradient(to_bottom,rgba(139,92,246,0.15)_1.5px,transparent_1.5px)]",
            "dark:[background-image:linear-gradient(to_right,rgba(139,92,246,0.08)_1.5px,transparent_1.5px),linear-gradient(to_bottom,rgba(139,92,246,0.08)_1.5px,transparent_1.5px)]"
          )}
        />
        <div className="absolute inset-0 z-10 bg-gradient-to-b from-zinc-950/0 to-zinc-950" />
      </div>
    </div>
  );
};

export default GridFallingLinesHero;