import UIUXDesignAnimation from "@/components/UIUXDesignAnimation";
import { motion } from "framer-motion";
import {
  Calendar,
  Eye,
  Heart, Layers,
  Layout,
  Lightbulb,
  MousePointer,
  Palette, PenTool,
  Rocket,
  TrendingUp,
  UserPlus,
  Users
} from "lucide-react";
import { navigateTo } from "../App";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { ProcessSection } from "../components/ProcessSection";
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";

// Enhanced Hero Section
const HeroWithCTA = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <div className="container mx-auto px-6 lg:px-8 max-w-7xl">
        <div className="grid lg:grid-cols-2 gap-8 lg: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 z-10"
          >
            {/* Design & Experience Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
                <PenTool className="w-4 h-4 text-[#E5195E]" />
                <span className="text-white/90 text-sm font-medium">Design & Experience</span>
              </div>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
                <span className="text-white">Exceptional </span>
                <span className="text-[#E5195E]">Design & User Experience</span>
                <span className="text-white"> Solutions</span>
              </h1>
              
              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
              </p>
            </div>

            {/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
            
            {/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="flex flex-col sm:flex-row gap-4 pt-4"
            >
              <ShimmerButton 
                className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300" 
                onClick={() => navigateTo('/start-a-project')}
              >
                <div className="inline-flex items-center gap-2">
                  <Calendar className="w-5 h-5 flex-shrink-0" />
                  <span>Design Consultation</span>
                </div>
              </ShimmerButton>
              <Button
                variant="secondary"
                className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
                onClick={() => navigateTo('/case-studies')}
              >
                <Eye className="w-5 h-5 flex-shrink-0" />
                <span>View Design Portfolio</span>
              </Button>
            </motion.div>
          </motion.div>
          
          {/* Right side with Custom UI/UX Design Animation - METRICS REMOVED, EXPANDED CONTAINER */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex items-center justify-center order-first lg:order-last"
          >
            {/* Design Animation Container - EXPANDED TO FILL SPACE PREVIOUSLY OCCUPIED BY METRICS */}
            <div className="w-full h-[500px] md:h-[600px] lg:h-[700px] max-w-full relative overflow-hidden">
              {/* Animated Background Elements */}
              <div className="absolute inset-0 overflow-hidden rounded-xl">
                <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-pink-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
                <div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
              </div>
              
              {/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="w-full h-full scale-105 transform-gpu">
                  <UIUXDesignAnimation />
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Enhanced Horizontal Tag Scroller with Design Specialties
const HorizontalTagScroller = () => {
  const specialties = [
    { name: "UI/UX Design", icon: PenTool, color: "text-pink-400" },
    { name: "User Research", icon: Users, color: "text-blue-400" },
    { name: "Prototyping", icon: MousePointer, color: "text-green-400" },
    { name: "Design Systems", icon: Layers, color: "text-purple-400" },
    { name: "Usability Testing", icon: Eye, color: "text-cyan-400" },
    { name: "Brand Design", icon: Palette, color: "text-orange-400" }
  ];

  return (
    <section className="py-32 bg-background">
      <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 mb-8">
            <span className="text-foreground">Our </span>
            <span className="text-[#E5195E]">Design Specialties</span>
            <span className="text-foreground"> & Expertise</span>
          </h2>
          <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
            Comprehensive design services that create meaningful user experiences and drive business results.
          </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="relative overflow-hidden"
        >
          <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
          <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
          
          <div className="flex animate-marquee hover:animate-marquee-paused">
            {/* First set */}
            {specialties.map((specialty, index) => {
              const IconComponent = specialty.icon;
              return (
                <motion.div
                  key={`first-${specialty.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="group flex-shrink-0 mx-3"
                >
                  <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div className={`w-8 h-8 flex items-center justify-center ${specialty.color}`}>
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {specialty.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}
            
            {/* Second and third sets for seamless loop */}
            {[...specialties, ...specialties].map((specialty, index) => {
              const IconComponent = specialty.icon;
              return (
                <motion.div
                  key={`loop-${specialty.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: (index + specialties.length) * 0.1 }}
                  viewport={{ once: true }}
                  className="group flex-shrink-0 mx-3"
                >
                  <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div className={`w-8 h-8 flex items-center justify-center ${specialty.color}`}>
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {specialty.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Why Choose WDI Section
const SideBySideContentWithIcons = () => {
  const advantages = [
    {
      id: "research",
      title: "Research-Driven Design",
      icon: Users
    },
    {
      id: "conversion", 
      title: "Conversion Optimization",
      icon: TrendingUp
    },
    {
      id: "accessibility",
      title: "Accessibility Focus",
      icon: Heart
    },
    {
      id: "testing",
      title: "Usability Testing",
      icon: Eye
    },
    {
      id: "systems",
      title: "Design Systems",
      icon: Layers
    }
  ];

  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-16"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold leading-tight mb-6">
            <span className="text-white">Why Choose </span>
            <span className="text-[#E5195E]">WDI</span>
            <span className="text-white"> for Design</span>
          </h2>
          
          <p className="text-2xl text-gray-300 leading-relaxed">
            User-centered design that drives measurable business results.
          </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-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
        >
          {advantages.map((advantage, index) => {
            const IconComponent = advantage.icon;

            return (
              <motion.div
                key={advantage.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="group cursor-pointer"
              >
                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
                  <CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
                    <div className="mb-6">
                      <IconComponent className="w-10 h-10 text-accent mx-auto" />
                    </div>
                    
                    <h3 className="text-lg font-semibold text-white leading-tight">
                      {advantage.title}
                    </h3>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Service Categories Grid
const TabbedServiceDisplay = () => {
  const services = [
    {
      title: "UI/UX Design",
      icon: PenTool,
      description: "Beautiful, intuitive interfaces that enhance user experience.",
      link: "/services/ui-ux-design"
    },
    {
      title: "Clickable Prototypes", 
      icon: MousePointer,
      description: "Interactive prototypes to validate concepts before development.",
      link: "/services/clickable-prototypes"
    },
    {
      title: "Design Thinking Workshops",
      icon: Lightbulb,
      description: "Collaborative workshops to solve complex design challenges.",
      link: "/services/design-thinking-workshops"
    },
    {
      title: "User Research & Testing",
      icon: Users,
      description: "Data-driven insights to inform design decisions.",
      link: "/services/user-research-testing"
    },
    {
      title: "Design Systems",
      icon: Layers,
      description: "Scalable design systems for consistent user experiences.",
      link: "/services/ui-ux-design"
    },
    {
      title: "Brand & Visual Identity",
      icon: Palette,
      description: "Compelling brand identities that resonate with your audience.",
      link: "/services/ui-ux-design"
    }
  ];

  return (
    <section className="py-32 bg-background">
      <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">
            Design & Experience Services
          </h2>
          <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
            Comprehensive design services that create meaningful connections between users and digital products.
          </p>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group cursor-pointer"
                onClick={() => navigateTo(service.link)}
              >
                <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                  <div className="flex flex-col items-start space-y-6">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-4">
                        {service.title}
                      </h3>
                      <p className="text-gray-400 leading-relaxed">
                        {service.description}
                      </p>
                    </div>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Updated CTA Section with new design
const InlineCTA = () => {
  return (
    <section className="py-20 bg-black">
      <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"
          >
            {/* Ready to Launch Badge */}
            <div className="inline-block">
              <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                <div className="flex items-center gap-2">
                  <Rocket className="w-4 h-4 text-[#E5195E]" />
                  <span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
                </div>
              </div>
            </div>
            
            {/* Main Heading */}
            <h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
              <span className="text-foreground">Create Exceptional User Experiences with </span>
              <span className="text-[#E5195E]">Research-Driven Design</span>
            </h2>
            
            {/* Subtitle */}
            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Design solutions that not only look great but also drive conversion and user engagement.
            </p>
            
            {/* CTA Button */}
            <div className="flex flex-col items-center gap-4">
              <ShimmerButton 
                className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
                onClick={() => navigateTo("/start-a-project")}
              >
                <div className="inline-flex items-center gap-3">
                  <PenTool className="w-6 h-6 flex-shrink-0" />
                  <span>Start Your Design Project</span>
                </div>
              </ShimmerButton>
              
              {/* Small benefit text */}
              <p className="text-sm text-muted-foreground">
                Design audit • User research • Prototype development
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Design Specialists Section
const HireDevelopersSection = () => {
  const specialists = [
    {
      title: "UI/UX Designers",
      icon: PenTool,
      skills: ["Figma", "Adobe XD", "User Research", "Prototyping"],
      iconBg: "bg-pink-500",
      iconColor: "text-white",
      link: "/hire-talent/ui-ux-designers"
    },
    {
      title: "Product Designers", 
      icon: Layout,
      skills: ["Product Strategy", "Design Systems", "User Journey"],
      iconBg: "bg-blue-500",
      iconColor: "text-white",
      link: "/hire-talent/ui-ux-designers"
    },
    {
      title: "Visual Designers",
      icon: Palette,
      skills: ["Brand Identity", "Graphics", "Illustrations"],
      iconBg: "bg-purple-500",
      iconColor: "text-white",
      link: "/hire-talent/ui-ux-designers"
    },
    {
      title: "UX Researchers",
      icon: Users,
      skills: ["User Testing", "Analytics", "Behavioral Research"],
      iconBg: "bg-green-500",
      iconColor: "text-white",
      link: "/hire-talent/ui-ux-designers"
    }
  ];

  return (
    <section className="py-32 bg-background">
      <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 mb-8">
            <span className="text-foreground">Hire Our </span>
            <span className="text-[#E5195E]">Design Experts</span>
          </h2>
          <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
            Get access to talented designers who create beautiful, functional user experiences.
          </p>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 xl:grid-cols-4 gap-8"
        >
          {specialists.map((specialist, index) => {
            const IconComponent = specialist.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="group cursor-pointer"
              >
                <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 overflow-hidden h-full">
                  <CardContent className="p-0 flex flex-col h-full">
                    {/* Header */}
                    <div className="p-8 pb-6">
                      <div className="flex items-start gap-4 mb-6">
                        <div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
                        </div>
                        <div className="flex-1">
                          <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                            Design & Experience
                          </div>
                        </div>
                      </div>
                      
                      <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
                        {specialist.title}
                      </h3>
                    </div>
                    
                    {/* Skills */}
                    <div className="px-8 pb-6 flex-1">
                      <div className="flex flex-wrap gap-2">
                        {specialist.skills.map((skill) => (
                          <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                    
                    {/* CTA */}
                    <div className="p-8 pt-0 mt-auto space-y-3">
                      <ShimmerButton 
                        className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
                        onClick={() => navigateTo(specialist.link)}
                      >
                        <div className="inline-flex items-center justify-center gap-2">
                          <UserPlus className="w-4 h-4 flex-shrink-0" />
                          <span className="font-medium">Hire Now</span>
                        </div>
                      </ShimmerButton>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// FAQ data for Design & Experience
const designExperienceFAQs = [
  {
    question: "What is your design process?",
    answer: "Our design process includes discovery, user research, wireframing, prototyping, visual design, usability testing, and iterative refinement. We involve clients at every stage to ensure alignment with business goals."
  },
  {
    question: "How do you ensure designs convert users?",
    answer: "We use data-driven design principles, conduct user research, A/B test design elements, analyze user behavior, and optimize based on conversion metrics to ensure designs drive business results."
  },
  {
    question: "Do you create design systems?",
    answer: "Yes, we create comprehensive design systems including component libraries, style guides, pattern libraries, and documentation to ensure consistency across all touchpoints and enable scalable design."
  },
  {
    question: "Can you redesign our existing product?",
    answer: "Absolutely! We conduct design audits, user research, and competitive analysis to identify improvement opportunities, then redesign your product to enhance user experience and business performance."
  },
  {
    question: "How do you handle accessibility in design?",
    answer: "We follow WCAG guidelines and design for accessibility from the start, ensuring our designs are inclusive and usable by people with various abilities. This includes color contrast, typography, navigation, and interaction design."
  }
];

export function DesignExperience() {
  return (
    <div className="dark min-h-screen bg-background">
      <Navigation />
      <HeroWithCTA />
      <HorizontalTagScroller />
      <SideBySideContentWithIcons />
      <TabbedServiceDisplay />
      <ProcessSection />
      <InlineCTA />
      <HireDevelopersSection />
      <FAQSection 
        title="Design & Experience Questions"
        subtitle="Get answers to common questions about our design and user experience services."
        faqs={designExperienceFAQs}
      />
      <Footer />
    </div>
  );
}