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 {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../components/ui/accordion";
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 Developers USA | Hire Expert iPhone App Developers
        </title>
        <meta
          name="description"
          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content=" iOS App Developers USA | Hire Expert iPhone App Developers"
        />
        <meta
          property="og:description"
          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
        />
        <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 Developers USA | Hire Expert iPhone App Developers"
        />
        <meta
          name="twitter:description"
          content=" Professional iOS app developers USA for startups and enterprises. Build powerful iPhone apps with proven experts."
        />
        <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">
                Get Expert iOS App Developers in USA
              </h1>

              <p className="max-w-lg text-lg leading-relaxed text-gray-300">
                At WDI, we develop engaging, high-performance iPhone and iPad
                applications for USA businesses that transform user experience
                and bring more engagement.
              </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">
            iOS Apps That Show Proven Results
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
            Discover how we’ve helped businesses achieve success with
            exceptional iOS applications that leverage native capabilities and
            deliver outstanding user experience.
          </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: "Ideating Strategy & Concept",
      description:
        "In this phase, we understand your vision regarding your iOS App. We discuss with you about the features that the app should have, the target audience, and key functionalities. Our seasoned iOS app developers in the USA offer expert consultations for it.",
      icon: Lightbulb,
    },
    {
      title: "Creating UI/UX Design",
      description:
        "Our developers focus on creating an engaging user interface design for your iOS app, following Apple’s Human Interface Guidelines. This contributes to an optimal user experience.",
      icon: Palette,
    },
    {
      title: "Developing Native iOS",
      description:
        "At WDI, our experts use all the latest iOS frameworks, such as Swift, to develop seamless functionality for the application. It helps in maximum performance and platform integrations.",
      icon: Code,
    },
    {
      title: "Ensuring QA & Testing",
      description:
        "Before launching the iOS app in the App Store, our specialized iOS app developers in USA run QA and testing to ensure that the application is running seamlessly. QA identifies performance bottlenecks in the applications. By proper testing, we ensure that the app is functioning correctly across different Apple devices of different screen sizes, resolutions, and software updates.",
      icon: Bug,
    },
    {
      title: "Launching the App in the App Store and Offering Support",
      description:
        "When your app performs brilliantly through testing, it is time to launch it in the App Store. Alongside guiding you to launch your application, we also provide support for ongoing maintenance for the app and provide future updates.",
      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 Effective Approach to Building iOS Apps for Your USA Business
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
            From developing the concept and understanding the features to
            launching your iOS app in the App Store, we are here to guide you
            through every step of the iOS development journey.
          </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:
        "We deliver tailored solutions for your business’ specific needs in the USA, focusing on native iOS performance.",
      icon: Smartphone,
    },
    {
      title: "iPad App Development",
      description:
        "Our experienced iOS app developers in the USA focus on developing optimized layouts and features that are particularly designed for elevating the tablet experience.",
      icon: Tablet,
    },
    {
      title: "iOS UI/UX Design",
      description:
        "Our developers create engaging UI/UX design of the iOS apps, by being fully compliant with the Human Interface Guidelines.",
      icon: Brush,
    },
    {
      title: "WatchOS & tvOS Apps",
      description:
        "We develop companion apps that increase your USA business’ presence across Apple devices. Our experts use frameworks like SwiftUI to build shared views or quickly create native UIs for both WatchOS & tvOS.",
      icon: Watch,
    },
    {
      title: "Modernization of Old iOS Apps",
      description:
        "We work on updating the legacy iOS apps to enhance their performance, features, and design standards.",
      icon: RefreshCcw,
    },
    {
      title: "App Store Optimization",
      description:
        "We implement strategic ASO practices, which help in increasing discoverability and maximizing download rates.",
      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 Your USA Business
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
            Our end-to-end iOS development service helps your business app to be
            integrated seamlessly within the Apple Ecosystem.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid 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">
            We Develop iOS Apps Using the Most Advanced iOS Technologies
          </h2>
          <p className="text-xl leading-relaxed text-gray-300">
            By utilizing cutting-edge iOS frameworks and tools, we deliver a
            highly engaging mobile experience while creating your app for your
            USA business.
          </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: "Optimal Performance",
      description:
        "Our expert iOS app developers in the USA develop optimized iOS apps for Apple Hardware. This ensures smooth user experiences and makes the interface lightning-fast.",
    },
    {
      icon: Shield,
      title: "Superior Security",
      description:
        "We have leveraged the robust security features of Apple for comprehensive data protection and user privacy. Apple uses a privacy-focused architecture, which makes iOS apps secure for every type of business transaction and communication.",
    },
    {
      icon: Heart,
      title: "User Experiences That Feel Premium",
      description:
        "iOS apps have an uncluttered UI and are designed to be easy for anyone to use. Therefore, our iOS app developers in the USA are committed to creating delightful and accessible designs for your apps.",
    },
    {
      icon: Network,
      title: "Integration to Apple Ecosystem",
      description:
        "iOS apps integrate easily into the Apple ecosystem because Apple controls both hardware and software. This ensures a seamless, uniform functionality across different Apple devices like iPhone, Mac, and iPad.",
    },
    {
      icon: DollarSign,
      title: "Strong Monetization Potential",
      description:
        "By developing an iOS app, you will penetrate the market with a high-value user base, with effective in-app purchase mechanisms and premium positioning.",
    },
  ];

  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">
            There is nothing better than choosing Native iOS for developing your
            business app because it offers unparalleled advantages for
            businesses, delivering a premium mobile experience.
          </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>
  );
};
const IOSFAQs = () => {
  const faqs = [
    {
      question:
        "How Can Your Team Integrate with My Existing Team?",
      answer:
        "We specialize in integrating with third-party teams and have expertise in integrating APIs, webhooks, middleware solutions, ETL processes, and cloud-to-cloud integrations. By integrating with your existing team, we ensure data consistency, security, and minimal disruption to your business operations in the USA.",
    },
    {
      question:
        "How Can You Help with App Store Optimization (ASO)?",
      answer:
        "We optimize the app title, app description, keywords, and screenshots to improve application visibility and conversion rates. These are crucial metrics for increasing download rates.",
    },
    {
      question: "Can my iOS App Work Offline?",
      answer:
        "Yes, absolutely! We can use local data storage (CoreData) to allow core features to work without the internet. The data can be synced once the device is back online. The iOS apps use intelligent caching, meaning that it stores API responses, images, and user-specific content to the disk so they can be loaded instantly even without a network connection.",
    },
    {
      question:
        "How Often Should I Update My App after It’s Launched?",
      answer:
        "Successful iOS apps are updated 2-4 times each month for fixing in-app bugs and incorporate feature enhancements. At WDI, we provide consistent support to your business app in terms of updates and maintenance of the app. Focused on user feedback, we focus on delivering consistent support so that your app remains optimized.",
    },
    {
      question:
        "How do You Ensure My App Won’t be Rejected by Apple?",
      answer:
        "We review the App Store Guidelines before coding. We also conduct testing on the app on real devices and ensure no proxy content is used in developing this app.",
    },
    {
      question:
        "Can You Connect My App with My Existing Website or CRM?",
      answer:
        "Yes, absolutely! We build custom API (Application Programming Interfaces) to connect your business app with the backend of your current website, CMS, or CRM systems.",
    },
    {
      question:
        "What is a Discovery Phase and Why Do I Need It?",
      answer:
        "A discovery phase is a 2-to-4-week phase that determines the app’s scope, UI/UX design, and technical requirements. In this phase, we closely communicate with our clients to discuss their specific requirements. Without this phase, expensive bugs can appear in the applications, and miscommunications among parties can happen.",
    },
  ];


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

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto"
        >
          <Accordion type="single" collapsible className="space-y-8">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-white">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};
// Main iOS App Development Page
export const IOSAppDevelopmentUSA = () => {
  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 Expert Pool of Talented iOS App Developers in Your Team"
        description="Develop sleek, high-performance iOS applications with our skilled 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">
              Want to Transform Business Dynamics by Developing an iOS App for
              Your USA Business?
            </h2>
            <p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
              Collaborate with us to develop exceptional iOS Applications that
              captivate users and drive business success in the USA.
            </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>
        {/* iOS-Specific FAQs */}
      <IOSFAQs />


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