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.png";
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 App Development Company UK | Mobile App Development Services
        </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-uk"
        />
        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Mobile App Development Company UK | Mobile App Development Services
"
        />
        <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 App Development Company UK | Mobile App Development Services
"
        />
        <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">From Vision to  </span>
                <span className="text-[#E5195E]">App Store </span>
                <span className="text-white">in Just 6 weeks</span>
              </h1>

              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
                Design secure, scalable, high-performance apps for IOS, Android,
                or cross-platform - for the UK audience - fast and easy.
              </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">
            High-Performing Apps for High-Value-Added UK Industries
          </h2>
          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
            As one of the skilled mobile app development companies in the UK, we
            are focused on delivering mobile apps to industries where user
            trust, speed, and uptime play a big role.
          </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 Leading Founders and CTOs Trust WDI
          </h2>

          {/* Subtext */}
          <p className="text-2xl leading-relaxed text-gray-300">
            We are more than just a company that offers mobile app development
            services in the UK. We come with qualities, making us capable of
            being your trusted 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:
        "Seamless performance of native iOS applications optimised for the App Store, designed with Swift.",
      link: "/services/ios-app-development",
    },
    {
      title: "Android App Development",
      icon: Smartphone,
      description:
        "Efficient Android apps optimised with Google Play, built with the help of Kotlin.",
      link: "/services/android-app-development",
    },
    {
      title: "Cross-Platform Development",
      icon: Layers,
      description:
        "Delivering efficient cross-platform app development solutions with the help of React Native and Flutter.",
      link: "/services/cross-platform-app-development",
    },
    {
      title: "Wearable App Development",
      icon: Watch,
      description:
        "Improving responsive apps for smart watches and wearable devices for optimising health and fitness tracking.",
      link: "/services/wearable-device-development",
    },
    {
      title: "Progressive Web Apps",
      icon: Globe,
      description:
        "Building native mobile apps like highly innovative web applications that work seamlessly across all devices.",
      link: "/services/pwa-development",
    },
    {
      title: "Enterprise Mobile Solutions",
      icon: Building,
      description:
        "Secure, scalable mobile solutions for supporting critical 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 in the UK
          </h2>
          <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
            Comprehensive mobile application development services in the UK for
            reshaping your ideas into seamless, high-performing, user-friendly
            apps that can be accessed 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 Make Your</span>
              <span className="text-[#E5195E]"> Your App Better</span>
              <span className="text-foreground"> with Latest Intelligence</span>
            </h2>

            {/* Subtitle */}
            <p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
              Schedule a discovery call with our team of experts and find out
              how AI can give your app 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">
              Start App Development with Our{" "}
            </span>
            <span className="text-[#E5195E]">
              Mobile App Development Experts
            </span>
          </h2>
          <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
            Want to build an app that works seamlessly across all platforms?
            Begin your journey with the help of the experts in our mobile app
            development services in the UK. We use our seasoned knowledge,
            highly innovative technology, and tested expertise to convert ideas
            into reality.
          </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: "What is the cost of mobile app development services in the UK?",
    answer:
      "There is no fixed charge for our services. The cost depends on the app’s features, the platforms it needs to support, and design complexity. You must reach out to our team to get transparent estimates along with competitive pricing as per your outlined requirements.",
  },
  {
    question: "Does your team design app compliant with the UK’s privacy laws?",
    answer:
      "As a seasoned mobile application development company in the UK, our apps are compliant with key UK laws and regulations like the UK GDPR, the Data Protection Act 2018, and PECR, enforced by the Information Commissioner's Office (ICO). \n\nBesides that, our app design also follows standard compliance for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security.",
  },
  {
    question: "How long is your mobile app development and deployment process?",
    answer:
      "The total time required for mobile app development and deployment depends on the complexity of the project. If you are looking to develop a simple app, then our team will take somewhere around 8 to 12 weeks to deliver the project. \n\nSimilarly, complex enterprise apps tend to take as long as 16 to 24 weeks. Get in touch with our UK team to discuss your requirements and help us provide you with a properly analysed timeline.",
  },
  {
    question:
      "Will your team deliver third-party services and API integration for the app?",
    answer:
      "As one of the skilled mobile application development companies in the UK, our services are focused on all kinds of assistance, including integration of third-party services like payment gateways, analytics, maps, push notifications, social media plug-ins, and custom APIs. This is how we work on enhancing the app’s functionality.",
  },
  {
    question:
      "Do you help with regular app maintenance and updates for launched apps?",
    answer:
      "We have a team of experts who offer comprehensive maintenance services. Our mobile app development services in the UK include routine bug fixes, OS updates, feature enhancements, security updates and patches, and performance optimisation. This is how we guarantee the launched apps are up-to-date and user-friendly.",
  },
  {
    question: "Can you help me with ideas to protect my app idea?",
    answer:
      "Certainly. Our experts educate individuals regarding the ways of protecting their app idea, including using NDAs with developers and documents.",
  },
  {
    question: "Do you offer mobile apps that can operate offline?",
    answer:
      "Yes. We develop apps that offer offline functionality with the help of local storage, caching strategies, and data synchronisation. This is done to ensure our designed apps cater to a larger audience, including individuals who look for applications that do not use an internet connection.",
  },
  {
    question: "Can you guide me in choosing app monetisation methods?",
    answer:
      "Certainly. The team of experts at our mobile application development services in the UK helps clients choose among common monetisation methods like in-app ads, in-app purchases, freemium models, and subscription-based models.",
  },
];

// Main Mobile App Development Page Component
export const MobileAppDevelopmentUk = () => {
  // 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>
  );
};