import { Sparkles } from "lucide-react";
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";

const MARQUEE_IMAGES = [
  ...Array.from(
    { length: 27 },
    (_, i) =>
      `/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
  ),
  ...Array.from(
    { length: 9 },
    (_, i) =>
      `/block-media/shadcnblocks/block/guri3/img${i + 1}.jpeg`,
  ),
];

interface Feature267Props {
  className?: string;
}

const Feature267 = ({ className }: Feature267Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative h-full w-full min-w-0 overflow-hidden py-32",
        className,
      )}
    >
      <div className="container grid min-w-0 grid-cols-1 items-center gap-5 lg:grid-cols-2">
        <div className="flex h-full min-w-0 flex-col justify-center text-start">
          <div className="flex min-w-0 items-start gap-2">
            <Sparkles className="mt-1 size-5 shrink-0 fill-foreground" />
            <p className="min-w-0 flex-1 text-pretty font-medium tracking-tight">
              تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
            </p>
          </div>
          <h1 className="mt-3 mb-8 max-w-xl text-2xl font-semibold tracking-tighter text-balance break-words sm:text-3xl lg:max-w-3xl lg:text-2xll">
            فروش تیم‌تان را یکجا مدیریت کنید
          </h1>
          <p className="max-w-xl text-pretty text-muted-foreground">
            از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.
          </p>
          <div className="mt-10 min-w-0">
            <div className="flex h-15 w-full min-w-0 max-w-md items-center rounded-full border p-1">
              <Input
                type="email"
                dir="rtl"
                className="min-w-0 flex-1 rounded-full border-none text-start 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>
        </div>

        <div className="min-w-0 max-w-full overflow-hidden">
          <ThreeDMarquee
            className="w-full max-w-full rounded-none"
            images={MARQUEE_IMAGES}
          />
        </div>
      </div>
    </section>
  );
};

export { Feature267 };