import { motion } from "motion/react";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { 
  Smartphone, 
  Monitor, 
  Tablet, 
  ArrowRight, 
  Star,
  Shield,
  TrendingUp,
  Users,
  Zap,
  Heart,
  Check,
  Menu,
  X,
  ChevronDown,
  CreditCard,
  PiggyBank,
  Home,
  BarChart3,
  Download,
  Wallet,
  Target,
  Building,
  Award,
  Lock,
  Globe,
  Sparkles
} from "lucide-react";
import { useState, useEffect } from "react";
import { ThemeToggle } from "./ThemeToggle";
import { SystemHealthDashboard } from "./SystemHealthDashboard";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import enamelLogo from 'figma:asset/2e2e3fad7673e8eef9a255215dd6ac2cf27cc590.png';

interface LandingPageProps {
  onNavigate: (page: "about" | "contact" | "sign-in" | "sign-up") => void;
}

export function LandingPage({ onNavigate }: LandingPageProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Navigation function for internal sections
  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
    setIsMenuOpen(false);
  };

  // Enhanced products data with better descriptions
  const products = [
    {
      icon: CreditCard,
      title: "Spend Wallet",
      description: "Instant payments for daily expenses. Handle bills, transfers, and purchases with lightning-fast transactions and zero delays.",
      color: "text-primary-600",
      bgColor: "bg-primary-50 dark:bg-primary-900/20",
      features: ["Instant transfers", "Bill payments", "24/7 availability"]
    },
    {
      icon: PiggyBank,
      title: "Fixed Savings", 
      description: "Disciplined wealth building with competitive returns. Lock funds for specific periods and watch your money grow with guaranteed interest.",
      color: "text-secondary-600",
      bgColor: "bg-secondary-50 dark:bg-secondary-900/20",
      features: ["Guaranteed returns", "Fixed periods", "Automatic savings"]
    },
    {
      icon: Users,
      title: "Group Contribution (Ajo/Esusu)",
      description: "Traditional community savings, digitized. Join trusted groups of 5-20 members for collective financial goals and rotational payouts.",
      color: "text-accent-600",
      bgColor: "bg-accent-50 dark:bg-accent-900/20",
      features: ["Verified groups", "Transparent process", "Cultural heritage"]
    },
    {
      icon: Home,
      title: "Goal-Based Savings",
      description: "Purpose-driven wealth accumulation. Save systematically for homes, education, business ventures, or any major life milestone.",
      color: "text-chart-4",
      bgColor: "bg-purple-50 dark:bg-purple-900/20",
      features: ["Custom targets", "Progress tracking", "Milestone rewards"]
    }
  ];

  // Enhanced services data
  const services = [
    {
      icon: TrendingUp,
      title: "Smart Automation",
      description: "Set-and-forget savings with intelligent algorithms that optimize your contributions based on spending patterns and income flow.",
      color: "text-primary-600",
      stats: "98% success rate"
    },
    {
      icon: Zap,
      title: "Instant Settlement",
      description: "Real-time transactions powered by advanced payment infrastructure. Your money moves when you need it, without bureaucratic delays.",
      color: "text-secondary-600",
      stats: "< 30 seconds"
    },
    {
      icon: Shield,
      title: "Bank-Grade Security",
      description: "Military-level encryption and multi-layer protection. Your funds are safer than traditional banks with insurance backing every naira.",
      color: "text-accent-600",
      stats: "256-bit encryption"
    },
    {
      icon: BarChart3,
      title: "Advanced Analytics",
      description: "AI-powered insights into your financial behavior. Understand spending patterns, optimize savings, and make data-driven money decisions.",
      color: "text-chart-4",
      stats: "Real-time insights"
    }
  ];

  // Enhanced how it works steps
  const steps = [
    {
      number: "01",
      title: "Sign Up in Minutes",
      description: "Create your account with just your phone number or email. Complete KYC verification instantly with BVN integration.",
      icon: Download,
      duration: "2 minutes"
    },
    {
      number: "02", 
      title: "Choose Your Wallet",
      description: "Select from our four specialized wallets or create multiple wallets for different financial goals and purposes.",
      icon: Wallet,
      duration: "30 seconds"
    },
    {
      number: "03",
      title: "Start Your Journey",
      description: "Begin saving with flexible contributions that fit your lifestyle. Daily, weekly, or monthly - you're in complete control.",
      icon: PiggyBank,
      duration: "Instant"
    },
    {
      number: "04",
      title: "Achieve Your Goals",
      description: "Watch your wealth grow with our intelligent algorithms. Receive payouts, reach targets, and celebrate financial milestones.",
      icon: Target,
      duration: "Ongoing"
    }
  ];

  // Enhanced testimonials with more detail
  const testimonials = [
    {
      name: "Adunni Olatunji",
      role: "Fashion Designer, Lagos",
      content: "Enamel Wallets transformed my business! The group savings feature helped me buy industrial sewing machines. My income tripled in 6 months.",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b27c?w=100&h=100&fit=crop&crop=face",
      amount: "₦2.5M saved"
    },
    {
      name: "Chukwuemeka Okafor",
      role: "Software Engineer, Abuja",
      content: "I never believed in Ajo until Enamel digitized it. Bought my plot of land in Jabi through transparent group contributions. Zero stress, maximum results.",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
      amount: "₦8M goal achieved"
    },
    {
      name: "Fatima Abdullahi",
      role: "Healthcare Worker, Kano",
      content: "The automated savings changed my financial discipline. Building my emergency fund was effortless with smart daily deductions that I barely noticed.",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=100&h=100&fit=crop&crop=face",
      amount: "₦500K emergency fund"
    }
  ];

  // Enhanced FAQ data
  const faqs = [
    {
      question: "How secure are my funds with Enamel Wallets?",
      answer: "Your money is protected with multiple layers of security: 256-bit encryption, two-factor authentication, biometric access, and partnerships with licensed financial institutions. As a registered cooperative, we operate with full transparency and member protection as our core values."
    },
    {
      question: "Can I withdraw my money anytime I need it?",
      answer: "Absolutely! Your Spend Wallet allows instant withdrawals 24/7. Fixed Savings have defined terms but offer early withdrawal options with minimal fees. Group savings follow agreed schedules, but emergency provisions are available through our support system."
    },
    {
      question: "What happens if someone in my group doesn't pay?",
      answer: "We have comprehensive protection: rigorous member verification, credit scoring, insurance coverage, and legal recovery processes. If someone defaults, we cover the shortfall and pursue recovery while keeping your savings intact."
    },
    {
      question: "How do I connect my existing bank accounts?",
      answer: "Link any Nigerian bank account in under 2 minutes through our secure API integration. We support all major banks including GTBank, Zenith, First Bank, UBA, Access Bank, and 40+ others. Your bank details are encrypted and never stored on our servers."
    },
    {
      question: "Are there any hidden charges or fees?",
      answer: "Zero hidden fees, period. Basic transactions, transfers, and standard savings are completely free. We only charge transparent fees for premium features like express withdrawals (₦50) or early fixed savings termination (2% of amount)."
    },
    {
      question: "How exactly do group contributions work?",
      answer: "Digital Ajo/Esusu with full transparency: 5-20 verified members contribute fixed amounts daily/weekly/monthly. Members receive the full pot in rotation. All transactions are recorded, payments automated, and the process is legally binding with insurance protection."
    }
  ];

  // Trust indicators data
  const trustIndicators = [
    { icon: Building, text: "Registered Cooperative", detail: "Thrift & Credit Society" },
    { icon: Shield, text: "Insured Funds", detail: "Member protection guaranteed" },
    { icon: Award, text: "50,000+ Members", detail: "Trusted cooperative" },
    { icon: Lock, text: "Zero Breaches", detail: "100% security record" }
  ];

  // About Us data
  const values = [
    {
      icon: Shield,
      title: "Trust & Security",
      description: "We prioritize the security of your funds and personal information with bank-grade encryption and security measures."
    },
    {
      icon: Users,
      title: "Community First",
      description: "We believe in building wealth together. Our group savings feature reflects our commitment to community financial growth."
    },
    {
      icon: Zap,
      title: "Innovation",
      description: "We continuously innovate to provide cutting-edge financial solutions tailored for the Nigerian market."
    },
    {
      icon: Target,
      title: "Member Success",
      description: "Every member matters to us. We provide 24/7 support to ensure your financial journey is smooth and successful."
    }
  ];

  const milestones = [
    {
      year: "2022",
      title: "The Beginning",
      description: "Founded with a vision to democratize financial services in Nigeria"
    },
    {
      year: "2023",
      title: "Cooperative Launch",
      description: "Launched our dual wallet system and onboarded first 10,000 members"
    },
    {
      year: "2024",
      title: "Growth Phase",
      description: "Expanded to 50,000+ members and processed over ₦2.5B in transactions"
    },
    {
      year: "2025",
      title: "Future Vision",
      description: "Expanding across West Africa with advanced AI-powered financial insights"
    }
  ];

  return (
    <div className="min-h-screen bg-background">
      {/* 1. Enhanced Header with better styling */}
      <header className="sticky top-0 z-50 bg-background/95 backdrop-blur-lg border-b border-border/60 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Professional Logo */}
            <div className="flex items-center space-x-4">
              <motion.div 
                className="w-12 h-12 rounded-2xl flex items-center justify-center p-1 bg-primary-50 dark:bg-primary-900/20"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <ImageWithFallback
                  src={enamelLogo}
                  alt="Enamel Wallets Logo"
                  className="w-full h-full object-contain"
                />
              </motion.div>
              <div>
                <span className="text-2xl font-bold bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
                  ENAMEL WALLETS
                </span>
                <p className="text-xs text-muted-foreground">Cooperative & Thrift Society</p>
              </div>
            </div>

            {/* Enhanced Desktop Navigation */}
            <nav className="hidden lg:flex items-center space-x-8">
              {[
                { label: "Home", action: () => scrollToSection('home') },
                { label: "About", action: () => scrollToSection('about') },
                { label: "Products", action: () => scrollToSection('products') },
                { label: "Services", action: () => scrollToSection('services') },
                { label: "FAQs", action: () => scrollToSection('faqs') },
                { label: "Contact", action: () => { onNavigate("contact"); setIsMenuOpen(false); } }
              ].map((item) => (
                <Button
                  key={item.label}
                  variant="ghost"
                  onClick={item.action}
                  className="text-foreground hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200"
                >
                  {item.label}
                </Button>
              ))}
              
              <div className="flex items-center space-x-3 ml-4 pl-4 border-l border-border">
                <ThemeToggle />
                <Button
                  variant="outline"
                  onClick={() => onNavigate("sign-in")}
                  className="border-primary-200 text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20"
                >
                  Sign In
                </Button>
                <Button
                  onClick={() => onNavigate("sign-up")}
                  className="bg-gradient-to-r from-primary-600 to-primary-500 hover:from-primary-700 hover:to-primary-600 text-white shadow-lg shadow-primary-500/25"
                >
                  Get Started
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </nav>

            {/* Mobile Menu Button */}
            <div className="lg:hidden flex items-center space-x-3">
              <ThemeToggle />
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="p-2"
              >
                {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </Button>
            </div>
          </div>
        </div>

        {/* Enhanced Mobile Menu */}
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="lg:hidden bg-background/95 backdrop-blur-lg border-t border-border/60"
          >
            <div className="px-4 py-6 space-y-4 max-w-7xl mx-auto">
              {[
                { label: "Home", action: () => scrollToSection('home') },
                { label: "About", action: () => { onNavigate("about"); setIsMenuOpen(false); } },
                { label: "Products", action: () => scrollToSection('products') },
                { label: "Services", action: () => scrollToSection('services') },
                { label: "FAQs", action: () => scrollToSection('faqs') },
                { label: "Contact", action: () => { onNavigate("contact"); setIsMenuOpen(false); } }
              ].map((item) => (
                <Button
                  key={item.label}
                  variant="ghost"
                  onClick={item.action}
                  className="w-full justify-start text-lg py-3"
                >
                  {item.label}
                </Button>
              ))}
              
              <div className="pt-4 border-t border-border space-y-3">
                <Button
                  variant="outline"
                  onClick={() => {
                    onNavigate("sign-in");
                    setIsMenuOpen(false);
                  }}
                  className="w-full"
                >
                  Sign In
                </Button>
                <Button
                  onClick={() => {
                    onNavigate("sign-up");
                    setIsMenuOpen(false);
                  }}
                  className="w-full bg-gradient-to-r from-primary-600 to-primary-500"
                >
                  Get Started
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </div>
          </motion.div>
        )}
      </header>

      {/* 2. Enhanced Hero Section */}
      <section id="home" className="relative overflow-hidden bg-gradient-to-br from-background via-primary-50/30 to-secondary-50/20 dark:from-background dark:via-primary-900/10 dark:to-secondary-900/10">
        {/* Professional Background Pattern */}
        <div className="absolute inset-0 overflow-hidden opacity-40">
          <svg className="absolute top-0 left-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <pattern id="hero-grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-primary-200 dark:text-primary-800"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#hero-grid)" />
          </svg>
        </div>

        {/* Floating elements with better positioning */}
        <div className="absolute inset-0 overflow-hidden">
          {[
            { x: "10%", y: "20%", delay: 0, size: 2 },
            { x: "80%", y: "30%", delay: 1, size: 1.5 },
            { x: "20%", y: "70%", delay: 2, size: 3 },
            { x: "70%", y: "80%", delay: 3, size: 2.5 }
          ].map((item, index) => (
            <motion.div
              key={index}
              animate={{
                x: [0, 30, 0],
                y: [0, -20, 0],
                scale: [1, 1.1, 1],
              }}
              transition={{
                duration: 8 + index,
                repeat: Infinity,
                delay: item.delay,
                ease: "easeInOut"
              }}
              className="absolute opacity-20"
              style={{ left: item.x, top: item.y }}
            >
              <div 
                className="bg-gradient-to-br from-primary-400 to-secondary-400 rounded-full blur-xl"
                style={{ 
                  width: `${item.size}rem`, 
                  height: `${item.size}rem` 
                }}
              />
            </motion.div>
          ))}
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32 relative">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center lg:text-left"
            >
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
              >
                <Badge 
                  variant="secondary" 
                  className="mb-8 bg-gradient-to-r from-primary-500 to-secondary-500 text-white border-0 text-sm px-6 py-3 rounded-full shadow-lg"
                >
                  <Sparkles className="w-4 h-4 mr-2" />
                  🇳🇬 Nigeria's Leading Savings Cooperative
                </Badge>
              </motion.div>
              
              <h1 className="text-5xl md:text-7xl font-extrabold text-foreground mb-8 leading-tight">
                Save Smart.{" "}
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 via-secondary-500 to-accent-500">
                  Grow Faster.
                </span>{" "}
                Live Better.
              </h1>
              
              <p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl leading-relaxed">
                Join over 50,000 Nigerians building wealth through intelligent savings, 
                group contributions, and smart financial planning. Your journey to financial 
                freedom starts here.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-6 mb-12">
                <Button
                  size="lg"
                  onClick={() => onNavigate("sign-up")}
                  className="bg-gradient-to-r from-primary-600 to-primary-500 hover:from-primary-700 hover:to-primary-600 text-white px-10 py-6 text-lg rounded-2xl shadow-xl shadow-primary-500/25 transform hover:scale-105 transition-all duration-200"
                >
                  Start Building Wealth
                  <ArrowRight className="w-6 h-6 ml-3" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-2 border-primary-200 text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 px-10 py-6 text-lg rounded-2xl"
                >
                  <Download className="w-6 h-6 mr-3" />
                  Download App
                </Button>
              </div>
              
              {/* Enhanced trust indicators */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                {trustIndicators.map((indicator, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 + index * 0.1 }}
                    className="text-center"
                  >
                    <div className="w-12 h-12 bg-gradient-to-br from-primary-100 to-secondary-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl flex items-center justify-center mx-auto mb-3">
                      <indicator.icon className="w-6 h-6 text-primary-600" />
                    </div>
                    <p className="font-semibold text-sm text-foreground">{indicator.text}</p>
                    <p className="text-xs text-muted-foreground">{indicator.detail}</p>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="relative"
            >
              <div className="relative z-10">
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2JpbGUlMjBiYW5raW5nJTIwYXBwJTIwcGhvbmUlMjBmaW50ZWNofGVufDF8fHx8MTc1NTgxMzc5MHww&ixlib=rb-4.1.0&q=80&w=1080"
                  alt="Enamel Wallets Mobile App"
                  className="w-full max-w-lg mx-auto rounded-3xl shadow-2xl"
                />
              </div>
              
              {/* Enhanced floating elements */}
              <div className="absolute inset-0 pointer-events-none">
                <motion.div
                  animate={{ y: [0, -15, 0], rotate: [0, 5, 0] }}
                  transition={{ duration: 4, repeat: Infinity }}
                  className="absolute top-12 -left-6 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 p-4 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700"
                >
                  <div className="flex items-center gap-3">
                    <div className="w-3 h-3 bg-secondary-500 rounded-full animate-pulse"></div>
                    <div className="space-y-1">
                      <p className="font-semibold text-sm text-foreground naira-symbol">₦125,500</p>
                      <p className="text-xs text-muted-foreground">Goal Achievement</p>
                    </div>
                  </div>
                </motion.div>
                
                <motion.div
                  animate={{ y: [0, 12, 0], rotate: [0, -3, 0] }}
                  transition={{ duration: 5, repeat: Infinity }}
                  className="absolute bottom-16 -right-6 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 p-4 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700"
                >
                  <div className="flex items-center gap-3">
                    <div className="w-3 h-3 bg-primary-500 rounded-full animate-pulse"></div>
                    <div className="space-y-1">
                      <p className="font-semibold text-sm text-foreground">Group Payout</p>
                      <p className="text-xs text-muted-foreground naira-symbol">₦2.5M received</p>
                    </div>
                  </div>
                </motion.div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* 3. About Us Section */}
      <section id="about" className="relative overflow-hidden py-20 lg:py-32 bg-gradient-to-br from-muted/30 via-background to-primary-50/20 dark:from-muted/30 dark:via-background dark:to-primary-900/10">
        {/* Enhanced floating animations in the middle */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {/* Central floating elements */}
          <motion.div
            animate={{
              x: [0, 50, -30, 0],
              y: [0, -40, 20, 0],
              rotate: [0, 180, 360],
              scale: [1, 1.2, 0.8, 1],
            }}
            transition={{
              duration: 15,
              repeat: Infinity,
              ease: "easeInOut"
            }}
            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
          >
            <div className="w-32 h-32 bg-gradient-to-r from-primary-300 to-secondary-300 rounded-full opacity-10 blur-3xl" />
          </motion.div>
          
          {/* Additional middle floating elements */}
          {[
            { x: "45%", y: "40%", delay: 2, size: 4, duration: 12 },
            { x: "55%", y: "60%", delay: 4, size: 3, duration: 10 },
            { x: "40%", y: "65%", delay: 6, size: 5, duration: 14 },
            { x: "60%", y: "35%", delay: 8, size: 2.5, duration: 11 },
          ].map((item, index) => (
            <motion.div
              key={index}
              animate={{
                x: [-20, 40, -30, 0],
                y: [-30, 25, -15, 0],
                scale: [1, 1.3, 0.7, 1],
                rotate: [0, 120, 240, 360],
              }}
              transition={{
                duration: item.duration,
                repeat: Infinity,
                delay: item.delay,
                ease: "easeInOut"
              }}
              className="absolute opacity-15"
              style={{ left: item.x, top: item.y }}
            >
              <div 
                className="bg-gradient-to-br from-accent-300 to-chart-4 rounded-full blur-2xl"
                style={{ 
                  width: `${item.size}rem`, 
                  height: `${item.size}rem` 
                }}
              />
            </motion.div>
          ))}
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          {/* Section Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <Badge variant="secondary" className="mb-6 bg-primary/10 text-primary border-0">
              About Enamel Wallets
            </Badge>
            <h2 className="text-4xl md:text-6xl font-extrabold text-foreground mb-6">
              Empowering Financial{" "}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-500">
                Freedom
              </span>
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              We're not just another savings platform. We're a cooperative movement dedicated to making financial 
              services accessible, affordable, and tailored for the unique needs of every Nigerian.
            </p>
          </motion.div>

          {/* Mission & Vision Cards */}
          <div className="grid md:grid-cols-2 gap-12 mb-20">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <Card className="border-0 shadow-2xl h-full bg-gradient-to-br from-white to-primary-50/50 dark:from-gray-800 dark:to-primary-900/20">
                <CardHeader className="pb-6">
                  <div className="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                    <Target className="w-8 h-8 text-white" />
                  </div>
                  <CardTitle className="text-3xl">Our Mission</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-lg leading-relaxed">
                    To democratize financial services in Nigeria by providing innovative, secure, and 
                    user-friendly cooperative solutions that help individuals and communities build wealth, 
                    manage money efficiently, and achieve their financial goals together.
                  </CardDescription>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <Card className="border-0 shadow-2xl h-full bg-gradient-to-br from-white to-secondary-50/50 dark:from-gray-800 dark:to-secondary-900/20">
                <CardHeader className="pb-6">
                  <div className="w-16 h-16 bg-gradient-to-br from-secondary-500 to-secondary-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                    <Globe className="w-8 h-8 text-white" />
                  </div>
                  <CardTitle className="text-3xl">Our Vision</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-lg leading-relaxed">
                    To become Africa's leading cooperative platform, creating a world where every African 
                    has access to comprehensive financial services that enable prosperity, financial 
                    inclusion, and economic growth across the continent.
                  </CardDescription>
                </CardContent>
              </Card>
            </motion.div>
          </div>

          {/* Core Values */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <h3 className="text-4xl font-bold text-foreground mb-6">Our Core Values</h3>
            <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
              These principles guide everything we do and shape how we serve our members
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
            {values.map((value, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                whileHover={{ y: -10 }}
              >
                <Card className="border-0 shadow-xl text-center h-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300">
                  <CardHeader>
                    <div className="w-16 h-16 bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-800 dark:to-primary-900 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <value.icon className="w-8 h-8 text-primary-600" />
                    </div>
                    <CardTitle className="text-xl">{value.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-base">{value.description}</CardDescription>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

          {/* Our Journey Timeline */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <h3 className="text-4xl font-bold text-foreground mb-6">Our Journey</h3>
            <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
              From a simple idea to transforming financial services for Nigerians
            </p>
          </motion.div>

          <div className="max-w-4xl mx-auto space-y-12">
            {milestones.map((milestone, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className={`flex items-center gap-8 ${index % 2 === 1 ? 'flex-row-reverse' : ''}`}
              >
                <div className="flex-1">
                  <Card className="border-0 shadow-xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm">
                    <CardHeader>
                      <div className="flex items-center gap-4">
                        <Badge variant="secondary" className="bg-gradient-to-r from-primary-500 to-secondary-500 text-white text-lg px-4 py-2">
                          {milestone.year}
                        </Badge>
                        <CardTitle className="text-2xl">{milestone.title}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-lg">
                        {milestone.description}
                      </CardDescription>
                    </CardContent>
                  </Card>
                </div>
                <motion.div 
                  className="w-6 h-6 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-full flex-shrink-0 shadow-lg"
                  whileHover={{ scale: 1.2 }}
                  transition={{ duration: 0.2 }}
                />
                <div className="flex-1"></div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* 4. Enhanced Products Section */}
      <section id="products" className="py-20 lg:py-32 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <Badge variant="secondary" className="mb-6 bg-secondary/10 text-secondary border-0">
              Our Products
            </Badge>
            <h2 className="text-4xl md:text-6xl font-extrabold text-foreground mb-6">
              Tailored{" "}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-secondary-600 to-primary-500">
                Financial Solutions
              </span>
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Four specialized wallets designed to meet every financial need - from daily expenses to long-term wealth building
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {products.map((product, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                whileHover={{ y: -10, scale: 1.02 }}
              >
                <Card className={`border-0 shadow-xl h-full ${product.bgColor} hover:shadow-2xl transition-all duration-300 group`}>
                  <CardHeader className="pb-4">
                    <div className="w-16 h-16 bg-white dark:bg-gray-800 rounded-2xl flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300">
                      <product.icon className={`w-8 h-8 ${product.color}`} />
                    </div>
                    <CardTitle className="text-2xl font-bold">{product.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <CardDescription className="text-base leading-relaxed">
                      {product.description}
                    </CardDescription>
                    <div className="space-y-2">
                      {product.features.map((feature, featureIndex) => (
                        <div key={featureIndex} className="flex items-center gap-2">
                          <Check className="w-4 h-4 text-secondary-600" />
                          <span className="text-sm font-medium">{feature}</span>
                        </div>
                      ))}
                    </div>
                    <Button className="w-full mt-6 group-hover:scale-105 transition-transform duration-200">
                      Learn More
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* 5. System Health & Technology Section */}
      <section className="py-20 lg:py-32 bg-gradient-to-br from-muted/30 via-background to-primary-50/20 dark:from-muted/30 dark:via-background dark:to-primary-900/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <Badge variant="secondary" className="mb-6 bg-accent/10 text-accent border-0">
              Technology & Infrastructure
            </Badge>
            <h2 className="text-4xl md:text-6xl font-extrabold text-foreground mb-6">
              Powered by{" "}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-600 to-chart-4">
                Advanced Technology
              </span>
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Our robust infrastructure ensures 99.9% uptime, real-time monitoring, and enterprise-grade security for your financial operations.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="mb-16"
          >
            <SystemHealthDashboard className="max-w-6xl mx-auto" />
          </motion.div>
        </div>
      </section>
    </div>
  );
}