<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { ShieldCheck, Sparkles, Zap } from '@lucide/vue';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { home } from '@/routes';

const page = usePage();
const name = page.props.name;

defineProps<{
    title?: string;
    description?: string;
}>();
</script>

<template>
    <div class="grid min-h-svh lg:grid-cols-2">
        <!-- Panel brand kiri — Meta Ads blue (desktop only) -->
        <div class="relative hidden flex-col justify-between overflow-hidden p-12 text-white lg:flex" style="background: linear-gradient(160deg, #1877F2 0%, #166FE5 45%, #0A5BD6 100%)">
            <!-- lapisan dekoratif biru -->
            <div class="absolute -left-20 -top-20 size-96 rounded-full bg-white/10 blur-3xl" />
            <div class="absolute -bottom-32 -right-16 size-96 rounded-full bg-[#0080FF]/20 blur-3xl" />
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(255,255,255,0.08),transparent_50%)]" />

            <Link :href="home()" class="relative z-10 flex items-center gap-2.5 text-lg font-semibold">
                <div class="flex size-9 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25 backdrop-blur">
                    <AppLogoIcon class="size-5 fill-current text-white" />
                </div>
                {{ name }}
            </Link>

            <div class="relative z-10 max-w-md space-y-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white/90 ring-1 ring-white/20 backdrop-blur">
                    <Sparkles class="size-3.5 text-white" />
                    Platform Iklan Berbasis Credit
                </div>
                <h2 class="text-3xl font-bold leading-tight tracking-tight">
                    Tayangkan iklan, kelola kredit, &amp; lacak klik secara akurat.
                </h2>
                <p class="text-sm leading-relaxed text-white/70">
                    Sistem periklanan performa (PPC) dengan mesin rotator least-clicks, anti-fraud, dan pembayaran otomatis via Duitku.
                </p>

                <div class="grid gap-3 pt-2">
                    <div class="flex items-center gap-3 text-sm text-white/90">
                        <div class="flex size-8 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
                            <Zap class="size-4 text-white" />
                        </div>
                        Rotator least-clicks &amp; jendela jam tayang
                    </div>
                    <div class="flex items-center gap-3 text-sm text-white/90">
                        <div class="flex size-8 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/15">
                            <ShieldCheck class="size-4 text-white" />
                        </div>
                        Anti-click-fraud berbasis IP per hari
                    </div>
                </div>
            </div>

            <p class="relative z-10 text-xs text-white/50">© {{ name }}. All rights reserved.</p>
        </div>

        <!-- Panel form kanan -->
        <div class="flex flex-col items-center justify-center bg-background px-6 py-10 sm:px-12">
            <div class="w-full max-w-sm">
                <!-- logo mobile -->
                <Link :href="home()" class="mb-8 flex flex-col items-center gap-2 lg:hidden">
                    <div class="flex size-11 items-center justify-center rounded-xl text-white" style="background: #1877F2">
                        <AppLogoIcon class="size-6 fill-current" />
                    </div>
                </Link>

                <div class="space-y-2">
                    <h1 class="text-2xl font-bold tracking-tight">{{ title }}</h1>
                    <p class="text-sm text-muted-foreground">{{ description }}</p>
                </div>

                <div class="mt-8">
                    <slot />
                </div>
            </div>
        </div>
    </div>
</template>
