import {
  AlignCenter,
  Brain,
  Package,
  ReceiptText,
  Timer,
  Vault,
} from "lucide-react";

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

interface Hero74Props {
  className?: string;
}

const FEATURES = [
  { icon: Package, label: "کاملاً قابل سفارشی‌سازی" },
  { icon: AlignCenter, label: "بینش لحظه‌ای" },
  { icon: Vault, label: "فضای ذخیره‌سازی امن" },
  { icon: ReceiptText, label: "رسیدهای هوشمند" },
  { icon: Timer, label: "پیگیری خودکار" },
  { icon: Brain, label: "جستجوی هوشمند" },
] as const;

const Hero74 = ({ className }: Hero74Props) => {
  return (
    <section
      className={cn(
        "w-full min-w-0 max-w-full overflow-x-hidden py-32",
        className,
      )}
    >
      <div className="w-full min-w-0">
        <div className="container mx-auto text-center">
          <h1 className="mb-4 text-4xl font-medium tracking-tight text-pretty md:text-5xl">
            پلتفرمی یکپارچه برای مدیریت کسب‌وکار
          </h1>
          <p className="mx-auto max-w-2xl text-muted-foreground">
            همه اطلاعات مالی، اسناد و گزارش‌های مدیریتی را در یک محیط امن و قابل
            جستجو مدیریت کنید.
          </p>
          <div className="mx-auto mt-8 flex w-full max-w-sm items-center gap-2">
            <Input type="email" placeholder="ایمیل خود را وارد کنید" />
            <Button className="shrink-0">پیوستن به لیست انتظار</Button>
          </div>
          <div className="mx-auto mt-12 grid max-w-3xl grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
            {FEATURES.map(({ icon: Icon, label }) => (
              <div key={label} className="flex flex-col items-center gap-2">
                <div className="flex h-16 w-24 items-center justify-center rounded-md border">
                  <Icon />
                </div>
                <span className="text-sm text-muted-foreground">{label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="relative mt-20 hidden w-full min-w-0 gap-10 overflow-hidden lg:flex">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="max-h-[500px] min-w-0 flex-1 rounded-e-xl object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="max-h-[500px] min-w-0 flex-1 rounded-s-xl object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-3.svg"
            alt="تصویر نمونه"
            className="absolute top-1/2 left-1/2 z-10 max-h-80 w-auto max-w-[min(100%,28rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl object-cover shadow-md"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero74 };