import { ArrowRight, CheckCircle, Github, Twitter } from "lucide-react";

export default function Website() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-gray-50">
      {/* Navigation */}
      <nav className="flex items-center justify-between p-6 max-w-7xl mx-auto">
        <div className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 text-transparent bg-clip-text">
          Company
        </div>
        <div className="flex gap-8">
          <a href="#" className="text-gray-600 hover:text-gray-900">Products</a>
          <a href="#" className="text-gray-600 hover:text-gray-900">Features</a>
          <a href="#" className="text-gray-600 hover:text-gray-900">About</a>
          <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
            Get Started
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="max-w-7xl mx-auto px-6 py-24 text-center">
        <h1 className="text-6xl font-bold tracking-tight">
          Build something
          <span className="bg-gradient-to-r from-blue-600 to-indigo-600 text-transparent bg-clip-text"> amazing </span>
          today
        </h1>
        <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
          Create beautiful, modern websites with our powerful platform. Start building your next big idea today.
        </p>
        <div className="mt-10 flex gap-4 justify-center">
          <button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
            Get Started <ArrowRight size={20} />
          </button>
          <button className="border border-gray-300 px-6 py-3 rounded-lg hover:border-gray-400 transition">
            Learn More
          </button>
        </div>
      </header>

      {/* Features Section */}
      <section className="max-w-7xl mx-auto px-6 py-24">
        <div className="grid grid-cols-3 gap-8">
          {[
            "Easy to customize",
            "Modern design",
            "Fast performance",
            "SEO optimized",
            "24/7 support",
            "Regular updates"
          ].map((feature) => (
            <div key={feature} className="flex items-center gap-2 text-gray-700">
              <CheckCircle className="text-blue-600" size={20} />
              {feature}
            </div>
          ))}
        </div>
      </section>

      {/* Image Section */}
      <section className="max-w-7xl mx-auto px-6 py-12">
        <div className="bg-gray-200 rounded-xl h-96 flex items-center justify-center text-gray-400">
          Your product image here
        </div>
      </section>

      {/* Footer */}
      <footer className="max-w-7xl mx-auto px-6 py-12 border-t">
        <div className="flex justify-between items-center">
          <div className="text-sm text-gray-600">
            © 2024 Company. All rights reserved.
          </div>
          <div className="flex gap-4">
            <a href="#" className="text-gray-600 hover:text-gray-900">
              <Github size={20} />
            </a>
            <a href="#" className="text-gray-600 hover:text-gray-900">
              <Twitter size={20} />
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}