<script lang="ts">
	import { resolve } from '$app/paths';
	import { browser } from '$app/environment';
	import type { ConstructorOfATypedSvelteComponent } from 'svelte/types/runtime/component';
	import CybersecurityWizcard from '$lib/components/ti/CybersecurityWizcard.svelte';
	// Usar tipo amplo para evitar conflitos de tipagem do import dinâmico no build
	let Comp: ConstructorOfATypedSvelteComponent<typeof CybersecurityWizcard> | null = null;
</script>

<svelte:head>
	<title>Cibersecurity SGSE - Sistema de Gerenciamento de Secretaria • Wizcard TI</title>
</svelte:head>

<section class="space-y-8 p-4 lg:p-8">
	<header class="flex flex-wrap items-center justify-between gap-4">
		<div>
			<p class="text-primary text-sm font-semibold tracking-widest uppercase">
				Cibersecurity • SGSE - Sistema de Gerenciamento de Secretaria
			</p>
			<h1 class="text-base-content text-4xl font-black">Segurança Avançada</h1>
			<p class="text-base-content/70 max-w-3xl text-sm">
				Detecta DDoS, SQLi, ataques avançados e comportamentos anômalos em tempo real. Permite
				bloquear IPs/portas, gerar relatórios refinados, configurar políticas e manter a operação do
				SGSE blindada.
			</p>
		</div>
		<a href={resolve('/ti')} class="btn btn-outline btn-primary">Voltar para TI</a>
	</header>

	{#if browser && Comp}
		<svelte:component this={Comp} />
	{:else}
		<div class="alert">
			<span>Carregando módulo de cibersegurança…</span>
		</div>
	{/if}
</section>
