import React from "react";

import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface Hero240Props {
  className?: string;
}

const Hero240 = ({ className }: Hero240Props) => {
  const images = [
    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
    "/block-media/shadcnblocks/block/guri3/img10.jpeg",
    "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    "/block-media/shadcnblocks/block/guri3/img12.jpeg",
    "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    "/block-media/shadcnblocks/block/guri3/img14.jpeg",
    "/block-media/shadcnblocks/block/guri3/img15.jpeg",
    "/block-media/shadcnblocks/block/guri3/img16.jpeg",
    "/block-media/shadcnblocks/block/guri3/img17.jpeg",
    "/block-media/shadcnblocks/block/guri3/img18.jpeg",
    "/block-media/shadcnblocks/block/guri3/img19.jpeg",
    "/block-media/shadcnblocks/block/guri3/img20.jpeg",
    "/block-media/shadcnblocks/block/guri3/img21.jpeg",
    "/block-media/shadcnblocks/block/guri3/img22.jpeg",
    "/block-media/shadcnblocks/block/guri3/img23.jpeg",
    "/block-media/shadcnblocks/block/guri3/img24.jpeg",
    "/block-media/shadcnblocks/block/guri3/img25.jpeg",
    "/block-media/shadcnblocks/block/guri3/img26.jpeg",
    "/block-media/shadcnblocks/block/guri3/img27.jpeg",
    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        className,
        // After `className` so injected `w-screen` / `100vw` cannot win in the merge
        "relative w-full max-w-full min-w-0 overflow-x-clip overflow-hidden py-32",
      )}
    >
      <div className="container flex w-full min-w-0 max-w-full flex-col items-stretch justify-center gap-5 text-center">
        <div className="flex min-w-0 items-center justify-center gap-2">
          <Zap className="size-5 shrink-0" />
          <p className="w-fit rounded-full py-1 font-medium tracking-tight">
            کتابخانه کامپوننت
          </p>
        </div>
        <h1 className="mx-auto mt-3 max-w-xl text-balance break-words text-2xl font-semibold tracking-tighter sm:text-3xl lg:max-w-3xl lg:text-2xll">
          کامپوننت‌های آماده برای توسعه سریع‌تر محصولات
        </h1>
        <p className="mx-auto max-w-xl text-balance text-pretty text-muted-foreground">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
        </p>
        <div className="mx-auto mt-10 flex w-full min-w-0 max-w-2xl items-center justify-center gap-4">
          <div className="flex h-12 w-full min-w-0 max-w-md items-center rounded-full border p-1">
            <Input
              className="min-w-0 flex-1 rounded-full border-none shadow-none ring-0 focus-visible:ring-0 focus-visible:outline-none active:ring-0 active:outline-0"
              placeholder="ایمیل خود را وارد کنید"
            />
            <Button className="h-full shrink-0 rounded-full px-4 sm:px-6">
              عضویت رایگان
            </Button>
          </div>
        </div>

        {/*
          ThreeDMarquee uses an internal 1720px stage. Keep this wrapper
          width-bound + overflow-x-clip so it cannot widen #preview-frame.
        */}
        <div
          className="relative isolate mt-15 h-[360px] w-full min-w-0 max-w-full self-stretch overflow-x-clip overflow-hidden sm:h-[480px] md:h-[600px]"
          style={{ contain: "inline-size" }}
        >
          <ThreeDMarquee
            className="!mx-0 !h-full !w-full !max-w-full min-w-0 rounded-none"
            images={images}
          />
          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-background via-background to-transparent" />
        </div>
      </div>
    </section>
  );
};

export { Hero240 };

const Zap = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      {...props}
      width="35"
      height="23"
      viewBox="0 0 35 23"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M22.042 0.547306C22.2981 -0.152487 23.288 -0.152487 23.544 0.547306L24.3089 2.63602C24.9087 4.27458 25.8587 5.76264 27.0925 6.99648C28.3263 8.23031 29.8144 9.18025 31.453 9.7801L33.5417 10.545C34.2425 10.801 34.2425 11.7909 33.5417 12.047L31.453 12.8118C29.8144 13.4117 28.3263 14.3616 27.0925 15.5954C25.8587 16.8293 24.9087 18.3173 24.3089 19.9559L23.544 22.0446C23.288 22.7455 22.2981 22.7455 22.042 22.0446L21.2772 19.9559C20.6773 18.3173 19.7274 16.8293 18.4935 15.5954C17.2597 14.3616 15.7717 13.4117 14.1331 12.8118L12.0444 12.047C11.3446 11.7909 11.3446 10.801 12.0444 10.545L14.1331 9.7801C15.7717 9.18025 17.2597 8.23031 18.4935 6.99648C19.7274 5.76264 20.6773 4.27458 21.2772 2.63602L22.042 0.547306Z"
        fill="#343433"
      />
      <path
        d="M5.50713 0.284873C5.63513 -0.0650096 6.13009 -0.0650096 6.2581 0.284873L6.64051 1.32919C6.94042 2.14844 7.41537 2.89243 8.03227 3.50933C8.64916 4.12622 9.39316 4.60117 10.2124 4.90108L11.2567 5.2835C11.6071 5.4115 11.6071 5.90646 11.2567 6.03446L10.2124 6.41688C9.39316 6.71679 8.64916 7.19174 8.03227 7.80863C7.41537 8.42553 6.94042 9.16952 6.64051 9.98877L6.2581 11.0331C6.13009 11.3835 5.63513 11.3835 5.50713 11.0331L5.12471 9.98877C4.8248 9.16952 4.34985 8.42553 3.73296 7.80863C3.11607 7.19174 2.37207 6.71679 1.55282 6.41688L0.508505 6.03446C0.158623 5.90646 0.158623 5.4115 0.508505 5.2835L1.55282 4.90108C2.37207 4.60117 3.11607 4.12622 3.73296 3.50933C4.34985 2.89243 4.8248 2.14844 5.12471 1.32919L5.50713 0.284873Z"
        fill="#343433"
      />
    </svg>
  );
};