import React from "react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { motion } from "framer-motion";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import {
  ArrowRight,
  Smartphone,
  Apple,
  Code,
  Zap,
  Shield,
  Target,
  Users,
  CheckCircle,
  Star,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
import { MobileAppVector } from "@/components/vectors";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../components/ui/accordion";

export const HireMobileAppDevelopersIndia = () => {
  const navigate = useNavigate();
  const expertise = [
    {
      icon: Apple,
      title: "iOS Developers",
      description: (
        <>
          To develop iOS apps, you can{" "}
          <a
            href="/hire-talent/mobile-app-developers"
            className="text-[#E5195E] underline"
          >
            hire mobile app developers
          </a>{" "}
          in India from us, as they are proficient in Swift and Objective-C for
          crafting robust and stylish mobile applications for iPhone and iPad.
        </>
      ),
      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
    },
    {
      icon: Code,
      title: "Android Developers",
      description: (
        <>
          Our expert{" "}
          <a
            href="/services/android-app-development"
            className="text-[#E5195E] underline"
          >
            Android app developers
          </a>{" "}
          in India are skilled in Kotlin and Java to develop applications with
          extensive features and enhanced scalability for the broader Android
          ecosystem.
        </>
      ),
      skills: [
        "Kotlin",
        "Java",
        "Android Studio",
        "Room Database",
        "Jetpack Compose",
      ],
    },
    {
      icon: Smartphone,
      title: "Cross-Platform Developers",
      description: (
        <>
          We have expert developers in frameworks like React Native and Flutter
          for efficient{" "}
          <a
            href="/services/cross-platform-app-development"
            className="text-[#E5195E] underline"
          >
            development across multiple platforms
          </a>{" "}
          using a single codebase.
        </>
      ),
      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
    },
    {
      icon: Code,
      title: "Hybrid App Developers",
      description:
        "Our developers are experienced with technologies like Ionic and Xamarin for web-based mobile applications.",
      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
    },
  ];

  const deliverables = [
    {
      icon: Target,
      title: "Intuitive UI/UX",
      description:
        "Our experts ensure a seamless and engaging user experience. ",
    },
    {
      icon: Zap,
      title: "Enhanced Performance",
      description:
        "The mobile applications delivered are speed optimized, responsive, and stable.",
    },
    {
      icon: Shield,
      title: "Strong Reliability",
      description:
        "Our experts implement the best practices for protecting the users’ data and prioritizing user privacy.",
    },
    {
      icon: Code,
      title: "API Integration",
      description:
        "Developers provide smooth integration of third-party APIs within the backend of the application.",
    },
    {
      icon: Users,
      title: "Application Scalability",
      description:
        "Developing applications that can grow according to your user base and feature set.",
    },
    {
      icon: CheckCircle,
      title: "Post-Launch Support",
      description:
        "We offer exclusive support in future app updates, maintenance, and performance monitoring of the application after its launch. ",
    },
  ];

  const heroBanner = [
    {
      category: "Hire Expert Developers",
      title: "Hire Mobile App Developers in India",
      description:
        "Reach out to our premium mobile app developers in India, specialized in iOS, Android, React native, and Flutter. Develop high-impact and appealing mobile applications that Indian users love.",
      primaryCTA: {
        text: "Hire Mobile Developers",
        href: "/start-a-project",
        icon: Smartphone,
      },
      secondaryCTA: {
        text: "View Developer Profiles",
        href: "/hire-talent",
        icon: Users,
      },
    },
  ];

  const projectTypes = [
    "E-Commerce and Retail Apps",
    "On-demand Services and Delivery Apps",
    "Social Networking Platforms",
    "Enterprise and Business Productivity Tools",
    "Health and Fitness Trackers",
    "Educational Apps and Ed-tech Platforms",
  ];

  const testimonials = [
    {
      quote:
        "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
      author: "Sarah Johnson",
      role: "CTO, TechStart Inc.",
      rating: 5,
    },
    {
      quote:
        "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
      author: "Michael Chen",
      role: "Product Manager, InnovateNow",
      rating: 5,
    },
  ];

  const HireMobileFAQs = () => {
    const faqs = [
      {
        question:
          "While App Development, Which Development Methodologies Do You Typically Follow?",
        answer:
          "Primarily, our core work involves agile methodologies, including Scrum and Kanban. However, our goal is to adapt according to the client's preferences. If they want us to opt for Waterfall or a hybrid approach, our expert developers can efficiently do it. Our Agile process includes planning project sprints, daily standups, reviewing each project sprints and retrospectives. We utilize modern development practices such as Continuous Integration / Continuous Deployment (CI/CD), test-driven development (TDD), and code reviews to guarantee high-performance deliverables.",
      },
      {
        question: " How Much Does It Cost to Build a Custom Mobile Application in India?",
        answer:
          "The cost of developing a mobile application entirely depends on various factors. For example, the features you want in the app, the platforms it needs for support, and the complexity of the app infrastructure depends how much it will cost to develop the application. Connect with us for a consultation and quotation. ",
      },
      {
        question: " In the Indian App Development Market, Which Should I Target First?",
        answer:
          "Android holds most of the market share in India. However, businesses must launch apps on both iOS and Android simultaneously to gain maximum reach to the target audience.",
      },
      {
        question: "How Do You Handle Application Security?",
        answer:
          "We follow data encryption, secure APIs, and ensure that the apps developed by our expert app developers in India follow all data protection laws of India. We also recommend penetration testing. If the app is designed to collect personal data from Indian users, we ensure that the Digital Personal Data Protection Act, 2023, and its rules are adhered to. Moreover, we also deliver apps that follow standard compliance guidelines regarding privacy policy, data rights, and data security. ",
      },
      {
        question: "What Is the Estimated Timeline to Develop My Application in India?",
        answer:
          "The development time of a mobile application depends on the complexity, features, and app infrastructure. For simpler apps, our expert developer team in India can make the app ready for launch within 8 to 12 weeks. However, complex, feature-rich enterprise applications can take as long as 16 to 24 weeks. Contact our India team or schedule a consultation to get an estimated project timeline as per your requirements. ",
      },
      {
        question: "Why Should I Choose WDI?",
        answer:
          "We put innovation at the heart of our approach, which sets us apart from other developing companies. Since 2018, we have been bringing cutting-edge technologies to the mainstream thanks to our seasoned professionals with deep knowledge of the industry. Over 24 years, we have delivered more than 2000 projects to more than 1000 global clients, by putting our commitments and client-focused approach to deliver tailored solutions to them. Thus, we have been a reliable partner across different sectors and industries in India.",
      },
      {
        question: "How Can You Support the App’s Scalability?",
        answer:
          "We focus on building scalable digital solutions using cloud-native infrastructure. Furthermore, we use containerization and microservices to support both horizontal and vertical scaling. We also offer full lifecycle support for the app’s development and help you launch in 6 weeks. ",
      },
    ];

    return (
      <section className="py-32 bg-black">
        <div className="container mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="text-center mb-20"
          >
            <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
              Frequently Asked Questions
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto"
          >
            <Accordion type="single" collapsible className="space-y-8">
              {faqs.map((faq, index) => (
                <AccordionItem
                  key={index}
                  value={`item-${index}`}
                  className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
                >
                  <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                    <span className="font-semibold text-white">
                      {faq.question}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </motion.div>
        </div>
      </section>
    );
  };

  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Hire Mobile App Developers in India | WDIPL</title>
        <meta
          name="description"
          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Hire Mobile App Developers | Expert Talent at WDI"
        />
        <meta
          property="og:description"
          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. 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="Hire Mobile App Developers | Expert Talent at WDI"
        />
        <meta
          name="twitter:description"
          content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. 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>
      {/* Hero Section with MobileAppVector */}
      <HireTalentHeroBanner
        vectorComponent={MobileAppVector}
        category={heroBanner[0].category}
        title={heroBanner[0].title}
        description={heroBanner[0].description}
        primaryCTA={heroBanner[0].primaryCTA}
        secondaryCTA={heroBanner[0].secondaryCTA}
      />

      {/* Introduction */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <p className="text-lg text-muted-foreground leading-relaxed">
              Our expert app developers in India can proficiently develop and
              deliver intuitive, stable, and scalable mobile applications that
              connect to Indian users and influence business growth in India in
              varied sectors. We provide a wide range of mobile application
              solutions, from native iOS and Android apps to cross-platform
              applications. Combining our proven expertise and your trust, we
              are here to make your mobile visions a reality.
            </p>
          </div>
        </div>
      </section>

      {/* Mobile Development Expertise */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Our Proven Expertise in Mobile App Development{" "}
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              We provide 360-degree mobile app development expertise across all
              main platforms and frameworks, with proven outcomes.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {expertise.map((area, index) => (
              <Card
                key={index}
                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
              >
                <CardContent className="p-8">
                  <area.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />

                  <h3 className="text-xl font-bold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
                    {area.title}
                  </h3>

                  <p className="text-muted-foreground mb-6 leading-relaxed">
                    {area.description}
                  </p>

                  <div className="flex flex-wrap gap-2">
                    {area.skills.map((skill, skillIndex) => (
                      <Badge
                        key={skillIndex}
                        variant="outline"
                        className="border-white/20 text-white text-xs"
                      >
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* What Our Developers Deliver */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              What Our Specialist Mobile App Developers in India Deliver
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Delivering all-around mobile solutions in India that go beyond
              users’ expectations.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {deliverables.map((item, index) => (
              <Card
                key={index}
                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
              >
                <CardContent className="p-6 text-center">
                  <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                  <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                    {item.title}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    {item.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Ideal Projects */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Our Diverse Range of App Development in India
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Thanks to our expert app developers in India, who are efficient in
              many domains, we have excelled in developing mobile applications
              across different industry verticals.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {projectTypes.map((project, index) => (
              <div
                key={index}
                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
              >
                <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                <span className="text-white">{project}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      {/* <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              What Our Clients Say
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Success stories from satisfied clients
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-background/50 border-white/10">
                <CardContent className="p-8">
                  <div className="flex gap-1 mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  
                  <p className="text-muted-foreground mb-6 leading-relaxed italic">
                    "{testimonial.quote}"
                  </p>
                  
                  <div className="border-t border-white/10 pt-6">
                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
                    <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section> */}

      {/* CTA Section */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
              Ready to Get Your Own Mobile App in India?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Connect with our specialized mobile app developers in India and
              transform your dream of accessibility into a powerful mobile
              experience.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                onClick={() => navigate("/start-a-project")}
              >
                Get Started Today
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10"
              >
                Schedule a Consultation
              </Button>
            </div>
          </div>
        </div>
      </section>

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

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