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

interface ComplianceBadge {
  image: string;
  alt: string;
}

interface ComplianceFeature {
  title: string;
  description: string;
  badgeImage: string;
  badgeAlt: string;
}

interface Compliance1Props {
  tagline?: string;
  heading?: string;
  description?: string;
  badges?: ComplianceBadge[];
  features?: ComplianceFeature[];
  className?: string;
}

const Compliance1 = ({
  tagline = "امنیت و انطباق",
  heading = "زیرساختی امن و منطبق با استانداردهای بین‌المللی",
  description =
    "پلتفرم ما با رعایت استانداردهای بین‌المللی امنیت و حریم خصوصی، به سازمان‌ها کمک می‌کند الزامات قانونی، حفاظت از داده‌ها و فرایندهای ممیزی را با اطمینان مدیریت کنند.",
  badges = [
    {
      image:
        "/block-media/shadcnblocks/block/compliance/GDPR.svg",
      alt: "GDPR",
    },
    {
      image:
        "/block-media/shadcnblocks/block/compliance/CCPA.svg",
      alt: "CCPA",
    },
  ],
  features = [
    {
      title: "ثبت خودکار رویدادها و ممیزی",
      description:
        "تمام فعالیت‌های کاربران به‌صورت خودکار ثبت و زمان‌بندی می‌شوند تا گزارش‌های ممیزی دقیق، قابل استناد و غیرقابل تغییر در دسترس باشد.",
      badgeImage:
        "/block-media/shadcnblocks/block/compliance/ISO-27001.svg",
      badgeAlt: "ISO 27001",
    },
    {
      title: "پایش مستمر انطباق",
      description:
        "سامانه به‌صورت مداوم وضعیت انطباق با استانداردها و الزامات امنیتی را بررسی کرده و در صورت بروز مغایرت هشدار می‌دهد.",
      badgeImage:
        "/block-media/shadcnblocks/block/compliance/ISO-27017.svg",
      badgeAlt: "ISO 27017",
    },
    {
      title: "گزارش‌های آماده ممیزی",
      description:
        "گزارش‌های موردنیاز برای ممیزی، ارزیابی امنیت و الزامات قانونی تنها با چند کلیک تولید می‌شوند.",
      badgeImage:
        "/block-media/shadcnblocks/block/compliance/ISO-27018.svg",
      badgeAlt: "ISO 27018",
    },
  ],
  className,
}: Compliance1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
      <div className="container">
        <div className="grid gap-9 lg:grid-cols-2">
          <div className="flex flex-col gap-5">
            <Badge variant="outline" className="gap-1.5 bg-background">
              <span className="size-1.5 rounded-full bg-green-500" />
              {tagline}
            </Badge>
            <h1 className="text-xl font-medium text-balance lg:text-2xll">
              {heading}
            </h1>
            <p className="text-lg text-muted-foreground">{description}</p>
            <div className="flex items-center gap-6">
              {badges.map((badge, index) => (
                <img
                  key={index}
                  src={badge.image}
                  alt={badge.alt}
                  className="h-22 opacity-50 grayscale md:h-28 dark:invert"
                />
              ))}
            </div>
          </div>
          <div className="rounded-2xl border border-border bg-background">
            {features.map((feature, index) => (
              <div
                key={index}
                className={cn(
                  "relative overflow-hidden p-6 lg:px-8 lg:py-11",
                  index === 0 && "border-b border-border",
                  index === features.length - 1 && "border-t border-border",
                )}
              >
                <div>
                  <h2 className="text-xl font-medium lg:text-xl">
                    {feature.title}
                  </h2>
                  <p className="mt-2 w-3/4 pe-10 text-sm text-muted-foreground md:text-base">
                    {feature.description}
                  </p>
                </div>
                <img
                  src={feature.badgeImage}
                  alt={feature.badgeAlt}
                  className="absolute end-4 -bottom-7 size-24 text-muted-foreground opacity-80 grayscale lg:end-8 lg:size-32 dark:invert"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compliance1 };