"use client";

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import React from "react";

import { LineShadowText } from "@/components/magicui/line-shadow-text";
import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";

interface Hero233Props {
  className?: string;
}

const Hero233 = ({ className }: Hero233Props) => {
  const isMobile = useIsMobile();

  return (
    <section
      className={cn(
        "relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden bg-background py-32",
        className,
      )}
    >
      <div className="relative z-20 container flex min-w-0 flex-col items-center justify-center gap-4 py-10 text-center md:mt-22">
        <div className="absolute -z-1 size-full max-w-3xl bg-background blur-xl" />
        <Button
          variant="secondary"
          className="text-md group my-16 flex w-fit items-center justify-center gap-3 rounded-full bg-muted/60 px-5 py-1 tracking-tight md:my-5"
        >
          <span className="size-2 rounded-full bg-foreground" />
          <span>پلن مناسب برای هر تیم</span>
        </Button>
        <div className="relative flex w-full min-w-0 max-w-4xl items-center justify-center text-center text-2xll font-medium tracking-tight md:text-2xll">
          <h1 className="relative z-10 text-balance break-words">
            <span className="ms-3 text-muted-foreground/50">
              تنها اپی که برای ماندن
            </span>
            <LineShadowText> بهره‌وری </LineShadowText>
            <span className="text-muted-foreground/50"> توسعه سریع</span>
            <span>.</span>
          </h1>
        </div>

        <p className="mt-5 max-w-xl text-balance bg-background text-muted-foreground/80">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
        </p>
        <div className="my-5 flex min-w-0 flex-wrap items-center justify-center gap-4">
          <Button
            variant="secondary"
            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
          >
            <span>مشاهده مستندات</span>
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
          </Button>
          <Button
            variant="default"
            className="text-md group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
          >
            <span>شروع رایگان</span>
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
          </Button>
        </div>
      </div>

      <div className="pointer-events-none absolute inset-0 z-0 flex justify-center overflow-hidden">
        {Array.from({ length: isMobile ? 7 : 18 }).map((_, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "100%" }}
            transition={{
              duration: 0.8,
              delay: i * 0.05,
              ease: "easeOut",
            }}
            className="w-24 shrink-0 border-s bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2"
          />
        ))}
      </div>
    </section>
  );
};

export { Hero233 };