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

<div class="container mx-auto px-4 py-6">
	<!-- Header -->
	<div class="flex items-center gap-4 mb-6">
		<div class="p-3 bg-primary/10 rounded-xl">
			<Clock class="h-8 w-8 text-primary" strokeWidth={2} />
		</div>
		<div>
			<h1 class="text-3xl font-bold text-base-content">Controle de Ponto</h1>
			<p class="text-base-content/60 mt-1">Gerencie registros, homologações e dispensas de ponto</p>
		</div>
	</div>

	<!-- Grid de Cards -->
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
		<!-- Card 1: Gestão de Pontos -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
			class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
		>
			<div class="card-body">
				<div class="flex items-start justify-between mb-4">
					<div class="p-4 bg-blue-500/20 rounded-2xl">
						<Clock class="h-8 w-8 text-blue-600" strokeWidth={2} />
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5 text-base-content/30"
						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>
				<h2 class="card-title text-xl mb-2">Gestão de Pontos</h2>
				<p class="text-base-content/70">
					Visualizar e gerenciar registros de ponto dos funcionários, relatórios e histórico
				</p>
			</div>
		</a>

		<!-- Card 2: Homologação de Registro -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
			class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
		>
			<div class="card-body">
				<div class="flex items-start justify-between mb-4">
					<div class="p-4 bg-green-500/20 rounded-2xl">
						<CheckCircle2 class="h-8 w-8 text-green-600" strokeWidth={2} />
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5 text-base-content/30"
						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>
				<h2 class="card-title text-xl mb-2">Homologação de Registro</h2>
				<p class="text-base-content/70">
					Edite registros de ponto do seu time, ajuste banco de horas (compensar, abonar ou descontar)
				</p>
			</div>
		</a>

		<!-- Card 3: Dispensa de Registro -->
		<a
			href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
			class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
		>
			<div class="card-body">
				<div class="flex items-start justify-between mb-4">
					<div class="p-4 bg-orange-500/20 rounded-2xl">
						<XCircle class="h-8 w-8 text-orange-600" strokeWidth={2} />
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5 text-base-content/30"
						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>
				<h2 class="card-title text-xl mb-2">Dispensa de Registro</h2>
				<p class="text-base-content/70">
					Gerencie períodos onde funcionários estão dispensados de registrar ponto
				</p>
			</div>
		</a>
	</div>
</div>


