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 HireMobileAppDevelopersUk = () => {
  const navigate = useNavigate();
  const expertise = [
    {
      icon: Apple,
      title: "iOS Developers",
      description: (
        <>
          Seasoned experts proficient in Swift and Objective-C for designing strong and seamless applications for iPhone and iPad.
        </>
      ),
      skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"],
    },
    {
      icon: Code,
      title: "Android Developers",
      description: (
        <>
          Designing scalable apps for the vast Android ecosystem with seasoned skills in Kotlin and Java.
        </>
      ),
      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. */}
          Seasoned experts making
          <a
            href="/services/cross-platform-app-development"
            className="text-[#E5195E] underline"
          >
            efficient development across multiple platforms          </a>
          with a single codebase, with frameworks like React Native and Flutter.

        </>
      ),
      skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"],
    },
    {
      icon: Code,
      title: "Hybrid App Developers",
      description: (
        <>
          Building better web-based mobile applications with advanced technologies like Ionic and Xamarin.

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

  const deliverables = [
    {
      icon: Target,
      title: "Intuitive UI/UX",
      description:
        "Guaranteeing a seamless and engaging user experience.",
    },
    {
      icon: Zap,
      title: "High Performance",
      description:
        "Checking apps and clearing bugs to optimise speed, responsiveness, and stability.",
    },
    {
      icon: Shield,
      title: "Robust Security",
      description:
        "Ensuring data protection and user privacy by implementing best practices.",
    },
    {
      icon: Code,
      title: "API Integration",
      description:
        "Supporting seamless connection between backend services and third-party APIs.",
    },
    {
      icon: Users,
      title: "Scalability",
      description:
        "Designing high-performing apps that grow with your user base and feature set.",
    },
    {
      icon: CheckCircle,
      title: "Post-Launch Assistance",
      description:
        (
          <>
            {/* React Native and Flutter experts, designing efficient development across multiple platforms with a single codebase. */}
            Ensuring optimal app performance through{" "}
            <a
              href="/solutions/mvp-startup-launch-packages"
              className="text-[#E5195E] underline"
            > post-launch updates, maintenance, and regular monitoring.
            </a>


          </>
        ),
    },
  ];

  const heroBanner = [
    {
      category: "Hire Expert Developers",
      title: "Transform Business Ideas into Functional End Products with Mobile App Developers",
      description:
        "Build high-performing applications with the help of mobile app developers in the UK, specialising in iOS, Android, React Native, and Flutter. Get going with efficient and engaging mobile applications that users love and find easy to use!",
      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 & E-learning 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:
          "How do I hire your app developers in the UK?",
        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: "What is the cost of hiring mobile app developers?",
        answer:
          "The charges for hiring our mobile app developers aren’t fixed. This varies depending on the type of app that you are developing and other specifics.  ",
      },
      {
        question: "Are your app developers skilled in complying with regulatory standards?",
        answer:
          "Certainly. Our app developers in the UK are skilled in complying with regulatory standards. This is why our designed apps are compliant with key UK laws and regulations like the UK GDPR, the Data Protection Act 2018, and PECR, enforced by the Information Commissioner’s Office (ICO). ",
      },
      {
        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: "Can you develop a mobile app for a dual-screen system?",
        answer:
          "Yes. Our app developers in the UK are experienced in building all types of mobile apps. They utilise a range of solutions to design a range of mobile apps, including those for dual-screen smartphones. ",
      },
      {
        question: "Is outsourcing mobile app developers a good choice?  ",
        answer:
          "Definitely. Outsourcing an app developer in the UK helps with cost reduction. This also lets you access worldwide talent without spending a huge sum of your budget. ",
      },
      {
        question: "How long does it take for mobile app developers to develop an app?",
        answer:
          "The time required for mobile app developers to develop an app depends on the specifications of the app. Simpler apps generally take 8 to 12 weeks. On the other hand, complex enterprise apps take 16 to 24 weeks. ",
      },
      {
        question: "Will your app developers guide me with monetising my app?",
        answer:
          "Certainly. Our team of app developers in the UK guides you in choosing among common monetisation 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>App Developers in UK | Hire Mobile App Developers</title>
        <meta
          name="description"
          content="Hire professional mobile app developers in the UK from WDIPL. Build high-performance Android and iOS apps with experienced development teams."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="App Developers in UK | Hire Mobile App Developers"
        />
        <meta
          property="og:description"
          content="Hire professional mobile app developers in the UK from WDIPL. Build high-performance Android and iOS apps with experienced development teams."
        />
        <meta property="og:url" content="https://www.wdipl.com/hire-talent/mobile-app-developers-uk" />
        <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">
              Seasoned App Developers in the UK for High-Performance App Development            </h2>
            <p className="text-lg text-muted-foreground leading-relaxed">


              We have a team of seasoned app developers in the UK skilled at building intuitive, scalable, and secure mobile applications. Our apps are designed to seamlessly engage users and help with business growth. From native <a
                href="/services/mobile-app-development"
                className="text-[#E5195E] underline"
              >iOS and Android apps</a>  to cross-platform solutions, we bring your mobile vision to life with expertise in a wide range of solutions.
            </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 Expertise{" "}
            </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. */}

              As one of the seasoned app development companies, our app developers in the UK 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">
              What Sets Apart Our Mobile App Developers in the UK
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Our mobile app developers in the UK are experts in comprehensive mobile solutions, equipped with skills 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">
              Our team of mobile app developers in the UK excels 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">
              Ready to Design a High-Performing Mobile App?</h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Get in touch with our team of seasoned app developers in the UK and give your vision 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>
  );
};