import { Link } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';

const teamMembers = [
  {
    name: 'Alexis Chen',
    role: 'Founder & CEO',
    bio: 'Former Tesla executive with over 15 years of experience in the electric vehicle industry. Passionate about sustainable transportation and innovative mobility solutions.',
    image: 'https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?q=80&w=200&h=200&auto=format&fit=crop',
  },
  {
    name: 'Marcus Johnson',
    role: 'CTO',
    bio: 'Tech innovator with background in automotive software and AI. Led development of several EV charging networks before joining CarFleet to revolutionize electric vehicle rentals.',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&h=200&auto=format&fit=crop',
  },
  {
    name: 'Sophia Rodriguez',
    role: 'COO',
    bio: 'Operations expert who previously scaled multiple tech startups. Oversees our network of locations and ensures every rental experience exceeds customer expectations.',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&h=200&auto=format&fit=crop',
  },
  {
    name: 'David Kim',
    role: 'Head of Customer Experience',
    bio: 'Hospitality industry veteran focused on creating premium experiences. Designs our customer journey from booking to return with a focus on convenience and satisfaction.',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&h=200&auto=format&fit=crop',
  },
];

const timeline = [
  {
    year: '2021',
    title: 'Company Founded',
    description: 'CarFleet was founded with a vision to accelerate the adoption of electric vehicles through flexible rental and subscription options.',
  },
  {
    year: '2022',
    title: 'First Location Launch',
    description: 'Opened our first rental location in San Francisco with a fleet of 20 Tesla vehicles.',
  },
  {
    year: '2023',
    title: 'Expansion to Major Cities',
    description: 'Expanded to Los Angeles, New York, Miami, Chicago, and Seattle with an increased fleet of 200+ vehicles.',
  },
  {
    year: '2024',
    title: 'Introduction of Premium Subscription Plans',
    description: 'Launched our tiered subscription plans to provide flexible options for different usage needs.',
  },
  {
    year: '2025',
    title: 'Expansion to Additional EV Brands',
    description: 'Added other premium electric vehicle brands to our fleet while maintaining our core Tesla rental business.',
  },
];

const AboutPage = () => {
  return (
    <div className="bg-[#0a0a0a] text-white min-h-screen">
      {/* Hero Section */}
      <section className="relative py-20 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20 z-0"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">About CarFleet</h1>
            <p className="text-gray-300 text-lg md:text-xl">
              We're on a mission to accelerate the world's transition to sustainable transportation by making electric vehicles accessible to everyone.
            </p>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-16 bg-[#0c0c0c]">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-6">Our Mission</h2>
            <p className="text-gray-300 text-lg mb-6">
              At CarFleet, we believe that the future of transportation is electric. Our mission is to accelerate the adoption of sustainable transportation by providing accessible electric vehicle rental and subscription options.
            </p>
            <p className="text-gray-300 text-lg mb-6">
              We're committed to reducing carbon emissions and fighting climate change by helping more people experience the benefits of electric vehicles without the commitment of ownership.
            </p>
            <p className="text-gray-300 text-lg">
              Through our flexible rental plans, premium customer service, and growing network of charging stations, we're making electric mobility convenient and enjoyable for everyone.
            </p>
          </div>
        </div>
      </section>

      {/* Company Timeline */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-10 text-center">Our Journey</h2>
            <div className="relative border-l border-gray-800 ml-6">
              {timeline.map((item, index) => (
                <div key={index} className="mb-10 ml-6">
                  <div className="absolute w-4 h-4 bg-blue-600 rounded-full -left-[10px] mt-1.5"></div>
                  <span className="absolute -left-[4.5rem] bg-[#161617] px-2 py-1 rounded-md text-sm font-semibold">
                    {item.year}
                  </span>
                  <h3 className="text-xl font-semibold mb-1">{item.title}</h3>
                  <p className="text-gray-400">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16 bg-[#0c0c0c]">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-3xl font-bold mb-12 text-center">Our Team</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {teamMembers.map((member, index) => (
                <div key={index} className="bg-[#161617] rounded-lg overflow-hidden">
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-64 object-cover"
                  />
                  <div className="p-5">
                    <h3 className="text-lg font-semibold">{member.name}</h3>
                    <p className="text-blue-500 text-sm mb-3">{member.role}</p>
                    <p className="text-gray-400 text-sm line-clamp-4">{member.bio}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-6">Our Values</h2>
            <p className="text-gray-300 text-lg max-w-3xl mx-auto">
              These core principles guide everything we do, from how we treat our customers to how we develop our services.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-[#161617] p-6 rounded-lg">
              <h3 className="text-xl font-semibold mb-3">Sustainability</h3>
              <p className="text-gray-400">
                We're committed to reducing carbon emissions and promoting sustainable transportation. Our all-electric fleet helps customers reduce their environmental footprint.
              </p>
            </div>
            <div className="bg-[#161617] p-6 rounded-lg">
              <h3 className="text-xl font-semibold mb-3">Innovation</h3>
              <p className="text-gray-400">
                We embrace cutting-edge technology and continuously improve our services. From our app to our vehicle features, we're always looking for ways to enhance the customer experience.
              </p>
            </div>
            <div className="bg-[#161617] p-6 rounded-lg">
              <h3 className="text-xl font-semibold mb-3">Accessibility</h3>
              <p className="text-gray-400">
                We believe everyone should have access to premium electric vehicles. Our flexible rental and subscription options make it possible for more people to experience the future of transportation.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-[#0c0c0c]">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-6">Join Our Vision</h2>
            <p className="text-gray-300 text-lg mb-8">
              Experience the future of transportation today. Rent a Tesla or subscribe to one of our premium plans.
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <Link
                to="/vehicles"
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-colors flex items-center justify-center gap-2"
              >
                Browse Electric Vehicles
                <ChevronRight size={16} />
              </Link>
              <Link
                to="/pricing"
                className="bg-transparent border border-blue-600 text-blue-600 hover:bg-blue-600/10 px-6 py-3 rounded-md font-medium transition-colors flex items-center justify-center gap-2"
              >
                View Subscription Plans
                <ChevronRight size={16} />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default AboutPage;