"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { ArrowUpRight, CheckCircle } from "lucide-react";
import { useRef } from "react";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface Hero70Props {
  className?: string;
}

const CAROUSEL_IMAGES = [
  "/block-media/shadcnblocks/block/placeholder-1.svg",
  "/block-media/shadcnblocks/block/placeholder-2.svg",
  "/block-media/shadcnblocks/block/placeholder-3.svg",
  "/block-media/shadcnblocks/block/placeholder-4.svg",
  "/block-media/shadcnblocks/block/placeholder-5.svg",
  "/block-media/shadcnblocks/block/placeholder-6.svg",
  "/block-media/shadcnblocks/block/placeholder-1.svg",
  "/block-media/shadcnblocks/block/placeholder-2.svg",
] as const;

const BENEFITS = [
  "اشتراک ماهانه طراحی",
  "تحویل سریع",
  "اشتراک انعطاف‌پذیر",
] as const;

const Hero70 = ({ className }: Hero70Props) => {
  const autoScroll = useRef(
    AutoScroll({
      speed: 1,
      startDelay: 0,
      playOnInit: true,
      stopOnInteraction: false,
      stopOnMouseEnter: true,
      direction: "forward",
    }),
  );

  return (
    <section
      className={cn(
        "relative mx-auto w-full min-w-0 max-w-full overflow-x-hidden bg-background py-14",
        className,
      )}
    >
      <div className="container relative z-10 mx-auto w-full min-w-0 max-w-full">
        <div className="py-8">
          <img
            src="/block-media/shadcnblocks/block/block-1.svg"
            className="h-12 lg:h-16"
            alt=""
          />
        </div>

        <div className="flex w-full min-w-0 flex-col gap-10 py-10 lg:py-28">
          <div className="hidden flex-wrap items-center gap-x-6 gap-y-3 lg:flex">
            {BENEFITS.map((label) => (
              <div
                key={label}
                className="flex items-center gap-1.5 text-foreground"
              >
                <CheckCircle className="size-6 shrink-0" />
                <span>{label}</span>
              </div>
            ))}
          </div>

          <div className="flex w-full min-w-0 flex-col gap-4">
            <h1 className="w-full max-w-5xl text-[clamp(1.75rem,4.5vw,4.5rem)] leading-[1.15] font-medium tracking-tighter text-pretty text-foreground">
              طراحی نامحدود برای رشد سریع کسب‌وکار
            </h1>
            <p className="max-w-2xl text-lg text-foreground lg:text-xl">
              به خدمات طراحی حرفه‌ای دسترسی داشته باشید،{" "}
              <span className="font-semibold">
                بدون نیاز به استخدام تیم داخلی.
              </span>
            </p>
          </div>

          <Button
            variant="outline"
            className="flex h-fit w-fit items-center gap-2.5 self-start rounded-full border-2 border-foreground px-2 py-1.5 text-sm font-semibold lg:px-4 lg:py-3.5 lg:text-base"
          >
            <img
              src="/block-media/shadcnblocks/block/avatar-1.webp"
              alt=""
              className="size-9 rounded-full object-cover lg:size-11"
            />
            <span>رزرو جلسه مشاوره</span>
          </Button>
        </div>
      </div>

      <div className="relative mx-auto w-full min-w-0 max-w-full overflow-hidden">
        <Carousel
          opts={{
            loop: true,
            align: "center",
            direction: "rtl",
            containScroll: false,
          }}
          plugins={[autoScroll.current]}
          className="w-full min-w-0 max-w-full overflow-hidden"
        >
          {/* Override carousel defaults (-ml-4 / pl-4) — they break RTL track sizing */}
          <CarouselContent className="-ml-0! gap-5">
            {CAROUSEL_IMAGES.map((src, index) => (
              <CarouselItem
                key={`${src}-${index}`}
                className="basis-[min(28rem,85vw)] bg-background pl-0! sm:basis-[30rem] lg:basis-[31rem]"
              >
                <div className="h-60 overflow-hidden rounded-lg sm:h-80 lg:h-[380px]">
                  <img
                    src={src}
                    alt=""
                    className="size-full object-cover"
                    draggable={false}
                  />
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
        <div
          aria-hidden
          className="pointer-events-none absolute inset-y-0 start-0 z-10 w-[12%] bg-linear-to-e from-background to-transparent"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-y-0 end-0 z-10 w-[12%] bg-linear-to-s from-background to-transparent"
        />
      </div>

      <div className="container relative z-10 mx-auto mt-10 flex w-full justify-center">
        <Button
          variant="outline"
          className="flex h-fit items-center gap-2.5 rounded-full border-2 border-foreground px-4 py-3.5 text-sm font-semibold transition hover:bg-foreground hover:text-background lg:text-base"
        >
          <span>مشاهده مطالعات موردی</span>
          <ArrowUpRight className="size-6! rtl:rotate-180" />
        </Button>
      </div>
    </section>
  );
};

export { Hero70 };