"use client";

import {
  Activity,
  ArrowDownToLine,
  ArrowUpDown,
  Bell,
  Brain,
  CheckCircle,
  Clock,
  Code,
  Database,
  FileText,
  GitBranch,
  Redo,
  Repeat,
  Rocket,
  Scaling,
  Scan,
  Zap,
} from "lucide-react";

import { Marquee } from "@/components/magicui/marquee";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const badges = [
  {
    title: "خرید و تأمین",
    icon: <Code className="size-4" />,
  },
  {
    title: "فاکتور و پرداخت",
    icon: <ArrowUpDown className="size-4" />,
  },
  {
    title: "گردش تأیید",
    icon: <GitBranch className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Zap className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Clock className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Activity className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Brain className="size-4" />,
  },
  {
    title: "گزارش مدیریتی",
    icon: <Database className="size-4" />,
  },
  {
    title: "مدیریت دارایی",
    icon: <Bell className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Rocket className="size-4" />,
  },
  {
    title: "ERP",
    icon: <CheckCircle className="size-4" />,
  },
  {
    title: "ERP",
    icon: <FileText className="size-4" />,
  },
  {
    title: "بودجه‌بندی",
    icon: <Redo className="size-4" />,
  },
  {
    title: "ERP",
    icon: <ArrowDownToLine className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Repeat className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Scan className="size-4" />,
  },
  {
    title: "مدیریت مالی",
    icon: <Scaling className="size-4" />,
  },
];

interface Feature154Props {
  className?: string;
}

const Feature154 = ({ className }: Feature154Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full min-w-0 max-w-full overflow-x-clip py-32",
        className,
      )}
    >
      <div className="container w-full min-w-0 max-w-full">
        <div className="mx-auto flex w-full min-w-0 max-w-3xl flex-col items-center justify-center gap-6 text-center">
          <Badge variant="outline">ERP</Badge>
          <h1 className="max-w-full text-xl font-semibold text-balance md:text-2xll">
            عملیات سازمان را یکپارچه کنید
          </h1>
          <p className="mx-auto max-w-3xl text-lg text-pretty text-muted-foreground">
            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
          </p>
        </div>
        <div
          dir="ltr"
          className="relative mt-10 w-full min-w-0 max-w-full overflow-x-clip contain-inline-size"
        >
          <Marquee className="max-w-full [--duration:30s]">
            {badges.map((badge, index) => (
              <div
                key={`row1-${badge.title}-${index}`}
                className="flex shrink-0 items-center gap-2 rounded-full bg-muted px-4 py-2 whitespace-nowrap"
              >
                {badge.icon}
                {badge.title}
              </div>
            ))}
          </Marquee>
          <Marquee reverse className="max-w-full [--duration:30s]">
            {badges.map((badge, index) => (
              <div
                key={`row2-${badge.title}-${index}`}
                className="flex shrink-0 items-center gap-2 rounded-full bg-muted px-4 py-2 whitespace-nowrap"
              >
                {badge.icon}
                {badge.title}
              </div>
            ))}
          </Marquee>
          <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-1/4 bg-linear-to-r from-background to-transparent" />
          <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-1/4 bg-linear-to-l from-background to-transparent" />
        </div>
      </div>
    </section>
  );
};

export { Feature154 };