import React from 'react';
import { ArrowRight } from 'lucide-react';

const Footer = () => {
  return (
    <footer className="bg-white">
      {/* Newsletter section */}
      <div className="border-t border-gray-200 py-12">
        <div className="container-max text-center">
          <h3 className="text-2xl font-bold text-bulls-gray mb-4">
            STAY UPDATED WITH OUR LATEST NEWS
          </h3>
          <p className="text-gray-600 mb-8">
            Subscribe to our newsletter and be the first to know about new products and updates
          </p>
          <div className="flex justify-center">
            <button className="btn-primary inline-flex items-center space-x-2">
              <span>FIND YOUR DEALER</span>
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      {/* Main footer */}
      <div className="bg-bulls-gray text-white py-12">
        <div className="container-max">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {/* Company info */}
            <div>
              <div className="text-2xl font-bold mb-4">
                <span className="bg-white text-black px-2 py-1 mr-1 transform -skew-x-12">BULLS</span>
              </div>
              <p className="text-gray-300 text-sm leading-relaxed">
                Premium E-Bikes and Mountain Bikes for every adventure. Experience the future of cycling with BULLS.
              </p>
            </div>

            {/* Quick links */}
            <div>
              <h4 className="font-bold mb-4">QUICK LINKS</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">E-Bikes</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Mountain Bikes</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Service</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Dealer Search</a></li>
              </ul>
            </div>

            {/* Support */}
            <div>
              <h4 className="font-bold mb-4">SUPPORT</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Contact</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">FAQ</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Warranty</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Manual Downloads</a></li>
              </ul>
            </div>

            {/* Legal */}
            <div>
              <h4 className="font-bold mb-4">LEGAL</h4>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Imprint</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Data Privacy Notice</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Cookies</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Terms</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-600 mt-8 pt-8 text-center">
            <p className="text-gray-400 text-sm">
              © 2024 BULLS Bikes. All rights reserved. | Prices include VAT and are subject to change.
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;