import { motion } from "framer-motion";
import {
  ArrowRight,
  Brush,
  Bug,
  Calendar,
  CheckCircle,
  Code,
  Coffee,
  DollarSign,
  Eye,
  Lightbulb,
  Monitor,
  Network,
  Palette,
  Play,
  RefreshCcw,
  Rocket,
  Settings,
  Smartphone,
  Tablet,
  TrendingUp,
  UserPlus,
  Users2,
  Watch,
  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 androidVectorImage from "../src/images/android-vector.png";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import ranoutofImage from "../src/images/ranoutof.webp";
import tradersCircuitImage from "../src/images/traders-circuit.webp";
import prospertyImage from "../src/images/prosperty.webp";
import awsLogoImage from "../src/images/aws-logo.png";

// Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Android App Development in UK | WDIPL</title>
        <meta
          name="description"
          content="Android app development UK services for scalable, secure apps. Hire expert Android developers for custom solutions. Get a free consultation today."
        />

        {/* Canonical Link */}
        <link
          rel="canonical"
          href="https://www.wdipl.com/services/android-app-development-uk"
        />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Android App Development in UK | WDIPL"
        />
        <meta
          property="og:description"
          content="Android app development UK services for scalable, secure apps. Hire expert Android developers for custom solutions. Get a free consultation today."
        />
        <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="Android App Development in UK | WDIPL"
        />
        <meta
          name="twitter:description"
          content="Android app development UK services for scalable, secure apps. Hire expert Android developers for custom solutions. Get a free consultation today."
        />
        <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"
          >
            {/* Android 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-green-500/20 to-green-400/20 border border-green-500/30 rounded-full">
                <Smartphone className="w-4 h-4 text-green-400" />
                <span className="text-white/90 text-sm font-medium">
                  Android App Development
                </span>
              </div>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
                <span className="text-white">
                  Take Advantage of Our Professional{" "}
                </span>
                <span className="text-green-400">Android App</span>
                <span className="text-white"> Development in the UK</span>
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Our user-focused Android applications are built for scalability
                and security, following modern Android app development
                principles.
              </p>
            </div>

            {/* Key Benefits */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="grid grid-cols-2 gap-4 text-sm"
            >
              <div className="flex items-center gap-2 text-gray-300">
                <CheckCircle className="w-4 h-4 text-green-400" />
                <span>3+ Billion Users</span>
              </div>
              <div className="flex items-center gap-2 text-gray-300">
                <CheckCircle className="w-4 h-4 text-green-400" />
                <span>Native Performance</span>
              </div>
              <div className="flex items-center gap-2 text-gray-300">
                <CheckCircle className="w-4 h-4 text-green-400" />
                <span>Google Play Ready</span>
              </div>
              <div className="flex items-center gap-2 text-gray-300">
                <CheckCircle className="w-4 h-4 text-green-400" />
                <span>Kotlin & Java</span>
              </div>
            </motion.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">
                  <svg
                    className="w-6 h-4 flex-shrink-0"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
                    />
                  </svg>
                  <span>Book a Free Consultation</span>
                </div>
              </ShimmerButton>
              <a
                href="#portfolio"
                className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-4 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"
              >
                <Eye className="w-4 h-4 flex-shrink-0" />
                <span>Explore Our Android Portfolio</span>
              </a>
            </motion.div>
          </motion.div>

          {/* Right side with Android vector and device mockups */}
          <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"
          >
            {/* Android Vector and Device Mockups Container */}
            <div className="relative w-full h-[400px] md:h-[500px] lg:h-[600px]">
              {/* Animated Background Elements */}
              <div className="absolute inset-0 overflow-hidden rounded-xl">
                <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-green-500/20 to-green-400/20 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
                <div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-purple-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
              </div>

              {/* Main Android Vector */}
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 1, delay: 0.4 }}
                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"
              >
                <div className="relative">
                  {/* Android Vector Image */}
                  <div className="w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 relative">
                    <ImageWithFallback
                      src={androidVectorImage}
                      alt="Android Development"
                      className="w-full h-full object-contain drop-shadow-2xl"
                    />

                    {/* Glowing effect around Android vector */}
                    <div className="absolute inset-0 bg-gradient-to-r from-green-500/30 to-green-400/30 rounded-full blur-xl animate-pulse opacity-50"></div>
                  </div>

                  {/* Floating development icons around Android */}
                  <motion.div
                    animate={{ rotate: 360 }}
                    transition={{
                      duration: 20,
                      repeat: Infinity,
                      ease: "linear",
                    }}
                    className="absolute inset-0"
                  >
                    {/* Kotlin Badge */}
                    <div className="absolute -top-4 left-1/4 w-12 h-12 bg-gradient-to-r from-purple-500 to-violet-400 rounded-xl flex items-center justify-center shadow-lg">
                      <Code className="w-6 h-6 text-white" />
                    </div>

                    {/* Java Badge */}
                    <div className="absolute top-1/4 -right-6 w-10 h-10 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center shadow-lg">
                      <Coffee className="w-5 h-5 text-white" />
                    </div>

                    {/* Play Store Badge */}
                    <div className="absolute -bottom-4 right-1/4 w-11 h-11 bg-gradient-to-r from-green-500 to-emerald-400 rounded-xl flex items-center justify-center shadow-lg">
                      <Play className="w-5 h-5 text-white" />
                    </div>

                    {/* Firebase Badge */}
                    <div className="absolute bottom-1/4 -left-6 w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center shadow-lg">
                      <Zap className="w-5 h-5 text-white" />
                    </div>
                  </motion.div>
                </div>
              </motion.div>

              {/* Device Mockups */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.6 }}
                className="absolute bottom-0 left-0 right-0"
              >
                <div className="flex justify-center gap-4">
                  {/* Android Phone Mockup */}
                  <div className="w-20 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl">
                    <div className="w-full h-4 bg-gray-700 rounded-t-2xl flex items-center justify-center">
                      <div className="w-6 h-0.5 bg-gray-600 rounded-full"></div>
                    </div>
                    <div className="p-2 space-y-1">
                      <div className="h-1.5 bg-green-500 rounded"></div>
                      <div className="h-1 bg-gray-600 rounded w-3/4"></div>
                      <div className="h-1 bg-gray-600 rounded w-1/2"></div>
                      <div className="grid grid-cols-2 gap-1 mt-2">
                        <div className="h-3 bg-gray-700 rounded"></div>
                        <div className="h-3 bg-gray-700 rounded"></div>
                      </div>
                      <div className="h-4 bg-green-500/20 rounded mt-2 flex items-center justify-center">
                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                      </div>
                    </div>
                  </div>

                  {/* Android Tablet Mockup */}
                  <div className="w-24 h-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border border-gray-700 shadow-xl">
                    <div className="w-full h-3 bg-gray-700 rounded-t-xl flex items-center justify-center">
                      <div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
                    </div>
                    <div className="p-2 space-y-1">
                      <div className="h-1 bg-green-500 rounded"></div>
                      <div className="h-0.5 bg-gray-600 rounded w-4/5"></div>
                      <div className="grid grid-cols-3 gap-1 mt-1">
                        <div className="h-2 bg-gray-700 rounded"></div>
                        <div className="h-2 bg-gray-700 rounded"></div>
                        <div className="h-2 bg-green-500/30 rounded"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>

            {/* Android Technology Badges */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.8 }}
              className="flex justify-center gap-4 flex-wrap mt-8"
            >
              <Badge
                variant="secondary"
                className="bg-green-500/20 text-green-300 border-green-500/30"
              >
                Android
              </Badge>
              <Badge
                variant="secondary"
                className="bg-purple-500/20 text-purple-300 border-purple-500/30"
              >
                Kotlin
              </Badge>
              <Badge
                variant="secondary"
                className="bg-orange-500/20 text-orange-300 border-orange-500/30"
              >
                Java
              </Badge>
              <Badge
                variant="secondary"
                className="bg-blue-500/20 text-blue-300 border-blue-500/30"
              >
                Android Studio
              </Badge>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of Android Development
const AndroidKeyBenefits = () => {
  const benefits = [
    {
      icon: Users2,
      title: "Incredible Reach",
      description:
        "By developing Android applications, UK businesses can tap into millions of users across diverse markets and demographics, thanks to Android's commanding market share.",
    },
    {
      icon: Settings,
      title: "Increased Flexibility and Customization",
      description:
        "One of the main benefits of Android applications is that they are open-sourced, which allows for a substantial amount of customization. Our expert developers can integrate diverse features that deliver innovative user experiences.",
    },
    {
      icon: Monitor,
      title: "Device Versatility",
      description:
        "Android applications can be compatible with a range of devices, irrespective of screen sizes and form factors. From budget devices to premium ones, we deliver compatible and easily optimisable Android app development for UK businesses.",
    },
    {
      icon: Network,
      title: "Potential of Seamless Integration",
      description:
        "Android app developers in the UK ensure that the apps can be smoothly integrated with Google Services, APIs, and diverse hardware capabilities. This can enhance the application's functionality.",
    },
    {
      icon: DollarSign,
      title: "Cost-effective App Development",
      description:
        "Since Android’s framework is heavily flexible, Android app developers experience low entry barriers. Our experienced developers deploy effective strategies to develop these apps. Therefore, as a business owner, Android app development for UK businesses can be a practical option for you.",
    },
  ];

  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-16"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Why Android App Development in the UK Is Profitable for UK
            Businesses?
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Around 50.15% of the UK market is covered by Android. Android
            application development is beneficial for UK businesses due to its
            broad reach and unparalleled flexibility. This helps UK businesses
            to leverage the world’s largest mobile ecosystem.
          </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>
  );
};

// Android Development Process Timeline
const AndroidProcessTimeline = () => {
  const steps = [
    {
      title: "Ideation and Developing Strategy",
      description:
        "In this phase, we discuss with you the core requirements of the application and understand the functionalities and features you want in your app. Next, we discuss the target audiences and the compatibility strategy of the application.",
      icon: Lightbulb,
    },
    {
      title: "UI/UX Design",
      description:
        "Our expert developers create stunning designs that follow Material Design principles, ensuring a favourable user experience and making the platform more consistent.",
      icon: Palette,
    },
    {
      title: "Native Android Development",
      description:
        "In this phase, we initiate coding and building your app using Kotlin/Java and modern Android frameworks for maximum performance and platform integration.",
      icon: Code,
    },
    {
      title: "Comprehensive QA & Testing",
      description:
        "We conduct 360-degree testing across a diverse range of Android devices, OS versions, and screen sizes before launching it. It ensures high compatibility and flawless functionality.",
      icon: Bug,
    },
    {
      title: "Google Play Launch & Maintenance",
      description:
        "At the end of the app development phase, we guide you in launching the Android mobile app in the Google Play Store by submitting it and conducting comprehensive optimization. On top of that, we also provide post-launch maintenance support and conduct updates of the application",
      icon: Rocket,
    },
  ];

  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 Thorough Android App Development Journey
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            From developing the idea and functionalities to launching on the
            Google Play Store, we are here to guide you through the Android
            development process.
          </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-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                        <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="text-2xl font-semibold text-white mb-4">
                        {step.title}
                      </h3>
                      <p className="text-gray-300 leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

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

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

// Android Specific Services
const AndroidServicesGrid = () => {
  const services = [
    {
      title: "Customized Android App Development in UK Businesses",
      description:
        "We prioritize delivering customized apps for our UK customers, focusing on their entrepreneurial needs. We compare and deliver the Android performances and functionalities of the ideas.",
      icon: Smartphone,
    },
    {
      title: "Android Tablet App Development",
      description:
        "We develop optimized application layouts that can be compatible with Android tablets. This application has tablet-specific features.",
      icon: Tablet,
    },
    {
      title: "Android UI/UX Design",
      description:
        "Our professional developers follow the Material Design principles, which help them craft compelling interfaces for your UK-based Android mobile application.",
      icon: Brush,
    },
    {
      title: "Android Wear & TV Apps",
      description:
        "We are committed to delivering more accessibility for your application. Therefore, we can develop other variations of your application that are compatible with other Android devices, including Smartwatches and Android-powered TVs.",
      icon: Watch,
    },
    {
      title: "Modernization of Android Apps",
      description:
        "To enhance the performance of your existing apps, we check compatibility, security testing, and performance evaluation of your existing applications.",
      icon: RefreshCcw,
    },
    {
      title: "Optimization for Google Play Store",
      description:
        "We help enhance the visibility of your application and increase download rates by incorporating strategic ASO practices and optimizing for the Google Play Store.",
      icon: TrendingUp,
    },
  ];

  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 Expertise in Android App Development in the UK
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            We can expand the presence of your Android application and make it
            available on smartphones and Smart TVs. Our expert app developers in
            the UK are committed to delivering fully scaled and optimized
            applications for all devices.
          </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-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">
                    <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-foreground mb-4">
                      {service.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {service.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Android Tech Stack
const AndroidTechStack = () => {
  const technologies = [
    {
      name: "Kotlin",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
    },
    {
      name: "Java",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-plain.svg",
    },
    {
      name: "Android Studio",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-plain.svg",
    },
    {
      name: "Material Design",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/materialui/materialui-original.svg",
    },
    {
      name: "Firebase",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
    },
    {
      name: "AWS",
      logo: awsLogoImage,
    },
    {
      name: "Google APIs",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-plain.svg",
    },
    {
      name: "Jetpack Compose",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jetpackcompose/jetpackcompose-plain.svg",
    },
  ];

  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">
            Android Technologies That Our Experts Use
          </h2>
          <p className="text-xl text-gray-300 leading-relaxed">
            To develop high-performance Android applications, we use the latest
            Android frameworks and tools.
          </p>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
          {technologies.map((tech, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5, delay: index * 0.01 }}
              viewport={{ once: true }}
              whileHover={{ scale: 1.1, y: -5 }}
              className="flex flex-col items-center group"
            >
              <div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
                <ImageWithFallback
                  src={tech.logo}
                  alt={tech.name}
                  className="w-12 h-12 object-contain"
                />
              </div>
              <span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
                {tech.name}
              </span>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Android Case Studies
const AndroidCaseStudies = () => {
  const navigate = useNavigate();
  const caseStudies = [
    {
      title: "Household Management Revolution",
      client: "RanOutOf",
      description:
        "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
      image: ranoutofImage,
      results: "3M+ downloads",
      gradient: "from-[#007F33]/20 to-[#007F33]/10",
      buttonLink: "/projects/ranoutof",
    },
    {
      title: "Financial Trading Platform",
      client: "Traders Circuit",
      description:
        "Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
      image: tradersCircuitImage,
      results: "800K+ users",
      gradient: "from-blue-500/20 to-cyan-500/20",
      buttonLink: "/projects/traderscircuit",
    },
    {
      title: "Real Estate Investment Platform",
      client: "Prosperty",
      description:
        "Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
      image: prospertyImage,
      results: "1.5M+ downloads",
      gradient: "from-[#a98453]/20 to-[#a98453]/10",
      buttonLink: "/projects/prosperty",
    },
  ];

  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-8">
            Android Apps That Define Industries
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Find out how we have assisted some reputed businesses to perform
            better with powerful Android applications that leverage the
            platform’s capabilities.
          </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-card/20 backdrop-blur-md border-white/10 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">
                        <svg
                          className="w-6 h-6 text-accent"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                        >
                          <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
                        </svg>
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-muted-foreground 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-foreground mb-4 leading-tight min-h-[45px]">
                      {study.title}
                    </h3>
                  </div>

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

                  <div className="px-8 pb-6">
                    <p className="text-muted-foreground text-sm leading-relaxed">
                      {study.description}
                    </p>
                  </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"
                      onClick={() => navigate(study.buttonLink)}
                    >
                      <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 AndroidInlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 bg-black">
      <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-black rounded-full px-6 py-3 flex items-center gap-2">
                <svg
                  className="w-5 h-5 text-white"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2- 2-2-2 .8954-2 2 .8954 2 2 2z" />
                </svg>
                <span className="text-white text-base font-medium">
                  Android Innovation
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
              Ready to Tap into the{" "}
              <span className="text-accent">Android Ecosystem?</span>
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
              We'll help you navigate the vast Android landscape with confidence
              and create apps that stand out.
            </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">
                <svg
                  className="w-6 h-6 flex-shrink-0"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
                  />
                </svg>
                <span>Get a Free Android Consultation</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Hire Android Developers Section
const HireAndroidDevelopers = () => {
  const navigate = useNavigate();
  const developerTypes = [
    {
      title: "Senior Android Developer",
      experience: "5+ Years",
      skills: ["Kotlin", "Java", "Jetpack Compose", "MVVM"],
      specialties: "Native Android, Google Services Integration",
    },
    {
      title: "Android UI/UX Designer",
      experience: "4+ Years",
      skills: ["Material Design", "Sketch", "Figma", "Prototyping"],
      specialties: "Android Design Patterns, Material Design",
    },
    {
      title: "Android QA Specialist",
      experience: "3+ Years",
      skills: [
        "Espresso",
        "UI Automator",
        "Firebase Test Lab",
        "Device Testing",
      ],
      specialties: "Android Testing, Cross-Device Compatibility",
    },
  ];

  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-8">
            Include Top Talents in Your Team
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Get access to our highly skilled professionals who are proficient in
            Kotlin and Java and are ready to integrate with your existing team.
          </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 mb-12"
        >
          {developerTypes.map((dev, 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-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">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                      <svg
                        className="w-6 h-6 text-accent"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                      >
                        <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
                      </svg>
                    </div>
                    <div>
                      <Badge
                        variant="secondary"
                        className="text-xs bg-accent/20 text-accent border-accent/30"
                      >
                        {dev.experience}
                      </Badge>
                    </div>
                  </div>

                  <h3 className="text-xl font-semibold text-foreground mb-4">
                    {dev.title}
                  </h3>

                  <p className="text-muted-foreground text-sm mb-4">
                    {dev.specialties}
                  </p>

                  <div className="flex flex-wrap gap-2">
                    {dev.skills.map((skill) => (
                      <Badge
                        key={skill}
                        variant="secondary"
                        className="text-xs bg-white/10 text-foreground"
                      >
                        {skill}
                      </Badge>
                    ))}
                  </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="flex flex-col sm:flex-row gap-4 justify-center"
        >
          <ShimmerButton
            className="px-8 py-4"
            onClick={() => navigate("/hire-talent/android-app-developers")}
          >
            <div className="inline-flex items-center gap-2">
              <UserPlus className="w-5 h-5 flex-shrink-0" />
              <span>Hire Android Developers</span>
            </div>
          </ShimmerButton>
          <Button
            variant="outline"
            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
          >
            <span>Request Profiles</span>
            <ArrowRight className="ml-2 w-4 h-4" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

// Android-Specific FAQs
const AndroidFAQs = () => {
  const faqs = [
    {
      question:
        "Should I Focus on a Native Android App or a Cross-Platform App?",
      answer:
        "For the UK market, which has around a 50/50 share of Android/iOS, cross-platform apps can save around 30-40% of development costs. However, native Kotlin development is best suited for high-performance apps that require deep hardware access.",
    },
    {
      question: "What Are Your Typical Engagement Models?",
      answer:
        "We primarily offer three engagement models.\nFixed Price: Ideal for well-defined projects with a transparent scope and project requirements.\nTime and Material: Ideal for projects with changing requirements and ongoing developmental needs.\nDedicated Team: Ideal for long-term partnerships that require a committed team working exclusively on your projects.",
    },
    {
      question: "How Do You Ensure That My App Is Compliant with the Uk GDPR?",
      answer:
        "We implement ‘Privacy by Design’, data encryption, user consent management, and a safe backend architecture. Data should ideally be stored on UK-based or GDPR-compliant servers within the EU.",
    },
    {
      question: "Do You Consider Signing a Non-Disclosure Agreement (NDA)?",
      answer:
        "Yes, certainly! As a professional app development company, we put customer privacy at the core of our service. WDI is happy to sign an NDA even before the initial discussion takes place. We are committed to delivering confidentiality protocols throughout our company.",
    },
    {
      question:
        "Do I Need to Create a Data Protection Impact Assessment (DPIA)?",
      answer:
        "If your application handles sensitive data (in sectors such as finance and healthcare), a DPIA is required under the GDPR. We can assist you by documenting the data flows and recommending the necessary security measures.",
    },
    {
      question:
        "What Tech Stack Do You Recommend for a High-Performance Android App?",
      answer:
        "We recommend using Kotlin for native development. We leverage Jetpack components and the MVVM architecture to develop scalability.",
    },
    {
      question: "What Industries Does WDI Serve?",
      answer:
        "WDI serves a diverse range of industries, including Healthcare, FinTech, E-Commerce, Education, etc. Our expertise spans various sectors, enabling us to understand the unique challenges of each and produce tailored solutions.",
    },
  ];
  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>
          <p className="text-xl text-gray-300 leading-relaxed">
            Common questions about our Android app development services.
          </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="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 AndroidFinalCTA = () => {
  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">
                <svg
                  className="w-5 h-5 text-foreground"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
                </svg>
                <span className="text-foreground text-base font-medium">
                  Ready to Build?
                </span>
              </div>
            </div>
          </motion.div>

          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight"
          >
            Build Your Efficient App on{" "}
            <span className="text-accent">Android with WDI</span>
          </motion.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"
          >
            Hire our expert range of developers who can create robust,
            user-centric Android applications in the UK that stand out in the
            competitive market.
          </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">
                <svg
                  className="w-6 h-6 flex-shrink-0"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"
                  />
                </svg>
                <span>Start Your Android Project Now</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Free consultation • Expert guidance • Rapid development
            </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 Android App Development Page
export const AndroidAppDevelopmentUk = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

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

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

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

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

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

      {/* Hire Android Developers */}
      <section className="bg-background">
        <HireAndroidDevelopers />
      </section>

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

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

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