<script lang="ts">
    /**
     * src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__start.svelte
     * Tab 1: Start / Sign In / Welcome.
     */
    import { page } from '$app/state';
    import { liveQuery } from 'dexie';
    import { db_events } from '$lib/ae_events/db_events';
    import Comp_exhibit_signin from './ae_comp__exhibit_signin.svelte';
    import { LayoutGrid, CircleCheck, UserCheck, ShieldCheck } from 'lucide-svelte';

    const exhibit_id = $derived(page.params.exhibit_id ?? '');

    let lq__exhibit_obj = $derived(
        liveQuery(async () => {
            if (!exhibit_id) return null;
            return await db_events.exhibit.get(exhibit_id);
        })
    );
</script>

<div class="ae-tab-start w-full space-y-8 animate-in fade-in slide-in-from-bottom-2 duration-300">

    <!-- Hero / Welcome Section -->
    <section class="text-center space-y-4 py-6">
        <div class="inline-flex p-4 rounded-full bg-primary-500/10 text-primary-500 mb-2">
            <LayoutGrid size="3em" />
        </div>
        <h2 class="text-3xl font-black tracking-tight">
            Welcome to the<br />
            <span class="text-primary-500">Exhibitor Portal</span>
        </h2>
        <p class="text-lg opacity-60 max-w-md mx-auto">
            Ready to capture leads for <span class="font-bold text-surface-900-100">{$lq__exhibit_obj?.name || 'this exhibit'}</span>?
        </p>
    </section>

    <!-- Features Grid (Compact) -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto px-4">
        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
            <CircleCheck size="1.5em" class="text-success-500 mb-2" />
            <span class="text-xs font-bold uppercase tracking-wider">Fast Capture</span>
        </div>
        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
            <UserCheck size="1.5em" class="text-secondary-500 mb-2" />
            <span class="text-xs font-bold uppercase tracking-wider">Staff IDs</span>
        </div>
        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
            <ShieldCheck size="1.5em" class="text-primary-500 mb-2" />
            <span class="text-xs font-bold uppercase tracking-wider">Secure Sync</span>
        </div>
    </div>

    <!-- Sign In Area -->
    <div class="w-full max-w-md mx-auto">
        <Comp_exhibit_signin />
    </div>

    <!-- Info Footer -->
    <div class="text-center pt-8 opacity-40">
        <p class="text-[10px] uppercase font-black tracking-[0.2em]">Powered by Aether Platform</p>
    </div>

</div>