Contact Section with Form and Multi-Column Footer

<section class="relative z-20 bg-black text-white w-full border-t border-white/10 pointer-events-auto font-sans">
  <script src="https://unpkg.com/lucide@latest"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <div class="w-full">
    <!-- Contact Form Area -->
    <div class="grid grid-cols-1 lg:grid-cols-12 border-white/10 border-b bg-[#6D28D9]">

      <!-- Left: Headline & Context -->
      <div
        class="col-span-1 lg:col-span-5 lg:p-16 lg:border-b-0 lg:border-r flex flex-col border-white/10 border-b pt-8 pr-8 pb-8 pl-8 justify-between">
        <div class="relative z-10">
          <div
            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 mb-8 backdrop-blur-sm">
            <iconify-icon icon="solar:chat-round-dots-linear" width="16" class="text-white"></iconify-icon>
            <span class="text-xs font-medium tracking-wide text-white/60 uppercase">Get in touch</span>
          </div>
          <h2 class="text-4xl lg:text-6xl font-medium tracking-tighter text-white leading-[0.95] mb-6">
            Ready to elevate your digital <span class="text-violet-300">presence?</span>
          </h2>
          <p class="text-lg text-white/50 font-light leading-relaxed max-w-md">
            My workflow is tailored for ambitious brands looking to make a statement. Let's build a safe, clean, and
            organized digital space together.
          </p>
        </div>

        <div class="hidden lg:block mt-12 relative z-10">
          <div class="flex items-center gap-2 text-sm text-white/40 mb-2">
            <iconify-icon icon="solar:clock-circle-linear" width="16"></iconify-icon>
            <span>Avg. response time: 24h</span>
          </div>
        </div>
      </div>

      <!-- Right: Form -->
      <div class="col-span-1 lg:col-span-7 p-8 lg:p-16 bg-white/5">
        <form class="space-y-12">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
            <!-- Name -->
            <div class="relative group">
              <label class="block uppercase text-xs font-medium text-white/80 tracking-widest mb-2">Name</label>
              <input type="text" class="w-full bg-transparent border-b border-white/10 py-3 text-lg text-white placeholder-white/20 outline-none focus:border-white transition-colors" placeholder="Johan Beker">
            </div>

            <!-- Email -->
            <div class="relative group">
              <label class="block uppercase text-xs font-medium text-white/80 tracking-widest mb-2">Email</label>
              <input type="email" class="w-full bg-transparent border-b border-white/10 py-3 text-lg text-white placeholder-white/20 outline-none focus:border-white transition-colors" placeholder="johan@example.com">
            </div>
          </div>

          <!-- Phone -->
          <div class="relative group">
            <label class="block uppercase text-xs font-medium text-white/80 tracking-widest mb-2">Phone Number</label>
            <input type="tel" class="w-full bg-transparent border-b border-white/10 py-3 text-lg text-white placeholder-white/20 outline-none focus:border-white transition-colors" placeholder="+1 (555) 000-0000">
          </div>

          <!-- Message -->
          <div class="relative group">
            <label class="block uppercase text-xs font-medium text-white/80 tracking-widest mb-2">Tell me about your project</label>
            <textarea rows="3" class="w-full bg-transparent border-b border-white/10 py-3 text-lg text-white placeholder-white/20 outline-none focus:border-white transition-colors resize-none" placeholder="I need a new design system for..."></textarea>
          </div>

          <div class="flex items-center justify-end pt-4">
            <button type="button" class="group relative px-8 py-4 bg-white text-black text-sm font-semibold tracking-wide rounded-sm overflow-hidden transition-all hover:bg-green-400 hover:text-black hover:shadow-lg">
                            <span class="relative z-10 flex items-center gap-2">
                                Send Request
                                <iconify-icon icon="solar:arrow-right-linear" width="16" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
                            </span>
                        </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Main Footer Links Section -->
    <div class="grid grid-cols-1 lg:grid-cols-4 bg-[#0A0A0A]">

      <!-- Brand Column -->
      <div
        class="col-span-1 p-8 lg:p-12 border-b lg:border-b-0 lg:border-r border-white/10 flex flex-col justify-between h-full min-h-[300px]">
        <div class="space-y-8">
          <div class="w-12 h-12 flex items-center justify-center bg-white text-black rounded-sm">
            <iconify-icon icon="solar:infinity-bold" width="24"></iconify-icon>
          </div>

          <div class="space-y-4">
            <h3 class="text-xl font-medium tracking-tight text-white">Johan Beker</h3>
            <p class="text-sm text-white/40 leading-relaxed max-w-[200px]">
              Crafting digital experiences that merge art with function.
            </p>
          </div>
        </div>

        <div class="flex gap-4 mt-auto pt-8">
          <a href="#" class="text-white/40 hover:text-white transition-colors"><iconify-icon icon="simple-icons:x"
              width="20"></iconify-icon></a>
          <a href="#" class="text-white/40 hover:text-white transition-colors"><iconify-icon
              icon="simple-icons:instagram" width="20"></iconify-icon></a>
          <a href="#" class="text-white/40 hover:text-white transition-colors"><iconify-icon
              icon="simple-icons:linkedin" width="20"></iconify-icon></a>
        </div>
      </div>

      <!-- Links Columns -->
      <div class="col-span-1 lg:col-span-3 grid grid-cols-2 md:grid-cols-3">
        <div class="p-8 lg:p-12 border-r border-b lg:border-b-0 border-white/10">
          <h4 class="text-xs font-mono uppercase tracking-widest text-white/40 mb-8">Sitemap</h4>
          <ul class="space-y-4">
            <li><a href="#"
                class="text-sm text-white/70 hover:text-white transition-all flex items-center gap-2 group">Work
                <iconify-icon icon="solar:arrow-right-up-linear" width="12"
                  class="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-[#6D28D9]"></iconify-icon></a>
            </li>
            <li><a href="#"
                class="text-sm text-white/70 hover:text-white transition-all flex items-center gap-2 group">Services
                <iconify-icon icon="solar:arrow-right-up-linear" width="12"
                  class="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-[#6D28D9]"></iconify-icon></a>
            </li>
            <li><a href="#"
                class="text-sm text-white/70 hover:text-white transition-all flex items-center gap-2 group">Process
                <iconify-icon icon="solar:arrow-right-up-linear" width="12"
                  class="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-[#6D28D9]"></iconify-icon></a>
            </li>
          </ul>
        </div>

        <div class="p-8 lg:p-12 border-r border-b lg:border-b-0 border-white/10">
          <h4 class="text-xs font-mono uppercase tracking-widest text-white/40 mb-8">Resources</h4>
          <ul class="space-y-4">
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Documentation</a></li>
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Changelog</a></li>
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Design System</a></li>
          </ul>
        </div>

        <div class="col-span-2 md:col-span-1 p-8 lg:p-12">
          <h4 class="text-xs font-mono uppercase tracking-widest text-white/40 mb-8">Legal</h4>
          <ul class="space-y-4">
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Privacy Policy</a></li>
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Terms of Service</a></li>
            <li><a href="#" class="text-sm text-white/70 hover:text-white transition-colors">Cookie Policy</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Copyright Bar -->
    <div
      class="border-t border-white/10 p-6 lg:px-12 lg:py-8 bg-black flex flex-col md:flex-row items-center justify-between gap-4">
      <div class="text-xs text-white/30 font-light tracking-wide">
        © 2024 Johan Beker. All rights reserved. Berlin, Germany.
      </div>

      <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="group flex items-center gap-2 text-xs font-medium text-white/60 hover:text-white transition-colors uppercase tracking-wider cursor-pointer border px-4 py-2 border-white/10 rounded-full hover:bg-white/5">
                Back to top
                <iconify-icon icon="solar:arrow-up-linear" width="14" class="group-hover:-translate-y-0.5 transition-transform"></iconify-icon>
            </button>
    </div>
  </div>
</section>