import { motion } from "framer-motion";
import {
  ArrowRight,
  BarChart3,
  CheckCircle,
  MousePointer as ClickIcon,
  Code2,
  DollarSign,
  Eye,
  Figma,
  Globe,
  Grid,
  Hand,
  Menu,
  MessageCircle,
  MousePointer2,
  Palette,
  PenTool,
  PlayCircle,
  RefreshCcw,
  Rocket,
  Route,
  Search,
  Settings,
  Shield,
  Smartphone,
  Sparkles,
  TestTube,
  Users,
  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 { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";

// Clickable Prototypes Hero Section
const PrototypesHeroWithCTA = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Prototypes | Mobile App Development Visualization | WDI</title>
        <meta
          name="description"
          content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Prototypes | Mobile App Development Visualization | WDI" />
        <meta
          property="og:description"
          content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
        />
        <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="Prototypes | Mobile App Development Visualization | WDI" />
        <meta
          name="twitter:description"
          content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
        />
        <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"
          >
            {/* Prototypes 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">
                Design & Experience
              </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">
                Interactive Clickable Prototypes
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Visualize and test your digital product idea before development,
                ensuring flawless user flows and gathering invaluable feedback.
              </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={() => navigateTo("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <PlayCircle className="w-5 h-5 flex-shrink-0" />
                  <span>Test Your Idea Now</span>
                </div>
              </ShimmerButton>
              <a
                href="#case-studies"
                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>Request a Prototype Demo</span>
              </a>
            </motion.div>
          </motion.div>

          {/* Right side with Prototype Interaction Visualization */}
          <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"
          >
            {/* Hand Holding Tablet with Prototype */}
            <div className="relative w-full max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative"
              >
                {/* Tablet Device with Prototype */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 0.6 }}
                  className="relative bg-gray-800 rounded-2xl p-4 mx-auto max-w-md shadow-2xl"
                >
                  {/* Tablet Frame */}
                  <div className="bg-black rounded-xl p-6 relative overflow-hidden">
                    {/* Status Bar */}
                    <div className="flex items-center justify-between mb-4 text-white/70 text-xs">
                      <div className="flex items-center gap-1">
                        <div className="w-1 h-1 bg-white/50 rounded-full"></div>
                        <div className="w-1 h-1 bg-white/50 rounded-full"></div>
                        <div className="w-1 h-1 bg-white/50 rounded-full"></div>
                      </div>
                      <span>9:41 AM</span>
                      <div className="flex items-center gap-1">
                        <div className="w-3 h-2 bg-white/50 rounded-sm"></div>
                        <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                      </div>
                    </div>

                    {/* Prototype Interface */}
                    <div className="space-y-4">
                      {/* Header */}
                      <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 1.0 }}
                        className="h-12 bg-gradient-to-r from-accent to-purple-500 rounded-lg flex items-center px-4"
                      >
                        <div className="w-6 h-6 bg-white/30 rounded flex items-center justify-center">
                          <Menu className="w-4 h-4 text-white" />
                        </div>
                        <div className="flex-1 text-center">
                          <div className="text-white font-medium">
                            App Prototype
                          </div>
                        </div>
                        <div className="w-6 h-6 bg-white/30 rounded flex items-center justify-center">
                          <Search className="w-4 h-4 text-white" />
                        </div>
                      </motion.div>

                      {/* Interactive Elements */}
                      <div className="space-y-3">
                        <motion.div
                          initial={{ opacity: 0, x: -10 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.6, delay: 1.2 }}
                          className="h-16 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30 p-4 flex items-center gap-3 cursor-pointer hover:scale-105 transition-transform"
                        >
                          <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                            <Users className="w-4 h-4 text-white" />
                          </div>
                          <div className="flex-1">
                            <div className="text-white text-sm font-medium">
                              User Dashboard
                            </div>
                            <div className="text-gray-400 text-xs">
                              View analytics
                            </div>
                          </div>
                          <ArrowRight className="w-4 h-4 text-gray-400" />
                        </motion.div>

                        <motion.div
                          initial={{ opacity: 0, x: -10 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.6, delay: 1.4 }}
                          className="h-16 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30 p-4 flex items-center gap-3 cursor-pointer hover:scale-105 transition-transform"
                        >
                          <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
                            <Settings className="w-4 h-4 text-white" />
                          </div>
                          <div className="flex-1">
                            <div className="text-white text-sm font-medium">
                              Settings
                            </div>
                            <div className="text-gray-400 text-xs">
                              Configure preferences
                            </div>
                          </div>
                          <ArrowRight className="w-4 h-4 text-gray-400" />
                        </motion.div>

                        <motion.div
                          initial={{ opacity: 0, x: -10 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.6, delay: 1.6 }}
                          className="h-16 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-lg border border-purple-500/30 p-4 flex items-center gap-3 cursor-pointer hover:scale-105 transition-transform"
                        >
                          <div className="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center">
                            <BarChart3 className="w-4 h-4 text-white" />
                          </div>
                          <div className="flex-1">
                            <div className="text-white text-sm font-medium">
                              Reports
                            </div>
                            <div className="text-gray-400 text-xs">
                              Generate insights
                            </div>
                          </div>
                          <ArrowRight className="w-4 h-4 text-gray-400" />
                        </motion.div>
                      </div>

                      {/* CTA Button */}
                      <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 1.8 }}
                        className="pt-4"
                      >
                        <button className="w-full h-12 bg-gradient-to-r from-accent to-accent/80 rounded-lg text-white font-medium hover:from-accent/90 hover:to-accent/70 transition-all">
                          Get Started
                        </button>
                      </motion.div>
                    </div>
                  </div>

                  {/* Hand Holding Effect */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.8, delay: 2.0 }}
                    className="absolute -bottom-8 -right-8 transform rotate-12"
                  >
                    <div className="w-16 h-16 bg-gradient-to-br from-accent/20 to-purple-500/20 rounded-full flex items-center justify-center border border-accent/30">
                      <Hand className="w-8 h-8 text-accent" />
                    </div>
                  </motion.div>
                </motion.div>

                {/* User Flow Arrows */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 2.2 }}
                  className="absolute -top-8 -left-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-accent text-sm">
                    <Route className="w-4 h-4" />
                    <span>User Flow</span>
                  </div>
                  <div className="space-y-1">
                    <motion.div
                      animate={{ x: [0, 10, 0] }}
                      transition={{ duration: 2, repeat: Infinity }}
                      className="w-8 h-0.5 bg-accent rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ x: [0, 15, 0] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
                      className="w-6 h-0.5 bg-blue-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ x: [0, 12, 0] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 0.6 }}
                      className="w-10 h-0.5 bg-green-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* Play Button Overlay */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 2.4 }}
                  className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-20 h-20 bg-accent/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl cursor-pointer hover:scale-110 transition-transform">
                    <PlayCircle className="w-10 h-10 text-white" />
                  </div>
                </motion.div>
              </motion.div>

              {/* Feature Badges */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 2.6 }}
                className="flex justify-center gap-4 flex-wrap mt-8"
              >
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <ClickIcon className="w-3 h-3 mr-1" />
                  Interactive
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <TestTube className="w-3 h-3 mr-1" />
                  Testable
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Zap className="w-3 h-3 mr-1" />
                  Rapid
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of Clickable Prototypes
const PrototypeBenefits = () => {
  const benefits = [
    {
      icon: CheckCircle,
      title: "Validate Ideas Early",
      description:
        "Test concepts with real users before significant investment.",
    },
    {
      icon: Zap,
      title: "Iterate Rapidly",
      description: "Quick, cost-effective design changes based on feedback.",
    },
    {
      icon: Route,
      title: "Clarify User Flows",
      description: "Ensure intuitive navigation and interaction.",
    },
    {
      icon: Users,
      title: "Stakeholder Alignment",
      description: "Provide a tangible vision for all parties involved.",
    },
    {
      icon: Shield,
      title: "Reduce Development Risk",
      description: "Identify and fix issues at the design stage.",
    },
    {
      icon: DollarSign,
      title: "Save Costs",
      description: "Avoid expensive rework by getting it right early.",
    },
  ];

  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 Prototype Before You Build?
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="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>
  );
};

// Prototyping Process
const PrototypingProcess = () => {
  const steps = [
    {
      title: "Concept & Wireframing",
      description:
        "Starting with basic sketches and wireframes to establish the foundation and core functionality of your digital product idea.",
      icon: Grid,
    },
    {
      title: "Design Screens",
      description:
        "Creating detailed visual designs for each screen, incorporating your brand identity, user interface elements, and visual hierarchy.",
      icon: Palette,
    },
    {
      title: "Prototype Assembly (Interactions)",
      description:
        "Connecting screens with interactive elements, animations, and transitions to create a realistic, clickable user experience.",
      icon: MousePointer2,
    },
    {
      title: "Usability Testing",
      description:
        "Testing the prototype with real users to gather feedback on usability, navigation flow, and overall user experience effectiveness.",
      icon: TestTube,
    },
    {
      title: "Feedback & Refinement",
      description:
        "Iterating on the design based on user feedback and stakeholder input to perfect the user experience before development begins.",
      icon: RefreshCcw,
    },
  ];

  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 Process for Bringing Your Idea to Life
          </h2>
        </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>
  );
};

// Prototyping Services
const PrototypingServices = () => {
  const services = [
    {
      title: "Low-Fidelity Prototypes",
      description: "Quick, basic functional mockups.",
      icon: Grid,
      features: [
        "Wireframe-based",
        "Core Functionality",
        "Rapid Testing",
        "Concept Validation",
      ],
    },
    {
      title: "High-Fidelity Prototypes",
      description: "Pixel-perfect, interactive simulations.",
      icon: Palette,
      features: [
        "Realistic Design",
        "Brand Integration",
        "Detailed Interactions",
        "Production-Ready",
      ],
    },
    {
      title: "User Flow Prototyping",
      description: "Mapping out complete user journeys.",
      icon: Route,
      features: [
        "Journey Mapping",
        "Flow Optimization",
        "Path Analysis",
        "Navigation Testing",
      ],
    },
    {
      title: "Micro-Interaction Prototyping",
      description: "Detailing specific animations and transitions.",
      icon: Sparkles,
      features: [
        "Animation Design",
        "Transition Effects",
        "Hover States",
        "Loading States",
      ],
    },
    {
      title: "Prototype for User Testing",
      description: "Creating testable versions for user feedback.",
      icon: TestTube,
      features: [
        "Test-Ready",
        "Feedback Collection",
        "Analytics Integration",
        "A/B Testing",
      ],
    },
    {
      title: "Prototype for Investor Demos",
      description: "Impressive, interactive showcases for fundraising.",
      icon: Rocket,
      features: [
        "Polished Presentation",
        "Key Features",
        "Compelling Story",
        "Investment-Ready",
      ],
    },
    {
      title: "Prototype for Developer Handoff",
      description: "Clear interactive specifications for engineering.",
      icon: Code2,
      features: [
        "Technical Specs",
        "Interaction Details",
        "Component Library",
        "Development Guide",
      ],
    },
  ];

  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 Specialized Prototyping Capabilities
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {services.slice(0, 6).map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="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">
                      {service.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {service.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">
                        Key Features:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {service.features.map((feature) => (
                          <Badge
                            key={feature}
                            variant="secondary"
                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Last service card */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="max-w-md mx-auto mt-8"
        >
          {services.slice(6).map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div
                key={index + 6}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 6) * 0.1 }}
                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">
                      {service.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {service.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">
                        Key Features:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {service.features.map((feature) => (
                          <Badge
                            key={feature}
                            variant="secondary"
                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Prototyping Tools
const PrototypingTools = () => {
  const tools = [
    {
      name: "Figma",
      icon: Figma,
      category: "Design & Prototype",
      color: "orange",
    },
    {
      name: "Adobe XD",
      icon: Palette,
      category: "Design & Prototype",
      color: "purple",
    },
    { name: "Sketch", icon: PenTool, category: "Design Tool", color: "blue" },
    { name: "InVision", icon: Eye, category: "Prototyping", color: "pink" },
    {
      name: "Principle",
      icon: PlayCircle,
      category: "Animation",
      color: "green",
    },
    {
      name: "ProtoPie",
      icon: MousePointer2,
      category: "Advanced Prototyping",
      color: "red",
    },
  ];

  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">
            Prototyping Tools We Use
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Utilizing industry-leading tools to create realistic and testable
            prototypes.
          </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 grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
        >
          {tools.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 text-accent border-accent/30"
                        }`}
                    >
                      <IconComponent className="w-6 h-6" />
                    </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>
              );
            })}
        </motion.div>
      </div>
    </section>
  );
};

// Prototyping Case Studies
const PrototypingCaseStudies = () => {
  const caseStudies = [
    {
      title: "SaaS Dashboard Prototype Validation",
      client: "TechStart Inc.",
      description:
        "Created interactive prototype that validated user workflows before development, saving 40% in development time and preventing major UX issues.",
      image:
        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
      results: "40% time saved, UX issues prevented",
      gradient: "from-blue-500/20 to-cyan-500/20",
      features: "Dashboard Prototype, User Testing, Workflow Validation",
    },
    {
      title: "Mobile App Investor Demo",
      client: "HealthTech Startup",
      description:
        "Developed high-fidelity clickable prototype that helped secure $2M funding by demonstrating app functionality and user experience to investors.",
      image:
        "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
      results: "$2M funding secured",
      gradient: "from-green-500/20 to-emerald-500/20",
      features: "Mobile Prototype, Investor Demo, High-Fidelity Design",
    },
    {
      title: "E-commerce Flow Optimization",
      client: "Retail Solutions",
      description:
        "Prototyped new checkout flow that improved conversion rates by 35% when implemented, validated through extensive user testing with the prototype.",
      image:
        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
      results: "35% conversion rate improvement",
      gradient: "from-purple-500/20 to-pink-500/20",
      features: "Flow Optimization, User Testing, Conversion Improvement",
    },
  ];

  return (
    <section className="py-32 bg-black" id="case-studies">
      <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-8">
            Prototypes That Led to Successful Products
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {caseStudies.map((study, index) => (
            <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: -8, scale: 1.02 }}
              className="group cursor-pointer"
            >
              <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 flex flex-col h-full">
                  <div className="p-8 pb-6">
                    <div className="flex items-start gap-4 mb-6">
                      <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                        <PlayCircle className="w-6 h-6 text-accent" />
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                          {study.client}
                        </div>
                        <Badge
                          variant="secondary"
                          className="text-xs bg-accent/20 text-accent border-accent/30"
                        >
                          {study.results}
                        </Badge>
                      </div>
                    </div>

                    <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                      {study.title}
                    </h3>
                  </div>

                  <div className="px-8 pb-6 flex-1">
                    <div
                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
                    >
                      <ImageWithFallback
                        src={study.image}
                        alt={study.title}
                        className="w-full h-48 object-cover rounded-lg shadow-lg"
                      />
                    </div>
                  </div>

                  <div className="px-8 pb-6">
                    <p className="text-gray-300 text-sm leading-relaxed mb-4">
                      {study.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
                        Key Features:
                      </h4>
                      <p className="text-xs text-gray-400">{study.features}</p>
                    </div>
                  </div>

                  <div className="p-8 pt-0 mt-auto">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                    >
                      <span className="text-sm font-medium">
                        VIEW CASE STUDY
                      </span>
                      <ArrowRight className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

// Mid-Page CTA
const PrototypingInlineCTA = () => {
  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">
                <PlayCircle className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Clickable Prototyping
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Curious How a Prototype Can{" "}
              <span className="text-accent">Save You Time and Money?</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Let's discuss your idea and how a clickable prototype can bring it
              to life.
            </p>

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

// Hire UI/UX Designers for Prototypes
const HirePrototypeDesigners = () => {
  const designerTypes = [
    {
      title: "Prototype Specialists",
      description: "Experts in creating interactive, testable prototypes",
      icon: PlayCircle,
      skills: [
        "Interactive Design",
        "User Flow Mapping",
        "Prototype Testing",
        "Stakeholder Demos",
      ],
    },
    {
      title: "UX Researchers",
      description: "Specialists in validating prototypes with users",
      icon: TestTube,
      skills: [
        "User Testing",
        "Feedback Analysis",
        "Usability Studies",
        "Research Design",
      ],
    },
    {
      title: "Interaction Designers",
      description: "Crafting engaging micro-interactions and animations",
      icon: Sparkles,
      skills: [
        "Micro-interactions",
        "Animation Design",
        "Transition Effects",
        "Interactive States",
      ],
    },
    {
      title: "Visual Designers",
      description: "Creating high-fidelity, pixel-perfect prototypes",
      icon: Palette,
      skills: [
        "Visual Design",
        "Brand Integration",
        "High-Fidelity Mockups",
        "Design Systems",
      ],
    },
    {
      title: "Mobile Prototype Designers",
      description: "Specialists in mobile app prototyping",
      icon: Smartphone,
      skills: [
        "Mobile UX",
        "Touch Interactions",
        "Responsive Design",
        "App Store Guidelines",
      ],
    },
    {
      title: "Web Prototype Designers",
      description: "Experts in web application prototyping",
      icon: Globe,
      skills: [
        "Web UX",
        "Responsive Prototypes",
        "Browser Compatibility",
        "Web Standards",
      ],
    },
  ];

  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">
            Need Expertise in Interactive Prototyping?
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Our designers specialize in creating realistic and testable
            prototypes for web and mobile applications.
          </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 mb-12"
        >
          {designerTypes.map((type, index) => {
            const IconComponent = type.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">
                      {type.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed mb-6">
                      {type.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-white">
                        Core Skills:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {type.skills.map((skill) => (
                          <Badge
                            key={skill}
                            variant="secondary"
                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
                          >
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center space-y-6"
        >
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <ShimmerButton className="text-lg px-8 py-4"
              onClick={() => navigateTo("/hire-talent/clickable-prototypes-developers")}
            >
              <div className="inline-flex items-center gap-2">
                <Users className="w-5 h-5 flex-shrink-0" />
                <span>Hire UI/UX Designers</span>
              </div>
            </ShimmerButton>
            <Button
              variant="outline"
              size="lg"
              className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
            >
              <div className="inline-flex items-center gap-2">
                <Eye className="w-5 h-5 flex-shrink-0" />
                <span>View Portfolios</span>
              </div>
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Prototyping FAQs
const PrototypingFAQs = () => {
  const faqs = [
    {
      question:
        "What is the difference between a wireframe, mockup, and prototype?",
      answer:
        "A wireframe is a basic structural blueprint showing layout and functionality without visual design. A mockup is a static high-fidelity visual representation with colors, typography, and branding. A prototype is an interactive simulation that allows users to click through and experience the actual user flow. Wireframes focus on structure, mockups on appearance, and prototypes on interaction and user experience validation.",
    },
    {
      question: "How long does it take to create a clickable prototype?",
      answer:
        "Timeline depends on complexity and fidelity level. A low-fidelity prototype can take 1-2 weeks, while high-fidelity prototypes typically require 2-4 weeks. Factors affecting timeline include number of screens, complexity of interactions, level of detail required, and rounds of feedback and iteration. We provide detailed project timelines during the initial consultation based on your specific requirements.",
    },
    {
      question: "Can a prototype be used for user testing?",
      answer:
        "Absolutely! Prototypes are ideal for user testing as they provide a realistic experience without full development costs. We create test-ready prototypes that allow users to interact with key features and workflows. This enables us to gather valuable feedback on usability, navigation, and user satisfaction before development begins, significantly reducing the risk of costly changes later in the process.",
    },
    {
      question: "What information do you need to start a prototype?",
      answer:
        "To begin prototyping, we need your project goals, target audience information, key features and functionality requirements, user flow descriptions, and any existing brand guidelines or visual references. If available, competitor examples, user personas, and business requirements help us create more targeted prototypes. We'll conduct a discovery session to gather all necessary information and ensure the prototype aligns with your vision and objectives.",
    },
  ];

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

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto"
        >
          <Accordion type="single" collapsible className="space-y-8">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-white">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};

// Final CTA Section
const PrototypingFinalCTA = () => {
  return (
    <section className="py-20 relative overflow-hidden">
      <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-background rounded-full px-6 py-3 flex items-center gap-2">
                <PlayCircle className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Clickable Prototypes
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Validate Your Vision with a{" "}
            <span className="text-accent">WDI Clickable Prototype</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-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            Reduce risk and ensure product-market fit by visualizing and testing
            your ideas before coding begins.
          </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={() => navigateTo("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Rocket className="w-6 h-6 flex-shrink-0" />
                <span>Start Your Prototyping Project</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Interactive Prototypes • User Testing • Rapid Iteration
            </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 Clickable Prototypes Page
export const ClickablePrototypes = () => {
  return (
    <div className="dark min-h-screen">
      <Navigation />

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

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

      {/* Prototyping Process */}
      <section className="bg-card">
        <PrototypingProcess />
      </section>

      {/* Services */}
      <section className="bg-background">
        <PrototypingServices />
      </section>

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

      {/* Case Studies */}
      <section className="bg-background">
        <PrototypingCaseStudies />
      </section>

      {/* Mid-Page CTA */}
      <section className="bg-card">
        <PrototypingInlineCTA />
      </section>

      {/* Hire Designers */}
      <section className="bg-background">
        <HirePrototypeDesigners />
      </section>

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

      {/* Final CTA */}
      <section className="bg-background">
        <PrototypingFinalCTA />
      </section>

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