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 { navigateTo } from "../App";

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: "/images/woka.webp",
  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: "/images/seezun.webp",
  },
  {
    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: "/images/regroup.webp",
  },
  {
    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: "/images/tanami.webp",
  }
];

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';
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: index * 0.1 }}
      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={() => navigateTo(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 top-4 left-4 z-10">
          <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="text-xl font-semibold text-foreground mb-3 group-hover:text-accent transition-colors duration-300">
          {study.title}
        </h3>
        <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
          {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="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
          onClick={(e) => {
            e.stopPropagation();
            navigateTo(getNavigationPath(study.title));
          }}
        >
          View Case Study <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </motion.div>
  );
};

export const CaseStudyHighlight = () => {
  return (
    <section className="relative py-20 bg-background overflow-hidden">
      <GridPattern strokeDasharray="4 2" />
      
      <div className="relative z-10 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-3xl lg:text-4xl font-semibold text-foreground mb-4">
            See What We've Built
          </h2>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            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={() => navigateTo('/projects/woka')}
        >
          <div className="grid lg:grid-cols-3 gap-0">
            <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 top-6 left-6 z-10">
                <span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
                  {featuredCaseStudy.achievement}
                </span>
              </div>
            </div>
            
            <div className="p-8 lg:p-12 flex flex-col justify-center">
              <h3 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6 group-hover:text-accent transition-colors duration-300">
                {featuredCaseStudy.title}
              </h3>
              <p className="text-muted-foreground mb-8 leading-relaxed">
                {featuredCaseStudy.description}
              </p>
              
              <div className="space-y-4 mb-8">
                {featuredCaseStudy.metrics.map((metric) => (
                  <div key={metric.label} className="flex justify-between items-center">
                    <span className="text-muted-foreground text-sm">{metric.label}</span>
                    <span className="text-foreground font-semibold">{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="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
                onClick={(e) => {
                  e.stopPropagation();
                  navigateTo('/projects/woka');
                }}
              >
                View Full Case Study <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        </motion.div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
          {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={() => navigateTo('/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>
  );
};