import { motion } from "framer-motion";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import ranoutofImage from "../src/images/ranoutof.webp";
// import seezunImage from "../src/images/seezun.webp";
import wokaImage from "../src/images/woka.webp";
import swiftImage from "../src/images/swift-programming.webp";
import apllePayImage from "../src/images/apple-pay.png";
import awsLogo from "../src/images/aws-logo.png";

// High-quality iOS development images

const swiftuiImage =
  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";

import {
  Apple,
  ArrowRight,
  Brush,
  Bug,
  Calendar,
  CheckCircle,
  Code,
  DollarSign,
  Eye,
  Globe,
  Heart,
  Layers,
  Layout,
  Lightbulb,
  MessageSquare,
  Network,
  Palette,
  RefreshCcw,
  Rocket,
  Shield,
  ShoppingCart,
  Smartphone,
  Star,
  Tablet,
  TrendingUp,
  Users,
  Watch,
  Zap,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useNavigate } from "react-router-dom";
import Spline from "@splinetool/react-spline";
import { Helmet } from "react-helmet-async";
import HireDeveloperSection from "@/components/HireDeveloperSection";

// iOS Hero Section with iPhone/iPad mockups
const IOSHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title> iOS App Development UK | Get a Free Consultation</title>
        <meta
          name="description"
          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content=" iOS App Development UK | Get a Free Consultation
"
        />
        <meta
          property="og:description"
          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
        />
        <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=" iOS App Development UK | Get a Free Consultation"
        />
        <meta
          name="twitter:description"
          content=" iOS app development UK with flexible hiring models. Build powerful iPhone apps with experienced developers."
        />
        <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 px-6 mx-auto 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"
          >
            {/* iOS Development Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <span className="text-sm font-medium text-white/70">
                iOS App Development
              </span>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
                Access High-quality iOS App Development in the UK
              </h1>

              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
                We build efficient and appealing iOS apps for iPhone and iPad,
                redefining user experience and driving new engagement for your
                business.
              </p>
            </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 gap-4 sm:flex-row"
            >
              <ShimmerButton
                className="px-8 py-4 text-lg"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <svg
                    className="flex-shrink-0 w-6 h-4"
                    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 Consultation</span>
                </div>
              </ShimmerButton>
              <a
                href="#portfolio"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md 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="flex-shrink-0 w-4 h-4" />
                <span>See Our iOS Work</span>
              </a>
            </motion.div>
          </motion.div>

          {/* Right side with iOS 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 w-full"
          >
            <div className="absolute w-[160px] h-[46px] bg-[#000000] bottom-[3%] right-[1%]"></div>
            <div className="w-full h-[490px] overflow-hidden rounded-xl pointer-events-none">
              {/* {" "} */}
              <Spline
                scene="https://prod.spline.design/3GGwAe3v1Q7oobGU/scene.splinecode"
                // className="w-[40%] h-full"
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// iOS Case Studies - Matching Main Case Studies Design
const IOSCaseStudies = () => {
  const navigate = useNavigate();
  const caseStudies = [
    {
      id: 1,
      title: "RanOutOf",
      client: "Global Ease Solutions",
      description:
        "WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions.",
      keyAchievement: {
        number: "75%",
        metric: "Shopping Efficiency",
        icon: ShoppingCart,
      },
      visual: ranoutofImage,
      tags: ["iOS App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
      gradient: "from-green-500/20 to-emerald-500/20",
      accentColor: "green",
      featured: false,
    },
    // {
    //   id: 2,
    //   title: "Seezun",
    //   client: "Seezun",
    //   description:
    //     "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
    //   keyAchievement: {
    //     number: "85%",
    //     metric: "Brand Recognition",
    //     icon: TrendingUp,
    //   },
    //   visual: seezunImage,
    //   tags: ["iOS App", "P2P Marketplace", "Fashion", "E-commerce"],
    //   gradient: "from-purple-500/20 to-pink-500/20",
    //   accentColor: "purple",
    //   featured: false,
    // },
    {
      id: 3,
      title: "WOKA",
      client: "WOKA Creations Pvt. Ltd",
      description:
        "WDI transformed WOKA's hybrid app into a high-performance native iOS platform featuring seamless streaming, deep analytics, and robust monthly support.",
      keyAchievement: {
        number: "300%",
        metric: "User Retention",
        icon: Users,
      },
      visual: wokaImage,
      tags: ["Native iOS", "Streaming", "Analytics", "Entertainment"],
      gradient: "from-green-500/20 to-emerald-500/20",
      accentColor: "green",
      featured: false,
    },
  ];

  return (
    <section className="py-32" id="portfolio">
      <div className="container px-6 mx-auto lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="mb-6"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
              <div className="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
                <Star className="w-5 h-5 text-accent" />
                <span className="text-base font-medium text-foreground">
                  iOS Success Stories
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
            We Build iOS Apps That Bring Results
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
            Explore how we have helped businesses succeed with remarkable iOS
            applications that leverage native capabilities and deliver
            outstanding user experiences.
          </p>
        </motion.div>

        {/* Case Studies Grid - Matching Main Case Studies Layout */}
        <div className="grid items-stretch grid-cols-1 gap-8 lg:grid-cols-3 md:grid-cols-2">
          {caseStudies.map((study, index) => {
            const AchievementIcon = study.keyAchievement.icon;

            return (
              <motion.div
                key={study.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="h-full group"
              >
                <Card
                  className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                  onClick={() => {
                    if (study.title === "RanOutOf") {
                      navigate("/projects/ranoutof");
                    } else if (study.title === "Seezun") {
                      navigate("/projects/seezun");
                    } else if (study.title === "WOKA") {
                      navigate("/projects/woka");
                    }
                  }}
                >
                  <CardContent className="p-0 flex flex-col h-full min-h-[650px]">
                    {/* Visual Section - Fixed Height with Responsive Container */}
                    <div className="relative overflow-hidden bg-gray-900/50 rounded-t-2xl">
                      <div className="relative flex items-center justify-center w-full h-64 p-4 sm:h-72 md:h-64">
                        <ImageWithFallback
                          src={study.visual}
                          alt={`${study.title} - ${study.client} case study`}
                          className="object-contain object-center max-w-full max-h-full transition-transform duration-700 rounded-lg group-hover:scale-105"
                          style={{
                            maxWidth: "100%",
                            height: "auto",
                            objectFit: "contain",
                            objectPosition: "center",
                          }}
                        />

                        {/* Subtle overlay for better text contrast */}
                        <div className="absolute inset-0 transition-opacity duration-500 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80" />

                        {/* Key Achievement - Overlaid on Visual */}
                        <div className="absolute z-10 bottom-4 left-4 right-4">
                          <motion.div
                            whileHover={{ scale: 1.05 }}
                            className="p-4 border shadow-lg bg-black/90 backdrop-blur-md rounded-xl border-white/10"
                          >
                            <div className="flex items-center gap-3">
                              <div
                                className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
                                  study.accentColor === "blue"
                                    ? "from-blue-500 to-cyan-500"
                                    : study.accentColor === "green"
                                      ? "from-green-500 to-emerald-500"
                                      : study.accentColor === "purple"
                                        ? "from-purple-500 to-pink-500"
                                        : study.accentColor === "cyan"
                                          ? "from-cyan-500 to-blue-500"
                                          : study.accentColor === "orange"
                                            ? "from-orange-500 to-red-500"
                                            : "from-emerald-500 to-teal-500"
                                } flex items-center justify-center flex-shrink-0`}
                              >
                                <AchievementIcon className="w-5 h-5 text-white" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="text-2xl font-bold text-white">
                                  {study.keyAchievement.number}
                                </div>
                                <div className="text-sm leading-tight text-gray-300">
                                  {study.keyAchievement.metric}
                                </div>
                              </div>
                            </div>
                          </motion.div>
                        </div>
                      </div>
                    </div>

                    {/* Content Section - Flexible Height with Consistent Spacing */}
                    <div className="p-6 flex-1 flex flex-col justify-between min-h-[350px]">
                      <div className="flex-1">
                        {/* Project Title - Consistent Height */}
                        <div className="mb-4 min-h-[60px] flex items-start">
                          <h3 className="text-xl font-semibold leading-tight transition-colors duration-300 text-foreground group-hover:text-accent line-clamp-2">
                            {study.title}
                          </h3>
                        </div>

                        {/* Client & Description - Consistent Height */}
                        <div className="mb-6 min-h-[100px]">
                          <div className="mb-2 text-sm font-medium text-accent">
                            {study.client}
                          </div>
                          <p className="text-sm leading-relaxed text-muted-foreground line-clamp-4">
                            {study.description}
                          </p>
                        </div>

                        {/* Tags - Consistent Height */}
                        <div className="mb-6 min-h-[32px]">
                          <div className="flex flex-wrap gap-2">
                            {study.tags.map((tag) => (
                              <Badge
                                key={tag}
                                variant="secondary"
                                className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                              >
                                {tag}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>

                      {/* CTA Button - Fixed at Bottom */}
                      <div className="mt-auto">
                        <motion.div
                          whileHover={{ scale: 1.02 }}
                          whileTap={{ scale: 0.98 }}
                        >
                          <Button
                            className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
                            onClick={(e) => {
                              e.stopPropagation();
                              if (study.title === "RanOutOf") {
                                navigate("/projects/ranoutof");
                              } else if (study.title === "Seezun") {
                                navigate("/projects/seezun");
                              } else if (study.title === "WOKA") {
                                navigate("/projects/woka");
                              }
                            }}
                          >
                            <span>View Full Case Study</span>
                            <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                          </Button>
                        </motion.div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </div>

        {/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
          className="mt-16 text-center"
        >
          <Button
            variant="outline"
            size="lg"
            className="transition-all duration-300 border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50"
            onClick={() => navigate("/case-studies")}
          >
            <Eye className="w-5 h-5 mr-2" />
            View All Case Studies
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

// iOS Development Process Timeline
const IOSProcessTimeline = () => {
  const steps = [
    {
      title: "Strategy & Concept",
      description:
        "This is the discovery phase, where our expert team communicates with you regarding the vision and core functionalities of the app.",
      icon: Lightbulb,
    },
    {
      title: "UI/UX Design",
      description:
        "During the process of iOS app development for UK businesses, UI/UX design plays an important part. By following Apple’s Human Interface Guidelines, we create the best designs for your UK business app. This guarantees increased user experience.",
      icon: Palette,
    },
    {
      title: "Native iOS Development",
      description:
        "In this phase, our specialised developers in the UK build your app using advanced iOS frameworks like Swift and SwiftUI, which helps in maximising the performance and enables effortless integration.",
      icon: Code,
    },
    {
      title: "Meticulous QA & Testing",
      description:
        "QA is a critical process that directly impacts user retention, brand reputation, and App Store approval. Therefore, by conducting QA for your app, we ensure that the app meets all technical, functional, and design standards. Our qualified app testers also conduct intensive testing of the iOS app across different devices.",
      icon: Bug,
    },
    {
      title:
        "Launching the iOS App in the App Store and Providing Necessary Support",
      description:
        "Finally, we also help you to submit the app to the App Store after proper optimisation. Furthermore, we offer proper maintenance of the app and support future updates of the app.",
      icon: Rocket,
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
            Our Established Approach of iOS App Development for UK Businesses
            Like You
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
            The apps we develop show proven results. We help you to get the best
            out of your iOS experience, from ideation of the app to launching it
            in the App Store.
          </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="p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl hover:border-accent/30 hover:shadow-xl">
                      <div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
                        <div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="mb-4 text-2xl font-semibold text-white">
                        {step.title}
                      </h3>
                      <p className="leading-relaxed text-gray-300">
                        {step.description}
                      </p>
                    </div>
                  </div>

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

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

// iOS Specific Services
const IOSServicesGrid = () => {
  const services = [
    {
      title: "Custom iPhone App Development",
      description:
        "At WDI, we are committed to delivering tailored iOS solutions as per the requirements of our clients. So, you, as the client, get a customised iPhone app for your UK business made by our expert iOS app developers.",
      icon: Smartphone,
    },
    {
      title: "iPad App Development",
      description:
        "We deliver optimised layouts and features that are particularly designed for optimising the tablet experiences.",
      icon: Tablet,
    },
    {
      title: "iOS UI/UX Design",
      description:
        "Our developers develop iOS apps by complying with Human Interface Guidelines, focusing on the standard designs. Therefore, the user interface of the application remains appealing and approachable, attracting more clients for your UK business.",
      icon: Brush,
    },
    {
      title: "Expanding Your App’s Presence in Companion Apps",
      description:
        "Our developers are effective enough to extend your business’s presence across Apple devices with companion apps such as WatchOS & tvOS Apps.",
      icon: Watch,
    },
    {
      title: "Modernisation of Legacy iOS Apps",
      description:
        "We also emphasise updating the legacy iOS apps, which elevates their performance, in-app specifications, and UI standards.",
      icon: RefreshCcw,
    },
    {
      title: "App Store Optimisation",
      description:
        "We make your app more discoverable in the App Store by increasing downloads through strategic ASO practices.",
      icon: TrendingUp,
    },
  ];

  return (
    <section className="py-32">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
            Comprehensive iOS App Solutions for UK Businesses
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
            From iPhone apps to smooth integration to the Apple ecosystem, we
            deliver end-to-end iOS app development for UK businesses.
          </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 gap-8 md:grid-cols-2 lg:grid-cols-3"
        >
          {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="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="p-8">
                    <div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="mb-4 text-xl font-semibold text-foreground">
                      {service.title}
                    </h3>
                    <p className="leading-relaxed text-muted-foreground">
                      {service.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// iOS Tech Stack
const IOSTechStack = () => {
  const technologies = [
    {
      name: "Swift",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
    },
    {
      name: "SwiftUI",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-plain.svg",
    },
    {
      name: "Xcode",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg",
    },
    {
      name: "UIKit",
      logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
    },
    {
      name: "Core Data",
      logo: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=80&h=80&fit=crop&auto=format",
    },
    {
      name: "Firebase",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
    },
    {
      name: "AWS",
      logo: awsLogo,
    },
    {
      name: "Apple Pay",
      logo: apllePayImage,
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
            Building with the Most Powerful iOS Technologies
          </h2>
          <p className="text-xl leading-relaxed text-gray-300">
            We use contemporary iOS frameworks and tools to develop exceptional
            experiences for iPhone and other devices.
          </p>
        </motion.div>

        <div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
          {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="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
                <ImageWithFallback
                  src={tech.logo}
                  alt={tech.name}
                  className="object-contain w-12 h-12"
                />
              </div>
              <span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
                {tech.name}
              </span>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Key Benefits of iOS Development
const IOSKeyBenefits = () => {
  const benefits = [
    {
      icon: Zap,
      title: "Delivering Unmatched Performance",
      description:
        "Our iOS App development in the UK focuses on hardware optimisation to ensure an uninterrupted user experience and lightning-fast device responsiveness.",
    },
    {
      icon: Shield,
      title: "Enhanced Security",
      description:
        "We develop your iOS app by leveraging the security features offered by Apple. Apple devices come with high-level security that covers both the software and hardware of the devices.",
    },
    {
      icon: Heart,
      title: "Offering Premium App Experience",
      description:
        "By adhering to Human Interface Guidelines, we deliver intuitive, appealing, and accessible design to the iOS apps.",
    },
    {
      icon: Network,
      title: "Seamless Integration in Apple Ecosystem",
      description:
        "One of the major advantages of developing iOS apps is it can be easily integrated with the Apple ecosystem. Apple uses vertical integration, where it focuses on both the hardware and software. This allows our expert developers to know exactly which processors, memory, and screen specifications their apps will run on and enable high-level optimisation.",
    },
    {
      icon: DollarSign,
      title: "Strong Monetisation Potential",
      description:
        "By developing an iOS app for your UK business, you can target the high-value user base of the UK with increased capability of making in-app purchases because of the premium positioning of the brand.",
    },
  ];

  return (
    <section className="py-32">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
            Why Opt for Native iOS for Your App?
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
            Developing apps on the iOS platform offers unrivalled advantages for
            your UK businesses looking to deliver a premium mobile experience to
            their users. users.
          </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 max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
        >
          {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="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="p-8 text-center">
                    <div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="mb-4 text-xl font-semibold text-foreground">
                      {benefit.title}
                    </h3>
                    <p className="leading-relaxed text-muted-foreground">
                      {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 max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
        >
          {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="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="p-8 text-center">
                    <div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="mb-4 text-xl font-semibold text-foreground">
                      {benefit.title}
                    </h3>
                    <p className="leading-relaxed text-muted-foreground">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// iOS Technologies & Frameworks
const IOSTechnologies = () => {
  const technologies = [
    {
      title: "Swift Programming",
      description:
        "Modern, safe, and fast programming language designed for iOS development.",
      image: swiftImage,
      features: [
        "Type Safety",
        "Memory Management",
        "Performance Optimization",
        "Concurrency Support",
      ],
      icon: Code,
    },
    {
      title: "SwiftUI Framework",
      description:
        "Declarative UI framework for building beautiful, responsive user interfaces.",
      image: swiftuiImage,
      features: [
        "Declarative Syntax",
        "Live Previews",
        "Cross-Platform",
        "Animation Support",
      ],
      icon: Layout,
    },
  ];

  return (
    <section className="py-32 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-20 text-center"
        >
          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
            iOS Development Technologies
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
            We leverage the latest iOS technologies and frameworks to build
            exceptional apps.
          </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 max-w-6xl gap-12 mx-auto lg:grid-cols-2"
        >
          {technologies.map((tech, index) => {
            const IconComponent = tech.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.2 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="h-full overflow-hidden transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
                  <CardContent className="p-0">
                    {/* Image Section */}
                    <div className="relative h-48 overflow-hidden">
                      <ImageWithFallback
                        src={tech.image}
                        alt={tech.title}
                        className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-transparent to-transparent" />
                      <div className="absolute bottom-4 left-4">
                        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                      </div>
                    </div>

                    {/* Content Section */}
                    <div className="p-8">
                      <h3 className="mb-4 text-2xl font-semibold text-white">
                        {tech.title}
                      </h3>
                      <p className="mb-6 leading-relaxed text-gray-300">
                        {tech.description}
                      </p>

                      {/* Features List */}
                      <div className="space-y-2">
                        <h4 className="mb-3 text-sm font-medium text-white">
                          Key Features:
                        </h4>
                        <div className="grid grid-cols-2 gap-2">
                          {tech.features.map((feature, idx) => (
                            <div
                              key={idx}
                              className="flex items-center gap-2 text-sm text-gray-300"
                            >
                              <CheckCircle className="flex-shrink-0 w-4 h-4 text-accent" />
                              <span>{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Main iOS App Development Page
export const IOSAppDevelopmentUK = () => {
  const navigate = useNavigate();
  return (
    <div className="min-h-screen dark">
      {/* <Navigation /> */}

      <section className="bg-black">
        <IOSHeroWithCTA />
      </section>

      <section className="bg-background">
        <IOSKeyBenefits />
      </section>

      <section className="bg-black">
        <IOSCaseStudies />
      </section>

      <section className="bg-black">
        <IOSProcessTimeline />
      </section>

      <section className="bg-black">
        <IOSServicesGrid />
      </section>

      <section className="bg-black">
        <IOSTechStack />
      </section>

      <HireDeveloperSection
        title="Incorporate Our Talented iOS App Developers in Your Team"
        description="Develop sleek, high-performance iOS applications by integrating Swift and Objective-C developers. "
        buttonText="Hire iOS Developers"
        buttonLink="/hire-talent/ios-app-developers"
        developerTypes={[
          {
            title: "Swift Developer",
            experience: "4+ Years",
            skills: ["Swift", "UIKit", "SwiftUI", "REST APIs"],
            specialties: "Modern iOS UI, Performance Optimization",
          },
          {
            title: "Objective-C Developer",
            experience: "5+ Years",
            skills: ["Objective-C", "Xcode", "Cocoa Touch", "Core Data"],
            specialties: "Legacy App Maintenance, Native Libraries",
          },
          {
            title: "iOS App Architect",
            experience: "6+ Years",
            skills: ["MVVM", "Swift", "App Store Deployment", "CI/CD"],
            specialties: "Scalable Architecture, Release Pipelines",
          },
        ]}
      />

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

      {/* CTA Section */}
      <section className="py-32">
        <div className="container px-6 mx-auto 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"
          >
            <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
              Ready to Develop Your iOS App for Your UK Business?
            </h2>
            <p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
              Hire from our expert pool of iOS developers to get exceptional iOS
              apps that attract users and drive business success.
            </p>
            <div className="flex flex-col justify-center gap-6 sm:flex-row">
              <ShimmerButton
                className="h-auto px-8 py-4 text-lg"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Apple className="flex-shrink-0 w-5 h-5" />
                  <span>Start Your iOS Project</span>
                </div>
              </ShimmerButton>
              <Button
                variant="outline"
                size="lg"
                className="h-auto px-8 py-4 text-lg border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
              >
                <Calendar className="w-5 h-5 mr-2" />
                Schedule Consultation
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

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