<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Crypto Loans & Earn') }}</title>

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet">

        @livewireStyles

        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <style>
                :root { --bg:#070a12; --card:#0b1220; --text:#e9f2ff; --muted:#9fb3d6; --blue:#1c7dff; --green:#1ee6a1; }
                body { margin:0; font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); }
                a { color:inherit; text-decoration:none; }
                .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
                .marquee { background: rgba(28,125,255,.12); border-bottom: 1px solid rgba(28,125,255,.25); overflow:hidden; }
                .marquee-inner { display:flex; gap:16px; white-space:nowrap; padding: 10px 0; animation: scroll 18s linear infinite; }
                @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
                .pill { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(28,125,255,.25); background: rgba(11,18,32,.6); border-radius:999px; font-size:12px; color: var(--muted); }
                .pill strong { color: var(--text); font-weight:600; }
                .nav { position: sticky; top:0; z-index:20; background: rgba(7,10,18,.72); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); }
                .nav-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap:16px; }
                .logo { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
                .logo-mark { width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, rgba(28,125,255,.95), rgba(30,230,161,.9)); box-shadow: 0 0 20px rgba(28,125,255,.15); }
                .menu { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
                .menu a { color: var(--muted); font-weight:500; font-size:14px; }
                .menu a:hover { color: var(--text); }
                .actions { display:flex; align-items:center; gap:10px; }
                .select { background: rgba(11,18,32,.6); border:1px solid rgba(255,255,255,.10); color:var(--text); padding:8px 10px; border-radius:10px; }
                .btn { display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); font-weight:600; font-size:14px; }
                .btn-primary { background: linear-gradient(135deg, rgba(28,125,255,.95), rgba(30,230,161,.9)); border:0; color:#061019; }
                .btn-outline { background: transparent; color: var(--text); }
                .hero { padding: 26px 0 0; }
                section { padding: 48px 0; }
                .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
                .card { background: rgba(11,18,32,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
                .h1 { font-size: 36px; line-height: 1.1; margin: 0; }
                .h2 { font-size: 22px; margin: 0 0 8px; }
                .muted { color: var(--muted); }
                .kpi-row { display:flex; gap:14px; flex-wrap:wrap; margin-top: 16px; }
                .kpi { flex: 1 1 160px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
                .kpi .value { font-weight:800; font-size: 18px; }
                .kpi .label { color: var(--muted); font-size: 13px; margin-top: 6px; }
                .list { display:grid; gap:10px; margin-top: 14px; }
                .li { display:flex; gap:12px; align-items:flex-start; }
                .icon { width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(28,125,255,.14); border: 1px solid rgba(28,125,255,.24); }
                .footer { padding: 40px 0; border-top: 1px solid rgba(255,255,255,.06); color: var(--muted); }
                .footer-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
                .footer h4 { margin:0 0 12px; color: var(--text); }
                .footer a { color: var(--muted); display:block; padding: 6px 0; }
                @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .nav-row { flex-direction: column; align-items:flex-start; } }
            </style>
        @endif
        <style>
            .top-spacer { height: 0px; }
        </style>
    </head>
    <body>
        {{-- Price marquee --}}
        <div class="marquee">
            <div class="container">
                <div id="price-marquee" class="marquee-inner" aria-label="Live crypto prices marquee"></div>
            </div>
        </div>

        {{-- Navbar --}}
        <div class="nav">
            <div class="container">
                <div class="nav-row">
                    <div class="logo">
                        <div class="logo-mark"></div>
                        <div>
                            <div style="font-size:14px; line-height:1;">NimbusCrypto</div>
                            <div style="font-size:12px; color: var(--muted); margin-top:2px;">Loans + Earn</div>
                        </div>
                    </div>

                    <nav class="menu" aria-label="Primary navigation">
                        <a href="{{ url('/products') }}">Products</a>
                        <a href="{{ url('/borrow') }}">Borrow</a>
                        <a href="{{ url('/company') }}">Company</a>
                        <a href="{{ url('/earn') }}">Earn</a>
                    </nav>

                    <div class="actions">
                        <form method="POST" action="{{ route('set-locale') }}">
                            @csrf
                            <select class="select" name="locale" onchange="this.form.submit()">
                                @foreach(['en','es','fr','de','it','pt','ru','ar','zh','hi'] as $lc)
                                    <option value="{{ $lc }}" @selected(app()->getLocale()===$lc)>{{ strtoupper($lc) }}</option>
                                @endforeach
                            </select>
                        </form>

                        @auth
                            <a class="btn btn-outline" href="{{ url('/dashboard') }}">Dashboard</a>
                            @if(auth()->user()?->is_admin)
                                <a class="btn btn-outline" href="{{ url('/admin') }}">Admin</a>
                            @endif
                        @else
                            <a class="btn btn-outline" href="{{ route('login') }}">Sign in</a>
                            <a class="btn btn-primary" href="{{ url('/borrow') }}">Get Started</a>
                        @endauth
                    </div>
                </div>
            </div>
        </div>

        <main>
            @yield('content')
        </main>

        {{-- Footer --}}
        <footer class="footer">
            <div class="container">
                <div class="footer-grid">
                    <div>
                        <h4>Products</h4>
                        <a href="{{ url('/borrow') }}">Instant Crypto Loans</a>
                        <a href="{{ url('/earn') }}">High-Yield Earn</a>
                        <a href="{{ url('/products') }}">Institutional Line</a>
                    </div>
                    <div>
                        <h4>Company</h4>
                        <a href="{{ url('/company') }}">Corporate Profile</a>
                        <a href="{{ url('/admin') }}">Admin Console</a>
                        <a href="#">Risk Disclosures</a>
                    </div>
                    <div>
                        <h4>Support</h4>
                        <a href="#">Help Center</a>
                        <a href="#">Contact Compliance</a>
                        <a href="#">Terms & Policies</a>
                    </div>
                </div>
            </div>
        </footer>

        @livewireScripts

        <script>
            (async function () {
                const el = document.getElementById('price-marquee');
                if (!el) return;
                try {
                    const res = await fetch('/api/crypto/prices', { headers: { 'Accept': 'application/json' } });
                    const json = await res.json();
                    const items = json.items || [];
                    const pills = items.map(i => {
                        const change = i.change_24h;
                        const sign = (change === null || change === undefined) ? '' : (change >= 0 ? '+' : '');
                        const changeText = (change === null || change === undefined) ? '' : ` (${sign}${Number(change).toFixed(2)}%)`;
                        return `<span class="pill"><strong>${i.symbol}</strong> $${(i.price_usd ?? 0).toLocaleString(undefined,{maximumFractionDigits:8})}${changeText}</span>`;
                    });
                    // Duplicate for seamless loop.
                    el.innerHTML = pills.concat(pills).join('');
                } catch (e) {
                    el.innerHTML = `<span class="pill"><strong>BTC</strong> --</span><span class="pill"><strong>ETH</strong> --</span>`;
                }
            })();
        </script>
    </body>
</html>

