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

<Layout
  title="Kontakt"
  description="Holen Sie sich zusammen mit place4bees ein Stück Natur in Ihr Unternehmen."
>
  <section class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16">
    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-brand-accent">Partnerschaftliche vertrauensvolle Zusammenarbeit</p>
    <h1 class="mt-2 text-4xl text-brand-ink">Holen Sie sich zusammen mit uns ein Stück Natur in Ihr Unternehmen</h1>
    <p class="mt-4 text-brand-text normal-case">
      place4bees ist in Hamburg zuhause und arbeitet deutschlandweit und in der DACH-Region mit
      festen Vertragsimkern zusammen.
    </p>

    <form class="mt-8 grid gap-4 max-w-md">
      <input type="text" name="name" placeholder="Name" required class="rounded-lg border border-brand-border px-4 py-2" />
      <input type="email" name="email" placeholder="E-Mail" required class="rounded-lg border border-brand-border px-4 py-2" />
      <textarea name="message" placeholder="Ihr Anliegen" rows="4" required class="rounded-lg border border-brand-border px-4 py-2"></textarea>
      <label class="flex items-start gap-2 text-sm text-brand-text-muted normal-case">
        <input type="checkbox" required class="mt-1" />
        Ich stimme der Datenschutzerklärung zu.
      </label>
      <button type="submit" class="rounded bg-brand-primary text-brand-ink px-6 py-3 text-sm font-semibold hover:bg-brand-primary-hover transition-colors">
        Senden
      </button>
    </form>

    <div class="mt-10 text-sm text-brand-text-muted normal-case">
      <p>place4bees GmbH</p>
      <p>Isestr. 109, 20149 Hamburg</p>
      <p>kontakt@place4bees.com · +49 162-2 35 02 02</p>
    </div>
  </section>
</Layout>