import { cn } from "@/lib/utils";
import { Shield, Lock, FileText, Server } from "lucide-react";

interface SecuritySectionProps {
  className?: string;
}

export default function SecuritySection({ className }: SecuritySectionProps) {
  const features = [
    {
      icon: Shield,
      title: "دسترسی تفکیک‌شده کاربران",
      description: "کنترل دسترسی دقیق برای هر کاربر"
    },
    {
      icon: FileText,
      title: "ثبت کامل سوابق",
      description: "ذخیره‌سازی و نگهداری تمامی معاملات"
    },
    {
      icon: Lock,
      title: "امکان مدیریت اعتبار مشتریان",
      description: "کنترل و مدیریت اعتبارات به صورت دقیق"
    },
    {
      icon: Server,
      title: "زیرساخت پایدار و قابل توسعه",
      description: "سیستم پایدار و مقیاس‌پذیر برای رشد کسب‌وکار"
    }
  ];

  return (
    <section className={cn("py-16 md:py-24 lg:py-32", className)}>
      <div className="container mx-auto max-w-6xl px-6">
        <div className="flex flex-col items-center space-y-12">
          <h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] text-center text-foreground">
            اطلاعات مالی، نیازمند زیرساخت امن
          </h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div key={index} className="flex flex-col items-center space-y-4 rounded-lg border border-border bg-card p-6 text-center shadow-sm">
                  <div className="flex size-12 items-center justify-center rounded-full bg-primary/10">
                    <Icon className="size-6 text-primary" />
                  </div>
                  <h3 className="text-heading-4 font-semibold leading-[var(--line-height-heading)] text-foreground">{feature.title}</h3>
                  <p className="text-body-sm leading-[var(--line-height-body)] text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}