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 HireMobileAppDevelopersUsa = () => {
  const navigate = useNavigate();
  const expertise = [
    {
      icon: Apple,
      title: "iOS Developers",
      description: (
        <>
          Seasoned expertise in Swift and Objective-C, capable of designing robust iPhone and iPad applications.
        </>
      ),
      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
    },
    {
      icon: Code,
      title: "Android Developers",
      description: (
        <>
          Experts in using Kotlin and Java for building and designing scalable apps for the vast Android ecosystem.
        </>
      ),
      skills: [
        "Kotlin",
        "Java",
        "Android Studio",
        "Room Database",
        "Jetpack Compose",
      ],
    },
    {
      icon: Smartphone,
      title: "Cross-Platform Developers",
      description: (
        <>
          React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase.
        </>
      ),
      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
    },
    {
      icon: Code,
      title: "Hybrid App Developers",
      description: (
        <>
          Seasoned developers with skills in advanced technologies like Ionic and Xamarin to build better{" "}
          <a
            href="/services/mobile-app-development"
            className="text-[#E5195E] underline"
          >
            web-based mobile applications.
          </a>{" "}

        </>
      ),
      skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"],
    },
  ];

  const deliverables = [
    {
      icon: Target,
      title: "Intuitive UI/UX",
      description:
        "Crafting a seamless and engaging user experience.",
    },
    {
      icon: Zap,
      title: "Uninterrupted Performance",
      description:
        "Highly efficient apps that optimize speed, responsiveness, and stability.",
    },
    {
      icon: Shield,
      title: "Foolproof Security",
      description:
        "Guaranteeing data protection and user privacy with the implementation of best practices",
    },
    {
      icon: Code,
      title: "API Integration",
      description:
        "Creating a seamless connection between third-party APIs and backend services.",
    },
    {
      icon: Users,
      title: "Scalability",
      description:
        "Building seamless apps that grow with your user base and feature set.",
    },
    {
      icon: CheckCircle,
      title: "Post-Launch Assistance",
      description:
        "Regular support with post-launch updates, maintenance, and monitoring for optimal app performance. ",
    },
  ];

  const heroBanner = [
    {
      category: "Hire Expert Developers",
      title: "Turning Vision into Scalable Products with Mobile App Developers",
      description:
        "Design seamless applications with the help of mobile app developers, specializing in iOS, Android, React Native, and Flutter. Hire mobile app developers in the USA and build high-performing and engaging mobile applications that 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:
          "What is the process of hiring mobile app developers in the USA from you?",
        answer:
          "The process of hiring our app developers is fairly simple. Just reach out to us, discuss your vision, and we will take over the rest of the process.",
      },
      {
        question: "Are your app developers skilled in complying with regulatory standards?",
        answer:
          "Certainly. Our app developers are aware of the importance of complying with regulatory standards. The apps that we design and develop are compliant with key US laws and regulations like the Children’s Online Protection and Privacy Act, 1998 (COPPA), Statewise Data Protection Acts (CCPA, VCDPA, CPA, UCPA, CDPA, etc.), and Federal laws and FTC rules. It also follows standard compliances for Privacy Policy, User Consent, Data Rights, Third-party SDKs, and Data Security. ",
      },
      {
        question: "What is the best way to guarantee security and quality in outsourced app development?",
        answer:
          "WDI guarantees security and quality in outsourced app development through a strict QA procedure. We use secure coding techniques and maintain constant transparency with frequent updates, testing, and version control. ",
      },
      {
        question: "What are the charges of hiring mobile app developers in the USA?",
        answer:
          "We do not have any fixed charges for our mobile app developers. The cost of our services depends on the app that you are developing with the help of our experts and its specifics. ",
      },
      {
        question: "Will hiring mobile app developers from you be ideal to develop a mobile app for a dual-screen system?",
        answer:
          "Certainly, our experts utilize different solutions to design a range of mobile apps, including those for dual-screen smartphones. So, hiring mobile app developers in the USA from us will be ideal because we are skilled in building all types of mobile apps. ",
      },
      {
        question: "Is it profitable to outsource mobile app developers? ",
        answer:
          "Definitely, outsourcing app developers is great for cost reduction. This allows you to design high-performing apps with expert assistance at rates that do not cause a dent in your budget.",
      },
      {
        question: "How long will your app developers take to develop an app?",
        answer:
          "The time range for developing an app with the help of our experts varies depending on the type of app. Simpler apps take around 8 to 12 weeks, but complex enterprise apps take 16 to 24 weeks. ",
      },
      {
        question: "Can the app developers help me with monetizing my app?",
        answer:
          "Certainly, our app developers are focused on offering overall assistance. We help you choose from common monetization processes like in-app ads, in-app purchases, freemium models, and subscription-based models. ",
      },
    ];

    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 App Developers in USA | Professional Mobile App Developers</title>
        <meta
          name="description"
          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/hire-talent/mobile-app-developers-usa" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Hire App Developers in USA | Professional Mobile App Developers"
        />
        <meta
          property="og:description"
          content="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
        />
        <meta property="og:url" content="https://www.wdipl.com/hire-talent/mobile-app-developers-usa" />
        <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="WDIPL helps businesses hire mobile app developers in the USA for scalable Android, iOS and cross-platform mobile app development solutions."
        />
        <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">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Trained App Developers in the USA for Seamless App Development
            </h2>
            <p className="text-lg text-muted-foreground leading-relaxed">
              We offer our clients the assistance of skilled app developers, capable of building intuitive, scalable, and secure mobile applications. We design apps that seamlessly engage users and help with growth in their industry. From native iOS and Android apps to cross-platform solutions, hiring mobile app developers in the USA from us is ideal to turn ideation into a scalable 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 Mobile App Development Proficiency{" "}
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              {/* With years of experience, the app developers of our company are skilled in all major platforms and frameworks. */}
              With years of experience, the{" "}
              <a
                href="/services/mobile-app-development"
                className="text-[#E5195E] underline"
              >
                app developers
              </a>{" "}
              of our company are skilled in all major platforms and frameworks.
            </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">
              Why Our Mobile App Developers in the USA Stand Out            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              One of the major factors behind hiring mobile app developers in the USA is their expertise in comprehensive mobile solutions. It is the skills they are equipped with that set them apart from others.
            </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">
              Ideal for Projects Like
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Hiring mobile app developers in the USA from us lets you access the assistance of experts who excel across various 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">
              Looking to Build a High-Performing Mobile App?            </h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Hire mobile app developers in the USA from us to turn your vision into the shape of a powerful mobile experience with us.
            </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>
      <motion.h2
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
      >
        <span className="text-white">We serve customers </span>
        <span className="text-[#E5195E]">globally</span>
      </motion.h2>
      {/* FAQs */}
      <section className="bg-card">
        <HireMobileFAQs />
      </section>


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