"use client";

import { motion } from "framer-motion";
import { ArrowRight, Blocks, Shield, Star, Zap } from "lucide-react";
import type { ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero238Props {
  className?: string;
}

const Hero238 = ({ className }: Hero238Props) => {
  const benefits = [
    {
      icon: Zap,
      title: "دسترسی زودهنگام ",
    },
    {
      icon: Star,
      title: "جدیدترین ویژگی‌ها",
    },
    {
      icon: Shield,
      title: "پشتیبانی اولویت‌دار",
    },
    {
      icon: Blocks,
      title: "بلاک‌های اختصاصی",
    },
  ];

  return (
    <section
      className={cn("h-full w-screen overflow-hidden lg:h-screen", className)}
    >
      <AuroraBackground>
        <div className="relative container flex h-full flex-col py-32 lg:flex-row">
          <div className="mt-auto space-y-12 lg:w-1/2">
            <h1 className="mt-3 max-w-xl text-2xll font-medium font-semibold tracking-tighter lg:text-2xll">
              با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید
                                      </h1>
            <div className="flex items-center gap-4">
              <Button>شروع رایگان</Button>
              <Button variant="ghost">
                مشاهده امکانات <ArrowRight className="rtl:rotate-180" />
              </Button>
            </div>
            <ul className="mt-20 flex flex-wrap gap-4">
              {benefits.map((benifit, index) => {
                const Icon = benifit.icon;
                return (
                  <li key={benifit.title} className="flex items-center gap-2">
                    <div className="size-">
                      <Icon className="size-4" />
                    </div>
                    <span className="text-sm">{benifit.title}</span>
                    {index !== benefits.length - 1 && (
                      <div className="ms-2 size-1 rounded-full bg-foreground" />
                    )}
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden lg:w-1/2">
            <motion.div
              initial={{ opacity: 0, y: "50%" }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
              className="absolute right-0 bottom-0 w-[210px] rounded-2xl bg-primary p-4 text-sm text-secondary"
            >
              <span className="ms-3 inline-block size-2 rounded-full bg-orange-500" />
              <span className="font-semibold">ری یو آی</span>
              <span className="text-muted-foreground">
                 بلاک‌های آماده برای ساخت رابط کاربری مدرن و سریع{" "}
              </span>
            </motion.div>
          </div>
        </div>
      </AuroraBackground>
    </section>
  );
};

export { Hero238 };

// Below is the modified component from Aceternity UI
// Original source: npx shadcn@latest add https://ui.aceternity.com/registry/aurora-background.json
// Modified so we could change the aurora animate class and colors

interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
  children: ReactNode;
  showRadialGradient?: boolean;
}

export const AuroraBackground = ({
  className,
  children,
  showRadialGradient = true,
  ...props
}: AuroraBackgroundProps) => {
  return (
    <main>
      <div
        className={cn(
          "transition-bg relative flex h-[100vh] flex-col items-center justify-center bg-zinc-50 text-slate-950 dark:bg-zinc-900",
          className,
        )}
        {...props}
      >
        <div
          className="absolute inset-0 overflow-hidden"
          style={
            {
              "--aurora":
                "repeating-linear-gradient(100deg,#000_10%,#666_15%,#ccc_20%,#fff_25%,#333_30%)",
              "--dark-gradient":
                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
              "--white-gradient":
                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",

              "--gray-200": "#ccc",
              "--gray-400": "#666",
              "--gray-800": "#333",
              "--black": "#000",
              "--white": "#fff",
              "--transparent": "transparent",
            } as React.CSSProperties
          }
        >
          <div
            //   I'm sorry but this is what peak developer performance looks like // trigger warning
            className={cn(
              `pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--black)_10%,var(--gray-400)_15%,var(--gray-200)_20%,var(--white)_25%,var(--gray-800)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:animate-aurora-background after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,

              showRadialGradient &&
                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
            )}
          ></div>
        </div>
        {children}
      </div>
    </main>
  );
};