import { color, motion } from "framer-motion";
import {
  ArrowRight,
  BarChart,
  BarChart2,
  Bell,
  Briefcase,
  ClipboardList,
  Code,
  Database,
  FileText,
  GraduationCap,
  Handshake,
  Layers,
  LineChart,
  Link,
  MessageSquare,
  Monitor,
  MousePointer,
  PackageCheck,
  Paintbrush2,
  Palette,
  Receipt,
  Server,
  Settings,
  Shield,
  ShieldCheck,
  Table,
  TrendingUp,
  UserCheck,
  Users,
  Users as UsersIcon,
  Workflow,
  Wrench,
  Zap,
} 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 healthcareImage from "../src/images/healthcare.webp";
import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";

// Admin Panels & Dashboards Hero Section
const AdminHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Admin Panels & Dashboards Development | Custom Solutions by WDI</title>
        <meta
          name="description"
          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/services/admin-panels-dashboards" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
        <meta
          property="og:description"
          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
        />
        <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="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
        <meta
          name="twitter:description"
          content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
        />
        <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"
          >
            {/* Admin Panel 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">
                Web & Cloud 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">
                Intuitive Admin Panels & Dashboards
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Empower your team with custom, data-rich admin interfaces enhanced by AI mobile app features for streamlined operations, reporting, and management.
              </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={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Monitor className="w-5 h-5 flex-shrink-0" />
                  <span>Request a Demo</span>
                </div>
              </ShimmerButton>
              <a
                href="#case-studies"
                className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
              >
                <TrendingUp className="w-4 h-4 flex-shrink-0" />
                <span>Optimize Your Operations</span>
              </a>
            </motion.div>
          </motion.div>

          {/* Right side with Admin Dashboard 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"
          >
            {/* Admin Dashboard Interface */}
            <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 Dashboard Window */}
                <div className="relative mx-auto w-80 h-56 bg-gradient-to-br from-accent to-purple-600 rounded-2xl border border-accent/30 shadow-2xl p-6 mb-8">
                  {/* Dashboard Header */}
                  <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center gap-2">
                      <Monitor className="w-5 h-5 text-white" />
                      <span className="text-white text-sm font-medium">
                        Admin Dashboard
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Bell className="w-4 h-4 text-white/80" />
                      <UserCheck className="w-4 h-4 text-white/80" />
                      <Settings className="w-4 h-4 text-white/80" />
                    </div>
                  </div>

                  {/* Dashboard Content Grid */}
                  <div className="grid grid-cols-3 gap-3 mb-4">
                    {/* Analytics Widget */}
                    <div className="bg-white/20 rounded-lg p-3 col-span-2">
                      <BarChart2 className="w-4 h-4 text-white/80 mb-2" />
                      <div className="h-8 bg-white/20 rounded flex items-end gap-1 p-1">
                        <div
                          className="w-2 bg-white/60 rounded"
                          style={{ height: "60%" }}
                        ></div>
                        <div
                          className="w-2 bg-white/80 rounded"
                          style={{ height: "80%" }}
                        ></div>
                        <div
                          className="w-2 bg-white/60 rounded"
                          style={{ height: "40%" }}
                        ></div>
                        <div
                          className="w-2 bg-white rounded"
                          style={{ height: "100%" }}
                        ></div>
                      </div>
                    </div>

                    {/* Stats Widget */}
                    <div className="bg-white/20 rounded-lg p-3 flex flex-col items-center justify-center">
                      <UsersIcon className="w-4 h-4 text-white/80 mb-1" />
                      <span className="text-white text-xs font-medium">
                        1,247
                      </span>
                    </div>
                  </div>

                  {/* Data Table Preview */}
                  <div className="bg-white/20 rounded-lg p-2">
                    <div className="flex items-center gap-2 mb-2">
                      <Table className="w-3 h-3 text-white/80" />
                      <span className="text-white text-xs">
                        Data Management
                      </span>
                    </div>
                    <div className="space-y-1">
                      {[1, 2, 3].map((i) => (
                        <div key={i} className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-white/60 rounded-full"></div>
                          <div className="flex-1 h-2 bg-white/40 rounded"></div>
                          <div className="w-4 h-2 bg-white/60 rounded"></div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Pulse Animation */}
                  <div className="absolute inset-0 rounded-2xl bg-accent/30 animate-ping"></div>
                </div>

                {/* Feature Modules */}
                <div className="relative grid grid-cols-4 gap-4 mb-8">
                  {/* User Management */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 0.6 }}
                    className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl border border-blue-400/30 shadow-lg p-4 text-center"
                  >
                    <UsersIcon className="w-6 h-6 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Users</div>
                  </motion.div>

                  {/* Analytics */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 0.7 }}
                    className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl border border-green-400/30 shadow-lg p-4 text-center"
                  >
                    <BarChart className="w-6 h-6 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Analytics</div>
                  </motion.div>

                  {/* Content Management */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 0.8 }}
                    className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl border border-orange-400/30 shadow-lg p-4 text-center"
                  >
                    <FileText className="w-6 h-6 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Content</div>
                  </motion.div>

                  {/* Settings */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 0.9 }}
                    className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl border border-purple-400/30 shadow-lg p-4 text-center"
                  >
                    <Settings className="w-6 h-6 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Settings</div>
                  </motion.div>
                </div>

                {/* Supporting Tools */}
                <div className="grid grid-cols-2 gap-4 mb-6">
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 1.0 }}
                    className="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg border border-indigo-400/30 shadow-lg p-3 text-center"
                  >
                    <Shield className="w-5 h-5 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Security</div>
                  </motion.div>

                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.6, delay: 1.1 }}
                    className="bg-gradient-to-br from-pink-500 to-pink-600 rounded-lg border border-pink-400/30 shadow-lg p-3 text-center"
                  >
                    <Database className="w-5 h-5 text-white mx-auto mb-1" />
                    <div className="text-white text-xs">Data</div>
                  </motion.div>
                </div>

                {/* Connection Lines */}
                <svg
                  className="absolute inset-0 w-full h-full pointer-events-none"
                  style={{ top: "-20px", width: "100%", height: "400px" }}
                >
                  <g className="opacity-30">
                    {/* Lines from Dashboard to modules */}
                    <line
                      x1="200"
                      y1="120"
                      x2="120"
                      y2="200"
                      stroke="#E5195E"
                      strokeWidth="2"
                      strokeDasharray="4,4"
                    >
                      <animate
                        attributeName="stroke-dashoffset"
                        values="0;-8"
                        dur="2s"
                        repeatCount="indefinite"
                      />
                    </line>
                    <line
                      x1="200"
                      y1="120"
                      x2="160"
                      y2="200"
                      stroke="#E5195E"
                      strokeWidth="2"
                      strokeDasharray="4,4"
                    >
                      <animate
                        attributeName="stroke-dashoffset"
                        values="0;-8"
                        dur="2.5s"
                        repeatCount="indefinite"
                      />
                    </line>
                    <line
                      x1="200"
                      y1="120"
                      x2="240"
                      y2="200"
                      stroke="#E5195E"
                      strokeWidth="2"
                      strokeDasharray="4,4"
                    >
                      <animate
                        attributeName="stroke-dashoffset"
                        values="0;-8"
                        dur="3s"
                        repeatCount="indefinite"
                      />
                    </line>
                    <line
                      x1="200"
                      y1="120"
                      x2="280"
                      y2="200"
                      stroke="#E5195E"
                      strokeWidth="2"
                      strokeDasharray="4,4"
                    >
                      <animate
                        attributeName="stroke-dashoffset"
                        values="0;-8"
                        dur="3.5s"
                        repeatCount="indefinite"
                      />
                    </line>
                  </g>
                </svg>
              </motion.div>

              {/* Feature Badges */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 1.2 }}
                className="flex justify-center gap-4 flex-wrap"
              >
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <BarChart className="w-3 h-3 mr-1" />
                  Data-Rich
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <Zap className="w-3 h-3 mr-1" />
                  Intuitive
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Shield className="w-3 h-3 mr-1" />
                  Secure
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of Custom Admin Panels
const AdminBenefits = () => {
  const benefits = [
    {
      icon: Workflow,
      title: "Streamlined Operations",
      description: "Centralized control for all business functions.",
    },
    {
      icon: BarChart,
      title: "Actionable Insights",
      description: "Real-time data visualization for informed decisions.",
    },
    {
      icon: Shield,
      title: "Enhanced Security",
      description: "Granular access controls and data protection.",
    },
    {
      icon: TrendingUp,
      title: "Scalability & Flexibility",
      description: "Adapts as your business processes evolve.",
    },
    {
      icon: Users,
      title: "User-Centric Design",
      description: "Intuitive interfaces for efficient team management.",
    },
  ];

  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">
            Why Choose a Bespoke Admin Panel from WDI?
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">

            {/* End-to-end solutions for every stage of your product lifecycle. */}

            WDI delivers fully customized AI mobile app admin panels offering superior scalability, real-time insights, and role-based security for seamless eCommerce management.

          </p>
        </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 max-w-6xl mx-auto"
        >
          {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.01 }}
                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 2 cards centered */}
        <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-4xl 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>
  );
};

// Admin Panel Development Process
const AdminProcess = () => {
  const steps = [
    {
      title: "Requirement Gathering & Workflow Analysis",
      description:
        "Deep dive into your business processes, user roles, and operational requirements to design the perfect admin solution.",
      icon: ClipboardList,
    },
    {
      title: "UX/UI Design & Prototyping",
      description:
        "Creating intuitive, user-friendly interfaces with wireframes and interactive prototypes for efficient workflow management.",
      icon: Paintbrush2,
    },
    {
      title: "Development & Backend Integration",
      description:
        "Building robust admin panels with secure backend systems, database integration, and real-time data processing capabilities.",
      icon: Code,
    },
    {
      title: "Testing & Security Audit",
      description:
        "Comprehensive testing including functionality, performance, security vulnerabilities, and user acceptance testing.",
      icon: ShieldCheck,
    },
    {
      title: "Deployment & Training",
      description:
        "Seamless deployment with comprehensive team training, documentation, and ongoing support for successful adoption.",
      icon: GraduationCap,
    },
  ];

  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">
            Our Approach to Building Your Operational Command Center
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">

            {/* End-to-end solutions for every stage of your product lifecycle. */}
            WDI follows a discovery-design-develop-deploy methodology enhanced by AI mobile app insights to create intuitive, scalable admin panels that optimize your eCommerce operations.

          </p>
        </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-card/20 backdrop-blur-md rounded-2xl border border-white/10 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-foreground mb-4">
                        {step.title}
                      </h3>
                      <p className="text-muted-foreground leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

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

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

// Admin Panel Services
const AdminServices = () => {
  const services = [
    {
      title: "User & Content Management Systems",
      description: "For websites, apps, and platforms.",
      icon: UsersIcon,
      features: [
        "User Roles & Permissions",
        "Content Publishing",
        "Media Management",
        "Workflow Approval",
      ],
    },
    {
      title: "Order & Inventory Management Dashboards",
      description: "Centralized control for eCommerce/logistics.",
      icon: PackageCheck,
      features: [
        "Real-time Inventory",
        "Order Processing",
        "Shipping Management",
        "Stock Alerts",
      ],
    },
    {
      title: "Analytics & Reporting Dashboards",
      description: "Visualizing key performance indicators.",
      icon: BarChart,
      features: [
        "Custom Reports",
        "Data Visualization",
        "KPI Tracking",
        "Export Functions",
      ],
    },
    {
      title: "Customer Relationship Management (CRM) Tools",
      description: "Custom interfaces for sales and support.",
      icon: Handshake,
      features: [
        "Contact Management",
        "Sales Pipeline",
        "Support Tickets",
        "Communication History",
      ],
    },
    {
      title: "Financial & Billing Dashboards",
      description: "Managing transactions, invoices, and subscriptions.",
      icon: Receipt,
      features: [
        "Invoice Generation",
        "Payment Tracking",
        "Revenue Analytics",
        "Subscription Management",
      ],
    },
    {
      title: "Internal Tools Development",
      description: "Bespoke applications for internal team productivity.",
      icon: Wrench,
      features: [
        "Custom Workflows",
        "Team Collaboration",
        "Task Management",
        "Resource Planning",
      ],
    },
  ];

  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 Specialized Admin & Dashboard Solutions
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">

            {/* End-to-end solutions for every stage of your product lifecycle. */}

            WDI delivers tailored AI mobile app-powered admin panels with real-time analytics, role-based access, and seamless integrations for optimized eCommerce control.

          </p>
        </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"
        >
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                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">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {service.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {service.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">
                        Key Features:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {service.features.map((feature) => (
                          <Badge
                            key={feature}
                            variant="secondary"
                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Admin Panel Tech Stack
const AdminTechStack = () => {
  const frontends = [
    {
      name: "React",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
      category: "Frontend",
      color: "blue",
    },
    {
      name: "Angular",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
      category: "Frontend",
      color: "red",
    },
    {
      name: "Vue.js",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
      category: "Frontend",
      color: "green",
    },
  ];

  const backends = [
    {
      name: "Node.js",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
      category: "Backend",
    },
    {
      name: "Python/Django",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
      category: "Backend",
    },
    {
      name: "Ruby on Rails",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
      category: "Backend",
    },
    {
      name: "PHP/Laravel",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
      category: "Backend",
    },
  ];

  const databases = [
    {
      name: "PostgreSQL",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
      category: "Database",
    },
    {
      name: "MySQL",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
      category: "Database",
    },
    {
      name: "MongoDB",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
      category: "Database",
    },
  ];

  const visualizationTools = [
    {
      name: "Chart.js",
      icon: BarChart2,
      description: "Interactive charts and graphs",
    },
    {
      name: "D3.js",
      icon: LineChart,
      description: "Advanced data visualization",
    },
  ];

  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">
            Building Powerful and Efficient Admin Interfaces
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            With reliable technologies that ensure performance, security, and
            scalability.
          </p>
        </motion.div>

        {/* Frontend Technologies */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
            Frontend Technologies
          </h3>
          <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
            {frontends.map((tech, index) => {
              // const IconComponent = tech.icon;
              const colorClasses = {
                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
                green: "bg-green-500/20 text-green-400 border-green-500/30",
                red: "bg-red-500/20 text-red-400 border-red-500/30",
              };

              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.01 }}
                  viewport={{ once: true }}
                  whileHover={{ y: -5, scale: 1.05 }}
                  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 p-4 text-center">
                    <div
                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
                        "bg-accent/20"
                        }`}
                    >
                      <ImageWithFallback
                        src={tech.logo}
                        alt={tech.name}
                        className="w-8 h-8 object-contain"
                      />
                    </div>

                    <h4 className="font-semibold text-white text-sm mb-1">
                      {tech.name}
                    </h4>
                    <p className="text-xs text-gray-400">{tech.category}</p>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </motion.div>

        {/* Backend & Database */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Backend */}
            <div>
              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
                Backend Technologies
              </h3>
              <div className="grid grid-cols-2 gap-4">
                {backends.map((tech, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.01 }}
                    viewport={{ once: true }}
                    whileHover={{ y: -5, scale: 1.05 }}
                    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 p-4 text-center">
                      <div className="w-10 h-10 mx-auto mb-3 flex items-center justify-center">
                        <ImageWithFallback
                          src={tech.logo}
                          alt={tech.name}
                          className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                        />
                      </div>
                      <h4 className="font-semibold text-foreground text-sm">
                        {tech.name}
                      </h4>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Database */}
            <div>
              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
                Database Technologies
              </h3>
              <div className="grid grid-cols-3 gap-4">
                {databases.map((tech, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: index * 0.01 }}
                    viewport={{ once: true }}
                    whileHover={{ y: -5, scale: 1.05 }}
                    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 p-4 text-center">
                      <div className="w-10 h-10 mx-auto mb-3 flex items-center justify-center">
                        <ImageWithFallback
                          src={tech.logo}
                          alt={tech.name}
                          className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                        />
                      </div>
                      <h4 className="font-semibold text-foreground text-sm">
                        {tech.name}
                      </h4>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </motion.div>

        {/* Visualization Tools */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
        >
          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
            Data Visualization Tools
          </h3>
          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {visualizationTools.map((tool, index) => {
              const IconComponent = tool.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.01 }}
                  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 p-6 text-center h-full">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h4 className="font-semibold text-foreground mb-2">
                      {tool.name}
                    </h4>
                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {tool.description}
                    </p>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Admin Panel Case Studies
const AdminCaseStudies = () => {
  const caseStudies = [
    {
      title: "Healthcare Practice Management Dashboard",
      client: "MedCare Solutions",
      description:
        "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
      image: healthcareImage,
      results: "75% reduction in admin time",
      gradient: "from-blue-500/20 to-cyan-500/20",
      features:
        "Patient Management, Appointment Scheduling, Billing Integration",
    },
    {
      title: "E-learning Platform Admin Console",
      client: "EduTech Pro",
      description:
        "Advanced admin dashboard for course management, student analytics, instructor tools, and automated grading systems with real-time progress tracking",
      image:
        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
      results: "90% faster course deployment",
      gradient: "from-green-500/20 to-emerald-500/20",
      features: "Course Management, Student Analytics, Automated Grading",
    },
    {
      title: "Multi-Store Inventory Management System",
      client: "RetailChain Inc",
      description:
        "Centralized admin panel for managing inventory across 50+ retail locations with real-time stock monitoring, automated reordering, and sales analytics",
      image:
        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
      results: "60% improvement in stock accuracy",
      gradient: "from-purple-500/20 to-pink-500/20",
      features:
        "Multi-location Inventory, Automated Reordering, Sales Analytics",
    },
  ];

  return (
    <section className="py-32 bg-black" id="case-studies">
      <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">
            Streamlined Operations with WDI-Built Admin Panels
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">

            {/* End-to-end solutions for every stage of your product lifecycle. */}

            WDI's custom admin panels with AI mobile app integration deliver real-time insights, automated workflows, and intuitive controls for peak eCommerce efficiency.

          </p>
        </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.01 }}
              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">
                        <Monitor 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-gray-700`}
                    >
                      <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="space-y-2">
                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
                        Key Features:
                      </h4>
                      <p className="text-xs text-gray-400">{study.features}</p>
                    </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"
                    >
                      <span className="text-sm font-medium">
                        VIEW CASE STUDY
                      </span>
                      <ArrowRight className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

// Mid-Page CTA
const AdminInlineCTA = () => {
  const navigate = useNavigate();
  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-purple-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Workflow className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Operational Excellence
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Ready to Streamline Your{" "}
              <span className="text-accent">Business Operations?</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Let's design an admin panel that empowers your team and optimizes
              workflows.
            </p>

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

// Hire UI/UX Designers
const HireDevelopers = () => {
  const navigate = useNavigate();
  const developerTypes = [
    {
      title: "Frontend Developers (React, Angular, Vue)",
      description: "Specialized in building responsive, interactive admin interfaces with modern frameworks and seamless user experiences.",
      icon: Code,
      skills: ["React", "Angular", "Vue.js", "TypeScript", "Tailwind CSS", "Component Libraries", "State Management", "Responsive Design"]
    },
    {
      title: "Backend Developers (Node.js, Python, Databases)",
      description: "Expert in creating robust server-side architecture, APIs, and database design for scalable admin panel systems.",
      icon: Server,
      skills: ["Node.js", "Python", "Express.js", "RESTful APIs", "PostgreSQL", "MongoDB", "Redis", "Authentication"]
    },
    {
      title: "API & Integration Developers",
      description: "Focused on seamless third-party integrations, microservices architecture, and efficient data synchronization.",
      icon: Link,
      skills: ["REST APIs", "GraphQL", "Microservices", "Webhook Integration", "OAuth", "JWT", "API Security", "Data Migration"]
    },
    {
      title: "Full-Stack Developers",
      description: "End-to-end development expertise covering both frontend interfaces and backend systems for complete admin solutions.",
      icon: Layers,
      skills: ["Full-Stack Development", "System Architecture", "DevOps", "Testing", "Performance Optimization", "Security", "Documentation", "Deployment"]
    }
  ];
  return (
    <section className="py-20 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">
            Need Expert Developers for Your Admin Panel?
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Our AI mobile app developers specialize in creating powerful, scalable admin interfaces with robust backend systems and seamless integrations.
          </p>
        </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-2 gap-8 mb-12"
        >
          {developerTypes.map((type, index) => {
            const IconComponent = type.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">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {type.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {type.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
                      <div className="flex flex-wrap gap-2">
                        {type.skills.map((skill) => (
                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center space-y-6"
        >
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <ShimmerButton className="text-lg px-8 py-4"
              onClick={() => navigate("/hire-talent/admin-panel-developers")}
            >
              <div className="inline-flex items-center gap-2">
                <Code className="w-5 h-5 flex-shrink-0" />
                <span>Hire Admin Panel Dashboard Developers</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">
                <FileText className="w-5 h-5 flex-shrink-0" />
                <span>Request a Custom Dashboard Development Consultation</span>
              </div>
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Admin Panel FAQs
const AdminFAQs = () => {
  const faqs = [
    {
      question: "Can you integrate our admin panel with existing systems?",
      answer:
        "Absolutely! We specialize in creating admin panels that seamlessly integrate with your existing databases, APIs, CRM systems, and third-party tools. Our integration approach includes careful data mapping, secure API connections, and real-time synchronization to ensure your admin panel works harmoniously with your current technology stack while maintaining data integrity and security.",
    },
    {
      question: "How do you ensure data security for internal tools?",
      answer:
        "Security is paramount in our admin panel development. We implement multi-layered security including role-based access controls, encrypted data transmission, secure authentication (including multi-factor authentication), regular security audits, and compliance with industry standards like GDPR, HIPAA, or SOC 2. All sensitive data is encrypted both in transit and at rest, with comprehensive audit trails for all user actions.",
    },
    {
      question: "What is the importance of UX in admin panel design?",
      answer:
        "Great UX in admin panels is crucial for productivity and user adoption. Poor UX leads to errors, inefficiency, and user frustration. We focus on intuitive navigation, clear information hierarchy, efficient workflows, and user-friendly interfaces that reduce training time and increase accuracy. Good admin panel UX can improve operational efficiency by 40-70% and significantly reduce user errors and support requests.",
    },
    {
      question:
        "Do you provide training for our staff on using the new dashboard?",
      answer:
        "Yes, we provide comprehensive training and support packages. This includes hands-on training sessions for different user roles, detailed documentation, video tutorials, and ongoing support during the initial rollout period. We also offer train-the-trainer programs so your internal team can support new users, and we're available for additional training as your team grows or when new features are added.",
    },
  ];

  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 AdminFinalCTA = () => {
  const navigate = useNavigate();
  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-purple-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Monitor className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Operational Excellence
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Empower Your Team with{" "}
            <span className="text-accent">WDI's Custom Admin Panels</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"
          >
            Transform your internal operations with efficient, data-driven dashboards enhanced by AI mobile app technology and advanced management systems.
          </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={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <TrendingUp className="w-6 h-6 flex-shrink-0" />
                <span>Optimize Your Business Today</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Custom Admin Panels • Data Dashboards • User Management Systems
            </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-purple-500/3 rounded-full blur-3xl"></div>
      </div>
    </section>
  );
};

// Main Admin Panels & Dashboards Page
export const AdminPanelsDashboards = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

      {/* Case Studies */}
      <section className="bg-background">
        <AdminCaseStudies />
      </section>

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

      {/* Services */}
      <section className="bg-background">
        <AdminServices />
      </section>

      {/* Tech Stack */}
      <section className="bg-card">
        <AdminTechStack />
      </section>

      {/* Mid-Page CTA */}
      {/* <section className="bg-card">
        <AdminInlineCTA />
      </section> */}

      {/* Hire Designers */}
      <section className="bg-background">
        <HireDevelopers />
      </section>

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

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

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