import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import {
  ArrowRight,
  BarChart3,
  Bell,
  Brain,
  Briefcase,
  Bug,
  Building,
  Calculator,
  Calendar,
  Clock,
  Cloud,
  CloudCog,
  Code,
  Cog,
  Database,
  DollarSign,
  DownloadCloud,
  Eye,
  FileText,
  Globe,
  Layers,
  Layout,
  Monitor,
  Newspaper,
  Palette,
  PlusCircle,
  Repeat,
  Rocket,
  Search,
  Server,
  Shield,
  ShoppingBag,
  Smartphone,
  Table,
  Target,
  TrendingUp,
  Users,
  Wifi,
  WifiOff,
  Zap,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import tradersCircuitImage from "../src/images/traders-circuit.webp";
import goodTimesImage from "../src/images/goodtimes.webp";
import prospertyImage from "../src/images/prosperty.webp";
import { Helmet } from "react-helmet-async";
import HireDeveloperSection from "@/components/HireDeveloperSection";

// PWA Hero Section
const PWAHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Progressive Web App (PWA) Development by WDI | Next-Gen Solutions</title>
        <meta
          name="description"
          content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Progressive Web App (PWA) Development by WDI | Next-Gen Solutions" />
        <meta
          property="og:description"
          content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
        />
        <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="Progressive Web App (PWA) Development by WDI | Next-Gen Solutions" />
        <meta
          name="twitter:description"
          content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
        />
        <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 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"
          >
            {/* PWA 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">
                Progressive Web Apps
              </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">
                Progressive Web App Development
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Deliver app-like experiences directly through the web browser with AI-powered features, combining the best of web development and AI mobile app for unparalleled reach.
              </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"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Globe className="w-5 h-5 flex-shrink-0" />
                  <span>Explore PWA Benefits</span>
                </div>
              </ShimmerButton>
              <a
                href="#consultation"
                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"
              >
                <FileText className="w-4 h-4 flex-shrink-0" />
                <span>Get a PWA Quote</span>
              </a>
            </motion.div>
          </motion.div>

          {/* Right side with PWA browser mockup */}
          <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"
          >
            {/* PWA Browser Mockup */}
            <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 mb-8"
              >
                {/* Mobile Device Frame */}
                <div className="relative mx-auto w-64 h-96 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl p-4">
                  {/* Status Bar */}
                  <div className="flex justify-between items-center mb-4 px-2">
                    <div className="flex items-center gap-1">
                      <div className="w-4 h-2 bg-white rounded-full"></div>
                      <div className="w-4 h-2 bg-white/60 rounded-full"></div>
                      <div className="w-4 h-2 bg-white/30 rounded-full"></div>
                    </div>
                    <div className="text-white text-xs">9:41</div>
                    <div className="flex items-center gap-1">
                      <Wifi className="w-3 h-3 text-white" />
                      <div className="w-6 h-3 bg-green-500 rounded-sm"></div>
                    </div>
                  </div>

                  {/* Browser Bar */}
                  <div className="bg-gray-700 rounded-lg p-2 mb-4 flex items-center gap-2">
                    <div className="w-4 h-4 bg-accent rounded-full flex items-center justify-center">
                      <Globe className="w-2 h-2 text-white" />
                    </div>
                    <div className="flex-1 bg-gray-600 rounded-md px-2 py-1">
                      <div className="text-xs text-gray-300">yourapp.com</div>
                    </div>
                    <div className="text-accent text-xs font-medium">PWA</div>
                  </div>

                  {/* App Content */}
                  <div className="bg-gradient-to-br from-accent/20 to-purple-500/20 rounded-lg p-4 h-64 flex flex-col">
                    <div className="flex items-center gap-3 mb-4">
                      <div className="w-10 h-10 bg-accent rounded-lg flex items-center justify-center">
                        <Smartphone className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <div className="text-white font-medium text-sm">
                          Your PWA
                        </div>
                        <div className="text-gray-300 text-xs">
                          App-like experience
                        </div>
                      </div>
                    </div>

                    <div className="space-y-3 flex-1">
                      <div className="h-3 bg-white/20 rounded-full"></div>
                      <div className="h-3 bg-white/15 rounded-full w-3/4"></div>
                      <div className="h-3 bg-white/10 rounded-full w-1/2"></div>

                      <div className="grid grid-cols-2 gap-2 mt-4">
                        <div className="h-12 bg-white/10 rounded-lg flex items-center justify-center">
                          <WifiOff className="w-4 h-4 text-white/60" />
                        </div>
                        <div className="h-12 bg-white/10 rounded-lg flex items-center justify-center">
                          <DownloadCloud className="w-4 h-4 text-white/60" />
                        </div>
                      </div>
                    </div>

                    {/* Install Banner */}
                    <div className="mt-4 bg-white/10 rounded-lg p-2 flex items-center justify-between">
                      <div className="text-xs text-white">
                        Add to Home Screen
                      </div>
                      <PlusCircle className="w-4 h-4 text-accent" />
                    </div>
                  </div>
                </div>
              </motion.div>

              {/* PWA Feature 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-accent/20 text-accent border-accent/30"
                >
                  <WifiOff className="w-3 h-3 mr-1" />
                  Offline Ready
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <DownloadCloud className="w-3 h-3 mr-1" />
                  Installable
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Globe className="w-3 h-3 mr-1" />
                  Cross-Platform
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of PWAs
const PWABenefits = () => {
  const benefits = [
    {
      icon: WifiOff,
      title: "Offline Capability",
      description:
        "Works reliably even with no or low network connectivity, ensuring users can access content anywhere.",
    },
    {
      icon: DownloadCloud,
      title: "Installable",
      description:
        "Users can 'add to home screen' without app store downloads, reducing friction for user acquisition.",
    },
    {
      icon: Search,
      title: "Discoverable",
      description:
        "SEO-friendly and discoverable via search engines like regular websites, improving organic reach.",
    },
    {
      icon: Zap,
      title: "Instant Load Times",
      description:
        "Cached assets and service workers ensure lightning-fast loading speeds and smooth performance.",
    },
    {
      icon: DollarSign,
      title: "Cost-Effective",
      description:
        "Single codebase for web and mobile-like experience, significantly reducing development costs.",
    },
    {
      icon: Monitor,
      title: "Platform Agnostic",
      description:
        "Runs on any device with a modern browser, ensuring maximum compatibility and reach.",
    },
  ];

  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">
            Why Choose a Progressive Web App?
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            PWAs combine the best of web development and AI mobile app experiences, delivering native-like performance with AI-powered design, web-based flexibility, and unparalleled reach.
          </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"
        >
          {benefits.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="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>
  );
};

// How PWAs Work
const HowPWAsWork = () => {
  const features = [
    {
      icon: Server,
      title: "Service Workers",
      description:
        "Powering offline capabilities and push notifications through background scripts.",
    },
    {
      icon: Layout,
      title: "Web App Manifest",
      description:
        "Defining app appearance on home screen and providing native app-like behavior.",
    },
    {
      icon: Shield,
      title: "HTTPS",
      description:
        "Ensuring secure data transmission and enabling advanced PWA features.",
    },
    {
      icon: Monitor,
      title: "Responsive Design",
      description:
        "Adapting seamlessly to all screen sizes and device orientations.",
    },
    {
      icon: Bell,
      title: "Push Notifications",
      description:
        "Re-engaging users effectively with timely and relevant notifications.",
    },
    {
      icon: Repeat,
      title: "Background Sync",
      description:
        "Data updates even when offline, ensuring users always have fresh content.",
    },
  ];

  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">
            Bridging the Gap Between Web and Native
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            PWAs leverage cutting-edge web technologies to deliver app-like
            experiences that work seamlessly across all platforms.
          </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"
        >
          {features.map((feature, index) => {
            const IconComponent = feature.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="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 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-white mb-4">
                      {feature.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed">
                      {feature.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// PWA Development Process
const PWAProcess = () => {
  const steps = [
    {
      title: "Discovery & Strategy",
      description:
        "Comprehensive analysis of your business needs to determine the optimal PWA approach and feature set.",
      icon: Target,
    },
    {
      title: "UI/UX Design (Web-first, App-like)",
      description:
        "Creating responsive designs that feel native while maintaining web accessibility and usability standards.",
      icon: Palette,
    },
    {
      title: "PWA Development (Frontend + Backend)",
      description:
        "Building the PWA using modern web technologies with service workers, manifest, and offline capabilities.",
      icon: Code,
    },
    {
      title: "Testing & Optimization",
      description:
        "Rigorous testing across devices, browsers, and network conditions to ensure optimal performance.",
      icon: Bug,
    },
    {
      title: "Deployment & Support",
      description:
        "Launching your PWA with ongoing maintenance, updates, and performance monitoring.",
      icon: Rocket,
    },
  ];

  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">
            Our Agile Approach to PWA Development
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Our proven methodology ensures your PWA delivers exceptional user experiences through AI-powered design while meeting your business objectives.
          </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-card/20 backdrop-blur-md rounded-2xl border border-white/10 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-foreground mb-4">
                        {step.title}
                      </h3>
                      <p className="text-muted-foreground leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

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

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

// PWA Use Cases
const PWAUseCases = () => {
  const useCases = [
    {
      title: "eCommerce Stores",
      description:
        "Faster checkout processes and improved conversion rates with offline browsing capabilities.",
      icon: ShoppingBag,
      examples: [
        "Product Catalogs",
        "Shopping Carts",
        "Wishlist",
        "Order Tracking",
      ],
    },
    {
      title: "Content Platforms",
      description:
        "News, blogs, and media sites with offline access for improved user engagement.",
      icon: Newspaper,
      examples: ["News Sites", "Blogs", "Magazines", "Media Platforms"],
    },
    {
      title: "Event & Ticketing",
      description:
        "Seamless booking and information access with offline ticket storage and updates.",
      icon: Calendar,
      examples: [
        "Event Booking",
        "Ticket Management",
        "Venue Information",
        "Schedule Updates",
      ],
    },
    {
      title: "Startups & MVPs",
      description:
        "Rapid market entry with broad reach and cost-effective development approach.",
      icon: Rocket,
      examples: [
        "Prototype Testing",
        "Market Validation",
        "User Feedback",
        "Iterative Development",
      ],
    },
    {
      title: "Global Audience",
      description:
        "Perfect for businesses serving areas with unreliable internet connectivity.",
      icon: Globe,
      examples: [
        "Emerging Markets",
        "Rural Areas",
        "Travel Apps",
        "International Services",
      ],
    },
    {
      title: "Business Tools",
      description:
        "Productivity apps and business solutions with offline functionality.",
      icon: Briefcase,
      examples: [
        "CRM Systems",
        "Project Management",
        "Inventory",
        "Time Tracking",
      ],
    },
  ];

  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">
            When a PWA is the Right Choice for Your Business
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Progressive Web Apps excel in scenarios where our AI app development company delivers broad reach, cost-effectiveness, and offline capabilities through AI-powered features.
          </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"
        >
          {useCases.map((useCase, index) => {
            const IconComponent = useCase.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="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 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-white mb-4">
                      {useCase.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {useCase.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">
                        Key Examples:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {useCase.examples.map((example) => (
                          <Badge
                            key={example}
                            variant="secondary"
                            className="text-xs bg-accent/10 text-accent border-accent/20"
                          >
                            {example}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// PWA Tech Stack
const PWATechStack = () => {
  const technologies = [
    {
      name: "React",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
      category: "Frontend",
      color: "green",
    },
    {
      name: "Angular",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
      category: "Frontend",
      color: "red",
    },
    {
      name: "Vue.js",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
      category: "Frontend",
      color: "green",
    },
    {
      name: "JavaScript",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
      category: "Language",
      color: "blue",
    },
    {
      name: "TypeScript",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
      category: "Language",
      color: "blue",
    },
    {
      name: "HTML5",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg",
      category: "Markup",
      color: "blue",
    },
    {
      name: "CSS3",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg",
      category: "Styling",
      color: "blue",
    },
    {
      name: "Node.js",
      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
      category: "Backend",
      color: "green",
    },
  ];



  const pwaFeatures = [
    {
      name: "Service Workers",
      icon: Server,
      description: "Background processing and offline capabilities",
    },
    {
      name: "Web App Manifest",
      icon: Layout,
      description: "App-like appearance and behavior",
    },
    {
      name: "Lighthouse",
      icon: Zap,
      description: "PWA performance and quality auditing",
    },
    {
      name: "Push API",
      icon: Bell,
      description: "Real-time notifications and engagement",
    },
  ];

  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">
            Modern Web Technologies for Powerful PWA Experiences
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            We leverage cutting-edge web development technologies and PWA-specific APIs through AI-powered design to deliver exceptional AI mobile app experiences.
          </p>
        </motion.div>

        {/* Core Technologies */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
            Core Technologies
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {technologies.map((tech, index) => {
              // const IconComponent = tech.icon;
              const colorClasses = {
                blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
                orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
                green: "bg-green-500/20 text-green-400 border-green-500/30",
                red: "bg-red-500/20 text-red-400 border-red-500/30",
              };

              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, scale: 1.05 }}
                  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 p-4 text-center">
                    <div
                      className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
                        "bg-accent/20"
                        }`}
                    >
                      <ImageWithFallback
                        src={tech.logo}
                        alt={tech.name}
                        className="w-8 h-8 object-contain"
                      />
                    </div>

                    <h4 className="font-semibold text-white text-sm mb-1">
                      {tech.name}
                    </h4>
                    <p className="text-xs text-gray-400">{tech.category}</p>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </motion.div>

        {/* PWA-Specific Features */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
        >
          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
            PWA-Specific Features
          </h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {pwaFeatures.map((feature, index) => {
              const IconComponent = feature.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="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center h-full">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h4 className="font-semibold text-foreground mb-2">
                      {feature.name}
                    </h4>
                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {feature.description}
                    </p>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// PWA Case Studies Section - SUCCESS STORIES
const PWASuccessStories = () => {
  const caseStudies = [
    {
      id: 1,
      title: "TradersCircuit",
      client: "TradersCircuit",
      subtitle: "Investment Platform PWA with Real-Time Trading",
      industry: "FinTech",
      services: [
        "PWA Development",
        "Real-Time Trading",
        "Service Workers",
        "Push Notifications",
      ],
      technologies: ["React", "Service Workers", "WebSocket", "Push API"],
      image: tradersCircuitImage,
      results: [
        "90% faster load times vs native",
        "Offline trading capabilities",
        "85% home screen installation rate",
        "Real-time push notifications",
      ],
      description:
        "Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
      duration: "8 months",
      teamSize: "12 experts",
    },
    {
      id: 2,
      title: "Prosperty",
      client: "Prosperty Infra",
      subtitle: "Digital Real Estate PWA Platform",
      industry: "Real Estate",
      services: [
        "PWA Development",
        "Property Listings",
        "Offline Browsing",
        "Investment Tools",
      ],
      technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
      image: prospertyImage,
      results: [
        "73% installation rate success",
        "38% reduction in bounce rate",
        "52% increase in property inquiries",
        "Full offline property browsing",
      ],
      description:
        "Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
      duration: "6 months",
      teamSize: "10 experts",
    },
    {
      id: 3,
      title: "GoodTimes",
      client: "GoodTimes Ltd",
      subtitle: "Event Discovery & Booking PWA Platform",
      industry: "Events & Lifestyle",
      services: [
        "PWA Development",
        "Event Booking",
        "Social Features",
        "Payment Integration",
      ],
      technologies: [
        "Angular",
        "Service Workers",
        "Web Share API",
        "Payment Request",
      ],
      image: goodTimesImage,
      results: [
        "92% mobile user engagement",
        "30-second booking process",
        "67% increase in repeat users",
        "Cross-platform compatibility",
      ],
      description:
        "Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
      duration: "5 months",
      teamSize: "9 experts",
    },
  ];

  const getIndustryIcon = (industry: string) => {
    const icons = {
      FinTech: Building,
      "Real Estate": Building,
      "Events & Lifestyle": Calendar,
    };
    return icons[industry as keyof typeof icons] || Building;
  };

  const navigate = useNavigate();

  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">
            Successful Progressive Web Apps by WDI
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            See how our AI mobile application developers have transformed businesses with PWA solutions that deliver exceptional user experiences through AI app development company expertise, offline capabilities, and measurable results across industries.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-3 gap-8">
          {caseStudies.map((study, index) => {
            const IndustryIcon = getIndustryIcon(study.industry);
            return (
              <motion.div
                key={study.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group cursor-pointer"
                onClick={() => {
                  if (study.title === "TradersCircuit") {
                    navigate("/projects/traderscircuit");
                  } else if (study.title === "Prosperty") {
                    navigate("/projects/prosperty");
                  } else if (study.title === "GoodTimes") {
                    navigate("/projects/goodtimes");
                  }
                }}
              >
                <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">
                  <div className="aspect-video overflow-hidden relative bg-black/20">
                    <img
                      src={study.image}
                      alt={study.title}
                      className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
                    />
                  </div>

                  <CardContent className="p-6">
                    <div className="flex items-center gap-2 mb-3">
                      <IndustryIcon className="w-4 h-4 text-accent" />
                      <Badge
                        variant="secondary"
                        className="bg-accent/20 text-accent border-none"
                      >
                        {study.industry}
                      </Badge>
                    </div>

                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors duration-300">
                      {study.title}
                    </h3>

                    <p className="text-sm text-gray-400 mb-3">{study.client}</p>
                    <p className="text-gray-300 mb-4 line-clamp-3 text-sm">
                      {study.description}
                    </p>

                    <div className="space-y-3 mb-4">
                      <div className="flex flex-wrap gap-1">
                        {study.services.slice(0, 3).map((service) => (
                          <Badge
                            key={service}
                            variant="outline"
                            className="border-gray-600 text-gray-300 text-xs"
                          >
                            {service}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    <div className="space-y-2 mb-4">
                      {study.results.slice(0, 2).map((result, resultIndex) => (
                        <div
                          key={resultIndex}
                          className="flex items-center gap-2"
                        >
                          <TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
                          <p className="text-xs text-gray-400">{result}</p>
                        </div>
                      ))}
                    </div>

                    <div className="flex items-center justify-between pt-4 border-t border-gray-800">
                      <div className="flex items-center gap-3 text-xs text-gray-400">
                        <div className="flex items-center gap-1">
                          <Clock className="w-3 h-3" />
                          {study.duration}
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="w-3 h-3" />
                          {study.teamSize}
                        </div>
                      </div>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-accent hover:bg-accent/10 p-0"
                        onClick={(e) => {
                          e.stopPropagation();
                          if (study.title === "TradersCircuit") {
                            navigate("/projects/traderscircuit");
                          } else if (study.title === "Prosperty") {
                            navigate("/projects/prosperty");
                          } else if (study.title === "GoodTimes") {
                            navigate("/projects/goodtimes");
                          }
                        }}
                      >
                        View Details
                        <ArrowRight className="ml-1 w-3 h-3" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Mid-Page CTA
const PWAInlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <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">
                <Globe className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  PWA Power
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Explore the Power of{" "}
              <span className="text-accent">PWAs for Your Business</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Unlock a broader audience and enhanced user engagement with a
              progressive web app that works everywhere.
            </p>

            <ShimmerButton
              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Eye className="w-6 h-6 flex-shrink-0" />
                <span>Get a Free PWA Assessment</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// PWA FAQs
const PWAFAQs = () => {
  const faqs = [
    {
      question: "Are PWAs suitable for all types of apps?",
      answer:
        "PWAs are ideal for content-heavy apps, eCommerce, news platforms, and business tools. They're perfect when you need broad reach and offline capabilities. However, for apps requiring intensive device integration (like camera apps with advanced features) or high-performance gaming, native apps might be better suited.",
    },
    {
      question: "How do PWAs compare to native apps in terms of features?",
      answer:
        "PWAs offer many native-like features including offline functionality, push notifications, and home screen installation. While they can't access all device features that native apps can, they provide 80-90% of native functionality with significantly broader reach and lower development costs.",
    },
    {
      question: "Do PWAs show up in app stores?",
      answer:
        "Yes! PWAs can be submitted to app stores including Google Play Store and Microsoft Store. Apple's App Store also accepts PWAs with some additional requirements. This gives you the best of both worlds - web distribution and app store presence.",
    },
    {
      question: "What is the maintenance for a PWA?",
      answer:
        "PWA maintenance is generally simpler than native apps since you maintain one codebase. Updates are pushed directly to users like web updates, but you'll need to manage service worker updates, cache strategies, and ensure compatibility across browsers and devices.",
    },
  ];

  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">
            Frequently Asked Questions
          </h2>
          <p className="text-xl text-muted-foreground leading-relaxed">
            Common questions about Progressive Web 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="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-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-foreground">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};

// Final CTA Section
const PWAFinalCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 relative overflow-hidden bg-black">
      <div className="container mx-auto px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="mb-8"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
              <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                <Globe className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  Next Generation Web
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6 leading-tight">
            Build Your Next Generation Web Experience with a{" "}
            <span className="text-accent">PWA</span>
          </h2>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            WDI helps you harness the speed, reliability, and engagement of PWAs through AI-powered design for your audience.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <ShimmerButton
              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Rocket className="w-6 h-6 flex-shrink-0" />
                <span>Start Your PWA Project</span>
              </div>
            </ShimmerButton>

            <p className="text-gray-400 text-sm">
              Expert consultation • Modern web technologies • Ongoing support
            </p>
          </motion.div>
        </motion.div>
      </div>

      {/* Background Decorative Elements */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
      </div>
    </section>
  );
};

// Main PWA Development Page
export const PWADevelopment = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="bg-black">
        <PWAHeroWithCTA />
      </section>

      {/* PWA Benefits */}
      <section className="bg-background">
        <PWABenefits />
      </section>

      {/* Case Studies */}
      <section className="bg-card">
        <PWASuccessStories />
      </section>

      {/* How PWAs Work */}
      {/* <section className="bg-card">
        <HowPWAsWork />
      </section> */}

      {/* Development Process */}
      <section className="bg-background">
        <PWAProcess />
      </section>

      {/* Use Cases */}
      <section className="bg-card">
        <PWAUseCases />
      </section>

      {/* Tech Stack */}
      <section className="bg-background">
        <PWATechStack />
      </section>

      <HireDeveloperSection
        title="Augment Your Team with Top PWA Developers"
        description="Build fast, installable, and offline-first Progressive Web Apps through our AI app development company that feel like AI mobile apps."
        buttonText="Hire PWA Developers"
        buttonLink="/hire-talent/pwa-developers"
        developerTypes={[
          {
            title: "Frontend PWA Developer",
            experience: "4+ Years",
            skills: ["React.js", "Next.js", "Service Workers", "Lighthouse"],
            specialties: "Responsive UI, App-like Interactions",
          },
          {
            title: "Backend for PWA",
            experience: "5+ Years",
            skills: ["Node.js", "Express", "MongoDB", "Firebase"],
            specialties: "API Optimization, Offline Support",
          },
          {
            title: "PWA Architect",
            experience: "6+ Years",
            skills: ["Workbox", "Webpack", "Web App Manifest", "CI/CD"],
            specialties: "PWA Strategy, Cross-Browser Support",
          },
        ]}
      />


      {/* Mid-Page CTA */}
      {/* <section className="bg-background">
        <PWAInlineCTA />
      </section> */}

      {/* FAQs */}
      {/* <section className="bg-background">
        <PWAFAQs />
      </section> */}

      {/* Final CTA */}
      <section className="bg-card">
        <PWAFinalCTA />
      </section>

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