<script lang="ts">
	import { Clock, CheckCircle2, XCircle } from 'lucide-svelte';
	import { resolve } from '$app/paths';
</script>

<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
	<div class="card-body">
		<!-- Cabeçalho da Categoria -->
		<div class="flex items-start gap-6 mb-6">
			<div class="p-4 bg-blue-500/20 rounded-2xl">
				<div class="text-blue-600">
					<Clock class="h-12 w-12" strokeWidth={2} />
				</div>
			</div>
			<div class="flex-1">
				<h2 class="card-title text-2xl mb-2 text-blue-600">
					Gestão de Pontos
				</h2>
				<p class="text-base-content/70">Registros de ponto do dia</p>
			</div>
		</div>

		<!-- Grid de Opções -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
			<a
				href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
				class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-blue-500/10 to-blue-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
			>
				<div class="flex flex-col h-full">
					<div class="flex items-start justify-between mb-4">
						<div
							class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
						>
							<div
								class="text-blue-600 group-hover:text-white"
							>
								<Clock class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
					>
						Gestão de Pontos
					</h3>
					<p class="text-sm text-base-content/70 flex-1">
						Visualizar e gerenciar registros de ponto
					</p>
				</div>
			</a>
			<a
				href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
				class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-green-500/10 to-green-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
			>
				<div class="flex flex-col h-full">
					<div class="flex items-start justify-between mb-4">
						<div
							class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
						>
							<div
								class="text-green-600 group-hover:text-white"
							>
								<CheckCircle2 class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
					>
						Homologação de Registro
					</h3>
					<p class="text-sm text-base-content/70 flex-1">
						Edite registros de ponto e ajuste banco de horas
					</p>
				</div>
			</a>
			<a
				href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
				class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-orange-500/10 to-orange-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
			>
				<div class="flex flex-col h-full">
					<div class="flex items-start justify-between mb-4">
						<div
							class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
						>
							<div
								class="text-orange-600 group-hover:text-white"
							>
								<XCircle class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
					>
						Dispensa de Registro
					</h3>
					<p class="text-sm text-base-content/70 flex-1">
						Gerencie períodos de dispensa de registro de ponto
					</p>
				</div>
			</a>
		</div>
	</div>
</div>

