---
import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";
---

<div>
  <div class="flex justify-between px-8 md:px-0 md:py-4">
    <div class="border-l-4 border-colorPrimary pl-4">
      <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
        <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
      </p>
    </div>
    <nav
      class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
    >
      <div class="hidden md:flex gap-8 font-primary font-bold">
        <a class="hover:text-colorPrimary transition" href="#somos">Somos</a>
        <a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
        <a class="hover:text-colorPrimary transition" href="#news">Noticias</a>
      </div>
      <div class="drawer lg:hidden">
        <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content">
          <!-- Page content here -->
          <label for="my-drawer-1" class="btn-ghost drawer-button"><Icon name="ph:list" class="text-white text-4xl font-bold" /></label>
        </div>
        <div class="drawer-side">
          <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
          <ul class="menu min-h-full w-80 p-4 bg-[url(/img/mid-logo-2.webp)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white">
            <!-- Sidebar content here -->
             <div class="flex gap-2 justify-center items-center mb-8 mt-8">
              <img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
                <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
                  <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
                </p>
                
             </div>
              
              <div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
                <li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li>
                <li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li>
                <li><a><a class="hover:text-colorPrimary transition" href="#news">Noticias</a></a></li>
              </div>
            <div class="w-50">
              <Button class="px-8 py-2 uppercase text-lg mt-8" title="Contacto" url="#contact" variant="primary" />
            </div>
          </ul>
        </div>
      </div>
      <div class="w-50 hidden md:block">
        <Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />
      </div>
    </nav>
  </div>
</div>