import { motion } from "framer-motion";
import { ArrowLeft, ExternalLink, Calendar, Users, TrendingUp, BarChart3, Smartphone, Target, CheckCircle, ArrowRight, Zap, Shield, Database, Code, RefreshCw, Activity, Award, Star, Clock, Building2, Brain, Globe, Layers, Server, Cloud, Monitor, Cpu, Palette, Wrench, Heart, Share2, MapPin, Filter, Bell, Gift, CreditCard } from "lucide-react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { GridPattern } from "../components/GridPattern";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import goodTimesLogo from "../src/images/good-times-logo.webp"; 
import { useNavigate } from "react-router-dom";

// Technology to icon mapping
const getTechIcon = (tech: string) => {
  const techIconMap: { [key: string]: React.ReactNode } = {
    "Flutter": <Smartphone className="w-4 h-4" />,
    "Laravel": <Server className="w-4 h-4" />,
    "MySQL": <Database className="w-4 h-4" />,
    "Firebase": <Cloud className="w-4 h-4" />,
    "WebView": <Monitor className="w-4 h-4" />,
    "React Native": <Smartphone className="w-4 h-4" />,
    "React": <Monitor className="w-4 h-4" />,
    "Node.js": <Server className="w-4 h-4" />,
    "MongoDB": <Database className="w-4 h-4" />,
    "WebSocket": <Activity className="w-4 h-4" />,
    "Redux": <Layers className="w-4 h-4" />,
    "TypeScript": <Code className="w-4 h-4" />,
    "JavaScript": <Code className="w-4 h-4" />,
    "AWS": <Cloud className="w-4 h-4" />,
    "Google Cloud": <Cloud className="w-4 h-4" />,
    "Azure": <Cloud className="w-4 h-4" />,
    "PostgreSQL": <Database className="w-4 h-4" />,
    "Python": <Code className="w-4 h-4" />,
    "Java": <Code className="w-4 h-4" />,
    "Swift": <Smartphone className="w-4 h-4" />,
    "Kotlin": <Smartphone className="w-4 h-4" />,
    "Docker": <Server className="w-4 h-4" />,
    "Kubernetes": <Server className="w-4 h-4" />,
    "GraphQL": <Activity className="w-4 h-4" />,
    "REST API": <Activity className="w-4 h-4" />,
    "Express": <Server className="w-4 h-4" />,
    "Vue.js": <Monitor className="w-4 h-4" />,
    "Angular": <Monitor className="w-4 h-4" />
  };
  
  return techIconMap[tech] || <Wrench className="w-4 h-4" />;
};

const projectDetails = {
  title: "GoodTimes: Social Event Discovery & Referral Platform",
  subtitle: "A feature-rich mobile application for discovering social events, managing event participation, and earning through referrals—developed to scale user engagement and streamline event organizer workflows.",
  technologies: ["Flutter", "Laravel", "MySQL", "Firebase", "WebView"],
  industries: ["Social Media", "Event Management", "Entertainment"],
  duration: "Ongoing (initial build completed in 4 months, enhancement phase under progress)",
  teamSize: "5 Developers, 2 Designers, 1 PM, 1 QA, 1 Business Analyst",
  platforms: ["iOS", "Android", "Web Admin Panel"]
};

const keyAchievements = [
  { label: "Early Access Users", value: "15K+", description: "Successfully onboarded" },
  { label: "RSVP Engagement", value: "70%", description: "Toggle interaction rate" },
  { label: "User Retention", value: "78%", description: "30-day retention rate" }
];

const businessObjectives = [
  "Enable users to discover and RSVP to events with ease",
  "Reward users for referrals and active engagement",
  "Provide planners with tools to list events and track attendance", 
  "Integrate a scalable wallet and payment structure",
  "Launch in the UK market, scale across Europe"
];

const coreFeatures = [
  {
    title: "Multi-role App Access",
    description: "Distinct experiences for Customers and Event Planners with tailored interfaces",
    icon: <Users className="w-6 h-6" />
  },
  {
    title: "Referral + Wallet Engine",
    description: "Share QR/referral codes and track earnings with integrated wallet system",
    icon: <Gift className="w-6 h-6" />
  },
  {
    title: "Event Calendar Engine",
    description: "Advanced filtering by genre, location, date, and interest with visual calendar",
    icon: <Calendar className="w-6 h-6" />
  },
  {
    title: "RSVP & Reminder System",
    description: "In-app toggle, calendar sync, fire/exclusive event labels with smart notifications",
    icon: <Bell className="w-6 h-6" />
  },
  {
    title: "Content Management",
    description: "Comprehensive blogs, FAQs, About, and Contact modules with CMS integration",
    icon: <Code className="w-6 h-6" />
  },
  {
    title: "Rating & Review Engine",
    description: "Post-event feedback system visible to all users for community trust",
    icon: <Star className="w-6 h-6" />
  }
];

const technicalChallenges = [
  {
    title: "Dynamic Referral Logic",
    description: "Complex subscription rules with lockouts and wallet freeze mechanisms",
    icon: <Activity className="w-5 h-5" />
  },
  {
    title: "Multi-role Architecture",
    description: "Individual logic layers for customers, planners, and admin with secure access",
    icon: <Shield className="w-5 h-5" />
  },
  {
    title: "Calendar Performance",
    description: "Optimizing calendar-level performance for large event datasets",
    icon: <Clock className="w-5 h-5" />
  },
  {
    title: "Wallet System Security",
    description: "Flexible yet secure wallet system with payment thresholds and fraud prevention",
    icon: <CreditCard className="w-5 h-5" />
  }
];

const developmentPhases = [
  {
    phase: "Discovery & Planning",
    duration: "2 weeks",
    description: "User journeys, event lifecycle modeling, tech recommendations",
    icon: <Target className="w-5 h-5" />
  },
  {
    phase: "UI/UX Design",
    duration: "3 weeks", 
    description: "Wireframing, onboarding flow mockups, calendar UX design",
    icon: <Palette className="w-5 h-5" />
  },
  {
    phase: "Core Development",
    duration: "8 weeks",
    description: "Flutter builds, backend API, wallet logic, event management system",
    icon: <Code className="w-5 h-5" />
  },
  {
    phase: "Testing & QA",
    duration: "3 weeks",
    description: "Multi-role testing, referral validation, UI regression testing",
    icon: <CheckCircle className="w-5 h-5" />
  },
  {
    phase: "Deployment & Support",
    duration: "1 week",
    description: "App Store/Play Store submission, admin access handover, monitoring setup",
    icon: <Zap className="w-5 h-5" />
  }
];

const resultsMetrics = [
  { label: "Google Play Rating", value: "4.7★", description: "User satisfaction score" },
  { label: "API Response Time", value: "120ms", description: "Average response time" },
  { label: "Monthly Growth", value: "+22%", description: "User growth rate" },
  { label: "Referral Contribution", value: "35%", description: "New user acquisition" },
  { label: "Session Time Increase", value: "+28%", description: "Due to social features" },
  { label: "Event Attendance", value: "2x", description: "Planner reported increase" }
];

const technicalAchievements = [
  "Subscription logic with freeze/forfeit tracking system",
  "Referral engine with QR + WhatsApp API integration",
  "Optimized Flutter app: <10MB APK with lightning UI transitions",
  "Admin dashboard enabling full control over users and events",
  "Gamified event discovery with engagement-driven tags",
  "Smart calendar sync with one-tap RSVP functionality"
];

const lessonsLearned = {
  worked: [
    "Clear onboarding UX improved signup conversion by 37%",
    "Agile iteration helped manage enhancement requests efficiently", 
    "In-app referral education improved share rates significantly"
  ],
  improve: [
    "Subscription billing and wallet freeze logic were complex to align",
    "WhatsApp sharing setup needed special attention for API approvals",
    "Multi-role testing required more comprehensive initial planning"
  ]
};

const futureRoadmap = [
  {
    phase: "Next 6 Months",
    features: ["Event media gallery integration", "AI-powered event recommendations", "Push analytics for social feature usage", "Performance dashboards for event organizers"]
  },
  {
    phase: "12 Months Vision", 
    features: ["Marketplace for ticket sales", "User-level badges and community forums", "Event sponsor promotions", "Multi-language support for EU expansion"]
  }
];

export const GoodTimesProject = () => {
  const navigate = useNavigate();
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Section 1: Hero with Heading, Subheading, and Image */}
      <section className="relative pt-32 pb-24 bg-background overflow-hidden">
        <GridPattern strokeDasharray="4 2" />
        
        <div className="relative z-10 container mx-auto px-4 lg:px-6">
          {/* Back Button */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-12"
          >
            <Button
              variant="ghost"
              onClick={() => navigate('/case-studies')}
              className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
            >
              <ArrowLeft className="w-4 h-4" />
              Back to Portfolio
            </Button>
          </motion.div>

          <div className="grid lg:grid-cols-12 gap-16 items-center">
            {/* Content - Left Aligned */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="lg:col-span-7"
            >
              <div className="mb-6">
                <Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
                  Case Study
                </Badge>
              </div>
              
              <h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
                {projectDetails.title}
              </h1>
              
              <p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
                {projectDetails.subtitle}
              </p>
            </motion.div>

            {/* Project Image */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="lg:col-span-5"
            >
              <div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&h=600&fit=crop&crop=center"
                  alt="GoodTimes social event discovery platform showcasing event calendar, referral system, and community features"
                  className="w-full h-full object-contain object-center rounded-xl"
                />
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Section 2: Project Details */}
      <section className="py-24 bg-card/30 relative overflow-hidden">
        {/* Background Elements */}
        <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-blue-500/5" />
        <div className="absolute top-20 right-20 w-64 h-64 bg-accent/10 rounded-full blur-3xl opacity-20" />
        <div className="absolute bottom-20 left-20 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl opacity-20" />
        
        <div className="container mx-auto px-4 lg:px-6 relative z-10">
          <div className="max-w-7xl mx-auto">
            
            {/* Section Header */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
                Project Details
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Comprehensive overview of technologies, timeline, and key achievements that drove this social platform's success
              </p>
            </motion.div>

            {/* Project Meta Information Grid */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="grid lg:grid-cols-2 gap-8 mb-20"
            >
              {/* Technologies & Industries Card */}
              <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-accent/20 transition-all duration-500 group">
                <div className="space-y-8">
                  {/* Technologies */}
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-12 h-12 bg-accent/10 backdrop-blur-sm rounded-xl border border-accent/20 flex items-center justify-center group-hover:bg-accent/20 transition-all duration-300">
                        <Code className="w-6 h-6 text-accent" />
                      </div>
                      <h3 className="text-xl font-semibold text-foreground">Technologies</h3>
                    </div>
                    <div className="flex flex-wrap gap-3">
                      {projectDetails.technologies.map((tech) => (
                        <Badge 
                          key={tech} 
                          variant="outline" 
                          className="text-base border-border/40 bg-background/30 hover:bg-accent/10 hover:border-accent/40 flex items-center gap-2 px-4 py-2 transition-all duration-300"
                        >
                          <span className="text-accent">{getTechIcon(tech)}</span>
                          {tech}
                        </Badge>
                      ))}
                    </div>
                  </div>
                  
                  {/* Industries */}
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-12 h-12 bg-blue-500/10 backdrop-blur-sm rounded-xl border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300">
                        <Building2 className="w-6 h-6 text-blue-400" />
                      </div>
                      <h3 className="text-xl font-semibold text-foreground">Industries</h3>
                    </div>
                    <div className="flex flex-wrap gap-3">
                      {projectDetails.industries.map((industry) => (
                        <Badge 
                          key={industry} 
                          variant="secondary" 
                          className="text-base bg-blue-500/10 border-blue-500/20 text-blue-100 hover:bg-blue-500/20 px-4 py-2 transition-all duration-300"
                        >
                          {industry}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Timeline & Team Card */}
              <div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-green-400/20 transition-all duration-500 group">
                <div className="space-y-8">
                  {/* Duration */}
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-12 h-12 bg-green-400/10 backdrop-blur-sm rounded-xl border border-green-400/20 flex items-center justify-center group-hover:bg-green-400/20 transition-all duration-300">
                        <Calendar className="w-6 h-6 text-green-400" />
                      </div>
                      <h3 className="text-xl font-semibold text-foreground">Project Timeline</h3>
                    </div>
                    <p className="text-lg text-muted-foreground pl-15">{projectDetails.duration}</p>
                  </div>
                  
                  {/* Team */}
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-12 h-12 bg-purple-500/10 backdrop-blur-sm rounded-xl border border-purple-500/20 flex items-center justify-center group-hover:bg-purple-500/20 transition-all duration-300">
                        <Users className="w-6 h-6 text-purple-400" />
                      </div>
                      <h3 className="text-xl font-semibold text-foreground">Team Composition</h3>
                    </div>
                    <p className="text-lg text-muted-foreground pl-15">{projectDetails.teamSize}</p>
                  </div>

                  {/* Platforms */}
                  <div>
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-12 h-12 bg-orange-500/10 backdrop-blur-sm rounded-xl border border-orange-500/20 flex items-center justify-center group-hover:bg-orange-500/20 transition-all duration-300">
                        <Smartphone className="w-6 h-6 text-orange-400" />
                      </div>
                      <h3 className="text-xl font-semibold text-foreground">Target Platforms</h3>
                    </div>
                    <div className="flex gap-3 pl-15">
                      {projectDetails.platforms.map((platform) => (
                        <Badge 
                          key={platform} 
                          variant="outline" 
                          className="text-base border-orange-400/40 bg-orange-500/10 text-orange-100 hover:bg-orange-500/20 px-3 py-1"
                        >
                          {platform}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Key Achievements Section */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="mb-16"
            >
              <div className="text-center mb-12">
                <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
                  Key Impact & Results
                </h2>
                <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                  Measurable outcomes that demonstrate the platform's success in social event discovery and engagement
                </p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {keyAchievements.map((achievement, index) => (
                  <motion.div
                    key={achievement.label}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                    whileHover={{ 
                      scale: 1.02,
                      y: -4,
                      transition: { duration: 0.3, ease: "easeOut" }
                    }}
                    className="bg-background/50 backdrop-blur-xl rounded-2xl p-8 border border-border/40 hover:border-accent/30 hover:bg-background/60 transition-all duration-500 group cursor-pointer relative overflow-hidden"
                  >
                    {/* Card Background Gradient */}
                    <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                    
                    {/* Content */}
                    <div className="relative z-10 text-center">
                      {/* Value */}
                      <div className="text-3xl lg:text-4xl font-bold text-accent mb-4 group-hover:text-accent transition-colors duration-300">
                        {achievement.value}
                      </div>
                      
                      {/* Label */}
                      <div className="text-xl font-semibold text-foreground mb-3 group-hover:text-foreground transition-colors duration-300">
                        {achievement.label}
                      </div>
                      
                      {/* Description */}
                      <div className="text-base text-muted-foreground leading-relaxed group-hover:text-muted-foreground transition-colors duration-300">
                        {achievement.description}
                      </div>
                    </div>
                    
                    {/* Hover Effect Line */}
                    <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-accent/50 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Executive Summary */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto text-center"
          >
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
              Executive Summary
            </h2>
            <p className="text-xl text-muted-foreground leading-relaxed">
              GoodTimes is a comprehensive social event discovery platform that bridges the gap between event-seekers and organizers through innovative referral systems, gamified engagement, and seamless event management. Built with scalability and user experience at its core, the platform transforms how people discover, attend, and organize social events while creating sustainable revenue streams through viral referral mechanisms.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Project Overview */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-6xl mx-auto">
            <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-5xl font-semibold text-foreground mb-6">
                Project Overview
              </h2>
            </motion.div>
            
            <div className="grid lg:grid-cols-3 gap-12">
              {/* Background & Context */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                whileHover={{ 
                  scale: 1.05,
                  y: -4,
                  transition: { duration: 0.3, ease: "easeOut" }
                }}
                transition={{ duration: 0.6 }}
                viewport={{ once: true }}
                className="bg-card/30 rounded-2xl p-8 border-2 border-accent/20 cursor-pointer group hover:border-accent/40 hover:bg-card/40 hover:shadow-lg hover:shadow-accent/10 transition-all duration-300 ease-out"
              >
                {/* Glassmorphism Icon Container */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 0.2 }}
                  viewport={{ once: true }}
                  className="flex justify-start mb-6"
                >
                  <div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300 ease-out">
                    <Globe className="w-8 h-8 text-accent group-hover:scale-110 transition-transform duration-300 ease-out" />
                  </div>
                </motion.div>
                <h3 className="text-2xl font-semibold text-foreground mb-6">Background & Context</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Social event discovery and networking apps have grown significantly, especially among Gen-Z and millennials. GoodTimes aims to tap into this momentum by adding gamification (referrals, ratings, exclusive tags) and simplifying how users discover and commit to social events.
                </p>
              </motion.div>

              {/* Target Audience */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                whileHover={{ 
                  scale: 1.05,
                  y: -4,
                  transition: { duration: 0.3, ease: "easeOut" }
                }}
                transition={{ duration: 0.6, delay: 0.1 }}
                viewport={{ once: true }}
                className="bg-card/30 rounded-2xl p-8 border-2 border-blue-400/20 cursor-pointer group hover:border-blue-400/40 hover:bg-card/40 hover:shadow-lg hover:shadow-blue-400/10 transition-all duration-300 ease-out"
              >
                {/* Glassmorphism Icon Container */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 0.3 }}
                  viewport={{ once: true }}
                  className="flex justify-start mb-6"
                >
                  <div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-blue-400/50 group-hover:bg-blue-400/10 transition-all duration-300 ease-out">
                    <Users className="w-8 h-8 text-blue-400 group-hover:scale-110 transition-transform duration-300 ease-out" />
                  </div>
                </motion.div>
                <h3 className="text-2xl font-semibold text-foreground mb-6">Target Audience</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Socially active individuals aged 18–35 interested in networking, music, fitness, and local events. Event planners and venues are the second audience, seeking efficient tools to reach new audiences and manage registrations.
                </p>
              </motion.div>

              {/* Business Objectives */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                whileHover={{ 
                  scale: 1.05,
                  y: -4,
                  transition: { duration: 0.3, ease: "easeOut" }
                }}
                transition={{ duration: 0.6, delay: 0.2 }}
                viewport={{ once: true }}
                className="bg-card/30 rounded-2xl p-8 border-2 border-green-400/20 cursor-pointer group hover:border-green-400/40 hover:bg-card/40 hover:shadow-lg hover:shadow-green-400/10 transition-all duration-300 ease-out"
              >
                {/* Glassmorphism Icon Container */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 0.4 }}
                  viewport={{ once: true }}
                  className="flex justify-start mb-6"
                >
                  <div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-green-400/50 group-hover:bg-green-400/10 transition-all duration-300 ease-out">
                    <Target className="w-8 h-8 text-green-400 group-hover:scale-110 transition-transform duration-300 ease-out" />
                  </div>
                </motion.div>
                <h3 className="text-2xl font-semibold text-foreground mb-6">Business Objectives</h3>
                <div className="space-y-3">
                  {businessObjectives.map((objective, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
                      <span className="text-muted-foreground text-base">{objective}</span>
                    </div>
                  ))}
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Core Features */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
                Core Features & Functionality
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                A comprehensive suite of tools designed to revolutionize social event discovery with gamification and seamless organizer workflows.
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {coreFeatures.map((feature, index) => (
                <motion.div
                  key={feature.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="h-full bg-card/50 border-border/50 hover:border-accent/30 transition-all duration-300 group">
                    <CardContent className="p-8">
                      <div className="text-accent mb-4 group-hover:scale-110 transition-transform duration-300">
                        {feature.icon}
                      </div>
                      <h3 className="text-xl font-semibold text-foreground mb-4">
                        {feature.title}
                      </h3>
                      <p className="text-muted-foreground leading-relaxed">
                        {feature.description}
                      </p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Challenges & Solution Architecture */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-20">
              {/* Challenges */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
                  Challenges & Constraints
                </h2>
                <div className="space-y-6">
                  {technicalChallenges.map((challenge, index) => (
                    <motion.div
                      key={challenge.title}
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      viewport={{ once: true }}
                      className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/20 transition-colors duration-300"
                    >
                      <div className="flex items-start gap-4">
                        <div className="text-accent mt-1">
                          {challenge.icon}
                        </div>
                        <div>
                          <h3 className="text-lg font-semibold text-foreground mb-2">
                            {challenge.title}
                          </h3>
                          <p className="text-muted-foreground leading-relaxed">
                            {challenge.description}
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </motion.div>

              {/* Solution Architecture */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
              >
                <h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
                  Solution Architecture
                </h2>
                <div className="bg-background/50 rounded-2xl p-8 border border-border/50">
                  <div className="space-y-8">
                    <div>
                      <h3 className="text-xl font-semibold text-foreground mb-6">Technology Stack</h3>
                      <div className="space-y-4">
                        <div className="flex items-center gap-3">
                          <Smartphone className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Frontend: Flutter (iOS/Android)</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Server className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Backend: Laravel (PHP)</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Database className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Database: MySQL</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Cloud className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Notifications: Firebase & Analytics</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <CreditCard className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Payment: WebView-based integration</span>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <h3 className="text-xl font-semibold text-foreground mb-6">Architecture Highlights</h3>
                      <div className="space-y-3">
                        <div className="flex items-start gap-3">
                          <CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground text-base">Modular architecture with independent APIs per role</span>
                        </div>
                        <div className="flex items-start gap-3">
                          <CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground text-base">Event-based notification triggers</span>
                        </div>
                        <div className="flex items-start gap-3">
                          <CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground text-base">Wallet referral logic separate from transaction layer</span>
                        </div>
                        <div className="flex items-start gap-3">
                          <CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground text-base">Multi-tenancy admin view for role-based control</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Development Process */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
                Development Process & Methodology
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Agile sprints (2-week cycles) with enhancement backlog tracking, ensuring quality delivery and continuous improvement.
              </p>
            </div>
            
            <div className="grid lg:grid-cols-5 gap-8">
              {developmentPhases.map((phase, index) => (
                <motion.div
                  key={phase.phase}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="relative"
                >
                  <div className="bg-card/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 h-full">
                    <div className="text-accent mb-4">
                      {phase.icon}
                    </div>
                    <h3 className="text-lg font-semibold text-foreground mb-2">
                      {phase.phase}
                    </h3>
                    <div className="text-accent font-medium mb-3">
                      {phase.duration}
                    </div>
                    <p className="text-muted-foreground text-sm leading-relaxed">
                      {phase.description}
                    </p>
                  </div>
                  
                  {/* Connector Line */}
                  {index < developmentPhases.length - 1 && (
                    <div className="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-border transform -translate-y-1/2" />
                  )}
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Results & Impact */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
                Results & Impact
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Comprehensive performance metrics demonstrating GoodTimes' success in social event discovery and community engagement.
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
              {resultsMetrics.map((metric, index) => (
                <motion.div
                  key={metric.label}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 text-center"
                >
                  <div className="text-3xl font-bold text-accent mb-2">
                    {metric.value}
                  </div>
                  <div className="text-lg font-semibold text-foreground mb-2">
                    {metric.label}
                  </div>
                  <div className="text-muted-foreground text-sm">
                    {metric.description}
                  </div>
                </motion.div>
              ))}
            </div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              viewport={{ once: true }}
              className="bg-background/50 rounded-2xl p-8 border border-border/50"
            >
              <h3 className="text-2xl font-semibold text-foreground mb-6">
                Technical Achievements
              </h3>
              <div className="grid md:grid-cols-2 gap-4">
                {technicalAchievements.map((achievement, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
                    <span className="text-muted-foreground">{achievement}</span>
                  </div>
                ))}
              </div>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Lessons Learned */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-6xl mx-auto">
            <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-5xl font-semibold text-foreground mb-6">
                Lessons Learned
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Key insights and learnings from the GoodTimes development journey that shaped our approach to social platform development.
              </p>
            </motion.div>

            <div className="grid lg:grid-cols-2 gap-12">
              {/* What Worked */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
                className="bg-green-500/5 rounded-2xl p-8 border border-green-500/20"
              >
                <h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
                  <CheckCircle className="w-6 h-6 text-green-400" />
                  What Worked Well
                </h3>
                <div className="space-y-4">
                  {lessonsLearned.worked.map((lesson, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-green-400 rounded-full mt-2 flex-shrink-0" />
                      <span className="text-muted-foreground">{lesson}</span>
                    </div>
                  ))}
                </div>
              </motion.div>

              {/* What Could Improve */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                viewport={{ once: true }}
                className="bg-yellow-500/5 rounded-2xl p-8 border border-yellow-500/20"
              >
                <h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
                  <ArrowRight className="w-6 h-6 text-yellow-400" />
                  Areas for Improvement
                </h3>
                <div className="space-y-4">
                  {lessonsLearned.improve.map((lesson, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <div className="w-2 h-2 bg-yellow-400 rounded-full mt-2 flex-shrink-0" />
                      <span className="text-muted-foreground">{lesson}</span>
                    </div>
                  ))}
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Future Roadmap */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
                Future Roadmap
              </h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Planned enhancements and features to build a vibrant event discovery ecosystem powered by AI, gamification, and community.
              </p>
            </div>
            
            <div className="grid lg:grid-cols-2 gap-12">
              {futureRoadmap.map((roadmap, index) => (
                <motion.div
                  key={roadmap.phase}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  className="bg-background/50 rounded-2xl p-8 border border-border/50 hover:border-accent/30 transition-all duration-300"
                >
                  <h3 className="text-2xl font-semibold text-foreground mb-6">
                    {roadmap.phase}
                  </h3>
                  <div className="space-y-4">
                    {roadmap.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-start gap-3">
                        <ArrowRight className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
                        <span className="text-muted-foreground">{feature}</span>
                      </div>
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Client Testimonial */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto text-center"
          >
            <div className="bg-card/50 rounded-2xl p-12 border border-border/50">
              <div className="flex justify-center mb-8">
                <ImageWithFallback
                  src={goodTimesLogo}
                  alt="GoodTimes - Social Event Discovery Platform Logo"
                  className="h-12 w-auto object-contain"
                />
              </div>
              
              <div className="flex justify-center mb-8">
                <div className="flex text-yellow-400">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-6 h-6 fill-current" />
                  ))}
                </div>
              </div>
              
              <blockquote className="text-2xl lg:text-3xl text-foreground mb-8 leading-relaxed italic">
                "GoodTimes wouldn't be what it is without WDI's intuitive tech and top-notch planning. Their dedication to building for scale while also supporting daily product improvements is unmatched."
              </blockquote>
              
              <div className="flex flex-col items-center">
                <div className="text-lg font-semibold text-foreground">
                  Matthew Weightman
                </div>
                <div className="text-muted-foreground">
                  Founder, GoodTimes
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto text-center"
          >
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
              Want to Build the Next Big Social Platform?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Let WDI help you turn your vision into an app that people love to use, with gamification, community features, and scalable architecture.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                onClick={() => navigate('/contact-us')}
                className="bg-accent hover:bg-accent/90 text-accent-foreground"
              >
                Contact Our Team
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => navigate('/case-studies')}
                className="border-accent/30 text-accent hover:bg-accent/10"
              >
                View More Case Studies
                <ExternalLink className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

      {/* <Footer /> */}
    </div>
  );
};