import { useState } from 'react';
import { Plane, Ship, WarehouseIcon, ChevronRight, Phone, Mail } from 'lucide-react';

export default function ShippingWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-white font-inter">
      {/* Header */}
      <header className="bg-gradient-to-r from-blue-900 to-blue-800 text-white">
        <div className="container mx-auto px-4 py-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-2xl font-bold">GlobalFast Shipping</h1>
              <p className="text-blue-100">Delivering Excellence Worldwide</p>
            </div>
            
            {/* Mobile menu button */}
            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex space-x-8">
              {['Home', 'Services', 'Tracking', 'Contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="text-blue-100 hover:text-white transition-colors"
                >
                  {item}
                </a>
              ))}
            </nav>
          </div>

          {/* Mobile Navigation */}
          {isMenuOpen && (
            <nav className="mt-4 md:hidden">
              {['Home', 'Services', 'Tracking', 'Contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="block py-2 text-blue-100 hover:text-white transition-colors"
                >
                  {item}
                </a>
              ))}
            </nav>
          )}
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative bg-blue-900 text-white">
        <div 
          className="absolute inset-0 bg-cover bg-center opacity-20"
          style={{
            backgroundImage: "url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')"
          }}
        />
        <div className="relative container mx-auto px-4 py-24 text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Fast, Secure, and Affordable Shipping
          </h2>
          <p className="text-xl mb-8 text-blue-100">
            Your trusted partner in global logistics solutions
          </p>
          <button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors duration-200 flex items-center mx-auto">
            Get a Free Quote
            <ChevronRight className="ml-2 w-5 h-5" />
          </button>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12 text-blue-900">Our Services</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { title: 'Air Freight', description: 'Next-day international delivery', icon: Plane },
              { title: 'Sea Freight', description: 'Cost-effective bulk shipping', icon: Ship },
              { title: 'Warehousing', description: 'Secure storage solutions', icon: WarehouseIcon }
            ].map((service) => (
              <div key={service.title} className="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200">
                <service.icon className="w-12 h-12 text-blue-900 mb-4" />
                <h3 className="text-xl font-semibold mb-2 text-blue-900">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-blue-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <div className="flex justify-center space-x-6 mb-6">
              <a href="tel:+18001234567" className="flex items-center text-blue-100 hover:text-white transition-colors">
                <Phone className="w-5 h-5 mr-2" />
                +1 (800) 123-4567
              </a>
              <a href="mailto:info@globalfast.com" className="flex items-center text-blue-100 hover:text-white transition-colors">
                <Mail className="w-5 h-5 mr-2" />
                info@globalfast.com
              </a>
            </div>
            <p className="text-blue-200">© 2023 GlobalFast Shipping. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}