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

<Layout title="Contact" description="Neem contact op met SiteLoft. Vertel ons over je project en we reageren binnen 24 uur met een vrijblijvend voorstel.">
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
      <div class="mx-auto max-w-3xl text-center mb-16">
        <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Laten we <span class="text-gradient">kennismaken</span></h1>
        <p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Vertel ons over je project. We reageren binnen 24 uur op werkdagen met een vrijblijvend voorstel.</p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
        <!-- FORM -->
        <div class="lg:col-span-3">
          <div class="rounded-2xl glass p-8">
            <form action="#" method="POST" class="space-y-6">
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                  <label for="name" class="block text-sm font-medium text-slate-300 mb-2">Naam *</label>
                  <input type="text" id="name" name="name" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je naam" />
                </div>
                <div>
                  <label for="email" class="block text-sm font-medium text-slate-300 mb-2">Email *</label>
                  <input type="email" id="email" name="email" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="naam@bedrijf.nl" />
                </div>
              </div>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                  <label for="phone" class="block text-sm font-medium text-slate-300 mb-2">Telefoon</label>
                  <input type="tel" id="phone" name="phone" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="06 12345678" />
                </div>
                <div>
                  <label for="company" class="block text-sm font-medium text-slate-300 mb-2">Bedrijf</label>
                  <input type="text" id="company" name="company" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je bedrijfsnaam" />
                </div>
              </div>
              <div>
                <label for="budget" class="block text-sm font-medium text-slate-300 mb-2">Budget indicatie</label>
                <select id="budget" name="budget" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-500/50">
                  <option value="">Selecteer een range</option>
                  <option value="<2500">Minder dan &euro;2.500</option>
                  <option value="2500-5000">&euro;2.500 - &euro;5.000</option>
                  <option value="5000-10000">&euro;5.000 - &euro;10.000</option>
                  <option value=">10000">Meer dan &euro;10.000</option>
                </select>
              </div>
              <div>
                <label for="message" class="block text-sm font-medium text-slate-300 mb-2">Bericht *</label>
                <textarea id="message" name="message" rows="5" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50 resize-none" placeholder="Vertel ons over je project, wensen en doelen..."></textarea>
              </div>
              <button type="submit" class="group w-full inline-flex items-center justify-center gap-2 rounded-xl bg-accent-500 px-8 py-3.5 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
                Verstuur bericht
                <svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
              </button>
            </form>
          </div>
        </div>

        <!-- SIDEBAR -->
        <div class="lg:col-span-2 space-y-8">
          <div class="rounded-2xl glass-light p-8">
            <h3 class="text-lg font-semibold text-slate-100 mb-6">Contactgegevens</h3>
            <div class="space-y-5">
              <div class="flex items-start gap-4">
                <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
                </div>
                <div>
                  <p class="text-sm font-medium text-slate-300">Email</p>
                  <a href="mailto:info@siteloft.nl" class="text-sm text-accent-400 hover:text-accent-300 transition-colors">info@siteloft.nl</a>
                </div>
              </div>
              <div class="flex items-start gap-4">
                <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
                </div>
                <div>
                  <p class="text-sm font-medium text-slate-300">Locatie</p>
                  <p class="text-sm text-slate-500">Nederland</p>
                </div>
              </div>
              <div class="flex items-start gap-4">
                <div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                </div>
                <div>
                  <p class="text-sm font-medium text-slate-300">Bereikbaarheid</p>
                  <p class="text-sm text-slate-500">Ma - Vr, 09:00 - 17:00</p>
                </div>
              </div>
            </div>
          </div>

          <div class="rounded-2xl glass-light p-8">
            <h3 class="text-lg font-semibold text-slate-100 mb-6">Wat kun je verwachten?</h3>
            <div class="space-y-4">
              {[
                { step: '1', title: 'Reactie binnen 24 uur', desc: 'We lezen je bericht en reageren op werkdagen binnen 24 uur.' },
                { step: '2', title: 'Vrijblijvend gesprek', desc: 'We plannen een kort gesprek om je wensen en doelen te bespreken.' },
                { step: '3', title: 'Voorstel op maat', desc: 'Je ontvangt een duidelijk voorstel met scope, planning en kosten.' },
                { step: '4', title: 'Start van je project', desc: 'Na akkoord starten we direct. Je bent altijd betrokken bij het proces.' },
              ].map(item => (
                <div class="flex items-start gap-3">
                  <div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent-500/20 text-accent-400 text-xs font-bold">{item.step}</div>
                  <div>
                    <p class="text-sm font-medium text-slate-300">{item.title}</p>
                    <p class="text-xs text-slate-500">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</Layout>