import { motion } from "framer-motion";
import { ArrowRight, ExternalLink } from "lucide-react";
import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import regroupImage from '../src/images/regroup.webp';
// import seezunImage from '../src/images/seezun.webp';
// import wokaImage from '../src/images/woka.webp';
import wokaAwardImage from '../src/images/woka.webp';
import tanamiImage from '../src/images/tanami.webp';
import { useNavigate } from "react-router-dom";

const featuredCaseStudy = {
  title: "Woka",
  description: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly.",
  achievement: "+300% User Retention",
  industryTags: ["Education", "Learning Platform"],
  image: wokaAwardImage,
  metrics: [
    { label: "Active Users", value: "500K+" },
    { label: "User Retention", value: "+300%" },
    { label: "Learning Hours", value: "+180%" }
  ]
};

const caseStudies = [
  // {
  //   title: "Seezun",
  //   description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
  //   achievement: "+85% Brand Recognition",
  //   industryTags: ["Branding", "Fashion"],
  //   image: seezunImage
  // },
  {
    title: "Regroup",
    description: "Built Regroup as a social platform that brings together passion, global connections, teamwork, and love for sports through a vibrant online community.",
    achievement: "+150% User Engagement",
    industryTags: ["Social Media", "Digital Products"],
    image: regroupImage
  },
  {
    title: "Tanami",
    description: "Revolutionized Tanami Capital into a powerful, intuitive platform that streamlines portfolio management and empowers users to grow their wealth effortlessly.",
    achievement: "+200% Portfolio Growth",
    industryTags: ["FinTech", "Wealth Management"],
    image: tanamiImage
  }
];

const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; index: number }) => {
  const getNavigationPath = (title: string) => {
    switch (title) {
      // case 'Seezun':
      //   return '/projects/seezun';
      case 'Woka':
        return '/projects/woka';
      case 'Tanami':
        return '/projects/tanami';
      case 'Regroup':
        return '/projects/regroup';
      default:
        return '/case-studies';
    }
  };

  const navigate = useNavigate();

  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: index * 0.01 }}
      viewport={{ once: true }}
      className="group bg-card rounded-[10px] overflow-hidden hover:bg-card/80 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-transparent hover:border-border/50"
      onClick={() => navigate(getNavigationPath(study.title))}
    >
      <div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
        <ImageWithFallback
          src={study.image}
          alt={
            // study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
            study.title === "Woka" ? "Woka learning platform banner showcasing educational mobile app features" :
            study.title === "Tanami" ? "Tanami Capital financial platform banner showcasing investment portfolio management" :
            study.title === "Regroup" ? "Regroup mobile app banner showcasing sports networking features" :
            study.title
          }
          className={`w-full h-full ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "object-contain" : "object-cover"} object-center ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "group-hover:scale-[1.02]" : "group-hover:scale-105"} transition-transform duration-500 rounded-[10px]`}
        />
        <div className="absolute z-10 top-4 left-4">
          <span className="px-3 py-1 bg-accent text-accent-foreground text-sm font-medium rounded-[10px]">
            {study.achievement}
          </span>
        </div>
      </div>
      
      <div className="p-6">
        <h3 className="mb-3 text-xl font-semibold transition-colors duration-300 text-foreground group-hover:text-accent">
          {study.title}
        </h3>
        <p className="mb-4 text-sm leading-relaxed text-muted-foreground">
          {study.description}
        </p>
        
        <div className="flex flex-wrap gap-2 mb-4">
          {study.industryTags.map((tag) => (
            <span
              key={tag}
              className="px-3 py-1 bg-muted text-muted-foreground text-xs rounded-[10px]"
            >
              {tag}
            </span>
          ))}
        </div>
        
        <button 
          className="flex items-center gap-2 text-sm font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-1"
          onClick={(e) => {
            e.stopPropagation();
            navigate(getNavigationPath(study.title));
          }}
        >
          View Case Study <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </motion.div>
  );
};

export const CaseStudyHighlight = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-background">
      <GridPattern strokeDasharray="4 2" />
      
      <div className="container relative z-10 px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-16 text-center"
        >
          <h2 className="mb-4 text-3xl font-semibold lg:text-4xl text-foreground">
            See What We've Built
          </h2>
          <p className="max-w-2xl mx-auto text-lg text-muted-foreground">
            Real results from real projects. Here's how we've helped companies scale their digital products.
          </p>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
          onClick={() => navigate('/projects/woka')}
        >
          <div className="grid gap-0 lg:grid-cols-3">
            <div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
              <ImageWithFallback
                src={featuredCaseStudy.image}
                alt="Woka educational platform mobile app interface with award recognition and interactive learning features for children"
                className="w-full h-full object-contain object-center group-hover:scale-[1.02] transition-transform duration-700 rounded-[10px]"
              />
              <div className="absolute z-10 top-6 left-6">
                <span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
                  {featuredCaseStudy.achievement}
                </span>
              </div>
            </div>
            
            <div className="flex flex-col justify-center p-8 lg:p-12">
              <h3 className="mb-6 text-3xl font-semibold transition-colors duration-300 lg:text-4xl text-foreground group-hover:text-accent">
                {featuredCaseStudy.title}
              </h3>
              <p className="mb-8 leading-relaxed text-muted-foreground">
                {featuredCaseStudy.description}
              </p>
              
              <div className="mb-8 space-y-4">
                {featuredCaseStudy.metrics.map((metric) => (
                  <div key={metric.label} className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">{metric.label}</span>
                    <span className="font-semibold text-foreground">{metric.value}</span>
                  </div>
                ))}
              </div>
              
              <div className="flex flex-wrap gap-2 mb-8">
                {featuredCaseStudy.industryTags.map((tag) => (
                  <span
                    key={tag}
                    className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]"
                  >
                    {tag}
                  </span>
                ))}
              </div>
              
              <button 
                className="flex items-center gap-3 font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-2"
                onClick={(e) => {
                  e.stopPropagation();
                  navigate('/projects/woka');
                }}
              >
                View Full Case Study <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        </motion.div>
        
        <div className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3">
          {caseStudies.map((study, index) => (
            <SmallCaseStudyCard key={study.title} study={study} index={index} />
          ))}
        </div>
        
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.8 }}
          viewport={{ once: true }}
          className="text-center"
        >
          <Button 
            onClick={() => navigate('/case-studies')}
            className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
          >
            View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
};