import { motion } from "framer-motion";
import {
  Apple,
  Award,
  Bolt,
  BookOpen,
  Brain,
  Building,
  Calendar,
  DollarSign,
  Eye,
  Globe,
  Layers,
  Play,
  Rocket,
  Settings,
  Shield,
  ShieldCheck,
  ShoppingCart,
  Smartphone,
  Stethoscope,
  Truck,
  UserPlus,
  Watch,
  Zap,
} from "lucide-react";
import React from "react";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { ProcessSection } from "../components/ProcessSection";
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 heroMockupImage from "../src/images/mobile-app-banner.jpg";
import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";

// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENT
const HeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>
          Mobile Application Development Services | Mobile App Development
          Company - WDIPL
        </title>
        <meta
          name="description"
          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
        />

        {/* Canonical Link */}
        <link
          rel="canonical"
          href="https://www.wdipl.com/services/mobile-app-development"
        />
        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Mobile Application Development Services | Mobile App Development Company - WDIPL"
        />
        <meta
          property="og:description"
          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
        />
        <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="Mobile Application Development Services | Mobile App Development Company - WDIPL"
        />
        <meta
          name="twitter:description"
          content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
        />
        <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 px-6 mx-auto lg:px-8 max-w-7xl">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="z-10 space-y-8"
          >
            {/* Mobile App Development Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
                <Smartphone className="w-4 h-4 text-[#E5195E]" />
                <span className="text-sm font-medium text-white/90">
                  Mobile App Development
                </span>
              </div>
            </motion.div>

            {/* Main Heading */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="space-y-6"
            >
              <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
                <span className="text-white">Mobile App </span>
                <span className="text-[#E5195E]">Development Services</span>
                <span className="text-white"> for iOS & Android.</span>
              </h1>

              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
                Build secure, scalable, AI-powered high-performance apps for
                iOS, Android, or cross-platform fast.
              </p>
            </motion.div>

            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}

            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="flex flex-col gap-4 pt-4 sm:flex-row"
            >
              <ShimmerButton
                className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Calendar className="flex-shrink-0 w-5 h-5" />
                  <span>Book a Discovery Call</span>
                </div>
              </ShimmerButton>
              <Button
                variant="secondary"
                className="px-8 text-lg font-medium text-white transition-all duration-300 rounded-lg shadow-lg h-14 bg-white/10 hover:bg-white/20 border-white/20 hover:border-white/30 hover:shadow-xl"
                onClick={() => navigate("/case-studies")}
              >
                <Eye className="flex-shrink-0 w-5 h-5" />
                <span>View our work</span>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex items-center justify-center order-first lg:order-last"
          >
            {/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
            <div
              className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
              style={{
                position: "relative",
                overflow: "hidden",
              }}
            >
              {/* Hero Image with comprehensive CSS styling */}
              <img
                src={heroMockupImage}
                alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
                className="block transition-all duration-300 scale-120 hover:scale-125"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "contain",
                  objectPosition: "center",
                  maxWidth: "100%",
                  display: "block",
                }}
              />

              {/* Alternative background method for enhanced browser support */}
              <div
                className="absolute inset-0 opacity-0 pointer-events-none"
                style={{
                  backgroundImage: `url(${heroMockupImage})`,
                  backgroundSize: "contain",
                  backgroundPosition: "center",
                  backgroundRepeat: "no-repeat",
                }}
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Enhanced Horizontal Tag Scroller with Marquee Animation
const HorizontalTagScroller = () => {
  const industries = [
    { name: "FinTech", icon: DollarSign, color: "text-green-400" },
    { name: "HealthTech", icon: Stethoscope, color: "text-red-400" },
    { name: "EdTech", icon: BookOpen, color: "text-blue-400" },
    { name: "eCommerce", icon: ShoppingCart, color: "text-orange-400" },
    { name: "OTT & Streaming", icon: Play, color: "text-purple-400" },
    { name: "Logistics", icon: Truck, color: "text-yellow-400" },
    { name: "On-Demand Services", icon: Bolt, color: "text-cyan-400" },
  ];

  return (
    <section className="relative py-32 overflow-hidden bg-background">
      {/* Add subtle decorative elements */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
        <div className="absolute w-32 h-32 rounded-full top-20 left-10 bg-accent/5 blur-2xl"></div>
        <div className="absolute w-40 h-40 rounded-full bottom-20 right-10 bg-blue-500/5 blur-2xl"></div>
      </div>
      <div className="container relative z-10 px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
            Apps Built for High-Impact Industries
          </h2>
          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
            Our AI mobile apps power industries where user trust, speed, and
            uptime are critical.
          </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="relative overflow-hidden"
        >
          {/* Gradient overlays for smooth fade effect */}
          <div className="absolute top-0 bottom-0 left-0 z-10 w-20 pointer-events-none bg-gradient-to-r from-card to-transparent"></div>
          <div className="absolute top-0 bottom-0 right-0 z-10 w-20 pointer-events-none bg-gradient-to-l from-card to-transparent"></div>

          {/* Marquee container */}
          <div className="flex animate-marquee hover:animate-marquee-paused">
            {/* First set of industries */}
            {industries.map((industry, index) => {
              const IconComponent = industry.icon;
              return (
                <motion.div
                  key={`first-${industry.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: index * 0.01 }}
                  viewport={{ once: true }}
                  className="flex-shrink-0 mx-3 group"
                >
                  <div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div
                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
                      >
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {industry.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}

            {/* Second set for seamless loop */}
            {industries.map((industry, index) => {
              const IconComponent = industry.icon;
              return (
                <motion.div
                  key={`second-${industry.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{
                    duration: 0.5,
                    delay: (index + industries.length) * 0.1,
                  }}
                  viewport={{ once: true }}
                  className="flex-shrink-0 mx-3 group"
                >
                  <div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div
                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
                      >
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {industry.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}

            {/* Third set for extra smoothness */}
            {industries.map((industry, index) => {
              const IconComponent = industry.icon;
              return (
                <motion.div
                  key={`third-${industry.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{
                    duration: 0.5,
                    delay: (index + industries.length * 2) * 0.1,
                  }}
                  viewport={{ once: true }}
                  className="flex-shrink-0 mx-3 group"
                >
                  <div className="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div
                        className={`w-8 h-8 flex items-center justify-center ${industry.color}`}
                      >
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {industry.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Updated Title-Only Layout - No Body Text
const SideBySideContentWithIcons = () => {
  const trustFactors = [
    {
      id: "engineering",
      title: "24+ Years in App Engineering",
      icon: Award,
    },
    {
      id: "ownership",
      title: "100% Ownership, No Lock-ins",
      icon: Shield,
    },
    {
      id: "agile",
      title: "Agile Sprints with Rapid Iteration",
      icon: Zap,
    },
    {
      id: "security",
      title: "Enterprise Security & Compliance-Ready",
      icon: ShieldCheck,
    },
    {
      id: "devices",
      title: "Deep Experience Across Devices",
      icon: Settings,
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          {/* Main Heading */}
          <h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
            Why Founders and CTOs Trust WDI
          </h2>

          {/* Subtext */}
          <p className="text-2xl leading-relaxed text-gray-300">
            Not just a dev agency. An AI mobile app product partner.
          </p>
        </motion.div>

        {/* Uniform Grid - Title Only Cards */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid grid-cols-1 gap-6 mx-auto md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 max-w-7xl"
        >
          {trustFactors.map((factor, index) => {
            const IconComponent = factor.icon;

            return (
              <motion.div
                key={factor.id}
                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="cursor-pointer group"
              >
                <Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
                    {/* Icon - Clean without background */}
                    <div className="mb-6">
                      <IconComponent className="w-10 h-10 mx-auto text-accent" />
                    </div>

                    {/* Title */}
                    <h3 className="text-lg font-semibold leading-tight text-white">
                      {factor.title}
                    </h3>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Enhanced Mobile Expertise Grid
const TabbedServiceDisplay = () => {
  const navigate = useNavigate();
  const services = [
    {
      title: "iOS App Development",
      icon: Smartphone,
      description:
        "Native iOS applications built with Swift and optimized for App Store success.",
      link: "/services/ios-app-development",
    },
    {
      title: "Android App Development",
      icon: Smartphone,
      description:
        "High-performance Android apps using Kotlin with Google Play optimization.",
      link: "/services/android-app-development",
    },
    {
      title: "Cross-Platform Development",
      icon: Layers,
      description:
        "Efficient cross-platform solutions using React Native and Flutter.",
      link: "/services/cross-platform-app-development",
    },
    {
      title: "Wearable App Development",
      icon: Watch,
      description:
        "Smart watch and wearable device applications for health and fitness.",
      link: "/services/wearable-device-development",
    },
    {
      title: "Progressive Web Apps",
      icon: Globe,
      description:
        "Web applications that work like native mobile apps across all devices.",
      link: "/services/pwa-development",
    },
    {
      title: "Enterprise Mobile Solutions",
      icon: Building,
      description:
        "Secure, scalable mobile solutions for enterprise business needs.",
      link: "/services/enterprise-software-solutions",
    },
  ];

  return (
    <section className="py-32 bg-background">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
            Mobile App Development Services
          </h2>
          <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
            Comprehensive AI mobile development services that transform your
            ideas into powerful, user-friendly applications across all
            platforms.
          </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 gap-8 md:grid-cols-2 lg:grid-cols-3"
        >
          {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="cursor-pointer group"
                onClick={() => navigate(service.link)}
              >
                <div className="h-full p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-sm rounded-2xl hover:border-accent/30 hover:shadow-xl">
                  <div className="flex flex-col items-start space-y-6">
                    <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>

                    <div>
                      <h3 className="mb-4 text-xl font-semibold text-white">
                        {service.title}
                      </h3>
                      <p className="leading-relaxed text-gray-400">
                        {service.description}
                      </p>
                    </div>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Updated CTA Banner with ShimmerButton
const InlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto text-center"
        >
          <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"
          >
            {/* Ready to Launch Badge */}
            <div className="inline-block">
              <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                <div className="flex items-center gap-2">
                  <Rocket className="w-4 h-4 text-[#E5195E]" />
                  <span className="text-[#E5195E] text-sm font-medium">
                    AI-Driven Innovation
                  </span>
                </div>
              </div>
            </div>

            {/* Main Heading */}
            <h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
              <span className="text-foreground">Let's Architect </span>
              <span className="text-[#E5195E]">Intelligence</span>
              <span className="text-foreground"> Into Your App</span>
            </h2>

            {/* Subtitle */}
            <p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
              Schedule a discovery call to explore how AI can give you a
              strategic edge.
            </p>

            {/* CTA Button */}
            <div className="flex flex-col items-center gap-4">
              <ShimmerButton
                className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-3">
                  <Brain className="flex-shrink-0 w-6 h-6" />
                  <span>Book an AI Discovery Call</span>
                </div>
              </ShimmerButton>

              {/* Small benefit text */}
              <p className="text-sm text-muted-foreground">
                App strategy • AI integration • Technology consultation
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Updated Hire Developers Section with ShimmerButton
const HireDevelopersSection = () => {
  const navigate = useNavigate();
  const developers = [
    {
      title: "iOS Developers",
      icon: Apple,
      skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
      iconBg: "bg-gray-800",
      iconColor: "text-white",
      link: "/hire-talent/mobile-app-developers",
    },
    {
      title: "Android Developers",
      icon: Smartphone,
      skills: ["Kotlin", "Java", "Jetpack Compose"],
      iconBg: "bg-green-500",
      iconColor: "text-white",
      link: "/hire-talent/mobile-app-developers",
    },
    {
      title: "Cross-Platform Developers",
      icon: Layers,
      skills: ["React Native", "Flutter", "Xamarin"],
      iconBg: "bg-blue-500",
      iconColor: "text-white",
      link: "/hire-talent/mobile-app-developers",
    },
    {
      title: "Mobile QA Engineers",
      icon: ShieldCheck,
      skills: ["Mobile Testing", "Automation", "Performance"],
      iconBg: "bg-purple-500",
      iconColor: "text-white",
      link: "/hire-talent/qa-engineers",
    },
  ];

  return (
    <section className="py-32 bg-background">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
            <span className="text-foreground">Hire Our </span>
            <span className="text-[#E5195E]">
              AI Mobile Application Developers
            </span>
          </h2>
          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
            Get access to top-tier AI app development company experts who can
            bring your vision to life with AI-powered features and proven
            expertise.
          </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 gap-8 md:grid-cols-2 xl:grid-cols-4"
        >
          {developers.map((developer, index) => {
            const IconComponent = developer.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: -8, scale: 1.02 }}
                className="cursor-pointer group"
              >
                <Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="flex flex-col h-full p-0">
                    {/* Header with icon and title */}
                    <div className="p-8 pb-6">
                      <div className="flex items-start gap-4 mb-6">
                        <div
                          className={`w-12 h-12 ${developer.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
                        >
                          <IconComponent
                            className={`w-6 h-6 ${developer.iconColor}`}
                          />
                        </div>
                        <div className="flex-1">
                          <div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
                            Mobile Development
                          </div>
                        </div>
                      </div>

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

                    {/* Skills section */}
                    <div className="flex-1 px-8 pb-6">
                      <div className="flex flex-wrap gap-2">
                        {developer.skills.map((skill) => (
                          <Badge
                            key={skill}
                            variant="secondary"
                            className="text-xs bg-white/10 text-foreground"
                          >
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    {/* CTA Buttons - Updated with ShimmerButton */}
                    <div className="p-8 pt-0 mt-auto space-y-3">
                      <ShimmerButton
                        className="w-full py-3 text-sm shadow-lg rounded-xl hover:shadow-xl"
                        onClick={() => navigate(developer.link)}
                      >
                        <div className="inline-flex items-center justify-center gap-2">
                          <UserPlus className="flex-shrink-0 w-4 h-4" />
                          <span className="font-medium">Hire Now</span>
                        </div>
                      </ShimmerButton>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// FAQ data for Mobile App Development
const mobileAppFAQs = [
  {
    question: "Do you develop both iOS and Android apps?",
    answer:
      "Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment.",
  },
  {
    question: "What is the typical timeline for mobile app development?",
    answer:
      "Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis.",
  },
  {
    question: "How much does mobile app development cost?",
    answer:
      "Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements.",
  },
  {
    question: "Do you help with App Store submissions?",
    answer:
      "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance.",
  },
  {
    question: "Can you integrate third-party services and APIs?",
    answer:
      "Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features.",
  },
  {
    question: "Do you provide app maintenance and updates?",
    answer:
      "Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current.",
  },
  {
    question: "What about app security and data protection?",
    answer:
      "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps.",
  },
  {
    question: "Can you develop offline-capable mobile apps?",
    answer:
      "Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity.",
  },
];

// Main Mobile App Development Page Component
export const MobileAppDevelopment = () => {
  // Set document title for SEO
  React.useEffect(() => {
    document.title =
      "Mobile App Development Services | WDI - iOS & Android App Development";

    // Update meta description for SEO
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute(
        "content",
        "Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.",
      );
    }
  }, []);

  return (
    <div className="min-h-screen dark bg-background">
      {/* <Navigation /> */}

      {/* Hero Section */}
      <HeroWithCTA />

      {/* Industries Scroller */}
      <HorizontalTagScroller />

      {/* Why Choose WDI */}
      <SideBySideContentWithIcons />

      {/* Service Categories */}
      <TabbedServiceDisplay />

      {/* Process Steps */}
      <ProcessSection />

      {/* Hire Developers */}
      <HireDevelopersSection />

      {/* Final CTA */}
      <InlineCTA />

      {/* FAQ Section */}
      <FAQSection faqs={mobileAppFAQs} />

      {/* <Footer /> */}
    </div>
  );
};