<template>
  <section
    id="contact"
    class="contact py-20 px-4 bg-white dark:bg-gray-900 text-gray-800 dark:text-white"
  >
    <h2 class="text-3xl font-semibold text-center mb-6">
      Let's Create Together
    </h2>
    <p class="text-center mb-10 text-gray-600 dark:text-gray-400">
      Ready to start your next project? We’d love to hear from you.
    </p>
    <form class="max-w-2xl mx-auto space-y-4">
      <input
        type="text"
        placeholder="Your Name"
        class="w-full p-3 rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400"
      />
      <input
        type="email"
        placeholder="Your Email"
        class="w-full p-3 rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400"
      />
      <textarea
        rows="4"
        placeholder="Your Message"
        class="w-full p-3 rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400"
      ></textarea>
      <button
        type="submit"
        class="w-full bg-gray-900 text-white py-3 rounded-md hover:bg-gray-800 transition dark:bg-white dark:text-black dark:hover:bg-gray-100"
      >
        Send Message
      </button>
    </form>
  </section>
</template>
