import React from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { ArrowRight, ExternalLink, TrendingUp, Users, Clock, Star } from "lucide-react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import { navigateTo } from "../App";

// High-quality project images
const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";

const caseStudies = [
  {
    id: 1,
    title: "Regroup",
    subtitle: "Social Networking Revolution",
    description: "A comprehensive social platform that connects communities worldwide with advanced messaging, group management, and content sharing capabilities.",
    image: regroupImage,
    category: "Social Platform",
    client: "Regroup Technologies",
    duration: "8 months",
    teamSize: "12 developers",
    technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "AWS"],
    results: [
      { metric: "User Engagement", value: "+240%" },
      { metric: "Active Communities", value: "50K+" },
      { metric: "Daily Messages", value: "2.5M+" }
    ],
    awards: ["Best Social App 2023", "Innovation Award"],
    link: "/projects/regroup",
    featured: true
  },
  {
    id: 2,
    title: "Seezun",
    subtitle: "Next-Gen E-commerce Platform",
    description: "Revolutionary e-commerce solution with AI-powered recommendations, seamless checkout, and integrated inventory management for modern retailers.",
    image: seezunImage,
    category: "E-commerce",
    client: "Seezun Retail",
    duration: "6 months",
    teamSize: "8 developers",
    technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe"],
    results: [
      { metric: "Conversion Rate", value: "+180%" },
      { metric: "Page Load Speed", value: "2.1s" },
      { metric: "Customer Satisfaction", value: "4.9/5" }
    ],
    awards: ["E-commerce Excellence Award"],
    link: "/projects/seezun",
    featured: true
  },
  {
    id: 3,
    title: "Woka",
    subtitle: "Award-Winning Fitness App",
    description: "Comprehensive fitness and wellness platform with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
    image: wokaAwardImage,
    category: "Health & Fitness",
    client: "Woka Wellness",
    duration: "10 months",
    teamSize: "15 developers",
    technologies: ["Flutter", "Firebase", "TensorFlow", "Apple HealthKit", "Google Fit"],
    results: [
      { metric: "User Retention", value: "+320%" },
      { metric: "Workout Completions", value: "1M+" },
      { metric: "App Store Rating", value: "4.8/5" }
    ],
    awards: ["App of the Year 2023", "Health Innovation Award", "User Choice Award"],
    link: "/projects/woka",
    featured: true
  }
];

export const CaseStudyHighlight = () => {
  return (
    <section className="py-32 bg-background">
      <div className="container mx-auto px-6 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="text-center mb-20"
        >
          <Badge variant="outline" className="mb-6 border-accent/20 text-accent">
            Featured Work
          </Badge>
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Success Stories That <span className="text-accent">Define Excellence</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Explore our award-winning projects that have transformed businesses and delighted millions of users worldwide.
          </p>
        </motion.div>

        {/* Featured Case Studies Grid */}
        <div className="grid lg:grid-cols-3 gap-8 mb-16">
          {caseStudies.map((study, index) => (
            <motion.div
              key={study.id}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: index * 0.2 }}
              viewport={{ once: true }}
              whileHover={{ y: -8, scale: 1.02 }}
              className="group cursor-pointer"
              onClick={() => navigateTo(study.link)}
            >
              <Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full">
                <CardContent className="p-0 flex flex-col h-full">
                  {/* Image Header */}
                  <div className="relative overflow-hidden">
                    <ImageWithFallback
                      src={study.image}
                      alt={study.title}
                      className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
                    
                    {/* Category Badge */}
                    <div className="absolute top-4 left-4">
                      <Badge className="bg-accent/90 text-white border-0">
                        {study.category}
                      </Badge>
                    </div>

                    {/* Awards */}
                    {study.awards.length > 0 && (
                      <div className="absolute top-4 right-4">
                        <div className="bg-amber-500/90 text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
                          <Star className="w-3 h-3 fill-current" />
                          Award Winner
                        </div>
                      </div>
                    )}

                    {/* Project Title Overlay */}
                    <div className="absolute bottom-4 left-4 right-4">
                      <h3 className="text-2xl font-bold text-white mb-1">
                        {study.title}
                      </h3>
                      <p className="text-white/80 text-sm">
                        {study.subtitle}
                      </p>
                    </div>
                  </div>

                  {/* Content */}
                  <div className="p-8 flex-1 flex flex-col">
                    <p className="text-muted-foreground leading-relaxed mb-6 flex-1">
                      {study.description}
                    </p>

                    {/* Key Metrics */}
                    <div className="grid grid-cols-3 gap-4 mb-6 p-4 bg-accent/5 rounded-lg border border-accent/10">
                      {study.results.slice(0, 3).map((result, idx) => (
                        <div key={idx} className="text-center">
                          <div className="text-lg font-bold text-accent">
                            {result.value}
                          </div>
                          <div className="text-xs text-muted-foreground">
                            {result.metric}
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* Technologies */}
                    <div className="mb-6">
                      <p className="text-sm font-medium text-foreground mb-2">Technologies:</p>
                      <div className="flex flex-wrap gap-2">
                        {study.technologies.slice(0, 3).map((tech) => (
                          <Badge key={tech} variant="secondary" className="text-xs bg-muted/50">
                            {tech}
                          </Badge>
                        ))}
                        {study.technologies.length > 3 && (
                          <Badge variant="secondary" className="text-xs bg-muted/50">
                            +{study.technologies.length - 3} more
                          </Badge>
                        )}
                      </div>
                    </div>

                    {/* Project Details */}
                    <div className="grid grid-cols-2 gap-4 mb-6 text-sm">
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <Clock className="w-4 h-4" />
                        {study.duration}
                      </div>
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <Users className="w-4 h-4" />
                        {study.teamSize}
                      </div>
                    </div>

                    {/* Awards List */}
                    {study.awards.length > 0 && (
                      <div className="mb-6">
                        <p className="text-sm font-medium text-foreground mb-2">Awards:</p>
                        <div className="space-y-1">
                          {study.awards.slice(0, 2).map((award, idx) => (
                            <div key={idx} className="flex items-center gap-2 text-sm text-amber-600">
                              <Star className="w-3 h-3 fill-current" />
                              {award}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* CTA Button */}
                    <Button 
                      variant="ghost" 
                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
                      onClick={(e) => {
                        e.stopPropagation();
                        navigateTo(study.link);
                      }}
                    >
                      <span>View Case Study</span>
                      <ArrowRight className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

        {/* Call-to-Action */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
          className="text-center"
        >
          <div className="bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 rounded-2xl p-8 border border-accent/20">
            <h3 className="text-2xl font-semibold text-foreground mb-4">
              Ready to Create Your Success Story?
            </h3>
            <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
              Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
                size="lg"
                className="bg-accent hover:bg-accent/90 text-white"
                onClick={() => navigateTo("/case-studies")}
              >
                View All Case Studies
                <ExternalLink className="w-4 h-4 ml-2" />
              </Button>
              <Button 
                size="lg"
                variant="outline"
                onClick={() => navigateTo("/start-a-project")}
              >
                Start Your Project
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};