import { Link } from 'react-router-dom';
import { ArrowRight, ShieldCheck, Zap, Calendar } from 'lucide-react';

const HomePage = () => {
  return (
    <div className="bg-[#0a0a0a] text-white">
      {/* 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 lg:text-6xl font-bold mb-6">
              Rent Your Dream<br />Electric Vehicle
            </h1>
            <p className="text-gray-300 text-lg md:text-xl mb-8">
              Experience the future of transportation with our premium electric vehicle
              rental service. Zero emissions, maximum performance.
            </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"
              >
                Browse Electric Vehicles
              </Link>
              <Link
                to="/how-it-works"
                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"
              >
                Learn More
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 bg-[#0c0c0c]">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
              <div className="bg-blue-600/20 p-3 rounded-full mb-4">
                <ShieldCheck className="text-blue-500 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Safe & Secure</h3>
              <p className="text-gray-400">
                Premium vehicles with advanced safety features
              </p>
            </div>

            <div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
              <div className="bg-blue-600/20 p-3 rounded-full mb-4">
                <Zap className="text-blue-500 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-2">100% Electric</h3>
              <p className="text-gray-400">
                Zero emissions, maximum performance
              </p>
            </div>

            <div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
              <div className="bg-blue-600/20 p-3 rounded-full mb-4">
                <Calendar className="text-blue-500 w-8 h-8" />
              </div>
              <h3 className="text-xl font-semibold mb-2">Easy Booking</h3>
              <p className="text-gray-400">
                Book your ride in minutes
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Experience Electric Luxury
            </h2>
            <p className="text-gray-300">
              Discover our lineup of premium electric vehicles. Cutting-edge technology,
              breathtaking design, and zero emissions. Explore and reserve your Tesla today.
            </p>
          </div>

          {/* Vehicle Cards will go here */}
          <div className="flex justify-center mt-12">
            <Link
              to="/vehicles"
              className="flex items-center text-blue-500 hover:text-blue-400 transition-colors font-medium"
            >
              <span>View all vehicles</span>
              <ArrowRight className="ml-2 w-5 h-5" />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default HomePage;