import React from 'react';
import { Link } from 'react-router-dom';
import { Users, Target, Award, Heart, ArrowRight } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Badge } from '../components/ui/badge';

const About = () => {
  const team = [
    {
      name: 'Alex Johnson',
      role: 'Founder & CEO',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400',
    },
    {
      name: 'Sarah Williams',
      role: 'Head of Operations',
      image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400',
    },
    {
      name: 'Mike Chen',
      role: 'Lead Technician',
      image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400',
    },
    {
      name: 'Emily Davis',
      role: 'Customer Success',
      image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400',
    },
  ];

  const values = [
    {
      icon: Target,
      title: 'Quality First',
      desc: 'We never compromise on the quality of our products and services.',
    },
    {
      icon: Users,
      title: 'Customer Focus',
      desc: 'Your satisfaction is our top priority. We listen and deliver.',
    },
    {
      icon: Award,
      title: 'Excellence',
      desc: 'We strive for excellence in everything we do.',
    },
    {
      icon: Heart,
      title: 'Integrity',
      desc: 'Honest, transparent, and ethical business practices.',
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero */}
      <section className="py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 md:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <Badge variant="secondary" className="rounded-full px-4 py-1">
                About TechZone
              </Badge>
              <h1 className="text-4xl sm:text-5xl font-bold font-['Outfit'] leading-tight">
                Your Trusted
                <br />
                <span className="text-muted-foreground">Tech Partner</span>
              </h1>
              <p className="text-lg text-muted-foreground leading-relaxed">
                Founded in 2020, TechZone has grown from a small repair shop to a 
                comprehensive tech solutions provider. We combine quality products 
                with expert services to deliver the best tech experience.
              </p>
              <div className="flex flex-wrap gap-4">
                <Link to="/products" data-testid="about-shop-now">
                  <Button size="lg" className="rounded-full gap-2 btn-press">
                    Shop Now
                    <ArrowRight className="h-5 w-5" />
                  </Button>
                </Link>
                <Link to="/contact" data-testid="about-contact-us">
                  <Button size="lg" variant="outline" className="rounded-full">
                    Contact Us
                  </Button>
                </Link>
              </div>
            </div>

            <div className="relative">
              <img
                src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800"
                alt="Our Team"
                className="rounded-2xl shadow-2xl"
                data-testid="about-hero-image"
              />
              {/* Stats Card */}
              <div className="absolute -bottom-6 -left-6 bg-card border border-border rounded-xl p-6 shadow-lg">
                <p className="text-3xl font-bold font-['Outfit']">5+</p>
                <p className="text-sm text-muted-foreground">Years of Excellence</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-12 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 md:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {[
              { value: '50K+', label: 'Happy Customers' },
              { value: '10K+', label: 'Products Sold' },
              { value: '15K+', label: 'Repairs Done' },
              { value: '98%', label: 'Satisfaction Rate' },
            ].map((stat, idx) => (
              <div key={idx} className="text-center" data-testid={`stat-${idx}`}>
                <p className="text-4xl md:text-5xl font-bold font-['Outfit'] mb-2">{stat.value}</p>
                <p className="text-muted-foreground">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Story */}
      <section className="py-16 md:py-24">
        <div className="max-w-4xl mx-auto px-4 md:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4">
              Our Story
            </h2>
          </div>
          <div className="prose prose-lg dark:prose-invert max-w-none">
            <p className="text-muted-foreground leading-relaxed mb-6">
              TechZone started with a simple vision: to make quality tech accessible 
              and provide expert support that customers can trust. What began as a 
              small phone repair shop has evolved into a full-service tech destination.
            </p>
            <p className="text-muted-foreground leading-relaxed mb-6">
              Our team of certified technicians brings decades of combined experience 
              in electronics repair, from smartphones to laptops and everything in between. 
              We've helped thousands of customers bring their devices back to life.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              Today, we're proud to offer a curated selection of premium electronics 
              alongside our repair services. Every product we sell meets our high standards 
              for quality, and every repair we do is backed by our satisfaction guarantee.
            </p>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 md:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4">
              Our Values
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              The principles that guide everything we do
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {values.map((value, idx) => {
              const Icon = value.icon;
              return (
                <div
                  key={idx}
                  className="p-6 rounded-2xl bg-card border border-border hover-lift text-center"
                  data-testid={`value-${idx}`}
                >
                  <div className="w-14 h-14 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
                    <Icon className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-lg font-semibold mb-2 font-['Outfit']">{value.title}</h3>
                  <p className="text-sm text-muted-foreground">{value.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 md:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4">
              Meet Our Team
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              The people behind TechZone's success
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {team.map((member, idx) => (
              <div
                key={idx}
                className="group text-center"
                data-testid={`team-member-${idx}`}
              >
                <div className="relative mb-4 overflow-hidden rounded-2xl aspect-square">
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                </div>
                <h3 className="font-semibold font-['Outfit']">{member.name}</h3>
                <p className="text-sm text-muted-foreground">{member.role}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
        <div className="max-w-4xl mx-auto px-4 md:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold font-['Outfit'] mb-4">
            Ready to Get Started?
          </h2>
          <p className="text-primary-foreground/80 mb-8 max-w-2xl mx-auto">
            Whether you need a new device or want to repair your current one, 
            we're here to help.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link to="/products" data-testid="cta-browse-products">
              <Button size="lg" variant="secondary" className="rounded-full px-8 btn-press">
                Browse Products
              </Button>
            </Link>
            <Link to="/services" data-testid="cta-our-services">
              <Button 
                size="lg" 
                variant="outline" 
                className="rounded-full px-8 border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10"
              >
                Our Services
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;
