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

import {
  Marquee,
  MarqueeContent,
  MarqueeFade,
  MarqueeItem,
} from "@/components/kibo-ui/marquee";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

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

function IntegrationCard({
  name,
  description,
  icon: Icon,
}: (typeof integrations)[number]) {
  return (
    <div
      dir="rtl"
      className="flex h-28 w-72 shrink-0 gap-2 rounded-lg border border-border p-4 text-right dark:bg-muted"
    >
      <Icon className="mt-0.5 size-4 shrink-0" />
      <div className="flex min-w-0 flex-1 flex-col gap-2">
        <p className="text-sm font-medium">{name}</p>
        <p className="line-clamp-3 text-sm text-muted-foreground">
          {description}
        </p>
      </div>
    </div>
  );
}

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
              dir="rtl"
              className="relative flex w-full flex-col items-center justify-center gap-4 overflow-hidden"
            >
              <Marquee className="w-full">
                <MarqueeContent
                  direction="right"
                  speed={40}
                  loop={0}
                  autoFill
                  pauseOnHover={false}
                >
                  {integrations.map((integration) => (
                    <MarqueeItem key={`fwd-${integration.name}`}>
                      <IntegrationCard {...integration} />
                    </MarqueeItem>
                  ))}
                </MarqueeContent>
              </Marquee>
              <Marquee className="w-full">
                <MarqueeContent
                  direction="right"
                  speed={40}
                  loop={0}
                  autoFill
                  pauseOnHover={false}
                >
                  {integrations.map((integration) => (
                    <MarqueeItem key={`rev-${integration.name}`}>
                      <IntegrationCard {...integration} />
                    </MarqueeItem>
                  ))}
                </MarqueeContent>
              </Marquee>
              <MarqueeFade side="left" />
              <MarqueeFade side="right" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero40 };