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">Ballistic Builder</h1>
          <nav>
            <ul className="flex space-x-4">
                <li><Link href="#features" className="hover:underline">Features</Link></li>
                <li><Link href="/builder" className="hover:underline">Builder</Link></li>
                <li><Link href="/products" className="hover:underline">Products</Link></li>
                <li><Link href="#contact" className="hover:underline">Contact</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"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            
              Get Started
            
          </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">
            Ballistic Builderis 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"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            
              Email Us
            
          </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>)
  );
}