<script setup>
import { router } from "@inertiajs/vue3";

import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
import NotificationController from "@/Controllers/NotificationController";

const notificationCtl = NotificationController;

const logout = () => {
  router.post(
    route("logout"),
    {},
    {
      onBefore: () => {
        notificationCtl.stop();
      },
    }
  );
};
</script>

<template>
  <div
    class="min-h-screen font-sans bg-gradient-to-br from-[#621132] via-[#621132] to-[#621132] text-[#621132] antialiased"
  >
    <button
      class="fixed top-4 right-4 z-50 inline-flex items-center bg-white/10 text-white rounded-lg hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 transition p-2"
      type="button"
      @click.prevent="logout"
    >
      {{ $t("auth.logout") }}
    </button>
    <main class="grid min-h-screen place-items-center p-4">
      <!-- Tarjeta -->
      <section
        class="w-full max-w-2xl rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-white/10"
      >
        <!-- Encabezado -->
        <header class="mb-6 sm:mb-8">
          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-white">
            Accesos rápidos
          </h1>
          <p class="mt-2 text-sm sm:text-base text-white">
            Selecciona un destino.
          </p>
        </header>

        <!-- Grid de botones -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
          <!-- Botón 1 -->
          <a
            :href="route('dashboard.api-tramite')"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 active:scale-[0.99]"
            aria-label="Ir al sitio 1"
          >
            <div class="flex items-center gap-3">
              <!-- Ícono externo simple -->
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">
                  Reporte Especial de Trámites
                </h2>
                <p class="text-sm text-slate-300">
                  Resumen de trámites por unidad administrativa
                </p>
              </div>
            </div>
            <!-- Efecto -->
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(199, 12, 12, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 2 -->
          <a
            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=1&period=week&type=almacen"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
            aria-label="Ir al sitio 2"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">Apoyo a Beneficiarios</h2>
                <p class="text-sm text-slate-300">
                  Dashboard de apoyo a Beneficiarios
                </p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(98, 17, 50, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 3 -->
          <a
            :href="route('dashboard.api-obra')"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-400 active:scale-[0.99]"
            aria-label="Ir al sitio 3"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">Información de Obras</h2>
                <p class="text-sm text-slate-300">Proyectos en seguimiento</p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(255, 255, 255, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>

          <!-- Botón 4 -->
          <a
            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=3&period=week&type=almacen"
            target="_blank"
            class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
            aria-label="Ir al sitio 4"
          >
            <div class="flex items-center gap-3">
              <span class="rounded-xl bg-white/10 p-2">
                <GoogleIcon name="open_in_new" class="text-white" />
              </span>
              <div class="min-w-0">
                <h2 class="font-semibold text-white">DIF</h2>
                <p class="text-sm text-slate-300">Dashboard de DIF</p>
              </div>
            </div>
            <span
              class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              style="
                background: radial-gradient(
                  600px circle at var(--x, 50%) var(--y, 50%),
                  rgba(255, 255, 255, 0.12),
                  transparent 40%
                );
              "
            ></span>
          </a>
        </div>
      </section>
    </main>
  </div>
</template>
