import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";
import {
  Activity,
  ArrowLeft,
  ArrowRight,
  Bell,
  Brain,
  Calendar,
  CheckCircle,
  Cloud,
  Code,
  Database,
  ExternalLink,
  Globe,
  Home,
  Layers,
  List,
  Mic,
  Monitor,
  Palette,
  RefreshCw,
  Scan,
  Server,
  Share2,
  ShoppingCart,
  Smartphone,
  Star,
  Target,
  Users,
  Wrench,
  Zap
} from "lucide-react";
import { GridPattern } from "../components/GridPattern";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Button } from "../components/ui/button";
import ranoutofLogo from "../src/images/ranoutof-logo.webp";
import { useNavigate } from "react-router-dom";

// Technology to icon mapping
const getTechIcon = (tech: string) => {
  const techIconMap: { [key: string]: React.ReactNode } = {
    "React Native": <Smartphone className="w-4 h-4" />,
    "Laravel": <Server className="w-4 h-4" />,
    "Node.js": <Server className="w-4 h-4" />,
    "MySQL": <Database className="w-4 h-4" />,
    "Firebase": <Cloud className="w-4 h-4" />,
    "PHP": <Code className="w-4 h-4" />,
    "JavaScript": <Code className="w-4 h-4" />,
    "TypeScript": <Code className="w-4 h-4" />,
    "REST API": <Activity className="w-4 h-4" />,
    "WebSocket": <Activity className="w-4 h-4" />,
    "Redux": <Layers className="w-4 h-4" />,
    "PWA": <Monitor className="w-4 h-4" />
  };

  return techIconMap[tech] || <Wrench className="w-4 h-4" />;
};

const projectDetails = {
  title: "RanOutOf – Simplify Grocery Planning with AI-Powered Lists",
  subtitle: "A voice-enabled, reminder-rich, and collaborative grocery management app designed to simplify household planning and eliminate stockouts",
  technologies: ["React Native", "Node.js", "MySQL", "AWS"],
  industries: ["Consumer Tech", "Retail Technology", "Productivity"],
  duration: "15 weeks, October 2024 – January 2025",
  teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
  platforms: ["Android", "iOS", "Admin Web Portal"]
};

const keyAchievements = [
  { label: "Product Categories", value: "200+", description: "Over 25,000 items available" },
  { label: "List Sharing", value: "100%", description: "Real-time collaboration" },
  { label: "Smart Alerts", value: "24/7", description: "Expiry and restock reminders" }
];

const businessObjectives = [
  "Build a grocery app with voice, barcode, and manual list entry",
  "Provide household inventory and restocking reminders",
  "Enable collaboration among users for shared lists",
  "Design a modern, intuitive UI with reminders and category tagging"
];

const coreFeatures = [
  {
    title: "Smart List Builder",
    description: "Add items via typing, voice commands, or barcode scanning with auto-suggestions",
    icon: <List className="w-6 h-6" />
  },
  {
    title: "Inventory Tracking",
    description: "Track home inventory, expiry dates, and get automated restocking alerts",
    icon: <Home className="w-6 h-6" />
  },
  {
    title: "Real-time Collaboration",
    description: "Share lists with family members and sync updates instantly across devices",
    icon: <Share2 className="w-6 h-6" />
  },
  {
    title: "Voice Integration",
    description: "Add items hands-free with voice commands and smart speech recognition",
    icon: <Mic className="w-6 h-6" />
  },
  {
    title: "Barcode Scanner",
    description: "Scan product barcodes for instant item recognition and inventory management",
    icon: <Scan className="w-6 h-6" />
  },
  {
    title: "Smart Notifications",
    description: "Intelligent reminders for expiring items and customizable notification settings",
    icon: <Bell className="w-6 h-6" />
  }
];

const technicalChallenges = [
  {
    title: "Multi-Input Integration",
    description: "Creating seamless integration between voice, barcode, and manual input methods",
    icon: <Activity className="w-5 h-5" />
  },
  {
    title: "Real-time Synchronization",
    description: "Ensuring instant list sharing and updates across multiple family members",
    icon: <RefreshCw className="w-5 h-5" />
  },
  {
    title: "Inventory Intelligence",
    description: "Building smart expiration tracking and predictive restocking algorithms",
    icon: <Brain className="w-5 h-5" />
  },
  {
    title: "Cross-platform Consistency",
    description: "Maintaining identical user experience across iOS, Android, and web admin",
    icon: <Monitor className="w-5 h-5" />
  }
];

const developmentPhases = [
  {
    phase: "Research & Planning",
    duration: "4 weeks",
    description: "User research, market analysis, feature prioritization, and technical architecture",
    icon: <Target className="w-5 h-5" />
  },
  {
    phase: "UI/UX Design",
    duration: "2 weeks",
    description: "User interface design, prototyping, and user experience optimization",
    icon: <Palette className="w-5 h-5" />
  },
  {
    phase: "Core Development",
    duration: "6 weeks",
    description: "Mobile app development, authentication, list builder, and basic inventory",
    icon: <Code className="w-5 h-5" />
  },
  {
    phase: "Advanced Features",
    duration: "2 weeks",
    description: "Voice integration, barcode scanning, collaboration features, and notifications",
    icon: <Zap className="w-5 h-5" />
  },
  {
    phase: "Testing & QA",
    duration: "1 week",
    description: "Comprehensive testing, bug fixes, and performance optimization",
    icon: <CheckCircle className="w-5 h-5" />
  }
];

const resultsMetrics = [
  { label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
  { label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
  { label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
  { label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
  { label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
  { label: "Inventory Accuracy", value: "92%", description: "Smart tracking precision" }
];

const technicalAchievements = [
  "Voice recognition with 95% accuracy across multiple languages",
  "Real-time synchronization with conflict resolution algorithms",
  "Smart inventory prediction based on consumption patterns",
  "Seamless barcode integration with 200+ product categories"
];

const lessonsLearned = {
  worked: [
    "User testing with real families improved collaboration features significantly",
    "Voice input prototyping early helped refine speech recognition accuracy",
    "Modular architecture enabled rapid feature additions and updates"
  ],
  improve: [
    "Notification frequency personalization needed earlier implementation",
    "Barcode database integration required more comprehensive planning",
    "Family onboarding flow could benefit from interactive tutorials"
  ]
};

const futureRoadmap = [
  {
    phase: "Phase 2",
    features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"]
  },
  {
    phase: "Phase 3",
    features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery and eCommerce platforms"]
  }
];


export const RanOutOfProject = () => {
  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-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center"
                  alt="RanOutOf smart grocery management app showcasing voice-enabled list creation and collaborative family planning"
                  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-green-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-green-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">
                RanOutOf is a smart, AI-powered grocery management app designed for households, featuring voice input, reminders, and collaborative list sharing. This case study highlights WDI’s expertise in crafting an intuitive, family-friendly solution that simplifies grocery planning and boosts efficiency.
              </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-green-500/10 backdrop-blur-sm rounded-xl border border-green-500/20 flex items-center justify-center group-hover:bg-green-500/20 transition-all duration-300">
                        <ShoppingCart className="w-6 h-6 text-green-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-green-500/10 border-green-500/20 text-green-100 hover:bg-green-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-blue-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-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">
                        <Calendar className="w-6 h-6 text-blue-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 RanOutOf's success in transforming household grocery management
                </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">
              RanOutOf is a mobile-first app designed to help modern households simplify grocery shopping and stay organized. The app streamlines list creation, supports collaborative household planning, and efficiently manages pantry inventory with features like reminders, barcode scanning, and smart grouping. By helping users maintain control over their groceries, RanOutOf reduces the risk of stockouts and minimizes food waste, making everyday shopping easier and more efficient.
            </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">
                  Frequent grocery stockouts, duplicate purchases, and poor inventory tracking are common problems for busy families. RanOutOf addresses this by digitizing list-building, enabling collaboration, and automatically reminding users about restocking needs.
                </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">
                  Tech-savvy individuals and families (age 15–65) who want to simplify their grocery management and improve household planning through mobile convenience.
                </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 household grocery management with smart automation and collaboration.
              </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: React Native</span>
                        </div>
                        <div className="flex items-center gap-3">
                          <Server className="w-5 h-5 text-accent" />
                          <span className="text-muted-foreground">Backend: Node.js</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">Cloud: AWS</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">Voice recognition with multi-language support</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">Real-time synchronization with conflict resolution</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">Smart inventory tracking with expiry prediction</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">Comprehensive admin panel for content management</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">
                RanOutOf follows an Agile development approach with milestone-based delivery. This ensures timely completion while maintaining high quality through iterative progress and continuous feedback.
              </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">
                RanOutOf delivers comprehensive performance metrics showcasing its success in transforming household grocery management. Key indicators include improved inventory accuracy, reduced stockouts, increased shared list usage, and measurable reductions in food waste, demonstrating real value to users.
              </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 RanOutOf development journey.
              </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 further revolutionize grocery management apps.
              </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={ranoutofLogo}
                  alt="RanOutOf - Smart Grocery Management App 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">
                "WDI delivered a clean, powerful solution that has made grocery planning easier than ever. The list templates, reminders, and inventory alerts are game-changers for our users."
              </blockquote>

              <div className="flex flex-col items-center">
                <div className="text-lg font-semibold text-foreground">
                  Rishabh Jain
                </div>
                <div className="text-muted-foreground">
                  Director, Global Ease Solutions Pty. Ltd.
                </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 a smart, collaborative lifestyle app?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Partner with WDI to design solutions that streamline daily life with precision tech and intuitive design.
            </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 Us
                <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>
  );
};