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

const logos = [
  {
    src: "/block-media/shadcnblocks/block/logos/ph-daily.svg",
    alt: "گزارش عملکرد",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/ph-weekly.svg",
    alt: "داشبورد تحلیل داده",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/ph-kitty.svg",
    alt: "نمودار شاخص کلیدی",
  },
];

interface Feature161Props {
  className?: string;
}

const Feature161 = ({ className }: Feature161Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative grid grid-cols-1 grid-rows-2 border border-muted-foreground/25 lg:grid-cols-2 lg:grid-rows-1">
          <div className="absolute top-[-16px] start-[-1px] h-4 w-px bg-muted-foreground/25" />
          <div className="absolute top-[-1px] start-[-16px] h-px w-4 bg-muted-foreground/25" />
          <div className="absolute bottom-[-16px] start-[-1px] h-4 w-px bg-muted-foreground/25" />
          <div className="absolute bottom-0 start-[-16px] h-px w-4 bg-muted-foreground/25" />
          <div className="relative border-b border-muted-foreground/25 p-6 text-start md:p-16 lg:border-e lg:border-b-0">
            <div className="absolute top-[-16px] end-[-1px] hidden h-4 w-px bg-muted-foreground/25 lg:block" />
            <div className="absolute end-[-1px] bottom-[-16px] h-4 w-px bg-muted-foreground/25" />
            <h1 className="text-xl font-bold text-balance">
              داده پراکنده را به تصمیم تبدیل کنید
            </h1>
            <h3 className="mt-2 mb-6 text-xl text-pretty text-muted-foreground">
              شاخص‌های کلیدی را یکجا ببینید
            </h3>
            <div className="flex items-center gap-3">
              <Button>شروع کنید</Button>
              <Button variant="outline">تحلیل داده</Button>
            </div>
          </div>
          <div className="grid grid-cols-1 grid-rows-7">
            <div className="row-start-1 row-end-2 flex justify-evenly">
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
            </div>
            <div className="row-start-2 row-end-7 flex items-center justify-center gap-8 border-t border-b border-muted-foreground/25">
              <div className="flex flex-col items-center gap-8 py-12 md:flex-row">
                {logos.map((logo) => (
                  <img
                    key={logo.alt}
                    src={logo.src}
                    alt={logo.alt}
                    className="h-14 object-cover"
                  />
                ))}
              </div>
            </div>
            <div className="row-start-7 row-end-8 flex justify-evenly">
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
              <div className="h-full w-px bg-muted-foreground/25" />
            </div>
          </div>
          <div className="absolute top-[-16px] end-[-1px] h-4 w-px bg-muted-foreground/25" />
          <div className="absolute top-[-1px] end-[-16px] h-px w-4 bg-muted-foreground/25" />
          <div className="absolute end-[-1px] bottom-[-16px] h-4 w-px bg-muted-foreground/25" />
          <div className="absolute end-[-16px] bottom-[-1px] h-px w-4 bg-muted-foreground/25" />
        </div>
      </div>
    </section>
  );
};

export { Feature161 };