---
import Layout from "../layouts/Layout.astro";
---

<Layout title="お問い合わせ - 202510新建ウェブプロジェクト株式会社">
  <!-- Hero -->
  <section
    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24 text-center"
  >
    <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">お問い合わせ</h1>
    <p class="text-blue-50">
      お気軽にお問い合わせください。担当者より折り返しご連絡いたします。
    </p>
  </section>

  <!-- フォーム -->
  <section class="max-w-3xl mx-auto py-20 px-6">
    <div class="bg-white shadow-lg rounded-lg p-8">
      <form class="space-y-6">
        <div>
          <label for="name" class="block font-semibold text-gray-700 mb-2"
            >お名前</label
          >
          <input
            id="name"
            type="text"
            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
            placeholder="山田 太郎"
          />
        </div>

        <div>
          <label for="email" class="block font-semibold text-gray-700 mb-2"
            >メールアドレス</label
          >
          <input
            id="email"
            type="email"
            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
            placeholder="example@example.com"
          />
        </div>

        <div>
          <label for="message" class="block font-semibold text-gray-700 mb-2"
            >お問い合わせ内容</label
          >
          <textarea
            id="message"
            rows="5"
            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
            placeholder="ご質問・ご相談内容を入力してください。"></textarea>
        </div>

        <div class="text-center">
          <button
            type="submit"
            class="bg-blue-600 text-white font-semibold px-8 py-3 rounded-full hover:bg-blue-700 transition"
          >
            送信する
          </button>
        </div>
      </form>
    </div>
  </section>
</Layout>
