<script lang="ts">
	import { Trophy, Award, Building2, Workflow, Target } from 'lucide-svelte';
	import { resolve } from '$app/paths';
	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
</script>

<ProtectedRoute>
	<main class="container mx-auto px-4 py-4">
		<div class="breadcrumbs mb-4 text-sm">
			<ul>
				<li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
				<li>Programas Esportivos</li>
			</ul>
		</div>

		<div class="mb-6">
			<div class="mb-2 flex items-center gap-4">
				<div class="rounded-xl bg-yellow-500/20 p-3">
					<Trophy class="h-8 w-8 text-yellow-600" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-primary text-3xl font-bold">Programas Esportivos</h1>
					<p class="text-base-content/70">Gestão de programas e projetos esportivos</p>
				</div>
			</div>
		</div>

		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
			<a
				href={resolve('/licitacoes/empresas')}
				class="card bg-base-100 border-base-200 hover:border-primary border shadow-md transition-shadow hover:shadow-lg"
			>
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-primary/10 rounded-lg p-2">
							<Building2 class="text-primary h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="font-semibold">Empresas</h4>
					</div>
					<p class="text-base-content/70 text-sm">
						Cadastro, listagem e edição de empresas e seus contatos.
					</p>
				</div>
			</a>

			<a
				href={resolve('/programas-esportivos/acoes')}
				class="card bg-base-100 border-base-200 hover:border-accent border shadow-md transition-shadow hover:shadow-lg"
			>
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-accent/10 rounded-lg p-2">
							<Target class="text-accent h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="font-semibold">Ações</h4>
					</div>
					<p class="text-base-content/70 text-sm">
						Gerencie ações, projetos e leis relacionadas aos programas esportivos.
					</p>
				</div>
			</a>

			<div class="card bg-base-100 opacity-70 shadow-md">
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-base-200 rounded-lg p-2">
							<Award class="text-base-content/50 h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="text-base-content/70 font-semibold">Programas Esportivos</h4>
					</div>
					<p class="text-base-content/60 text-sm">
						Em breve: funcionalidades para gestão de programas e projetos esportivos.
					</p>
				</div>
			</div>

			<a
				href={resolve('/fluxos')}
				class="card bg-base-100 border-base-200 hover:border-secondary border shadow-md transition-shadow hover:shadow-lg"
			>
				<div class="card-body">
					<div class="mb-2 flex items-center gap-3">
						<div class="bg-secondary/10 rounded-lg p-2">
							<Workflow class="text-secondary h-6 w-6" strokeWidth={2} />
						</div>
						<h4 class="font-semibold">Fluxos de Trabalho</h4>
					</div>
					<p class="text-base-content/70 text-sm">
						Gerencie templates e instâncias de fluxos de trabalho para programas e projetos
						esportivos.
					</p>
				</div>
			</a>
		</div>
	</main>
</ProtectedRoute>
