import { motion } from "framer-motion";
import {
  AlertTriangle,
  ArrowRight,
  BarChart3,
  Building,
  Calendar,
  CheckCircle,
  Clock,
  Code,
  Eye,
  FileCheck,
  FileText,
  Globe,
  Heart,
  Lock,
  MessageSquare,
  Monitor,
  Search,
  Shield,
  ShieldCheck,
  TestTube,
  ThumbsUp,
  TrendingUp,
  UserCheck,
  Users,
  X,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";

// Compliance-Ready Systems Hero Section
const ComplianceReadySystemsHero = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely</title>
        <meta
          name="description"
          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/solutions/compliance-ready-systems" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
        <meta
          property="og:description"
          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
        <meta
          name="twitter:description"
          content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
                              {
                                "@context": "https://schema.org",
                                "@type": "Organization",
                                "name": "WDI",
                                "url": "https://www.wdipl.com",
                                "sameAs": [
                                  "https://www.facebook.com/wdideas",
                                  "https://www.linkedin.com/in/website-developers-india/",
                                  "https://www.instagram.com/wdipl/"
                                ]
                              }
                            `}
        </script>
      </Helmet>
      <div className="container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            {/* Solutions Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <span className="text-white/70 text-sm font-medium">
                Solutions
              </span>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                Compliance-Ready Systems{" "}
                <span className="text-gray-400">(HIPAA, GDPR, etc.)</span>
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Build or adapt your digital systems to meet stringent regulatory
                requirements, ensuring data privacy, security, and legal
                adherence.
              </p>
            </div>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <ShimmerButton
                className="text-lg px-8 py-4"
                onClick={() => navigateTo("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <MessageSquare className="w-5 h-5 flex-shrink-0" />
                  <span>Get a Free Consultation</span>
                </div>
              </ShimmerButton>
              <Button
                variant="outline"
                size="lg"
                className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
              >
                <div className="inline-flex items-center gap-2">
                  <Eye className="w-5 h-5 flex-shrink-0" />
                  <span>Explore Our Compliance Solutions</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with Compliance Security Visualization */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex flex-col items-center"
          >
            {/* Compliance Security Scene */}
            <div className="relative w-full max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative"
              >
                {/* Main Compliance Dashboard */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 0.6 }}
                  className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
                >
                  {/* Compliance Standards */}
                  <div className="relative mb-8">
                    {/* Compliance Header */}
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8, delay: 1.0 }}
                      className="text-center mb-6"
                    >
                      <h3 className="text-xl font-semibold text-white mb-2">
                        Compliance Dashboard
                      </h3>
                      <div className="flex items-center justify-center gap-4">
                        <Badge
                          variant="secondary"
                          className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                        >
                          <ShieldCheck className="w-3 h-3 mr-1" />
                          Secure
                        </Badge>
                        <Badge
                          variant="secondary"
                          className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
                        >
                          <FileCheck className="w-3 h-3 mr-1" />
                          Compliant
                        </Badge>
                      </div>
                    </motion.div>

                    {/* Compliance Standards Grid */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.8, delay: 1.2 }}
                      className="grid grid-cols-2 gap-3 mb-6"
                    >
                      {[
                        { standard: "HIPAA", status: "compliant", delay: 1.4 },
                        { standard: "GDPR", status: "compliant", delay: 1.6 },
                        { standard: "SOC 2", status: "compliant", delay: 1.8 },
                        { standard: "ISO 27001", status: "review", delay: 2.0 },
                      ].map((item, i) => (
                        <motion.div
                          key={i}
                          initial={{ opacity: 0, scale: 0 }}
                          animate={{ opacity: 1, scale: 1 }}
                          transition={{ duration: 0.5, delay: item.delay }}
                          className={`p-3 rounded-lg border text-center ${item.status === "compliant"
                              ? "bg-green-500/10 border-green-500/30"
                              : "bg-orange-500/10 border-orange-500/30"
                            }`}
                        >
                          <div className="flex items-center justify-center mb-2">
                            {item.status === "compliant" ? (
                              <CheckCircle className="w-5 h-5 text-green-400" />
                            ) : (
                              <Clock className="w-5 h-5 text-orange-400" />
                            )}
                          </div>
                          <div
                            className={`text-sm font-medium ${item.status === "compliant"
                                ? "text-green-300"
                                : "text-orange-300"
                              }`}
                          >
                            {item.standard}
                          </div>
                          <div
                            className={`text-xs ${item.status === "compliant"
                                ? "text-green-400"
                                : "text-orange-400"
                              }`}
                          >
                            {item.status === "compliant"
                              ? "Compliant"
                              : "In Review"}
                          </div>
                        </motion.div>
                      ))}
                    </motion.div>

                    {/* Security Measures */}
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8, delay: 2.2 }}
                      className="space-y-3"
                    >
                      {[
                        {
                          measure: "Data Encryption",
                          icon: Lock,
                          status: "active",
                        },
                        {
                          measure: "Access Control",
                          icon: UserCheck,
                          status: "active",
                        },
                        {
                          measure: "Audit Trails",
                          icon: FileText,
                          status: "active",
                        },
                      ].map((security, i) => (
                        <div
                          key={i}
                          className="flex items-center justify-between p-2 bg-black/30 rounded-lg"
                        >
                          <div className="flex items-center gap-2">
                            <security.icon className="w-4 h-4 text-blue-400" />
                            <span className="text-white text-sm">
                              {security.measure}
                            </span>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                            <span className="text-green-300 text-xs">
                              Active
                            </span>
                          </div>
                        </div>
                      ))}
                    </motion.div>
                  </div>

                  {/* Compliance Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.4 }}
                    className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
                  >
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <BarChart3 className="w-4 h-4 text-purple-400" />
                        <span className="text-purple-400 text-xs font-mono">
                          Security Score
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        Excellent
                      </Badge>
                    </div>

                    {/* Security Metrics */}
                    <div className="space-y-2">
                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "96%" }}
                        transition={{ duration: 1, delay: 2.6 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                          <span className="text-green-300 text-xs">
                            Data Protection
                          </span>
                        </div>
                        <span className="text-green-300 text-xs font-mono">
                          96%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "94%" }}
                        transition={{ duration: 1, delay: 2.8 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                          <span className="text-blue-300 text-xs">
                            Access Security
                          </span>
                        </div>
                        <span className="text-blue-300 text-xs font-mono">
                          94%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "98%" }}
                        transition={{ duration: 1, delay: 3.0 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
                          <span className="text-purple-300 text-xs">
                            Audit Readiness
                          </span>
                        </div>
                        <span className="text-purple-300 text-xs font-mono">
                          98%
                        </span>
                      </motion.div>
                    </div>
                  </motion.div>

                  {/* Compliance Benefits */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 3.2 }}
                    className="grid grid-cols-2 gap-3"
                  >
                    <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
                      <div className="text-green-400 text-lg font-bold">
                        99%
                      </div>
                      <div className="text-white text-xs">Risk Reduction</div>
                    </div>
                    <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
                      <div className="text-blue-400 text-lg font-bold">
                        24/7
                      </div>
                      <div className="text-white text-xs">Monitoring</div>
                    </div>
                  </motion.div>
                </motion.div>

                {/* Floating Compliance Elements */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 3.4 }}
                  className="absolute -bottom-6 -left-6 transform -rotate-12"
                >
                  <div className="w-14 h-14 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
                    <Shield className="w-6 h-6 text-purple-400" />
                  </div>
                </motion.div>

                {/* Compliance Status Indicator */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 3.6 }}
                  className="absolute -top-8 -right-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-green-400 text-sm">
                    <ShieldCheck className="w-4 h-4" />
                    <span>Secure</span>
                  </div>
                  <div className="flex gap-1">
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity }}
                      className="w-2 h-2 bg-green-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
                      className="w-2 h-2 bg-blue-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 1 }}
                      className="w-2 h-2 bg-purple-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* Compliance Badge */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 3.8 }}
                  className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
                    <div className="text-center">
                      <div className="text-accent text-sm font-bold">SEC</div>
                      <div className="text-white text-xs">OK</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* Compliance Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 4.0 }}
                className="flex justify-center gap-4 flex-wrap mt-8"
              >
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <Shield className="w-3 h-3 mr-1" />
                  Secure
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <FileCheck className="w-3 h-3 mr-1" />
                  Compliant
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Eye className="w-3 h-3 mr-1" />
                  Auditable
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// The Challenge We Solve
const ComplianceReadySystemsChallenge = () => {
  return (
    <section className="py-32">
      <div className="container mx-auto px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
              Navigating the Complexities of Regulatory Compliance
            </h2>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-12 items-center">
            {/* Problem */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
            >
              <Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
                <CardContent className="p-0">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                      <AlertTriangle className="w-6 h-6 text-red-400" />
                    </div>
                    <h3 className="text-2xl font-semibold text-foreground">
                      The Problem
                    </h3>
                  </div>
                  <div className="space-y-4 text-muted-foreground">
                    <p>
                      Building or managing systems that comply with
                      industry-specific regulations (like HIPAA, GDPR, SOC 2,
                      ISO 27001) is complex, time-consuming, and critical for
                      avoiding hefty fines and reputational damage.
                    </p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Complex regulatory requirements and frequent changes
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Hefty fines and legal penalties for non-compliance
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Risk of data breaches and security vulnerabilities
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Reputation damage and loss of customer trust
                        </span>
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* Solution */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
            >
              <Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
                <CardContent className="p-0">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                      <CheckCircle className="w-6 h-6 text-green-400" />
                    </div>
                    <h3 className="text-2xl font-semibold text-foreground">
                      Our Solution
                    </h3>
                  </div>
                  <div className="space-y-4 text-muted-foreground">
                    <p>
                      WDI specializes in developing and optimizing
                      compliance-ready digital systems. We integrate security,
                      privacy, and regulatory requirements directly into your
                      software architecture, ensuring your operations are
                      robustly compliant from the ground up.
                    </p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Privacy-by-design and security-by-design architecture
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Built-in compliance for HIPAA, GDPR, SOC 2, and more
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Comprehensive audit trails and documentation
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Ongoing monitoring and compliance management
                        </span>
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

// What's Included in This Solution
const ComplianceReadySystemsIncludes = () => {
  const includes = [
    {
      icon: Search,
      title: "Compliance Gap Analysis",
      description:
        "Assessing your current systems against target regulations (HIPAA, GDPR, etc.).",
    },
    {
      icon: Shield,
      title: "Secure Architecture Design",
      description:
        "Designing systems with privacy-by-design and security-by-design principles.",
    },
    {
      icon: Lock,
      title: "Data Encryption & Masking",
      description:
        "Implementing robust solutions for sensitive data protection.",
    },
    {
      icon: UserCheck,
      title: "Access Control & Auditing",
      description:
        "Developing systems for strict user permissions and comprehensive logging.",
    },
    {
      icon: FileCheck,
      title: "Regulatory Compliance Features",
      description:
        "Building specific features required by regulations (e.g., data subject access requests, consent management).",
    },
    {
      icon: Code,
      title: "Secure Development Practices",
      description: "Implementing DevSecOps and secure coding standards.",
    },
    {
      icon: FileText,
      title: "Documentation & Audit Trails",
      description:
        "Ensuring proper logging and documentation for compliance audits.",
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Our Compliance-Driven System Development Services
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {includes.slice(0, 6).map((item, index) => {
            const IconComponent = item.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {item.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed">
                      {item.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Seventh item centered */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="flex justify-center mt-8"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.6 }}
            viewport={{ once: true }}
            whileHover={{ y: -5 }}
            className="group max-w-sm"
          >
            <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <FileText className="w-8 h-8 text-accent" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {includes[6].title}
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {includes[6].description}
                </p>
              </CardContent>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Key Benefits & Outcomes
const ComplianceReadySystemsBenefits = () => {
  const benefits = [
    {
      icon: Shield,
      title: "Risk Mitigation",
      description:
        "Drastically reduce the risk of non-compliance fines and legal issues.",
    },
    {
      icon: Lock,
      title: "Enhanced Data Security",
      description:
        "Protect sensitive information with industry-leading security measures.",
    },
    {
      icon: ThumbsUp,
      title: "Increased Trust",
      description:
        "Build confidence with clients, partners, and regulatory bodies.",
    },
    {
      icon: FileCheck,
      title: "Streamlined Audits",
      description:
        "Be prepared for compliance audits with robust documentation and processes.",
    },
    {
      icon: TrendingUp,
      title: "Business Continuity",
      description:
        "Ensure operational resilience against security breaches and regulatory changes.",
    },
  ];

  return (
    <section className="py-32">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Secure Your Operations with Compliant Systems
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {benefits.slice(0, 3).map((benefit, index) => {
            const IconComponent = benefit.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Second row with remaining benefits */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
        >
          {benefits.slice(3).map((benefit, index) => {
            const IconComponent = benefit.icon;
            return (
              <motion.div
                key={index + 3}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Our Process for Building Compliance-Ready Systems
const ComplianceReadySystemsProcess = () => {
  const steps = [
    {
      title: "Compliance Assessment",
      description:
        "Deep dive into your specific regulatory needs and current system status.",
      icon: Search,
    },
    {
      title: "Secure Design & Planning",
      description:
        "Architect solutions with compliance requirements embedded from the start.",
      icon: Shield,
    },
    {
      title: "Secure Development",
      description:
        "Implement secure coding practices and features specific to regulations.",
      icon: Code,
    },
    {
      title: "Security Testing & Auditing",
      description:
        "Conduct penetration testing, vulnerability assessments, and compliance checks.",
      icon: TestTube,
    },
    {
      title: "Documentation & Reporting",
      description:
        "Prepare all necessary documentation for compliance and audits.",
      icon: FileText,
    },
    {
      title: "Deployment & Monitoring",
      description:
        "Launch the system with continuous security and compliance monitoring.",
      icon: Monitor,
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Our Secure & Compliant Development Process
          </h2>
        </motion.div>

        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>

          <div className="space-y-16">
            {steps.map((step, index) => {
              const IconComponent = step.icon;
              const isEven = index % 2 === 0;

              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: isEven ? -50 : 50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                    } flex-col lg:gap-16 gap-8`}
                >
                  <div
                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
                      } text-center lg:text-left`}
                  >
                    <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                        <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="text-2xl font-semibold text-white mb-4">
                        {step.title}
                      </h3>
                      <p className="text-gray-300 leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

                  {/* Timeline dot */}
                  <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>

                  <div className="flex-1 hidden lg:block"></div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// Who Benefits from This Solution
const ComplianceReadySystemsAudience = () => {
  const audiences = [
    {
      icon: Heart,
      title: "Healthcare Providers",
      description: "HIPAA, HITECH compliance for patient data protection.",
    },
    {
      icon: Building,
      title: "Financial Institutions",
      description: "PCI DSS, SOC 2 compliance for secure financial operations.",
    },
    {
      icon: Globe,
      title: "EU/International Businesses",
      description: "GDPR compliance for businesses handling EU citizen data.",
    },
    {
      icon: Shield,
      title: "Data-Sensitive Companies",
      description: "Handling sensitive customer or proprietary data securely.",
    },
    {
      icon: Users,
      title: "Security-Focused Organizations",
      description: "Requiring robust data security and privacy measures.",
    },
  ];

  return (
    <section className="py-32">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Ideal For...
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {audiences.slice(0, 3).map((audience, index) => {
            const IconComponent = audience.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {audience.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {audience.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Second row with remaining audiences */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
        >
          {audiences.slice(3).map((audience, index) => {
            const IconComponent = audience.icon;
            return (
              <motion.div
                key={index + 3}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {audience.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {audience.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Case Studies
const ComplianceReadySystemsCaseStudies = () => {
  const caseStudies = [
    {
      title: "HIPAA-Compliant Telehealth Platform",
      client: "Healthcare Provider",
      description:
        "Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
      image:
        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
      results: "Full HIPAA compliance in 8 months",
      engagement: "Healthcare compliance success",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "GDPR-Ready E-commerce Portal",
      client: "E-commerce Company",
      description:
        "Transformed an existing e-commerce site to meet all GDPR requirements, ensuring user data privacy with comprehensive consent management, data portability features, and right-to-be-forgotten implementation for EU customers.",
      image:
        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
      results: "Full GDPR compliance achieved",
      engagement: "E-commerce privacy transformation",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "SOC 2 Financial Services Platform",
      client: "FinTech Startup",
      description:
        "Built a SOC 2 Type II compliant financial services platform from the ground up, implementing comprehensive security controls, audit trails, and monitoring systems to meet strict financial industry standards and customer trust requirements.",
      image:
        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
      results: "SOC 2 Type II certification",
      engagement: "Financial compliance implementation",
      gradient: "from-purple-500/20 to-pink-500/20",
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
            Secure & Compliant Systems We've Delivered
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {caseStudies.map((study, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -8, scale: 1.02 }}
              className="group cursor-pointer"
            >
              <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
                <CardContent className="p-0 flex flex-col h-full">
                  <div className="p-8 pb-6">
                    <div className="flex items-start gap-4 mb-6">
                      <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                        <Shield className="w-6 h-6 text-accent" />
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                          {study.client}
                        </div>
                        <Badge
                          variant="secondary"
                          className="text-xs bg-accent/20 text-accent border-accent/30"
                        >
                          {study.results}
                        </Badge>
                      </div>
                    </div>

                    <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                      {study.title}
                    </h3>
                  </div>

                  <div className="px-8 pb-6 flex-1">
                    <div
                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
                    >
                      <ImageWithFallback
                        src={study.image}
                        alt={study.title}
                        className="w-full h-48 object-cover rounded-lg shadow-lg"
                      />
                    </div>
                  </div>

                  <div className="px-8 pb-6">
                    <p className="text-gray-300 text-sm leading-relaxed mb-4">
                      {study.description}
                    </p>
                    <div className="flex gap-4 text-xs text-gray-400">
                      <div className="flex items-center gap-1">
                        <CheckCircle className="w-3 h-3" />
                        {study.engagement}
                      </div>
                    </div>
                  </div>

                  <div className="p-8 pt-0 mt-auto">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                    >
                      <span className="text-sm font-medium">
                        VIEW FULL CASE STUDY
                      </span>
                      <ArrowRight className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

// Mid-Page Lead Capture CTA
const ComplianceReadySystemsInlineCTA = () => {
  return (
    <section className="py-20">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Shield className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Compliance & Security
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Ensure Your Systems Are{" "}
              <span className="text-accent">Secure & Compliant</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Protect your business and your data with our expert-led solutions.
            </p>

            <ShimmerButton
              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
              onClick={() => navigateTo("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Search className="w-6 h-6 flex-shrink-0" />
                <span>Get a Compliance Assessment</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// FAQs
const ComplianceReadySystemsFAQs = () => {
  const faqs = [
    {
      question:
        "What specific regulations do you have expertise in (e.g., HIPAA, GDPR, SOC 2)?",
      answer:
        "We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our team stays current with regulatory changes and requirements, ensuring your systems meet the latest standards. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and various financial services regulations including SOX and GLBA.",
    },
    {
      question: "How do you handle ongoing compliance changes?",
      answer:
        "We provide comprehensive ongoing compliance management: Regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes: subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change management processes. We also provide compliance calendars, training updates for your team, and emergency response procedures for urgent regulatory changes.",
    },
    {
      question: "Can you help us with compliance audits?",
      answer:
        "Yes, we provide comprehensive audit support services: Pre-audit preparation including documentation review, gap analysis, and remediation planning, audit facilitation with technical expertise and evidence preparation, post-audit remediation support for any identified deficiencies, and ongoing audit readiness maintenance. Our audit support includes: creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you're fully prepared and supported throughout the process.",
    },
    {
      question: "What security measures do you integrate into your systems?",
      answer:
        "We implement comprehensive security controls aligned with industry best practices: Data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include: secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs. All security implementations follow zero-trust principles and defense-in-depth strategies.",
    },
    {
      question: "Is existing system remediation something you offer?",
      answer:
        "Absolutely! We specialize in remediating existing systems for compliance: Comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes: minimal downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance.",
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Frequently Asked Questions
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto"
        >
          <Accordion type="single" collapsible className="space-y-8">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-white">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};

// Final CTA Section
const ComplianceReadySystemsFinalCTA = () => {
  return (
    <section className="py-20 relative overflow-hidden">
      <div className="container mx-auto px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="mb-8"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Shield className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Trust & Security
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Build Trust and Security{" "}
            <span className="text-accent">with WDI's Expertise</span>
          </h2>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            Navigate the complex world of regulatory compliance with confidence.
            WDI builds and fortifies systems that stand up to the strictest
            standards.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <ShimmerButton
              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
              onClick={() => navigateTo("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Calendar className="w-6 h-6 flex-shrink-0" />
                <span>Schedule a Security & Compliance Consultation</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Assessment • Design • Development • Testing • Documentation •
              Monitoring
            </p>
          </motion.div>
        </motion.div>
      </div>

      {/* Background Decorative Elements */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
      </div>
    </section>
  );
};

// Main Compliance-Ready Systems Page
export const ComplianceReadySystems = () => {
  return (
    <div className="dark min-h-screen">
      <Navigation />

      {/* Hero Section */}
      <section className="bg-black">
        <ComplianceReadySystemsHero />
      </section>

      {/* Challenge */}
      <section className="bg-background">
        <ComplianceReadySystemsChallenge />
      </section>

      {/* What's Included */}
      <section className="bg-card">
        <ComplianceReadySystemsIncludes />
      </section>

      {/* Benefits */}
      <section className="bg-background">
        <ComplianceReadySystemsBenefits />
      </section>

      {/* Process */}
      <section className="bg-card">
        <ComplianceReadySystemsProcess />
      </section>

      {/* Target Audience */}
      <section className="bg-background">
        <ComplianceReadySystemsAudience />
      </section>

      {/* Case Studies */}
      <section className="bg-card">
        <ComplianceReadySystemsCaseStudies />
      </section>

      {/* Mid-Page CTA */}
      <section className="bg-background">
        <ComplianceReadySystemsInlineCTA />
      </section>

      {/* FAQs */}
      <section className="bg-card">
        <ComplianceReadySystemsFAQs />
      </section>

      {/* Final CTA */}
      <section className="bg-background">
        <ComplianceReadySystemsFinalCTA />
      </section>

      {/* Footer */}
      <section className="bg-card">
        <Footer />
      </section>
    </div>
  );
};