<script lang="ts">
	import { Megaphone, Edit, Plus } 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>Comunicação</li>
			</ul>
		</div>

		<div class="mb-6">
			<div class="mb-2 flex items-center gap-4">
				<div class="rounded-xl bg-pink-500/20 p-3">
					<Megaphone class="h-8 w-8 text-pink-600" strokeWidth={2} />
				</div>
				<div>
					<h1 class="text-primary text-3xl font-bold">Comunicação</h1>
					<p class="text-base-content/70">Gestão de comunicação institucional</p>
				</div>
			</div>
		</div>

		<div class="card bg-base-100 shadow-xl">
			<div class="card-body">
				<div class="flex flex-col items-center justify-center py-12 text-center">
					<div class="mb-6">
						<Edit class="text-base-content/20 h-24 w-24" strokeWidth={1.5} />
					</div>
					<h2 class="mb-2 text-2xl font-bold">Módulo em Desenvolvimento</h2>
					<p class="text-base-content/70 mb-6 max-w-md">
						O módulo de Comunicação está sendo desenvolvido e em breve estará disponível com
						funcionalidades completas de gestão de comunicação institucional.
					</p>
					<div class="badge badge-warning badge-lg gap-2">
						<Plus class="h-4 w-4" strokeWidth={2} />
						Em Desenvolvimento
					</div>
				</div>
			</div>
		</div>
	</main>
</ProtectedRoute>
