"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { GlassCard } from "../ui/GlassCard";
import { RevealText } from "../ui/AnimatedText";
import type { Locale } from "@/lib/i18n";

interface SecurityProps {
  locale: Locale;
}

export function Security({ locale }: SecurityProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });
  const isRTL = locale === "ar";

  const content = {
    en: {
      title: "Enterprise",
      titleHighlight: "Security & Reliability",
      subtitle: "Built for mission-critical operations with uncompromising security",
      features: [
        { icon: "🔒", title: "Enterprise-Grade Security", description: "SOC 2 Type II certified with end-to-end encryption" },
        { icon: "🛡️", title: "Data Privacy", description: "Your data never leaves your infrastructure" },
        { icon: "🔐", title: "Access Controls", description: "Granular permissions and audit trails" },
        { icon: "⚡", title: "99.99% Uptime", description: "Global CDN with instant failover" }
      ],
      certifications: ["SOC 2", "GDPR", "ISO 27001", "HIPAA"]
    },
    ar: {
      title: "الأمان والموثوقية",
      titleHighlight: "للمؤسسات",
      subtitle: "مُصمم للعمليات الحرجة مع أمان لا يمكن المساومة عليه",
      features: [
        { icon: "🔒", title: "أمان على مستوى المؤسسات", description: "معتمد SOC 2 Type II مع تشفير من طرف إلى طرف" },
        { icon: "🛡️", title: "خصوصية البيانات", description: "بياناتك لا تغادر البنية التحتية الخاصة بك أبداً" },
        { icon: "🔐", title: "ضوابط الوصول", description: "أذونات دقيقة وسجلات التدقيق" },
        { icon: "⚡", title: "uptime 99.99%", description: "شبكة توصيل محتوى عالمية مع تجاوز فوري" }
      ],
      certifications: ["SOC 2", "GDPR", "ISO 27001", "HIPAA"]
    }
  };

  const t = content[locale];

  return (
    <section id="security" ref={ref} className="py-32 relative" dir={isRTL ? "rtl" : "ltr"}>
      <div className="container-custom">
        <RevealText className="text-center mb-20">
          <h2 className="font-space-grotesk font-bold mb-6">
            <span className="text-muted-white">{t.title}</span>
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-electric-cyan to-soft-emerald">
              {t.titleHighlight}
            </span>
          </h2>
          <p className="text-xl text-muted-white max-w-2xl mx-auto">
            {t.subtitle}
          </p>
        </RevealText>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {t.features.map((feature, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 50 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: i * 0.1 }}
            >
              <GlassCard delay={i * 0.1}>
                <div className="text-4xl mb-4">{feature.icon}</div>
                <h3 className="font-space-grotesk text-lg font-bold text-warm-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-muted-white text-sm">{feature.description}</p>
              </GlassCard>
            </motion.div>
          ))}
        </div>

        {/* Certifications */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="flex flex-wrap justify-center gap-8 items-center opacity-60"
        >
          {t.certifications.map((cert, i) => (
            <div key={i} className="px-6 py-3 rounded-full border border-white/10 font-jetbrains-mono text-xs text-muted-white">
              {cert}
            </div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}