import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";
import { Activity, ArrowLeft, ArrowRight, BarChart3, Brain, Building2, Calendar, CheckCircle, Clock, Cloud, Code, Database, ExternalLink, Globe, Layers, Monitor, RefreshCw, Server, Shield, Smartphone, Star, Target, TrendingUp, Users, Wrench, Zap } from "lucide-react";
import { navigateTo } from "../App";
import { Footer } from "../components/Footer";
import { GridPattern } from "../components/GridPattern";
import { Navigation } from "../components/Navigation";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Button } from "../components/ui/button";
import tradersCircuitLogo from "../src/images/traders-circuit-logo.webp";

// Technology to icon mapping
const getTechIcon = (tech: string) => {
  const techIconMap: { [key: string]: React.ReactNode } = {
    "Flutter": <Smartphone 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" />,
    "Firebase": <Cloud 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" />,
    "MySQL": <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: "Traders Circuit – Stock Advisory & Trade Companion App",
  subtitle: "A mobile-first advisory platform offering curated trade calls, real-time updates, and portfolio tracking to empower everyday traders",
  technologies: ["Flutter", "Firebase", "Node.js"],
  industries: ["Fintech", "Stock Market", "Retail Investment"],
  duration: "6 months, February 2024 – August 2024",
  teamSize: "5 developers, 2 designers, 1 PM",
  platforms: ["Android", "iOS"]
};

const keyAchievements = [
  { label: "Early Access Traders", value: "10K+", description: "Onboarded successfully" },
  { label: "App Store Compliance", value: "100%", description: "First submission success" },
  { label: "Screen Load Time", value: "<2s", description: "Across all devices" }
];

const businessObjectives = [
  "Create a real-time, intuitive stock advisory experience",
  "Enable tracking of trade performance and history",
  "Launch with 90% feature parity within 6 months",
  "Ensure <3s load time and 99.9% uptime for live market hours"
];

const coreFeatures = [
  {
    title: "Curated Trade Calls",
    description: "Expert-curated 'Swing Trades' & 'Cash Trades' call cards with real-time updates",
    icon: <TrendingUp className="w-6 h-6" />
  },
  {
    title: "Performance Tracking",
    description: "Real-time trade updates & exited positions tracking with performance metrics",
    icon: <BarChart3 className="w-6 h-6" />
  },
  {
    title: "Educational Content",
    description: "Market bytes, learnings, and educational content in read sections",
    icon: <Brain className="w-6 h-6" />
  },
  {
    title: "Smart Notifications",
    description: "Intelligent notification system for trade alerts and market updates",
    icon: <Zap className="w-6 h-6" />
  },
  {
    title: "Admin Panel",
    description: "Comprehensive admin panel for call management and content updates",
    icon: <Shield className="w-6 h-6" />
  },
  {
    title: "Secure Authentication",
    description: "User onboarding and login with Firebase authentication",
    icon: <Building2 className="w-6 h-6" />
  }
];

const technicalChallenges = [
  {
    title: "Real-time Performance",
    description: "Optimizing data load and UI responsiveness for real-time market conditions",
    icon: <Activity className="w-5 h-5" />
  },
  {
    title: "Notification Delivery",
    description: "Managing push notifications and ensuring timely delivery for trade alerts",
    icon: <Zap className="w-5 h-5" />
  },
  {
    title: "Data Security",
    description: "Securing user data while keeping login friction low",
    icon: <Shield className="w-5 h-5" />
  },
  {
    title: "Timeline Management",
    description: "Tight 6-month timeline from design to launch",
    icon: <Clock className="w-5 h-5" />
  }
];

const developmentPhases = [
  {
    phase: "Discovery & Planning",
    duration: "3 weeks",
    description: "Market research, competitor benchmarking, feature roadmap",
    icon: <Target className="w-5 h-5" />
  },
  {
    phase: "Design & Prototyping",
    duration: "4 weeks", 
    description: "Branding, UI mockups, user testing feedback loop",
    icon: <Code className="w-5 h-5" />
  },
  {
    phase: "Core Development",
    duration: "6 weeks",
    description: "App architecture, authentication, splash, trade sections",
    icon: <Database className="w-5 h-5" />
  },
  {
    phase: "Content & Trade Modules",
    duration: "5 weeks",
    description: "Read section, exited trades, date-wise grouping, notifications",
    icon: <Activity className="w-5 h-5" />
  },
  {
    phase: "Admin CMS & Analytics",
    duration: "3 weeks",
    description: "Role-based access for call publishing and stats tracking",
    icon: <Shield className="w-5 h-5" />
  },
  {
    phase: "Testing & Deployment",
    duration: "3 weeks",
    description: "App store compliance, staging testing, final release",
    icon: <CheckCircle className="w-5 h-5" />
  }
];

const resultsMetrics = [
  { label: "App Installs", value: "10K+", description: "In beta with 4.6★ rating" },
  { label: "Daily Active Usage", value: "70%", description: "During market hours" },
  { label: "App Load Time", value: "1.8s", description: "Average load time" },
  { label: "Crash Rate", value: "<0.3%", description: "Industry leading" },
  { label: "Trader Retention", value: "68%", description: "After 30 days" },
  { label: "UI/UX Rating", value: "90%", description: "Rated as 'Excellent'" }
];

const technicalAchievements = [
  "Real-time exited call update system",
  "Date-wise trade grouping with auto-archival logic", 
  "100% crash-free sessions on launch week",
  "Firebase-based CMS requiring no custom infra"
];

const lessonsLearned = {
  worked: [
    "Weekly design-dev syncs prevented misalignments",
    "Animations added micro-interactions users loved",
    "Modular Flutter setup enabled easy refactoring"
  ],
  improve: [
    "Content logic complexity was underestimated",
    "Future projects should prototype admin CMS earlier",
    "More onboarding tutorials needed for first-time users"
  ]
};

const futureRoadmap = [
  {
    phase: "Phase 2",
    features: ["Personalized dashboards", "Premium tier with exclusive trade rooms", "WhatsApp-like alert groups for power users"]
  },
  {
    phase: "Phase 3", 
    features: ["Web version of dashboard", "Trade performance insights and leaderboards", "Community forum with expert sessions"]
  }
];

export const TradersCircuitProject = () => {
  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={() => navigateTo('/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-1611974789855-9c2a0a7236a3?w=800&h=600&fit=crop&crop=center"
                  alt="Traders Circuit mobile app showcasing stock advisory platform with real-time trade calls and portfolio tracking"
                  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 project'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 project's success and value delivered to stakeholders
                </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">
              Traders Circuit is a mobile stock advisory platform designed to help Indian retail traders make informed, timely decisions based on high-quality research and structured trade insights. The app streamlines trade discovery, execution tracking, and performance analytics in a sleek, intuitive interface built with speed and user experience in mind.
            </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">
                  Retail trading in India has seen exponential growth, but quality advisory platforms are often expensive, inaccessible, or overly complex. Traders Circuit bridges this gap by offering simplified, actionable insights for cash and swing trades curated by domain experts.
                </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">
                  Retail stock market traders in India (Age 22–45), interested in short- to mid-term equity investments and looking for expert-curated stock strategies.
                </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 empower retail traders with expert insights and real-time market intelligence.
              </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-background/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-card/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-card/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</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Database className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Backend: Node.js</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Shield className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Database: Firebase Firestore</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Globe className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Hosting: Firebase Hosting</span>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <h3 className="text-xl font-semibold text-foreground mb-6">Key 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 screen-wise Flutter components</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">Firestore structure with efficient indexing</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">Secure API gateways for admin and user segregation</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">Realtime listener-based updates for active trades</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Development Timeline */}
      <section className="py-24 bg-card/30">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-4xl 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">
                Development Timeline
              </h2>
              <p className="text-xl text-muted-foreground">
                A structured 6-month development journey from concept to launch
              </p>
            </motion.div>
            
            <div className="space-y-8">
              {developmentPhases.map((phase, index) => (
                <motion.div
                  key={phase.phase}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="relative flex gap-8 items-start"
                >
                  {/* Timeline connector */}
                  {index < developmentPhases.length - 1 && (
                    <div className="absolute left-6 top-16 w-0.5 h-16 bg-border/50"></div>
                  )}
                  
                  <div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-full flex-shrink-0 border border-accent/30">
                    <div className="text-accent">
                      {phase.icon}
                    </div>
                  </div>
                  
                  <div className="flex-1 bg-background/50 rounded-xl p-6 border border-border/50">
                    <div className="flex items-start justify-between mb-3">
                      <h3 className="text-xl font-semibold text-foreground">
                        {phase.phase}
                      </h3>
                      <Badge variant="outline" className="text-[rgba(255,255,255,1)] border-accent/30 bg-accent/10">
                        {phase.duration}
                      </Badge>
                    </div>
                    <p className="text-muted-foreground leading-relaxed">
                      {phase.description}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </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">
                Measurable success across key performance indicators and user satisfaction metrics
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {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="text-center bg-card/50 rounded-2xl p-8 border border-border/50 hover:border-accent/30 transition-colors duration-300"
                >
                  <div className="text-4xl font-bold text-accent mb-3">
                    {metric.value}
                  </div>
                  <div className="text-lg font-semibold text-foreground mb-2">
                    {metric.label}
                  </div>
                  <div className="text-base text-muted-foreground">
                    {metric.description}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Technical Achievements & Lessons */}
      <section className="py-24 bg-card/30">
        <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">
              {/* Technical Achievements */}
              <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">
                  Technical Achievements
                </h2>
                <div className="space-y-4">
                  {technicalAchievements.map((achievement, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: -20 }}
                      whileInView={{ opacity: 1, x: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      viewport={{ once: true }}
                      className="flex items-start gap-4 bg-background/50 rounded-xl p-6 border border-border/50"
                    >
                      <CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
                      <span className="text-muted-foreground">{achievement}</span>
                    </motion.div>
                  ))}
                </div>
              </motion.div>

              {/* Lessons Learned */}
              <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">
                  Lessons Learned
                </h2>
                <div className="space-y-8">
                  <div>
                    <h3 className="text-xl font-semibold text-green-400 mb-6">What Worked</h3>
                    <div className="space-y-3">
                      {lessonsLearned.worked.map((lesson, index) => (
                        <div key={index} className="flex items-start gap-3">
                          <CheckCircle className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground">{lesson}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  <div>
                    <h3 className="text-xl font-semibold text-orange-400 mb-6">What Could Improve</h3>
                    <div className="space-y-3">
                      {lessonsLearned.improve.map((lesson, index) => (
                        <div key={index} className="flex items-start gap-3">
                          <RefreshCw className="w-5 h-5 text-orange-400 mt-0.5 flex-shrink-0" />
                          <span className="text-muted-foreground">{lesson}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Future Roadmap - ORIGINAL SIMPLE VERSION */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-4xl 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">
                Future Roadmap
              </h2>
              <p className="text-xl text-muted-foreground">
                Planned enhancements to expand platform capabilities and user engagement
              </p>
            </motion.div>
            
            <div className="space-y-8">
              {futureRoadmap.map((roadmapPhase, index) => (
                <motion.div
                  key={roadmapPhase.phase}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-card/50 rounded-2xl p-8 border border-border/50"
                >
                  <h3 className="text-2xl font-semibold text-foreground mb-6">
                    {roadmapPhase.phase}
                  </h3>
                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {roadmapPhase.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-start gap-3 bg-background/50 rounded-lg p-4">
                        <ArrowRight className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                        <span className="text-muted-foreground text-base">{feature}</span>
                      </div>
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Client Testimonial - WITH TRADERS CIRCUIT LOGO */}
      <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-background/50 rounded-3xl p-12 border border-border/50">
              {/* Traders Circuit Logo */}
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.2 }}
                viewport={{ once: true }}
                className="flex justify-center mb-8"
              >
                <div className="h-8">
                  <img 
                    src={tradersCircuitLogo} 
                    alt="Traders Circuit Logo" 
                    className="h-full w-auto object-contain"
                  />
                </div>
              </motion.div>
              
              {/* Stars */}
              <div className="flex justify-center gap-1 mb-8">
                {[1, 2, 3, 4, 5].map((star) => (
                  <Star key={star} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              
              <blockquote className="text-2xl lg:text-3xl font-medium text-foreground mb-8 leading-relaxed text-[20px] italic text-[20px]">
                "WDI has helped us bring our vision to life with a sleek, reliable, and user-loved app. Their understanding of the trading space and mobile-first design thinking really made a difference."
              </blockquote>
              
              <div className="flex items-center justify-center gap-4">
                <div>
                  <div className="font-semibold text-foreground text-lg">Aashiq Gowda</div>
                  <div className="text-muted-foreground">Director, Traders Circuit Pvt Ltd.</div>
                </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="text-center max-w-4xl mx-auto"
          >
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
              Ready to Build Your Next Fintech Platform?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 leading-relaxed">
              Partner with WDI to transform your fintech vision into a powerful, user-loved application that drives real business results.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center">
              <Button 
                size="lg"
                className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 rounded-xl text-lg"
                onClick={() => navigateTo('/contact-us')}
              >
                Start Your Project <ExternalLink className="w-5 h-5 ml-2" />
              </Button>
              <Button 
                variant="outline"
                size="lg"
                className="border-border hover:bg-card/50 px-8 py-4 rounded-xl text-lg"
                onClick={() => navigateTo('/case-studies')}
              >
                View More Case Studies
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

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