import {
  ArrowRight,
  ChartLine,
  Check,
  Cloud,
  CloudCog,
  Play,
  Share2,
  Sparkles,
  Video,
} from "lucide-react";

import { Marquee } from "@/components/ui/marquee";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const integrations = [
  {
    name: "ذخیره‌سازی",
    description: "فایل‌های ویدیویی خود را به‌صورت امن در فضای ذخیره‌سازی دلخواه مدیریت کنید.",
    icon: Cloud,
  },
  {
    name: "هوش مصنوعی",
    description: "با کمک هوش مصنوعی، تولید محتوای ویدیویی و تصویری را سرعت دهید.",
    icon: Sparkles,
  },
  {
    name: "تدوین ویدیو",
    description: "ویدیوها را با ابزارهای حرفه‌ای ویرایش و آماده انتشار کنید.",
    icon: Video,
  },
  {
    name: "میزبانی ویدیو",
    description: "محتوا را مستقیماً در سرویس‌های میزبانی ویدیویی منتشر کنید.",
    icon: CloudCog,
  },
  {
    name: "شبکه‌های اجتماعی",
    description: "ویدیوهای خود را تنها با چند کلیک در شبکه‌های اجتماعی منتشر کنید.",
    icon: Share2,
  },
  {
    name: "تحلیل",
    description: "عملکرد و بازخورد ویدیوها را با ابزارهای تحلیلی بررسی کنید.",
    icon: ChartLine,
  },
];

interface Hero40Props {
  className?: string;
}

const Hero40 = ({ className }: Hero40Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          <div className="flex flex-col gap-6">
            <h1 className="text-2xll font-bold">
              همه ابزارهای موردنیاز خود را یکپارچه کنید
                                      </h1>
            <p className="text-lg text-muted-foreground">
              تمام سرویس‌ها و ابزارهای کاری خود را به یکدیگر متصل کنید و فرایند تولید و انتشار محتوا را ساده‌تر کنید.
                                      </p>
            <div className="flex gap-4">
              <Button variant="outline" size="lg">
                <span>مشاهده دمو</span>
                <Play />
              </Button>
              <Button size="lg">
                <span>شروع رایگان</span>
                <ArrowRight className="rtl:rotate-180" />
              </Button>
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-2">
                <Check className="size-4 text-green-500" />
                <p className="text-sm text-muted-foreground">
                  بیش از <span className="font-bold">۱۰۰</span> یکپارچه‌سازی
                </p>
              </div>
              <div className="flex items-center gap-2">
                <Check className="size-4 text-green-500" />
                <p className="text-sm text-muted-foreground">
                  نسخه آزمایشی <span className="font-bold">۳۰ روزه</span>
                </p>
              </div>
              <div className="flex items-center gap-2">
                <Check className="size-4 text-green-500" />
                <p className="text-sm text-muted-foreground">
                  پشتیبانی تخصصی <span className="font-bold">۲۴/۷</span>
                </p>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر نمونه"
              className="aspect-video w-full rounded-lg border border-border object-cover"
            />
            <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
              <Marquee className="[--duration:30s]">
                {integrations.map((integration) => (
                  <div
                    key={integration.name}
                    className="flex max-w-72 gap-2 rounded-lg border border-border p-4 dark:bg-muted"
                  >
                    <integration.icon className="mt-0.5 size-4 shrink-0" />
                    <div className="flex flex-col gap-2">
                      <p className="text-sm">{integration.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {integration.description}
                      </p>
                    </div>
                  </div>
                ))}
              </Marquee>
              <Marquee reverse className="[--duration:30s]">
                {integrations.map((integration) => (
                  <div
                    key={integration.name}
                    className="flex max-w-72 gap-2 rounded-lg border border-border p-4 dark:bg-muted"
                  >
                    <integration.icon className="mt-0.5 size-4 shrink-0" />
                    <div className="flex flex-col gap-2">
                      <p className="text-sm">{integration.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {integration.description}
                      </p>
                    </div>
                  </div>
                ))}
              </Marquee>
              <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background"></div>
              <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero40 };