import React from "react";
import { motion } from "framer-motion";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Card, CardContent } from "./ui/card";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import {
  ArrowRight,
  TrendingUp,
  Users,
  Zap,
  Eye,
  ShoppingCart,
  Heart,
  Star,
  Clock,
  Target,
  Smartphone,
  BarChart3,
  Settings,
  Network,
  Search,
  Calendar,
  PlayCircle,
  PartyPopper,
  PieChart
} from "lucide-react";
import ranoutofLocalImage from '../src/images/ranoutof.webp';
// import seezunLocalImage from '../src/images/seezun.webp';
import simpletendLocalImage from '../src/images/simplitend.webp';
import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
import goodTimesLocalImage from '../src/images/goodtimes.webp';
import prospertyLocalImage from '../src/images/prosperty.webp';
import { useNavigate } from "react-router-dom";

const FeaturedCaseStudies = () => {
  const caseStudies = [
    {
      id: 1,
      title: "SimplyTend",
      client: "Simply Tend",
      description: "SimpliTend is a mobile-first care management platform that connects patients and caregivers through real-time alerts, scheduling, and safety tools—delivered via dual apps and an admin dashboard.",
      keyAchievement: {
        number: "95%",
        metric: "Care Coordination Efficiency",
        icon: Heart
      },
      visual: simpletendLocalImage,
      tags: ["Mobile App", "Care Management", "Real-Time Alerts", "Scheduling"],
      gradient: "from-blue-500/20 to-cyan-500/20",
      accentColor: "blue",
      featured: true
    },
    // {
    //   id: 2,
    //   title: "Seezun",
    //   client: "Seezun",
    //   description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
    //   keyAchievement: {
    //     number: "85%",
    //     metric: "Brand Recognition",
    //     icon: TrendingUp
    //   },
    //   visual: seezunLocalImage,
    //   tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
    //   gradient: "from-purple-500/20 to-pink-500/20",
    //   accentColor: "purple",
    //   featured: false
    // },
    {
      id: 3,
      title: "WOKA",
      client: "WOKA Creations Pvt. Ltd",
      description: "WDI transformed WOKA's hybrid app into a high-performance native Android and iOS platform featuring seamless streaming, deep analytics, and robust 120-hour monthly support.",
      keyAchievement: {
        number: "300%",
        metric: "User Retention",
        icon: Users
      },
      visual: wokasideawardLocalImage,
      tags: ["Native App", "Streaming", "Analytics", "Support"],
      gradient: "from-green-500/20 to-emerald-500/20",
      accentColor: "green",
      featured: false
    }
  ];

  const moreSuccessStories = [
    {
      id: 4,
      title: "TradersCircuit",
      client: "TradersCircuit",
      description: "TradersCircuit empowers India's millennials and Gen Z with smarter investments through seamless investment experience and ultra-personalized financial planning.",
      keyAchievement: {
        number: "300%",
        metric: "User Growth",
        icon: TrendingUp
      },
      visual: traderCircuitLocalImage,
      tags: ["FinTech", "Trading Platform", "Indian Market", "Mobile App"],
      gradient: "from-green-500/20 to-emerald-500/20",
      accentColor: "green",
      featured: false
    },
    {
      id: 5,
      title: "RanOutOf",
      client: "Global Ease Solutions",
      description: "WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions.",
      keyAchievement: {
        number: "75%",
        metric: "Shopping Efficiency",
        icon: ShoppingCart
      },
      visual: ranoutofLocalImage,
      tags: ["Mobile App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
      gradient: "from-green-500/20 to-emerald-500/20",
      accentColor: "green",
      featured: false
    },
    {
      id: 6,
      title: "Prosperty",
      client: "Prosperty Ltd",
      description: "Break the barrier of real estate investing. With Prosperty, you can invest in portions of properties, making portfolio diversification smarter and more accessible.",
      keyAchievement: {
        number: "300%",
        metric: "Portfolio Options",
        icon: PieChart
      },
      visual: prospertyLocalImage,
      tags: ["Real Estate", "Investment", "FinTech", "Portfolio"],
      gradient: "from-blue-500/20 to-cyan-500/20",
      accentColor: "blue",
      featured: false
    },
    {
      id: 7,
      title: "GoodTimes",
      client: "GoodTimes Ltd",
      description: "From casual hangouts to special celebrations, Good Times makes browsing and booking a breeze, so you never miss out.",
      keyAchievement: {
        number: "250%",
        metric: "Event Discovery",
        icon: PartyPopper
      },
      visual: goodTimesLocalImage,
      tags: ["Events", "Booking", "Lifestyle", "Mobile App"],
      gradient: "from-purple-500/20 to-pink-500/20",
      accentColor: "purple",
      featured: false
    }
  ];

  const navigate = useNavigate();

  return (
    <section className="py-20 bg-black">
      <div className="container px-6 mx-auto lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="mb-6"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
              <div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
                <Star className="w-5 h-5 text-accent" />
                <span className="text-base font-medium text-white">Featured Work</span>
              </div>
            </div>
          </motion.div>

          <h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
            Featured Success Stories
          </h2>
          <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
            Discover how AI mobile app development transformed companies across industries, delivering remarkable engagement and business results through innovative solutions.
          </p>
        </motion.div>

        {/* Case Studies Grid - Consistent Dimensions */}
        <div className="grid items-stretch gap-8 lg:grid-cols-3">
          {caseStudies.map((study, index) => {
            const AchievementIcon = study.keyAchievement.icon;

            return (
              <motion.div
                key={study.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.2 }}
                viewport={{ once: true }}
                className="h-full group"
              >
                <Card
                  className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                  onClick={() => {
                    if (study.title === 'WOKA') {
                      navigate('/projects/woka');
                    }
                    //  else if (study.title === 'Seezun') {
                    //   navigate('/projects/seezun');
                    // }
                    else if (study.title === 'Tanami') {
                      navigate('/projects/tanami');
                    } else {
                      navigate('/case-studies');
                    }
                  }}
                >
                  <CardContent className="p-0 flex flex-col h-full min-h-[600px]">
                    {/* Visual Section - Fixed Height */}
                    <div className="relative overflow-hidden">
                      <div className="relative w-full h-64">
                        <ImageWithFallback
                          src={study.visual}
                          alt={study.title}
                          className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                        />

                        {/* Overlay with gradient */}
                        <div className={`absolute inset-0 bg-gradient-to-t ${study.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />

                        {/* Featured Badge */}
                        {study.featured && (
                          <div className="absolute top-4 left-4">
                            <Badge className="text-white shadow-lg bg-accent">
                              <Star className="w-3 h-3 mr-1" />
                              Featured
                            </Badge>
                          </div>
                        )}

                        {/* Key Achievement - Overlaid on Visual */}
                        <div className="absolute bottom-4 left-4 right-4">
                          <motion.div
                            whileHover={{ scale: 1.05 }}
                            className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
                          >
                            <div className="flex items-center gap-3">
                              <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
                                study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
                                  study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
                                    study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
                                      study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
                                        'from-emerald-500 to-teal-500'
                                } flex items-center justify-center flex-shrink-0`}>
                                <AchievementIcon className="w-5 h-5 text-white" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="text-2xl font-bold text-white">{study.keyAchievement.number}</div>
                                <div className="text-sm leading-tight text-gray-300">{study.keyAchievement.metric}</div>
                              </div>
                            </div>
                          </motion.div>
                        </div>
                      </div>
                    </div>

                    {/* Content Section - Flexible Height with Consistent Spacing */}
                    <div className="p-6 flex-1 flex flex-col justify-between min-h-[336px]">
                      <div className="flex-1">
                        {/* Project Title - Consistent Height */}
                        <div className="mb-4 min-h-[60px] flex items-start">
                          <h3 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
                            {study.title}
                          </h3>
                        </div>

                        {/* Client & Description - Consistent Height */}
                        <div className="mb-6 min-h-[100px]">
                          <div className="mb-2 text-sm font-medium text-accent">{study.client}</div>
                          <p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
                            {study.description}
                          </p>
                        </div>

                        {/* Tags - Consistent Height */}
                        <div className="mb-6 min-h-[32px]">
                          <div className="flex flex-wrap gap-2">
                            {study.tags.map((tag) => (
                              <Badge
                                key={tag}
                                variant="secondary"
                                className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                              >
                                {tag}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>

                      {/* CTA Button - Fixed at Bottom */}
                      <div className="mt-auto">
                        <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                          <Button
                            className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
                            onClick={(e) => {
                              e.stopPropagation();
                              if (study.title === 'WOKA') {
                                navigate('/projects/woka');
                              }
                              //  else if (study.title === 'Seezun') {
                              //   navigate('/projects/seezun');
                              // }
                              else if (study.title === 'Tanami') {
                                navigate('/projects/tanami');
                              } else {
                                navigate('/case-studies');
                              }
                            }}
                          >
                            <span>View Full Case Study</span>
                            <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                          </Button>
                        </motion.div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </div>

        {/* More Success Stories Section */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="mt-20 mb-16"
        >
          <h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
            More Success Stories
          </h3>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">

            Explore additional triumphs where AI-powered features revolutionized user engagement and drove exponential growth for diverse enterprises.

          </p>
          <div className="grid items-stretch gap-8 lg:grid-cols-3" style={{ marginTop: "25px" }}
          >
            {moreSuccessStories.map((story, index) => {
              const AchievementIcon = story.keyAchievement.icon;

              return (
                <motion.div
                  key={story.id}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.01 }}
                  viewport={{ once: true }}
                  className="h-full group"
                >
                  <Card

                    className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
                    onClick={() => {
                      if (story.title === 'TradersCircuit') {
                        navigate('/projects/traderscircuit');
                      } else if (story.title === 'GoodTimes') {
                        navigate('/projects/goodtimes');
                      } else if (story.title === 'Prosperty') {
                        navigate('/projects/prosperty');
                      } else if (story.title === 'RanOutOf') {
                        navigate('/projects/ranoutof');
                      } else {
                        navigate('/case-studies');
                      }
                    }}
                  >
                    <CardContent className="p-0 flex flex-col h-full min-h-[600px]">
                      {/* Visual Section - Fixed Height */}
                      <div className="relative overflow-hidden">
                        <div className="relative w-full h-64">
                          <ImageWithFallback
                            src={story.visual}
                            alt={`${story.title} - ${story.client}`}
                            className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                          />

                          {/* Overlay with gradient */}
                          <div className={`absolute inset-0 bg-gradient-to-t ${story.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />

                          {/* Key Achievement - Overlaid on Visual */}
                          <div className="absolute bottom-4 left-4 right-4">
                            <motion.div
                              whileHover={{ scale: 1.05 }}
                              className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
                            >
                              <div className="flex items-center gap-3">
                                <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
                                  story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
                                    story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
                                      story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
                                        story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
                                          'from-emerald-500 to-teal-500'
                                  } flex items-center justify-center flex-shrink-0`}>
                                  <AchievementIcon className="w-5 h-5 text-white" />
                                </div>
                                <div className="flex-1 min-w-0">
                                  <div className="text-2xl font-bold text-white">{story.keyAchievement.number}</div>
                                  <div className="text-sm leading-tight text-gray-300">{story.keyAchievement.metric}</div>
                                </div>
                              </div>
                            </motion.div>
                          </div>
                        </div>
                      </div>

                      {/* Content Section - Flexible Height with Consistent Spacing */}
                      <div className="p-6 flex-1 flex flex-col justify-between min-h-[336px]">
                        <div className="flex-1">
                          {/* Project Title - Consistent Height */}
                          <div className="mb-4 min-h-[60px] flex items-start">
                            <h4 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
                              {story.title}
                            </h4>
                          </div>

                          {/* Client & Description - Consistent Height */}
                          <div className="mb-6 min-h-[100px]">
                            <div className="mb-2 text-sm font-medium text-accent">{story.client}</div>
                            <p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
                              {story.description}
                            </p>
                          </div>

                          {/* Tags - Consistent Height */}
                          <div className="mb-6 min-h-[32px]">
                            <div className="flex flex-wrap gap-2">
                              {story.tags.map((tag) => (
                                <Badge
                                  key={tag}
                                  variant="secondary"
                                  className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
                                >
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        </div>

                        {/* CTA Button - Fixed at Bottom */}
                        <div className="mt-auto">
                          <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                            <Button
                              className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
                              onClick={(e) => {
                                e.stopPropagation();
                                if (story.title === 'TradersCircuit') {
                                  navigate('/projects/traderscircuit');
                                } else if (story.title === 'GoodTimes') {
                                  navigate('/projects/goodtimes');
                                } else if (story.title === 'Prosperty') {
                                  navigate('/projects/prosperty');
                                } else if (story.title === 'RanOutOf') {
                                  navigate('/projects/ranoutof');
                                } else {
                                  navigate('/case-studies');
                                }
                              }}
                            >
                              <span>View Full Case Study</span>
                              <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                            </Button>
                          </motion.div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </motion.div>

        {/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
          className="mt-16 text-center"
        >
          <Button
            variant="outline"
            size="lg"
            className="text-gray-300 transition-all duration-300 border-gray-600 hover:bg-gray-800 hover:text-white hover:border-accent/50"
          >
            <Eye className="w-5 h-5 mr-2" />
            View All Case Studies
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

export default FeaturedCaseStudies;