"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Box, Lock, Shield, Bug, Eye, Network, Key } from "lucide-react";

gsap.registerPlugin(ScrollTrigger);

const securityFeatures = [
  {
    icon: Lock,
    title: "Database Encryption",
    description:
      "All our databases are secured with AES-256 encryption, the industry standard for protecting sensitive information. Breaking this level of encryption would require millions of years with even the most powerful supercomputers.",
  },
  {
    icon: Shield,
    title: "Secure Communications",
    description:
      "All data sent to your browser is encrypted, ensuring that information remains private and protected from third parties during transmission.",
  },
  {
    icon: Bug,
    title: "Ethical Hacking",
    description:
      "We regularly engage professional ethical hackers to test our infrastructure and identify potential vulnerabilities, ensuring our systems remain secure.",
  },
  {
    icon: Eye,
    title: "Active Monitoring",
    description:
      "Our software is continuously monitored to ensure it adheres to the highest security standards and is free from vulnerabilities.",
  },
  {
    icon: Network,
    title: "Firewalls and Malware Protection",
    description:
      "Our infrastructure is protected by advanced firewalls and high-end anti-virus and anti-malware solutions, keeping your data safe from external threats.",
  },
  {
    icon: Key,
    title: "Two-Factor Authentication (2FA)",
    description:
      "We implement 2FA to add an extra layer of security beyond strong passwords, helping protect your accounts from unauthorized access.",
  },
];

export default function Security() {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        contentRef.current,
        { y: 40, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: "power2.out",
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top 80%",
          },
        }
      );

      gsap.utils.toArray<HTMLElement>(".security-card").forEach((card, i) => {
        gsap.fromTo(
          card,
          { y: 30, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            ease: "power2.out",
            scrollTrigger: {
              trigger: card,
              start: "top 85%",
            },
            delay: i * 0.1,
          }
        );
      });
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  return (
    <section
      id="data-security-compliance"
      ref={sectionRef}
      className="relative py-12 lg:py-16 bg-navy overflow-hidden"
    >
      {/* ASCII Grid */}
      <div className="absolute inset-0 ascii-grid opacity-20" />

      <div className="landing-container relative z-10">
        <div ref={contentRef} className="text-center mb-8 lg:mb-10">
          <p className="font-mono text-xs text-primary uppercase tracking-[0.25em] font-medium opacity-95 flex items-center justify-center gap-2 mb-3">
            <Box className="h-4 w-4" aria-hidden />
            [ Data Security & Compliance ]
          </p>
          <h2 className="font-heading font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-6 tracking-tight">
            Security Is Our Foundation
          </h2>
          <p className="text-gray-300 text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed">
            Protecting your data isn&apos;t just a priority - it&apos;s the cornerstone of everything we do.
            Every feature, every process, every decision is designed to keep your information safe, so you
            can trust Oxyfinz to deliver without compromise.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {securityFeatures.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <div
                key={index}
                className="security-card p-6 lg:p-8 bg-surface border border-white/8 rounded-2xl hover:border-white/20 hover:shadow-lg hover:shadow-black/20 transition-all duration-300"
              >
                <div className="flex items-center gap-3 mb-5">
                  <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Icon className="w-7 h-7 text-primary" aria-hidden />
                  </div>
                  <h3 className="font-heading font-bold text-xl text-white">{feature.title}</h3>
                </div>
                <p className="text-gray-400 leading-relaxed">{feature.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}