"use client";

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

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

interface Hero218Props {
  className?: string;
}

const Hero218 = ({ className }: Hero218Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
        <p className="text-muted-foreground">
          همکاری برای ساخت آینده
                          </p>
        <h1 className="realtive z-15 max-w-3xl text-center text-2xll font-medium tracking-tighter md:text-2xll">
          <span
            className="overflow-hidden"
            style={{
              transformStyle: "preserve-3d",
              perspective: "600px",
            }}
          >
            {"تنها اپی که برای ماندن بهره‌ور به آن نیاز دارید"
              .split(" ")
              .map((word, i) => (
                <motion.span
                  className="relative inline-block px-[6px] leading-[none]"
                  key={i}
                  initial={{
                    opacity: 0,
                    y: "70%",
                    rotateX: "-28deg",
                  }}
                  animate={{
                    opacity: 1,
                    y: "0%",
                    rotateX: "0deg",
                  }}
                  transition={{
                    delay: i * 0.08 + 0.1,
                    duration: 0.8,
                    ease: [0.215, 0.61, 0.355, 1],
                  }}
                >
                  {word === "بهره‌ور" ? (
                    <span className="font-playfair italic">{word}</span>
                  ) : (
                    word
                  )}
                </motion.span>
              ))}
          </span>
        </h1>
        <Particles
          className="absolute inset-0 z-0"
          quantity={500}
          ease={80}
          color="#000000"
          refresh
        />

        <div className="relative h-92 w-full -translate-y-15 overflow-hidden">
          <div className="absolute z-10 h-92 w-full bg-background blur-xl" />
          <div className="absolute z-13 h-92 w-full -translate-y-62 bg-background blur-2xl" />

          <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, ease: "easeOut" }}
            className="absolute z-12 w-full overflow-hidden"
          >
            <img
              src="/block-media/shadcnblocks/block/lummi/green-shape.svg"
              className="h-215 w-full -translate-y-90 -rotate-76"
              alt="تصویر نمونه"
            />
          </motion.div>
        </div>
        <Button
          variant="secondary"
          className="text-md group -mt-15 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
        >
          درخواست مشاوره
                            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
        </Button>
      </div>
    </section>
  );
};

export { Hero218 };