"use client";

import { Badge, Card } from "ikoncomponents";
import { Lock, ShieldCheck, Globe } from "lucide-react";

const securityFeatures = [
  {
    title: "SSO & MFA",
    description: "Okta, Azure AD integration",
    icon: Lock,
  },
  {
    title: "SOC2 & GDPR",
    description: "Regulatory compliance",
    icon: ShieldCheck,
  },
  {
    title: "Data Sovereignty",
    description: "Regional data hosting",
    icon: Globe,
  },
];

export function SecuritySection() {
  return (
    <section className="py-14 md:py-20">
      <div className="container mx-auto px-4">
        
        {/* Header */}
        <div className="text-center space-y-4 mb-12 md:mb-16">
          <Badge
            variant="outline"
            className="text-gray-400 px-4 py-1"
          >
            Enterprise Grade
          </Badge>

          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
            Security & Compliance
          </h2>

          <p className="text-gray-400 max-w-2xl mx-auto text-lg">
            Built with enterprise security requirements in mind, ensuring your
            data is protected at every level.
          </p>
        </div>

        {/* Security Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-6xl mx-auto">
          {securityFeatures.map((feature, idx) => (
            <Card
              key={idx}
              className="p-6 flex flex-col items-center text-center gap-4
                         group hover:border-white/10 transition-all"
            >
              <div className="p-4 rounded-2xl bg-indigo-500/5 border border-indigo-500/10 
                              group-hover:bg-indigo-500/10 transition-colors">
                <feature.icon
                  className="text-indigo-400"
                  size={32}
                />
              </div>

              <h3 className="text-xl font-bold">
                {feature.title}
              </h3>

              <p className="text-gray-400 text-sm">
                {feature.description}
              </p>
            </Card>
          ))}
        </div>

      </div>
    </section>
  );
}