import Link from "next/link";

export default function Home() {
  return (
    <div className="bg-gray-100 min-h-screen flex flex-col">
      {/* Header Section */}
      <header className="bg-gray-800 text-white py-4 shadow-md">
        <div className="container mx-auto px-6 flex justify-between items-center">
          <h1 className="text-2xl font-bold">Firearm Builder</h1>
          <nav>
            <ul className="flex space-x-4">
                <li><Link href="#features"><a className="hover:underline">Features</a></Link></li>
                <li><Link href="/builder"><a className="hover:underline">Builder</a></Link></li>
                <li><Link href="/products"><a className="hover:underline">Products</a></Link></li>
                <li><Link href="#contact"><a className="hover:underline">Contact</a></Link></li>
            </ul>
        </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gray-700 text-white py-20 text-center">
        <div className="container mx-auto px-6">
          <h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
          <p className="text-lg mb-6">
            Customize every component of your firearm with ease and precision.
          </p>
          <Link href="/builder">
            <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Get Started
            </a>
          </Link>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20">
        <div className="container mx-auto px-6 text-center">
          <h3 className="text-3xl font-bold mb-6">Features</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white shadow-md p-6 rounded">
              <h4 className="text-xl font-bold mb-2">Extensive Database</h4>
              <p className="text-gray-600">
                Access thousands of firearm parts from trusted resellers.
              </p>
            </div>
            <div className="bg-white shadow-md p-6 rounded">
              <h4 className="text-xl font-bold mb-2">Compatibility Checker</h4>
              <p className="text-gray-600">
                Ensure every part works perfectly together.
              </p>
            </div>
            <div className="bg-white shadow-md p-6 rounded">
              <h4 className="text-xl font-bold mb-2">Save & Share Builds</h4>
              <p className="text-gray-600">
                Save your builds or share them with friends.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="bg-gray-200 py-20">
        <div className="container mx-auto px-6 text-center">
          <h3 className="text-3xl font-bold mb-6">About Us</h3>
          <p className="text-gray-700">
            Firearm Builder is your go-to platform for customizing, building,
            and exploring firearm parts. Designed for enthusiasts by
            enthusiasts, we make firearm building easy and accessible.
          </p>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20">
        <div className="container mx-auto px-6 text-center">
          <h3 className="text-3xl font-bold mb-6">Contact Us</h3>
          <p className="text-gray-700 mb-6">
            Have questions or feedback? We’d love to hear from you!
          </p>
          <Link href="mailto:support@firearmbuilder.com">
            <a className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Email Us
            </a>
          </Link>
        </div>
      </section>

      {/* Footer Section */}
      <footer className="bg-gray-800 text-white py-4">
        <div className="container mx-auto px-6 text-center">
          <p>&copy; {new Date().getFullYear()} Firearm Builder. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}