---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

const lang = 'es' as const;
---

<BaseLayout
  title="Contacto - Ornitonautas"
  description="Contacta con Ornitonautas. Estamos aquí para resolver tus dudas sobre Formación Profesional en informática."
>
  <Header lang={lang} />

  <main id="main-content">
    <section class="py-16 bg-gradient-to-br from-blue-50 to-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-slate-900 mb-4">Contacto</h1>
        <p class="text-lg text-slate-600 max-w-3xl">
          ¿Tienes preguntas sobre FP informática? Estamos aquí para ayudarte.
        </p>
      </div>
    </section>

    <section class="py-16 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-xl">
          <form class="space-y-6">
            <div>
              <label for="name" class="block text-sm font-medium text-slate-700 mb-1">Nombre</label>
              <input
                type="text"
                id="name"
                name="name"
                required
                class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
              />
            </div>
            <div>
              <label for="email" class="block text-sm font-medium text-slate-700 mb-1">Email</label>
              <input
                type="email"
                id="email"
                name="email"
                required
                class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
              />
            </div>
            <div>
              <label for="message" class="block text-sm font-medium text-slate-700 mb-1">Mensaje</label>
              <textarea
                id="message"
                name="message"
                rows="5"
                required
                class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors resize-y"
              ></textarea>
            </div>
            <button
              type="submit"
              class="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors"
            >
              Enviar Mensaje
            </button>
          </form>
        </div>
      </div>
    </section>
  </main>

  <Footer lang={lang} />
</BaseLayout>
