@extends('layouts.app')

@section('content')
    <section class="relative py-16 sm:py-24">
        <!-- Background gradient + glow -->
        <div class="pointer-events-none absolute inset-0 -z-10">
            <div
                class="absolute inset-0 bg-gradient-to-b from-blue-50/70 via-white to-transparent dark:from-blue-950/40 dark:via-gray-950">
            </div>
            <div class="absolute left-1/2 top-10 h-72 w-72 -translate-x-1/2 rounded-full blur-3xl opacity-30"
                style="background: radial-gradient(40% 40% at 50% 50%, rgba(59,130,246,.35) 0%, rgba(168,85,247,.25) 35%, transparent 70%);">
            </div>
        </div>

        <div class="container mx-auto max-w-4xl px-4">
            <div class="mx-auto">
                <!-- Card -->
                <div
                    class="rounded-3xl border border-gray-200/60 dark:border-gray-800/60 bg-white/70 dark:bg-gray-900/60 backdrop-blur-xl shadow-xl shadow-blue-500/5">
                    <div class="p-8 sm:p-12">
                        <!-- Icon + Title -->
                        <div class="flex items-center gap-3 mb-6">
                            <div
                                class="h-11 w-11 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 text-white flex items-center justify-center shadow-lg shadow-blue-600/30">
                                <i class="fas fa-screwdriver-wrench text-lg"></i>
                            </div>
                            <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
                                This page is under development
                            </h1>
                        </div>

                        <!-- Message -->
                        <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl">
                            We’re crafting something great here. Check back soon—or drop your email and we’ll notify you the
                            moment it’s live.
                        </p>

                        <!-- Progress / Pill -->
                        <div
                            class="mt-6 inline-flex items-center gap-2 rounded-full border border-gray-200 dark:border-gray-800 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white/60 dark:bg-gray-900/60">
                            <span class="relative flex h-2 w-2">
                                <span
                                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-30"></span>
                                <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-600"></span>
                            </span>
                            In progress
                        </div>

                        <!-- Notify Form -->
                        <form method="POST" action="#" class="mt-8 grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-3">
                            @csrf
                            <input type="email" name="email" required placeholder="Enter your email to get notified"
                                class="w-full rounded-xl bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-4 py-3">
                            <button type="submit"
                                class="inline-flex justify-center items-center gap-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 transition">
                                <i class="fas fa-bell"></i>
                                Notify me
                            </button>
                        </form>

                        <!-- Actions -->
                        <div class="mt-6 flex flex-wrap items-center gap-3">
                            <a href="{{ url()->previous() }}"
                                class="inline-flex items-center gap-2 rounded-xl border border-gray-300 dark:border-gray-700 px-4 py-2.5 text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition">
                                <i class="fas fa-arrow-left"></i>
                                Go back
                            </a>
                            <a href="{{ route('dashboard') ?? '/' }}"
                                class="inline-flex items-center gap-2 rounded-xl bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-4 py-2.5 text-sm font-semibold hover:opacity-90 transition">
                                <i class="fas fa-gauge-high"></i>
                                Dashboard
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Footer hint -->
                <div class="text-center mt-6 text-xs text-gray-500 dark:text-gray-400">
                    Thanks for your patience—good things are coming.
                </div>
            </div>
        </div>
    </section>
@endsection