<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 Element_pwa_install_prompt from '$lib/elements/element_pwa_install_prompt.svelte';
import {
    CircleCheck,
    LayoutGrid,
    ShieldCheck,
    UserCheck
} 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 animate-in fade-in slide-in-from-bottom-2 w-full space-y-8 duration-300">
    <!-- Hero / Welcome Section -->
    <section class="space-y-4 py-6 text-center">
        <div
            class="bg-primary-500/10 text-primary-500 mb-2 inline-flex rounded-full p-4">
            <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="mx-auto max-w-md text-lg opacity-60">
            Ready to capture leads for <span
                class="text-surface-900-100 font-bold"
                >{$lq__exhibit_obj?.name || 'this exhibit'}</span
            >?
        </p>
    </section>

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

    <!-- PWA Install Nudge — shown between feature highlights and sign-in -->
    <div class="mx-auto w-full max-w-md px-4">
        <Element_pwa_install_prompt />
    </div>

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

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