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 India | Expert Android App Developers
        </title>
        <meta
          name="description"
          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Android App Development India | Expert Android App Developers"
        />
        <meta
          property="og:description"
          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
        />
        <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 India | Expert Android App Developers"
        />
        <meta
          name="twitter:description"
          content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
        />
        <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">Get the Efficient </span>
                <span className="text-green-400">Android App</span>
                <span className="text-white"> Development in India</span>
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Our expert Android app development team in India can help you in
                building a scalable, secure, and user-friendly Android
                application.
              </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: "Colossal Reach",
      description:
        "Android covers 94.77% of the Indian market. Thus, by developing android application in India, businesses can get access to billions of users across diverse sectors and demographics.",
    },
    {
      icon: Settings,
      title: "Flexibility & Customization",
      description:
        "Android is an open-source platform based on the Linux kernel. This is why our expert Android app developers in India can offer widespread customization options in the apps. This allows to incorporate diverse features and innovative user experiences in the applications.",
    },
    {
      icon: Monitor,
      title: "Versatility of Device",
      description:
        "Android apps can be optimized for a broader range of devices of different screen sizes and form factors. Ranging from budget to premium devices, Android apps can be developed and integrated seamlessly.",
    },
    {
      icon: Network,
      title: "High Integration Potential",
      description:
        "Android apps ensure a seamless connection with Google services, APIs, and diverse hardware capabilities for enriched functionality of the application.",
    },
    {
      icon: DollarSign,
      title: "Cost-effective Development",
      description:
        "Since it is a pliable development framework, there are lower entry barriers to developing an Android application. Plus, the deployment strategies are also effective. Thus, Android app development in India has become a feasible option for Indian businesses.",
    },
  ];
  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 Develop a Native Android App in India?
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Android app development in India creates an unmatched reach and
            flexibility for Indian businesses looking to captalize 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 Strategy",
      description:
        "First, we talk about the core idea and requirements of your app, analyzing the sector and the core functionality that the app is going to offer. Next, we determine the target audience and device optimization and compatibility strategy with you. If you want higher accessibility in Indian markets, we can develop mobile applications for even lower-end devices, focusing on compatibility.",
      icon: Lightbulb,
    },
    {
      title: "UI/UX Design",
      description:
        "In the next phase, our experienced UI/UX designers focus on creating compelling designs following the Material Design principles for optimal Android user experience and platform consistency.",
      icon: Palette,
    },
    {
      title: "Native Android Development",
      description:
        "We develop your app using Kotlin / Java and follow advanced Android frameworks to deliver a mobile application that offers maximum performance and platform consistency.",
      icon: Code,
    },
    {
      title: "Thorough QA & Testing",
      description:
        "Our specialized testers conduct comprehensive testing across diverse Android devices, OS versions, and screen sizes. This ensures that the mobile app is fully functioning across different devices and delivering flawless results.",
      icon: Bug,
    },
    {
      title: "Launching in the Google Play Store and Developing Maintenance",
      description:
        "Finally, we assist in launching the mobile app in the Google Play Store by submitting it and offering comprehensive optimization options. Furthermore, we also provide post-launch maintenance support and feature 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 360-Degree Android App Development Approach
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            From ideation to launching the app on Google Play, we are here to
            guide you through every step of the process of Android app
            development in India.
          </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: "Custom Android App Development in India",
      description:
        "At WDI, we deliver tailored apps for our customers, understanding their specific needs. We compare and use the native Android performance and capabilities of the ideas.",
      icon: Smartphone,
    },
    {
      title: "Android Tablet App Development",
      description:
        "We are able to develop immersive applications for even larger screens with optimized app layouts and tablet-specific features.",
      icon: Tablet,
    },
    {
      title: "Android UI/UX Design",
      description:
        "By following the Material Design principles, we can craft compelling interfaces for your Indian Android mobile applications.",
      icon: Brush,
    },
    {
      title: "Android Wear & TV Apps",
      description:
        "We can also increase your Android app’s presence by releasing other variations that are compatible with other Android devices, including Smartwatches and Android-powered TVs.",
      icon: Watch,
    },
    {
      title: "Modernization of Android Apps",
      description:
        "We further help you by enhancing the performance of the existing apps of your business. We ensure that through our advanced Android app development in India, we can deliver consistent performance, security, and compatibility with the latest Android versions.",
      icon: RefreshCcw,
    },
    {
      title: "Optimization for Google Play Store",
      description:
        "We assist in increasing visibility of your application and download rates by incorporating strategic ASO practices and optimization 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">
            How We Specialize in Android App Development in India
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Thanks to our professional Android app developers in India, you can
            deliver high-quality app development services across different
            device categories. From smartphones to smart TVs, we deliver 100%
            optimized mobile 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">
            Advanced Android Technologies That Our Experts Use
          </h2>
          <p className="text-xl text-gray-300 leading-relaxed">
            To develop superior 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">
            Explore how we have assisted businesses to success with powerful
            Android applications thanks to our expert Android app developers.
          </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 Android App Developers in Your Existing Team
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Get our pool of skilled Android app developers who are proficient in
            Kotlin and Java and hire expert developers in 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:
        "What Is the Difference between Kotlin and Java for Android Application Development?",
      answer:
        "Kotlin is more concise and safer. It is also interoperable with Java. For new Android Application development projects, Google now recommends Kotlin as it provides enhanced support for modern tools such as Jetpack Compose.",
    },
    {
      question:
        "Will You Sign a Non-Disclosure Agreement (NDA) Before We Have Our Consultation?",
      answer:
        "Yes, certainly. As a professional firm with customer privacy as one of its core objectives, WDI is more than comfortable to sign an NDA. We prioritize client confidentiality. Therefore, we have standard mutual NDAs ready, which can be signed even before the initial discussions. We are committed to maintaining the confidentiality protocols throughout our company.",
    },
    {
      question: "Do You Provide End-to-end Service?",
      answer:
        "Absolutely! We are going to do everything to make your Android dream come true. From ideation to handling UI/UX, backend, QA testing, and launching, you do not have to worry about anything. We will ensure that you get a comprehensive App development service from initiation to launch.",
    },
    {
      question: "Will My App Support Offline Functionality?",
      answer:
        "Yes. We use Room Database, which helps in fetching key data and creates local caches that can be synced automatically when the user reconnects to the internet. Therefore, your users will be able to use the app offline too.",
    },
    {
      question:
        "Do You Offer Post-Launch Maintenance and Support for the Applications?",
      answer:
        "Yes, certainly! We offer appropriate app maintenance, critical bug fixes, OS updates, and security patches. We consider that post-launch maintenance and support are crucial to maintain application performance, stability, and security. Our dedicated Android app developers in India focus on proactive monitoring to identify and resolve issues early.",
    },
    {
      question:
        "How Will You Ensure the Scalability of the Backend to Support Thousands of Users Together?",
      answer:
        "We use cloud infrastructure such as AWS, Google Cloud, or Azure and a microservices architecture. This guarantees that the app can handle high traffic without dropping performance. Cloud platforms allow you to scale up or down instantly to meet the fluctuating demand of users. Thus, you can experience enhanced collaboration and real-time project management.",
    },
    {
      question: "Do You Perform Manual or Automated Testing?",
      answer:
        "We prefer to do both - automatic testing to check the stability of the code and manual testing for managing the user interface and usability challenges.",
    },
    {
      question: "Who Will Own the IP Rights and Source Code of the App?",
      answer:
        "The intellectual property rights (IP Rights), Source Codes and all deliverables belong to you (the client) upon final payment.",
    },
  ];
  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 Transform Your Android Dream?
                </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"
          >
            Define your Vision 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"
          >
            Collaborate with us to create robust, user-centric Android
            applications that stand out in the competitive Indian 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 AndroidAppDevelopmentIndia = () => {
  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>

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

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

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