<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ViZuTrade - Your Trading Mirror</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800,900&display=swap" rel="stylesheet" />
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 font-sans text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100">
    @php
        $authHomeRoute = null;
        $authHomeLabel = 'Dashboard';

        if (auth()->check()) {
            $authHomeRoute = auth()->user()->isAdmin()
                ? route('admin.dashboard')
                : (auth()->user()->isSupportTeam()
                    ? route('support-team.dashboard')
                    : (auth()->user()->isMentor() ? route('mentor.dashboard') : route('dashboard')));
            $authHomeLabel = auth()->user()->isAdmin()
                ? 'Admin Dashboard'
                : (auth()->user()->isSupportTeam()
                    ? 'Support Dashboard'
                    : (auth()->user()->isMentor() ? 'Mentor Dashboard' : 'Dashboard'));
        }

        $hero = $homepageSections->get('hero');
        $problem = $homepageSections->get('problem');
        $solution = $homepageSections->get('solution');
        $footer = $homepageSections->get('footer');
    @endphp

    <div x-data="{ darkMode: document.documentElement.classList.contains('dark'), toggleTheme() { this.darkMode = ! this.darkMode; document.documentElement.classList.toggle('dark', this.darkMode); localStorage.theme = this.darkMode ? 'dark' : 'light'; } }">
        <x-public-navbar />

        <main>
            <section class="relative overflow-hidden">
                <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.2),transparent_34rem)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.18),transparent_34rem)]"></div>
                <div class="relative mx-auto grid max-w-7xl gap-10 px-4 py-20 sm:px-6 lg:grid-cols-[1.05fr_.95fr] lg:px-8 lg:py-28">
                    <div class="flex flex-col justify-center">
                        <p class="text-sm font-black uppercase tracking-[0.25em] text-blue-600 dark:text-blue-300">{{ $hero?->slogan ?? 'ViZuTrade - Your Trading Mirror' }}</p>
                        <h1 class="mt-5 text-5xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-white">{{ $hero?->title ?? 'Trade. Journal. Improve.' }}</h1>
                        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-300">
                            {{ $hero?->subtitle ?? 'ViZuTrade helps traders see the truth behind every setup: trades, mistakes, emotions, risk, performance, and discipline in one clean trading journal.' }}
                        </p>
                        <div class="mt-8 flex flex-wrap gap-3">
                            @auth
                                <a href="{{ $authHomeRoute }}" class="rounded-lg bg-blue-600 px-6 py-3 text-sm font-black text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700">Open {{ $authHomeLabel }}</a>
                            @else
                                <a href="{{ $hero?->cta_link ?: route('register') }}" class="rounded-lg bg-blue-600 px-6 py-3 text-sm font-black text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700">{{ $hero?->cta_text ?: 'Start Journaling' }}</a>
                                <a href="#waitlist" class="rounded-lg border border-blue-100 bg-white px-6 py-3 text-sm font-black text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:bg-slate-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Get Lead Magnet</a>
                            @endauth
                        </div>
                    </div>

                    <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-2xl shadow-blue-950/10 dark:border-blue-900/50 dark:bg-slate-900">
                        <div class="rounded-lg bg-slate-950 p-6 text-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm text-blue-200">Discipline Score</p>
                                    <p class="mt-2 text-5xl font-black">82%</p>
                                </div>
                                <span class="rounded-full bg-blue-500/20 px-3 py-1 text-xs font-black text-blue-200">Trading Mirror</span>
                            </div>
                            <div class="mt-7 grid gap-3 sm:grid-cols-3">
                                <div class="rounded-lg bg-white/10 p-4"><p class="text-xs text-slate-300">Mistakes</p><p class="mt-2 text-2xl font-black">4</p></div>
                                <div class="rounded-lg bg-white/10 p-4"><p class="text-xs text-slate-300">Emotion</p><p class="mt-2 text-2xl font-black">Calm</p></div>
                                <div class="rounded-lg bg-white/10 p-4"><p class="text-xs text-slate-300">Risk</p><p class="mt-2 text-2xl font-black">Good</p></div>
                            </div>
                            <div class="mt-7 space-y-3">
                                <div class="h-3 rounded-full bg-white/10"><div class="h-3 w-4/5 rounded-full bg-blue-400"></div></div>
                                <div class="h-3 rounded-full bg-white/10"><div class="h-3 w-3/5 rounded-full bg-cyan-300"></div></div>
                                <div class="h-3 rounded-full bg-white/10"><div class="h-3 w-2/5 rounded-full bg-red-400"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="bg-white py-16 dark:bg-slate-900/70">
                <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
                    <div class="rounded-lg border border-red-100 bg-red-50 p-8 dark:border-red-900/50 dark:bg-red-950/20">
                        <p class="text-sm font-black uppercase tracking-wide text-red-600 dark:text-red-300">{{ $problem?->slogan ?? 'The Problem' }}</p>
                        <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">{{ $problem?->title ?? 'Traders repeat mistakes because they do not track them.' }}</h2>
                        <p class="mt-4 text-slate-600 dark:text-slate-300">{{ $problem?->subtitle ?? 'Most traders remember the outcome, but forget the emotion, risk decision, session, plan violation, and mistake that caused the result.' }}</p>
                    </div>
                    <div class="rounded-lg border border-blue-100 bg-blue-50 p-8 dark:border-blue-900/50 dark:bg-blue-950/20">
                        <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $solution?->slogan ?? 'The Solution' }}</p>
                        <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">{{ $solution?->title ?? 'ViZuTrade shows performance clearly.' }}</h2>
                        <p class="mt-4 text-slate-600 dark:text-slate-300">{{ $solution?->subtitle ?? 'Your dashboard turns trades into feedback: what you did, what you felt, what you risked, what you repeated, and what to improve next.' }}</p>
                    </div>
                </div>
            </section>

            <section id="features" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
                <div class="max-w-3xl">
                    <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Features</p>
                    <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">Built around the six things traders must track.</h2>
                </div>
                <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                    @foreach ($homepageFeatures as $feature)
                        <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-blue-900/50 dark:bg-slate-900">
                            <h3 class="text-lg font-black text-slate-950 dark:text-white">{{ $feature->title }}</h3>
                            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $feature->description }}</p>
                        </div>
                    @endforeach
                </div>
            </section>

            <section id="challenge" class="bg-blue-600 py-16 text-white dark:bg-blue-950">
                <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
                    <div>
                        <p class="text-sm font-black uppercase tracking-wide text-blue-100">30-Day Trading Discipline Challenge</p>
                        <h2 class="mt-3 text-4xl font-black">Build the habit before chasing the result.</h2>
                        <p class="mt-4 text-blue-100">Join the challenge, journal your trades for 30 days, build streaks, and earn badges like Risk Manager and Consistent Trader.</p>
                    </div>
                    <div class="rounded-lg bg-white/10 p-6">
                        <div class="grid gap-3 sm:grid-cols-2">
                            @foreach ($homepageBadges as $badge)
                                <div class="rounded-lg bg-white p-4 text-sm font-black text-blue-700">{{ $badge->name }}</div>
                            @endforeach
                        </div>
                        <a href="{{ auth()->check() ? route('challenge.index') : route('register') }}" class="mt-6 inline-flex rounded-lg bg-white px-5 py-3 text-sm font-black text-blue-700 hover:bg-blue-50">Join Challenge</a>
                    </div>
                </div>
            </section>

            @if (! empty($topTraders))
                <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
                    <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
                        <div>
                            <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Best Traders of the Week</p>
                            <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">Ranked by discipline, not risky profit chasing.</h2>
                            <p class="mt-3 max-w-2xl text-slate-600 dark:text-slate-300">Ranking combines discipline score, journaled trades, challenge progress, badges, consistency, and low-risk behavior.</p>
                        </div>
                        <a href="{{ route('community.index') }}" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">Visit Community</a>
                    </div>
                    <div class="mt-8 grid gap-5 md:grid-cols-3">
                        @foreach ($topTraders as $ranking)
                            <a href="{{ route('community.traders.show', $ranking->user) }}" class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-blue-900/50 dark:bg-slate-900">
                                <div class="flex items-center gap-4">
                                    <x-user-avatar :user="$ranking->user" class="h-14 w-14" />
                                    <div>
                                        <p class="text-xs font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">#{{ $ranking->rank }}</p>
                                        <h3 class="text-lg font-black text-slate-950 dark:text-white">{{ $ranking->user->name }}</h3>
                                    </div>
                                </div>
                                <div class="mt-5 grid grid-cols-2 gap-3 text-sm">
                                    <div class="rounded-lg bg-blue-50 p-3 dark:bg-blue-950/40"><span class="text-slate-500 dark:text-slate-400">Discipline</span><p class="font-black text-blue-700 dark:text-blue-200">{{ $ranking->discipline_score }}%</p></div>
                                    <div class="rounded-lg bg-blue-50 p-3 dark:bg-blue-950/40"><span class="text-slate-500 dark:text-slate-400">Trades</span><p class="font-black text-blue-700 dark:text-blue-200">{{ $ranking->trades_count }}</p></div>
                                </div>
                                <div class="mt-4 flex flex-wrap gap-2">
                                    @foreach (array_slice($ranking->badges ?? [], 0, 3) as $badge)
                                        <span class="rounded-full bg-blue-100 px-2 py-1 text-xs font-bold text-blue-700 dark:bg-blue-900/60 dark:text-blue-100">{{ str_replace('_', ' ', $badge) }}</span>
                                    @endforeach
                                </div>
                            </a>
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="mx-auto grid max-w-7xl gap-8 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:px-8">
                <div>
                    <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Mentor / Academy Ready</p>
                    <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">For traders, mentors, and academies.</h2>
                    <p class="mt-4 text-slate-600 dark:text-slate-300">ViZuTrade is structured for future mentorship workflows: discipline challenges, public profiles, report sharing, support, and admin management.</p>
                </div>
                <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <h3 class="text-xl font-black text-slate-950 dark:text-white">Pricing CTA</h3>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">Start free while payment mode is inactive, then upgrade when subscriptions are enabled.</p>
                    <a href="{{ route('pricing') }}" class="mt-5 inline-flex rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">View Pricing</a>
                </div>
            </section>

            <section id="waitlist" class="bg-white py-16 dark:bg-slate-900/70">
                <div class="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
                    <div>
                        <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Free Lead Magnet</p>
                        <h2 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">{{ $leadMagnet?->title ?? 'The 7 Mistakes Forex Traders Repeat Without Knowing' }}</h2>
                        <p class="mt-4 text-slate-600 dark:text-slate-300">{{ $leadMagnet?->description ?? 'Join the early access waitlist and get beginner-friendly education around mistake tracking, discipline, and performance review.' }}</p>
                    </div>
                    <form method="POST" action="{{ route('waitlist.store') }}" class="rounded-lg border border-blue-100 bg-blue-50 p-6 shadow-sm dark:border-blue-900/50 dark:bg-blue-950/20">
                        @csrf
                        <div class="grid gap-4">
                            <div>
                                <label class="text-sm font-bold text-slate-700 dark:text-slate-200" for="waitlist-name">Name</label>
                                <input id="waitlist-name" name="name" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                            </div>
                            <div>
                                <label class="text-sm font-bold text-slate-700 dark:text-slate-200" for="waitlist-email">Email</label>
                                <input id="waitlist-email" name="email" type="email" required class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                            </div>
                            <div>
                                <label class="text-sm font-bold text-slate-700 dark:text-slate-200" for="waitlist-whatsapp">WhatsApp Number Optional</label>
                                <input id="waitlist-whatsapp" name="whatsapp" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                            </div>
                            <button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-black text-white hover:bg-blue-700">Join Early Access</button>
                        </div>
                    </form>
                </div>
            </section>
        </main>

        <footer class="border-t border-blue-100 bg-white py-8 dark:border-blue-900/50 dark:bg-slate-950">
            <div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 text-sm text-slate-500 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8 dark:text-slate-400">
                <div>
                    <x-application-logo class="h-10 w-44" />
                    <p class="mt-3">{{ $footer?->subtitle ?? 'ViZuTrade - Your Trading Mirror. Trade. Journal. Improve.' }}</p>
                </div>
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('pricing') }}" class="hover:text-blue-700 dark:hover:text-blue-300">Pricing</a>
                    <a href="{{ route('support.create') }}" class="hover:text-blue-700 dark:hover:text-blue-300">Support</a>
                    <a href="{{ route('login') }}" class="hover:text-blue-700 dark:hover:text-blue-300">Login</a>
                    <a href="{{ route('register') }}" class="hover:text-blue-700 dark:hover:text-blue-300">Register</a>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
