<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
import {Head, Link, usePage} from "@inertiajs/vue3";
import {useFlights} from "@/Composables/useFlights";
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
import {SharedProps} from "@/Types/types";

defineOptions({ layout: MainLayout });
const page = usePage<SharedProps>().props
const { flights, flightsLoading } = useFlights(`/internal/flights/most-recent`)


const features = [
    {
        icon: "✈️",
        title: "Log every flight",
        body: "Add flights manually in seconds, or import your history straight from MyFlightRadar24.",
    },
    {
        icon: "🏆",
        title: "Earn achievements",
        body: "Unlock badges as you rack up airports, airlines, and miles.",
    },
    {
        icon: "🗺️",
        title: "Visualise your travels",
        body: "See every route you've ever flown on one beautiful interactive map, a full departure board and all the graphs you could want.",
    },
    {
        icon: "👥",
        title: "Share with friends",
        body: "Compare stats, routes, and bragging rights with people you know.",
    },
];

</script>

<template>
    <div class="splash-page">
        <Head title="Welcome" />
        <!-- HERO -->
        <section class="hero">
            <GlassBox
                class="welcomeBox"
                title="Welcome to FlightsGoneBy - The Ultimate Flight Diary"
                blurb="Log the flights you've taken, share them with friends, earn achievements, and get beautiful visualisations and full control of your data."
            />
            <div class="hero-actions"  v-if="!page.auth.user">
                <Link :href="route('register')" class="btn btn-primary">Get started — it's free</Link>
                <Link :href="route('login')" class="btn btn-secondary">Log in</Link>
            </div>
        </section>

        <!-- MAP AS BACKDROP -->
        <section class="map-section">
            <div class="map-caption">
                <span class="caption-icon">🛫</span>
                Flights Recently Logged By Our Community
            </div>
            <FlightMap v-if="!flightsLoading" :flights="flights" :showLegend="false" />
            <div v-if="flightsLoading" class="loading-state">
                <PlaneLoader />
            </div>
        </section>

        <!-- FEATURES -->
        <section class="features-grid">
            <GlassBox
                v-for="feature in features"
                :key="feature.title"
                class="feature-card"
            >
                <span class="feature-icon">{{ feature.icon }}</span>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.body }}</p>
            </GlassBox>
        </section>

        <!-- CLOSING CTA -->
        <section class="cta-section" v-if="!page.auth.user">
            <GlassBox class="cta-box">
                <h2>Come join us today</h2>
                <p>We'd love to have you be a part of our community.</p>
                <Link :href="route('register')" class="btn btn-primary">Create your account</Link>
            </GlassBox>
        </section>
    </div>
</template>

<style lang="sass" scoped>
.splash-page
    width: 80%
    max-width: 1100px
    margin: 0 auto
    display: flex
    flex-direction: column
    gap: 4rem
    padding-block: 2rem

.hero
    display: flex
    flex-direction: column
    align-items: center
    gap: 1.5rem
    text-align: center

.welcomeBox
    width: 100%

.hero-actions
    display: flex
    gap: 1rem

.loading-state
    display: flex
    justify-content: center
    align-items: center
    min-height: 50dvh


.btn
    padding: 0.75rem 1.75rem
    font-weight: 600
    text-decoration: none
    transition: transform 0.15s ease

    &:hover
        transform: translateY(-2px)

.btn-primary
    background: var(--accent, #3b82f6)
    color: #fff

.btn-secondary
    background: rgba(255, 255, 255, 0.1)
    color: inherit
    border: 1px solid rgba(255, 255, 255, 0.2)

.features-grid
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    gap: 1em

.feature-card
    text-align: center
    display: flex
    flex-direction: column
    align-items: center
    gap: 0.5rem
    margin: 0
    width: 100%
    box-sizing: border-box

.feature-icon
    font-size: 2rem

.cta-section
    display: flex
    justify-content: center
    gap: 1em

.cta-box
    text-align: center
    display: flex
    flex-direction: column
    align-items: center
    gap: 1rem
    width: 100%
    margin: 0

.map-section
    position: relative
    overflow: hidden

.map-caption
    position: absolute
    top: 1rem
    left: 1rem
    z-index: 10
    display: inline-flex
    align-items: center
    gap: 0.5rem
    padding: 0.5rem 1rem
    background: rgba(10, 15, 30, 0.65)
    backdrop-filter: blur(8px)
    border: 1px solid rgba(255, 255, 255, 0.12)
    border-radius: 999px
    font-size: 0.85rem
    font-weight: 500
    color: rgba(255, 255, 255, 0.9)
</style>
