<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#e91e8c">
    <title>@yield('title', 'Swagvio — Adult Listings India')</title>
    <meta name="description" content="@yield('meta_description', 'Swagvio is the premier adult listings platform for India.')">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css">

    <style>
        /* ==========================================
           SWAGVIO-STYLE DESIGN SYSTEM
           ========================================== */
        :root {
            --pink:        #e91e8c;
            --pink-dark:   #c2006e;
            --pink-light:  #f7c5e0;
            --pink-bg:     #fdf0f7;
            --blue:        #1976d2;
            --blue-light:  #2196f3;
            --bg:          #f5f5f5;
            --white:       #ffffff;
            --border:      #e0e0e0;
            --border-2:    #dedede;
            --text:        #333333;
            --text-2:      #555555;
            --text-3:      #777777;
            --text-4:      #999999;
            --warn-bg:     #fff8e1;
            --warn-border: #ffe082;
            --warn-text:   #7b5c00;
            --green:       #43a047;
            --shadow:      0 1px 4px rgba(0,0,0,.1);
            --shadow-card: 0 2px 8px rgba(0,0,0,.08);
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Open Sans', Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        a { color: var(--pink); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* ===== PROMO BANNER ===== */
        .promo-banner {
            background: linear-gradient(90deg, #e91e8c 0%, #9c27b0 50%, #e91e8c 100%);
            padding: 10px 24px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px;
        }
        .promo-banner-text {
            color: white; font-size: 13px; font-weight: 600; line-height: 1.4;
        }
        .promo-banner-text span { font-size: 11px; font-weight: 400; display: block; opacity: .9; }
        .promo-try-btn {
            background: white; color: var(--pink);
            border: none; border-radius: 4px;
            padding: 7px 18px; font-size: 12px; font-weight: 700;
            cursor: pointer; white-space: nowrap;
            font-family: 'Open Sans', sans-serif;
            transition: all .2s;
        }
        .promo-try-btn:hover { background: var(--pink); color: white; }

        /* ===== MAIN HEADER/NAVBAR ===== */
        .navbar {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: 0 24px;
            height: 56px;
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 1000;
            box-shadow: var(--shadow);
        }

        .navbar-left {
            display: flex; align-items: center; gap: 6px;
        }
        .navbar-logo-icon {
            width: 30px; height: 30px;
            background: var(--pink);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 14px;
        }
        .navbar-brand-name {
            font-size: 20px; font-weight: 800;
            color: var(--text); letter-spacing: -.5px;
        }
        .navbar-brand-name span { color: var(--pink); }
        .navbar-country {
            font-size: 11px; color: var(--text-3);
            margin-left: 2px; display: block; line-height: 1;
        }
        .navbar-left-text { display: flex; flex-direction: column; }

        .navbar-right { display: flex; align-items: center; gap: 12px; }

        .navbar-post-btn {
            background: var(--pink);
            color: white; border: none;
            border-radius: 4px; padding: 9px 20px;
            font-size: 13px; font-weight: 700;
            cursor: pointer; font-family: 'Open Sans', sans-serif;
            text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
            transition: background .2s;
        }
        .navbar-post-btn:hover { background: var(--pink-dark); text-decoration: none; color: white; }

        .navbar-user {
            display: flex; align-items: center; gap: 6px;
            font-size: 13px; color: var(--text-2); cursor: pointer;
        }
        .navbar-user-icon {
            width: 28px; height: 28px;
            background: var(--pink-bg); border: 1px solid var(--pink-light);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .navbar-username { font-size: 12px; color: var(--text-2); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* NAV LINKS */
        .navbar-links { display: flex; align-items: center; gap: 0; }
        .navbar-links a {
            color: var(--text-2); font-size: 13px; font-weight: 600;
            padding: 0 14px; height: 56px; display: flex; align-items: center;
            border-bottom: 3px solid transparent; transition: all .15s;
            text-decoration: none;
        }
        .navbar-links a:hover { color: var(--pink); border-bottom-color: var(--pink); text-decoration: none; }

        /* ===== CONTAINER ===== */
        .container {
            max-width: 900px; margin: 0 auto; padding: 0 16px;
        }
        .container-wide {
            max-width: 1100px; margin: 0 auto; padding: 0 16px;
        }

        /* ===== ALERTS ===== */
        .alert {
            display: flex; align-items: flex-start; gap: 10px;
            padding: 12px 16px; border-radius: 4px;
            margin-bottom: 16px; border: 1px solid transparent;
            font-size: 13px;
        }
        .alert-warning {
            background: var(--warn-bg); border-color: var(--warn-border);
            color: var(--warn-text);
        }
        .alert-warning strong { font-weight: 700; display: block; margin-bottom: 2px; }
        .alert-success { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
        .alert-error   { background: #fce4ec; border-color: #f48fb1; color: #880e4f; }
        .alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

        /* ===== BUTTONS ===== */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 9px 20px; border-radius: 4px;
            font-size: 13px; font-weight: 700; cursor: pointer; border: none;
            text-decoration: none; transition: all .2s;
            font-family: 'Open Sans', sans-serif; line-height: 1;
            white-space: nowrap;
        }
        .btn-pink  { background: var(--pink); color: white; }
        .btn-pink:hover  { background: var(--pink-dark); color: white; text-decoration: none; }
        .btn-blue  { background: var(--blue); color: white; }
        .btn-blue:hover  { background: #1565c0; color: white; text-decoration: none; }
        .btn-outline { background: white; color: var(--pink); border: 1.5px solid var(--pink); }
        .btn-outline:hover { background: var(--pink-bg); text-decoration: none; }
        .btn-sm { padding: 6px 14px; font-size: 12px; }
        .btn-block { width: 100%; }
        .btn-gray { background: #eeeeee; color: var(--text-2); border: 1px solid var(--border); }
        .btn-gray:hover { background: #e0e0e0; text-decoration: none; }

        /* ===== CARDS ===== */
        .card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 6px;
        }
        .card-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px 12px;
            border-bottom: 1px solid var(--border);
        }
        .card-title {
            font-size: 14px; font-weight: 700; color: var(--text);
            display: flex; align-items: center; gap: 8px;
        }
        .card-title-icon { color: var(--text-3); font-size: 16px; }
        .card-body { padding: 14px 16px; }
        .card-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
        .card-arrow {
            color: var(--text-4); font-size: 18px; font-weight: 300;
        }

        /* ===== BADGES ===== */
        .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 8px; border-radius: 3px;
            font-size: 11px; font-weight: 700;
        }
        .badge-pink   { background: var(--pink-bg); color: var(--pink); border: 1px solid var(--pink-light); }
        .badge-green  { background: #e8f5e9; color: #388e3c; }
        .badge-new    { background: var(--pink); color: white; font-size: 10px; padding: 1px 5px; }

        /* ===== FORMS ===== */
        .form-control {
            width: 100%; background: white; border: 1px solid var(--border);
            border-radius: 4px; padding: 9px 12px; color: var(--text);
            font-size: 14px; font-family: 'Open Sans', sans-serif;
            outline: none; transition: border-color .2s;
        }
        .form-control:focus { border-color: var(--pink); }
        .form-control::placeholder { color: var(--text-4); }
        .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }

        /* ===== DIVIDER ===== */
        .divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
        .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
        .divider span { color: var(--text-4); font-size: 12px; }

        /* ===== TOGGLE ===== */
        .toggle-wrap { display: flex; align-items: center; gap: 8px; }
        .toggle { position: relative; width: 40px; height: 22px; display: inline-block; }
        .toggle input { opacity: 0; width: 0; height: 0; }
        .toggle-track {
            position: absolute; inset: 0; border-radius: 22px;
            background: #ccc; cursor: pointer; transition: .2s;
        }
        .toggle-track::before {
            content: ''; position: absolute;
            height: 16px; width: 16px; left: 3px; bottom: 3px;
            border-radius: 50%; background: white;
            transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
        }
        .toggle input:checked + .toggle-track { background: var(--pink); }
        .toggle input:checked + .toggle-track::before { transform: translateX(18px); }
        .toggle-state { font-size: 12px; font-weight: 600; color: var(--text-3); min-width: 22px; }

        /* ===== FOOTER ===== */
        .footer {
            background: white; border-top: 1px solid var(--border);
            margin-top: 48px;
        }
        .footer-top {
            border-bottom: 1px solid var(--border);
            padding: 24px 16px;
        }
        .footer-top-inner {
            max-width: 900px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            gap: 24px; flex-wrap: wrap;
        }
        .footer-brand-row {
            display: flex; align-items: center; gap: 10px;
        }
        .footer-restricted {
            display: inline-flex; align-items: center; gap: 6px;
            border: 1px solid var(--border); border-radius: 4px;
            padding: 4px 10px; font-size: 11px; font-weight: 700;
            color: var(--text-2); margin-top: 8px;
        }
        .footer-desc {
            font-size: 13px; color: var(--text-3); max-width: 400px; line-height: 1.6;
        }
        .footer-desc a { color: var(--pink); }

        .footer-grid {
            max-width: 900px; margin: 0 auto;
            padding: 20px 16px;
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
        }
        .footer-col h5 { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
        .footer-col ul { list-style: none; }
        .footer-col ul li { margin-bottom: 7px; }
        .footer-col ul li a { font-size: 13px; color: var(--text-3); }
        .footer-col ul li a:hover { color: var(--pink); }

        .footer-bottom-bar {
            border-top: 1px solid var(--border);
            padding: 16px;
        }
        .footer-bottom-inner {
            max-width: 900px; margin: 0 auto;
        }
        .footer-post-row {
            display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
        }
        .footer-countries { flex: 1; }
        .footer-countries select {
            border: 1px solid var(--border); border-radius: 4px;
            padding: 8px 12px; font-size: 13px; color: var(--text-2);
            background: white; outline: none; cursor: pointer;
            min-width: 130px; font-family: 'Open Sans', sans-serif;
        }
        .footer-payment-row {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        }
        .footer-payment-img { height: 22px; }
        .footer-social-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
        .footer-social-row a { font-size: 20px; color: var(--text-3); transition: color .2s; }
        .footer-social-row a:hover { color: var(--pink); text-decoration: none; }
        .footer-copyright { text-align: center; font-size: 12px; color: var(--text-4); margin-top: 14px; }
        .back-to-top {
            position: fixed; bottom: 24px; right: 24px;
            background: white; border: 1px solid var(--border); border-radius: 4px;
            padding: 8px 12px; font-size: 12px; color: var(--text-3);
            cursor: pointer; box-shadow: var(--shadow-card); transition: all .2s;
            text-decoration: none; display: flex; align-items: center; gap: 5px;
        }
        .back-to-top:hover { border-color: var(--pink); color: var(--pink); text-decoration: none; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .navbar-links { display: none; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .navbar-username { display: none; }
        }
    </style>
    @yield('styles')
</head>
<body>

    {{-- PROMO BANNER --}}
    <div class="promo-banner">
        <div class="promo-banner-text">
            WE'VE LAUNCHED STAR
            <span>Try the new ad listing and stay always visible on the first 5 pages of results in your city.</span>
        </div>
        <button class="promo-try-btn" id="promo-try-btn">TRY IT NOW!</button>
    </div>

    {{-- NAVBAR --}}
    <header class="navbar">
        <div class="navbar-left">
            <div class="navbar-logo-icon"><i class="fi fi-sr-user" style="font-size:14px;"></i></div>
            <div class="navbar-left-text" style="margin-left:4px;">
                <a href="{{ route('home') }}" style="text-decoration:none;">
                    <img src="{{ asset('images/logo.png') }}" alt="Swagvio" style="height: 140px;">
                </a>
                <span class="navbar-country">India</span>
            </div>
        </div>

        <div class="navbar-links">
            <a href="{{ route('home') }}">Browse</a>
            <a href="#">Categories</a>
            <a href="#">Cities</a>
        </div>

        <div class="navbar-right">
            @auth
                <div class="navbar-user">
                    <div class="navbar-user-icon"><i class="fi fi-sr-user" style="font-size:14px;"></i></div>
                    <span class="navbar-username">{{ auth()->user()->name }}</span>
                </div>
                <a href="#" class="navbar-post-btn">POST YOUR AD</a>
            @else
                <a href="{{ route('login') }}" style="font-size:13px; color:var(--text-2); font-weight:600; text-decoration:none;">Login</a>
                <a href="{{ route('register') }}" class="navbar-post-btn">POST YOUR AD</a>
            @endauth
        </div>
    </header>

    {{-- MAIN --}}
    <main>
        @yield('content')
    </main>

    {{-- FOOTER --}}
    <footer class="footer">
        <div class="footer-top">
            <div class="footer-top-inner">
                <div>
                    <div class="footer-brand-row">
                        <div class="navbar-logo-icon" style="font-size:16px;"><i class="fi fi-sr-user"></i></div>
                        <img src="{{ asset('images/logo.png') }}" alt="Swagvio" style="height: 140px;">
                    </div>
                    <div class="footer-restricted">
                        <i class="fi fi-rr-exclamation"></i> RESTRICTED TO ADULTS
                    </div>
                </div>
                <div class="footer-desc">
                    Swagvio is the largest advertising platform for independent escorts worldwide.
                    Browse through thousands of new ads from hot escorts around the world.
                    Available in <a href="#">29 countries</a>.
                </div>
            </div>
        </div>
        <div class="footer-grid">
            <div class="footer-col">
                <h5>Legal</h5>
                <ul>
                    <li><a href="#">Terms and Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Cookie Policy</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h5>Support</h5>
                <ul>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Help Center</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h5>Security</h5>
                <ul>
                    <li><a href="#">How to report a scam</a></li>
                    <li><a href="#">Safe Browsing</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h5>Company</h5>
                <ul>
                    <li><a href="#">Bakeca Incontri</a></li>
                    <li><a href="#">Swagvio Network</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom-bar">
            <div class="footer-bottom-inner">
                <div class="footer-post-row">
                    <a href="#" class="btn btn-pink btn-block" style="border-radius:4px; font-size:14px; padding:12px;">POST YOUR AD</a>
                    <div class="footer-countries">
                        <div style="font-size:12px; color:var(--text-3); margin-bottom:6px;">Countries</div>
                        <select>
                            <option>🇮🇳 India</option>
                            <option>🇺🇸 USA</option>
                            <option>🇬🇧 UK</option>
                            <option>🇦🇺 Australia</option>
                        </select>
                    </div>
                </div>
                <div class="footer-payment-row">
                    <span style="font-size:22px;"><i class="fi fi-rr-credit-card" style="color:#1a1f71;"></i></span>
                    <span style="font-size:13px; font-weight:700; color:#1a1f71;">VISA</span>
                </div>
                <div style="font-size:11px; color:var(--text-4); margin-top:8px;">
                    SOFYAN LIMITED · Amathus Avenue, 4532 Agios Tychonas, Limassol, Cyprus. Registration Number: HE 448163
                </div>
                <div class="footer-social-row">
                    <a href="#" title="Instagram"><i class="fi fi-brands-instagram"></i></a>
                    <a href="#" title="X/Twitter"><i class="fi fi-brands-twitter-alt"></i></a>
                    <a href="#" title="TikTok"><i class="fi fi-brands-tik-tok"></i></a>
                    <a href="#" title="Telegram"><i class="fi fi-brands-telegram"></i></a>
                </div>
                <div class="footer-copyright">Copyright 2026 © Swagvio</div>
            </div>
        </div>
    </footer>

    <a href="#" class="back-to-top" onclick="window.scrollTo({top:0,behavior:'smooth'}); return false;">
        Back to top ↑
    </a>

    <script>
        // Dropdown toggle
        document.querySelectorAll('.dropdown').forEach(d => {
            d.addEventListener('click', e => { e.stopPropagation(); d.classList.toggle('active'); });
        });
        document.addEventListener('click', () => {
            document.querySelectorAll('.dropdown.active').forEach(d => d.classList.remove('active'));
        });

        // Toast
        function showToast(msg, type='success') {
            const icons = { success: '<i class="fi fi-rr-check-circle" style="color:#43a047"></i>', error: '<i class="fi fi-rr-cross-circle" style="color:#e53935"></i>', info: '<i class="fi fi-rr-info" style="color:#1976d2"></i>' };
            const t = document.createElement('div');
            t.style.cssText = 'position:fixed;bottom:70px;right:24px;z-index:9999;background:white;border:1px solid #e0e0e0;border-radius:6px;padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:13px;animation:fadeIn .3s ease;min-width:240px;';
            t.innerHTML = `<span>${icons[type]||icons.info}</span><span>${msg}</span>`;
            document.body.appendChild(t);
            setTimeout(() => { t.style.opacity='0'; t.style.transition='opacity .3s'; setTimeout(() => t.remove(), 300); }, 3200);
        }

        @if(session('success'))
            document.addEventListener('DOMContentLoaded', () => showToast("{{ session('success') }}"));
        @endif
    </script>
    @yield('scripts')
</body>
</html>
