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 "../assets/images/ranoutof.webp";
import seezunImage from "../assets/images/seezun.webp";
import wokaImage from "../assets/images/woka.webp";

// High-quality iOS development images
const swiftImage =
  "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
const swiftuiImage =
  "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";

import {
  Apple,
  ArrowRight,
  Brush,
  Bug,
  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 { navigateTo } from "@/App";

// iOS Hero Section with iPhone/iPad mockups
const IOSHeroWithCTA = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <div className="container mx-auto px-6 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-white/70 text-sm font-medium">iOS App Development</span>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                Expert iOS App Development Services
              </h1>
              
              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive 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 sm:flex-row gap-4"
            >
              <ShimmerButton className="text-lg px-8 py-4">
                <div className="inline-flex items-center gap-2">
                  <svg className="w-6 h-4 flex-shrink-0" 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 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition 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="w-4 h-4 flex-shrink-0" />
                <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"
          >
            {/* iOS Device Mockups */}
            <div className="relative w-full max-w-lg mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative h-[400px] w-full mb-8 flex items-center justify-center"
              >
                {/* iPhone and iPad mockup representation */}
                <div className="relative">
                  <div className="absolute -right-16 top-8 w-24 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl transform rotate-12">
                    <div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
                      <div className="w-8 h-1 bg-gray-600 rounded-full"></div>
                    </div>
                    <div className="p-2 space-y-1">
                      <div className="h-2 bg-accent/60 rounded"></div>
                      <div className="h-1 bg-gray-600 rounded w-3/4"></div>
                      <div className="h-1 bg-gray-600 rounded w-1/2"></div>
                    </div>
                  </div>
                  
                  <div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
                    <div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
                      <div className="w-12 h-1 bg-gray-600 rounded-full"></div>
                    </div>
                    <div className="p-4 space-y-3">
                      <div className="h-3 bg-accent rounded"></div>
                      <div className="h-2 bg-gray-600 rounded w-4/5"></div>
                      <div className="h-2 bg-gray-600 rounded w-3/5"></div>
                      <div className="grid grid-cols-2 gap-2 mt-4">
                        <div className="h-8 bg-gray-700 rounded-lg"></div>
                        <div className="h-8 bg-gray-700 rounded-lg"></div>
                      </div>
                      <div className="h-12 bg-accent/20 rounded-lg mt-4 flex items-center justify-center">
                        <Apple className="w-6 h-6 text-accent" />
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
              
              {/* iOS Technology Badges */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.6 }}
                className="flex justify-center gap-4 flex-wrap"
              >
                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
                  Swift
                </Badge>
                <Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
                  SwiftUI
                </Badge>
                <Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
                  Xcode
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// iOS Case Studies - Matching Main Case Studies Design
const IOSCaseStudies = () => {
  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 mx-auto px-6 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="text-center mb-16"
        >
          <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="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Star className="w-5 h-5 text-accent" />
                <span className="text-foreground text-base font-medium">
                  iOS Success Stories
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            iOS Apps That Drive Results
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Discover how we've helped businesses succeed with exceptional 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 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8 items-stretch">
          {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="group h-full"
              >
                <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") {
                      navigateTo("/projects/ranoutof");
                    } else if (study.title === "Seezun") {
                      navigateTo("/projects/seezun");
                    } else if (study.title === "WOKA") {
                      navigateTo("/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 h-64 sm:h-72 md:h-64 w-full flex items-center justify-center p-4">
                        <ImageWithFallback
                          src={study.visual}
                          alt={`${study.title} - ${study.client} case study`}
                          className="max-w-full max-h-full object-contain object-center group-hover:scale-105 transition-transform duration-700 rounded-lg"
                          style={{
                            maxWidth: "100%",
                            height: "auto",
                            objectFit: "contain",
                            objectPosition: "center",
                          }}
                        />

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

                        {/* Key Achievement - Overlaid on Visual */}
                        <div className="absolute bottom-4 left-4 right-4 z-10">
                          <motion.div
                            whileHover={{ scale: 1.05 }}
                            className="bg-black/90 backdrop-blur-md rounded-xl p-4 border border-white/10 shadow-lg"
                          >
                            <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="min-w-0 flex-1">
                                <div className="text-2xl font-bold text-white">
                                  {study.keyAchievement.number}
                                </div>
                                <div className="text-sm text-gray-300 leading-tight">
                                  {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 text-foreground leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
                            {study.title}
                          </h3>
                        </div>

                        {/* Client & Description - Consistent Height */}
                        <div className="mb-6 min-h-[100px]">
                          <div className="text-accent font-medium text-sm mb-2">
                            {study.client}
                          </div>
                          <p className="text-muted-foreground text-sm leading-relaxed 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 bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
                              >
                                {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 bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
                            onClick={(e) => {
                              e.stopPropagation();
                              if (study.title === "RanOutOf") {
                                navigateTo("/projects/ranoutof");
                              } else if (study.title === "Seezun") {
                                navigateTo("/projects/seezun");
                              } else if (study.title === "WOKA") {
                                navigateTo("/projects/woka");
                              }
                            }}
                          >
                            <span>View Full Case Study</span>
                            <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
                          </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="text-center mt-16"
        >
          <Button
            variant="outline"
            size="lg"
            className="border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50 transition-all duration-300"
            onClick={() => navigateTo("/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:
        "Define your iOS app vision, target audience, and core functionality with our expert consultation.",
      icon: Lightbulb,
    },
    {
      title: "UI/UX Design",
      description:
        "Create pixel-perfect designs following Apple's Human Interface Guidelines for optimal user experience.",
      icon: Palette,
    },
    {
      title: "Native iOS Development",
      description:
        "Build your app using Swift and modern iOS frameworks for maximum performance and platform integration.",
      icon: Code,
    },
    {
      title: "Rigorous QA & Testing",
      description:
        "Comprehensive testing across all iOS devices and versions to ensure flawless functionality.",
      icon: Bug,
    },
    {
      title: "App Store Launch & Support",
      description:
        "Handle App Store submission, optimization, and provide ongoing maintenance and updates.",
      icon: Rocket,
    },
  ];

  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">
            Our Proven Approach to Building Your iOS App
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            From concept to App Store success, we 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="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                        <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="text-2xl font-semibold text-white mb-4">
                        {step.title}
                      </h3>
                      <p className="text-gray-300 leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

                  {/* Timeline dot */}
                  <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden 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:
        "Tailored solutions for specific business needs with native iOS performance.",
      icon: Smartphone,
    },
    {
      title: "iPad App Development",
      description:
        "Optimized layouts and features specifically designed for tablet experiences.",
      icon: Tablet,
    },
    {
      title: "iOS UI/UX Design",
      description:
        "Human Interface Guidelines-compliant, delightful user interfaces that users love.",
      icon: Brush,
    },
    {
      title: "WatchOS & tvOS Apps",
      description:
        "Extending your presence across Apple devices with companion apps.",
      icon: Watch,
    },
    {
      title: "iOS App Modernization",
      description:
        "Updating legacy iOS apps for modern performance, features, and design standards.",
      icon: RefreshCcw,
    },
    {
      title: "App Store Optimization",
      description:
        "Maximizing discoverability and downloads through strategic ASO practices.",
      icon: TrendingUp,
    },
  ];

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

// iOS Tech Stack
const IOSTechStack = () => {
  const technologies = [
    { name: "Swift", logo: swiftImage },
    { name: "SwiftUI", logo: swiftuiImage },
    {
      name: "Xcode",
      logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
    },
    {
      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://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
    },
    {
      name: "AWS",
      logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
    },
    {
      name: "Apple Pay",
      logo: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=80&h=80&fit=crop&auto=format",
    },
  ];

  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">
            Building with the Most Powerful iOS Technologies
          </h2>
          <p className="text-xl text-gray-300 leading-relaxed">
            We leverage cutting-edge iOS frameworks and tools to create
            exceptional mobile experiences.
          </p>
        </motion.div>

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

// Key Benefits of iOS Development
const IOSKeyBenefits = () => {
  const benefits = [
    {
      icon: Zap,
      title: "Unmatched Performance",
      description: "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness."
    },
    {
      icon: Shield,
      title: "Superior Security",
      description: "Leveraging Apple's robust security features for comprehensive data protection and user privacy."
    },
    {
      icon: Heart,
      title: "Premium User Experience",
      description: "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design."
    },
    {
      icon: Network,
      title: "Apple Ecosystem Integration",
      description: "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features."
    },
    {
      icon: DollarSign,
      title: "Strong Monetization Potential",
      description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
    }
  ];

  return (
    <section className="py-32">
      <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-16"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Why Choose Native iOS for Your App?
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            iOS development offers unparalleled advantages for businesses looking to create premium mobile experiences.
          </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 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
        >
          {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.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {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 md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
        >
          {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="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {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 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">
            iOS Development Technologies
          </h2>
          <p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
            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 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
        >
          {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="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
                  <CardContent className="p-0">
                    {/* Image Section */}
                    <div className="relative h-48 overflow-hidden">
                      <ImageWithFallback
                        src={tech.image}
                        alt={tech.title}
                        className="w-full h-full object-cover 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="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                      </div>
                    </div>

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

                      {/* Features List */}
                      <div className="space-y-2">
                        <h4 className="text-sm font-medium text-white mb-3">
                          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="w-4 h-4 text-accent flex-shrink-0" />
                              <span>{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Main iOS App Development Page
export const IOSAppDevelopment = () => {
  return (
    <div className="dark min-h-screen">
      <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>

      <section className="bg-card">
        <IOSTechnologies />
      </section>

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