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 { Wallet, Users, Target, Heart, ChevronLeft, Shield, Globe, Zap, Star } from "lucide-react";
import { ThemeToggle } from "./ThemeToggle";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import enamelLogo from 'figma:asset/2e2e3fad7673e8eef9a255215dd6ac2cf27cc590.png';

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

export function AboutUsPage({ onBack, onNavigate }: AboutUsPageProps) {
  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: Heart,
      title: "Customer Care",
      description: "Every customer matters to us. We provide 24/7 support to ensure your financial journey is smooth and successful."
    }
  ];

  const team = [
    {
      name: "Adebayo Johnson",
      role: "CEO & Founder",
      description: "Former Goldman Sachs executive with 15+ years in fintech and a passion for financial inclusion in Africa."
    },
    {
      name: "Funmi Adeyemi",
      role: "CTO",
      description: "Tech visionary who previously built payment systems at Paystack and Flutterwave, now leading our engineering team."
    },
    {
      name: "Chinedu Okafor",
      role: "Head of Product",
      description: "Product strategist with deep understanding of Nigerian consumer behavior and financial needs."
    }
  ];

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

  const testimonials = [
    {
      name: "Adunni Olatunji",
      role: "Fashion Designer, Onitsha",
      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-1668815092058-12bef53157a2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBuaWdlcmlhbiUyMHdvbWFuJTIwYnVzaW5lc3N8ZW58MXx8fHwxNzU1ODIyNjM4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
      amount: "₦2.5M saved"
    },
    {
      name: "Chukwuemeka Okafor",
      role: "Software Engineer, Onitsha",
      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, Onitsha",
      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"
    }
  ];

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <Button
                variant="ghost"
                size="sm"
                onClick={onBack}
                className="flex items-center space-x-2"
              >
                <ChevronLeft className="w-4 h-4" />
                <span>Back</span>
              </Button>
              <div className="flex items-center space-x-3">
                <div className="w-8 h-8 rounded-lg flex items-center justify-center p-1">
                  <ImageWithFallback
                    src={enamelLogo}
                    alt="Enamel Wallets Logo"
                    className="w-full h-full object-contain"
                  />
                </div>
                <span className="text-lg font-bold text-foreground">ENAMEL WALLETS</span>
              </div>
            </div>

            <div className="flex items-center space-x-4">
              <ThemeToggle />
              <Button
                variant="outline"
                onClick={() => onNavigate("sign-in")}
                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground"
              >
                Sign In
              </Button>
              <Button
                onClick={() => onNavigate("sign-up")}
                className="bg-primary text-primary-foreground hover:bg-primary/90"
              >
                Get Started
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-background to-muted/20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <Badge variant="secondary" className="mb-6 bg-primary/10 text-primary border-0">
              About Enamel Wallets
            </Badge>
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
              Empowering Financial Freedom{" "}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
                for Every Nigerian
              </span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              We're not just another fintech company. We're a movement dedicated to making financial 
              services accessible, affordable, and tailored for the unique needs of Nigerians.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <Card className="border-0 shadow-lg h-full">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                    <Target className="w-6 h-6 text-primary" />
                  </div>
                  <CardTitle className="text-2xl">Our Mission</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base">
                    To democratize financial services in Nigeria by providing innovative, secure, and 
                    user-friendly banking solutions that help individuals and communities build wealth, 
                    manage money efficiently, and achieve their financial goals.
                  </CardDescription>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
            >
              <Card className="border-0 shadow-lg h-full">
                <CardHeader>
                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
                    <Globe className="w-6 h-6 text-secondary" />
                  </div>
                  <CardTitle className="text-2xl">Our Vision</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base">
                    To become Africa's leading financial 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>
        </div>
      </section>

      {/* Values */}
      <section className="py-16 bg-muted/30">
        <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-12"
          >
            <h2 className="text-3xl font-bold text-foreground mb-4">Our Core Values</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              These principles guide everything we do and shape how we serve our customers
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((value, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="border-0 shadow-lg text-center h-full">
                  <CardHeader>
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <value.icon className="w-6 h-6 text-primary" />
                    </div>
                    <CardTitle className="text-lg">{value.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>{value.description}</CardDescription>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Story Timeline */}
      <section className="py-16">
        <div className="max-w-4xl 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-12"
          >
            <h2 className="text-3xl font-bold text-foreground mb-4">Our Journey</h2>
            <p className="text-muted-foreground">
              From a simple idea to transforming financial services in Nigeria
            </p>
          </motion.div>

          <div className="space-y-8">
            {milestones.map((milestone, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
                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-lg">
                    <CardHeader>
                      <div className="flex items-center gap-4">
                        <Badge variant="secondary" className="bg-primary/10 text-primary">
                          {milestone.year}
                        </Badge>
                        <CardTitle className="text-xl">{milestone.title}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <CardDescription className="text-base">
                        {milestone.description}
                      </CardDescription>
                    </CardContent>
                  </Card>
                </div>
                <div className="w-4 h-4 bg-primary rounded-full flex-shrink-0"></div>
                <div className="flex-1"></div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Leadership Team */}
      <section className="py-16 bg-muted/30">
        <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-12"
          >
            <h2 className="text-3xl font-bold text-foreground mb-4">Meet Our Leadership</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Experienced leaders committed to revolutionizing financial services in Africa
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {team.map((member, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="border-0 shadow-lg text-center h-full">
                  <CardHeader>
                    <div className="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-full mx-auto mb-4 flex items-center justify-center">
                      <Users className="w-10 h-10 text-white" />
                    </div>
                    <CardTitle className="text-xl">{member.name}</CardTitle>
                    <Badge variant="secondary" className="bg-primary/10 text-primary">
                      {member.role}
                    </Badge>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-sm">
                      {member.description}
                    </CardDescription>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Customer Testimonials */}
      <section className="py-16 bg-muted/30">
        <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-12"
          >
            <h2 className="text-3xl font-bold text-foreground mb-4">Meet Our Customers</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Real stories from real people who have transformed their financial lives with Enamel Wallets
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="border-0 shadow-lg h-full relative overflow-hidden">
                  <div className="absolute top-4 right-4 flex">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>
                  <CardHeader className="text-center">
                    <div className="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden shadow-lg">
                      <ImageWithFallback
                        src={testimonial.avatar}
                        alt={testimonial.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <CardTitle className="text-xl">{testimonial.name}</CardTitle>
                    <Badge variant="secondary" className="bg-primary/10 text-primary">
                      {testimonial.role}
                    </Badge>
                    <Badge variant="outline" className="mt-2 border-secondary text-secondary">
                      {testimonial.amount}
                    </Badge>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-sm italic text-center leading-relaxed">
                      "{testimonial.content}"
                    </CardDescription>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-primary to-secondary">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            className="text-white"
          >
            <h2 className="text-3xl font-bold mb-4">
              Ready to Join Our Financial Revolution?
            </h2>
            <p className="text-xl mb-8 opacity-90">
              Be part of the movement that's transforming how Nigerians save, spend, and grow their wealth
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                onClick={() => onNavigate("sign-up")}
                className="bg-white text-primary hover:bg-gray-100 px-8"
              >
                Get Started Today
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => onNavigate("contact")}
                className="border-white text-white hover:bg-white hover:text-primary px-8"
              >
                Get in Touch
              </Button>
            </div>
          </motion.div>
        </div>
      </section>
    </div>
  );
}