@extends('layouts.app')

@section('title', 'Swagvio — Browse Escort & Adult Listings in India')
@section('meta_description', 'Browse thousands of verified escort and adult listings in India. Find call girls, massage services, male escorts and more.')

@section('styles')
<style>
    /* ===== HERO ===== */
    .hero {
        background: linear-gradient(135deg, #e91e8c 0%, #9c27b0 100%);
        padding: 48px 16px 64px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .hero::after {
        content: '';
        position: absolute; bottom: -1px; left: 0; right: 0;
        height: 40px;
        background: var(--bg);
        clip-path: ellipse(60% 100% at 50% 100%);
    }
    .hero h1 {
        font-size: 30px; font-weight: 800; color: white;
        margin-bottom: 8px; letter-spacing: -.5px;
    }
    .hero-sub { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 24px; }

    .hero-search {
        display: flex; max-width: 600px; margin: 0 auto 28px;
        background: white; border-radius: 6px;
        overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.2);
    }
    .hero-search select {
        background: white; border: none; border-right: 1px solid var(--border);
        padding: 12px 16px; font-size: 14px; font-family: 'Open Sans', sans-serif;
        color: var(--text-2); outline: none; cursor: pointer; min-width: 120px;
    }
    .hero-search input {
        flex: 1; border: none; padding: 12px 16px;
        color: var(--text); font-size: 14px; font-family: 'Open Sans', sans-serif;
        outline: none; background: transparent;
    }
    .hero-search input::placeholder { color: var(--text-4); }
    .hero-search-btn {
        background: var(--pink); border: none; padding: 12px 22px;
        color: white; font-size: 14px; font-weight: 700;
        cursor: pointer; font-family: 'Open Sans', sans-serif; transition: background .2s;
    }
    .hero-search-btn:hover { background: var(--pink-dark); }

    .hero-stats {
        display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
    }
    .hero-stat-num { font-size: 22px; font-weight: 800; color: white; display: block; }
    .hero-stat-lbl { font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .4px; }

    /* ===== CONTENT AREA ===== */
    .page-body { max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; }

    /* ===== SECTION ===== */
    .section { margin-bottom: 36px; }
    .section-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 14px;
    }
    .section-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .section-link { font-size: 13px; color: var(--pink); }
    .section-link:hover { text-decoration: underline; }

    /* ===== CATEGORY CARDS ===== */
    .cat-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
    .cat-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow .15s, transform .15s;
        text-decoration: none;
        display: block;
    }
    .cat-card:hover {
        text-decoration: none;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
        transform: translateY(-3px);
    }
    .cat-thumb {
        aspect-ratio: 3/4;
        background: var(--pink-bg);
        display: flex; align-items: center; justify-content: center;
        font-size: 48px;
        position: relative;
    }
    .cat-thumb-gradient {
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
    }
    .cat-count-badge {
        position: absolute; top: 6px; right: 6px;
        background: var(--pink); color: white;
        font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 3px;
    }
    .cat-body { padding: 10px; }
    .cat-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .cat-desc { font-size: 11px; color: var(--text-3); margin-bottom: 7px; line-height: 1.4; }
    .cat-cities { display: flex; flex-wrap: wrap; gap: 4px; }
    .cat-city { font-size: 11px; color: var(--pink); background: var(--pink-bg); border-radius: 3px; padding: 1px 6px; font-weight: 600; }

    /* ===== LISTING CARDS ===== */
    .listing-list { display: flex; flex-direction: column; gap: 10px; }

    .listing-card {
        background: white; border: 1px solid var(--border);
        border-radius: 6px; display: flex; overflow: hidden;
        transition: box-shadow .15s; cursor: pointer;
        position: relative;
    }
    .listing-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); }
    .listing-card.featured { border-color: var(--pink); }
    .listing-card.featured::before {
        content: 'FEATURED';
        position: absolute; top: 0; left: 0;
        background: var(--pink); color: white;
        font-size: 10px; font-weight: 700; padding: 2px 8px;
        border-bottom-right-radius: 4px; letter-spacing: .3px;
    }

    .listing-img {
        width: 120px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 44px; min-height: 140px;
        background: linear-gradient(135deg, var(--pink-bg), #f3e5f5);
    }
    .listing-body {
        flex: 1; padding: 12px 14px; display: flex; flex-direction: column;
        gap: 5px; min-width: 0;
    }
    .listing-title { font-size: 14px; font-weight: 700; color: var(--pink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .listing-desc { font-size: 12px; color: var(--text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .listing-loc { font-size: 12px; color: var(--text-4); display: flex; align-items: center; gap: 4px; }
    .listing-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
    .listing-tag { font-size: 11px; padding: 1px 7px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); color: var(--text-3); }
    .listing-verified { background: #e8f5e9; border-color: #a5d6a7; color: #388e3c; }
    .listing-premium { background: #fff8e1; border-color: #ffe082; color: #7b5c00; }

    .listing-actions {
        display: flex; gap: 8px; margin-top: auto;
        padding-top: 10px; border-top: 1px solid var(--border);
    }
    .listing-act {
        display: flex; align-items: center; gap: 5px;
        padding: 5px 10px; border-radius: 3px;
        border: 1px solid var(--border); background: white;
        font-size: 12px; font-weight: 600; cursor: pointer;
        transition: all .15s; text-decoration: none; color: var(--text-2);
        font-family: 'Open Sans', sans-serif;
    }
    .listing-act:hover { border-color: var(--pink); color: var(--pink); text-decoration: none; }
    .listing-act.fav { margin-left: auto; }
    .listing-act.fav.active { background: var(--pink-bg); border-color: var(--pink); color: var(--pink); }

    /* ===== BANNER AD ===== */
    .banner-ad {
        background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
        border: 1px solid #bbdefb;
        border-radius: 6px; padding: 14px 16px;
        display: flex; align-items: center; gap: 14px; margin: 4px 0;
    }
    .banner-ad-icon { font-size: 30px; flex-shrink: 0; }
    .banner-ad-text { flex: 1; }
    .banner-ad-text h4 { font-size: 13px; font-weight: 700; color: #1565c0; margin-bottom: 3px; }
    .banner-ad-text p { font-size: 12px; color: #1976d2; }

    /* ===== CITY SECTION ===== */
    .city-category { margin-bottom: 18px; }
    .city-cat-label {
        font-size: 13px; font-weight: 700; color: var(--text-2);
        display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    }
    .city-pills-scroll { display: flex; gap: 6px; flex-wrap: wrap; }
    .city-pill {
        padding: 5px 14px; border-radius: 20px;
        border: 1px solid var(--border); background: white;
        color: var(--text-2); font-size: 12px; font-weight: 600;
        cursor: pointer; transition: all .15s; text-decoration: none;
        display: inline-flex; align-items: center; gap: 4px;
    }
    .city-pill:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-bg); text-decoration: none; }

    /* ===== POST CTA ===== */
    .post-cta {
        background: linear-gradient(135deg, #e91e8c 0%, #9c27b0 100%);
        border-radius: 6px; padding: 32px 24px; text-align: center;
    }
    .post-cta h2 { font-size: 22px; font-weight: 800; color: white; margin-bottom: 8px; }
    .post-cta p { font-size: 14px; color: rgba(255,255,255,.85); margin-bottom: 20px; }
    .post-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .btn-white { background: white; color: var(--pink); font-weight: 700; }
    .btn-white:hover { background: #fafafa; color: var(--pink); text-decoration: none; }
    .btn-white-outline { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.5); }
    .btn-white-outline:hover { background: rgba(255,255,255,.1); color: white; text-decoration: none; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
        .cat-grid { grid-template-columns: repeat(3, 1fr); }
        .hero { padding: 36px 16px 56px; }
        .hero h1 { font-size: 22px; }
    }
    @media (max-width: 480px) {
        .cat-grid { grid-template-columns: repeat(2, 1fr); }
        .listing-img { width: 90px; font-size: 32px; }
    }
</style>
@endsection

@section('content')

{{-- HERO --}}
<section class="hero">
    <h1>Find Your Perfect Connection</h1>
    <p class="hero-sub">Browse thousands of verified adult listings across India's major cities</p>

    <div class="hero-search">
        <select>
            <option>All Categories</option>
            <option>Call Girls</option>
            <option>Massages</option>
            <option>Male Escorts</option>
            <option>Transsexual</option>
            <option>Adult Meetings</option>
        </select>
        <input type="text" placeholder="Search by city or keyword…" id="hero-search-input">
        <button class="hero-search-btn"><i class="fi fi-rr-search"></i> Search</button>
    </div>

    <div class="hero-stats">
        <div><span class="hero-stat-num">12,400+</span><span class="hero-stat-lbl">Active Listings</span></div>
        <div><span class="hero-stat-num">29</span><span class="hero-stat-lbl">Cities</span></div>
        <div><span class="hero-stat-num">14K+</span><span class="hero-stat-lbl">Users</span></div>
    </div>
</section>

<div class="page-body">

    {{-- CATEGORIES --}}
    <section class="section">
        <div class="section-header">
            <span class="section-title">Browse by Category</span>
            <a href="#" class="section-link">View all →</a>
        </div>
        <div class="cat-grid">
            @foreach($categories as $index => $cat)
            <a href="#" class="cat-card">
                <div class="cat-thumb" style="background:{{ $cat['bg'] ?? '#fdf0f7' }};">
                    {!! $cat['icon'] !!}
                    <div class="cat-thumb-gradient"></div>
                    <span class="cat-count-badge">{{ $cat['count'] }}</span>
                </div>
                <div class="cat-body">
                    <div class="cat-name">{{ $cat['name'] }}</div>
                    <div class="cat-desc">{{ $cat['description'] ?? 'Browse listings' }}</div>
                    <div class="cat-cities">
                        @foreach(array_slice($cities, 0, 3) as $city)
                        <span class="cat-city">{{ $city }}</span>
                        @endforeach
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </section>

    {{-- FEATURED LISTINGS --}}
    <section class="section">
        <div class="section-header">
            <span class="section-title"><i class="fi fi-rr-star" style="color:var(--pink);"></i> Featured Listings</span>
            <a href="#" class="section-link">See all →</a>
        </div>
        <div class="listing-list" id="listings-container">
            @for($i = 1; $i <= 8; $i++)
                @if($i == 4)
                <div class="banner-ad">
                    <div class="banner-ad-icon"><i class="fi fi-rr-star" style="color:#1565c0; font-size:30px;"></i></div>
                    <div class="banner-ad-text">
                        <h4>Boost Your Listing — Go Premium!</h4>
                        <p>Get 10x more views with a Featured Ad. Starting from ₹199/week.</p>
                    </div>
                    <a href="#" class="btn btn-blue btn-sm">Upgrade</a>
                </div>
                @endif
                <div class="listing-card {{ $i <= 2 ? 'featured' : '' }}">
                    <div class="listing-img">
                        <i class="fi fi-rr-user" style="font-size:44px; color:var(--pink-light);"></i>
                    </div>
                    <div class="listing-body">
                        <div class="listing-title">Adult Entertainment Listing #{{ $i }}</div>
                        <div class="listing-desc">Independent escort available 24/7. Premium companionship services in your city. 100% real verified photos.</div>
                        <div class="listing-loc">
                            <i class="fi fi-rr-marker"></i> {{ ['Mumbai','Delhi','Bangalore','Hyderabad','Pune','Chennai','Kolkata','Jaipur'][$i-1] }} · {{ rand(1,9) }}.{{ rand(1,9) }} km
                        </div>
                        <div class="listing-tags">
                            @if($i % 2 == 0)
                            <span class="listing-tag listing-premium"><i class="fi fi-rr-star"></i> Premium</span>
                            @else
                            <span class="listing-tag listing-verified">✓ Verified</span>
                            @endif
                            <span class="listing-tag">24/7</span>
                            <span class="listing-tag">Independent</span>
                        </div>
                        <div class="listing-actions">
                            <a href="tel:+91" class="listing-act" title="Call"><i class="fi fi-rr-phone-call"></i> Call</a>
                            <a href="https://wa.me/" class="listing-act" title="WhatsApp"><i class="fi fi-brands-whatsapp"></i> WhatsApp</a>
                            <a href="https://t.me/" class="listing-act" title="Telegram"><i class="fi fi-brands-telegram"></i> Telegram</a>
                            <button class="listing-act fav {{ $i == 2 ? 'active' : '' }}" onclick="toggleFav(this)"><i class="fi fi-{{ $i == 2 ? 'sr' : 'rr' }}-heart"></i></button>
                        </div>
                    </div>
                </div>
            @endfor
        </div>
        <div style="text-align:center; margin-top:20px;">
            <button class="btn btn-outline" id="load-more-btn" onclick="loadMore()">Load more listings</button>
        </div>
    </section>

    {{-- CITY SECTION --}}
    <section class="section">
        <div class="section-header">
            <span class="section-title">Browse by City</span>
        </div>
        @foreach($categories as $cat)
        <div class="city-category">
            <div class="city-cat-label">
                <span>{!! $cat['icon'] !!}</span> {{ $cat['name'] }}
                <span class="badge badge-pink">{{ $cat['count'] }}</span>
            </div>
            <div class="city-pills-scroll">
                @foreach($cities as $city)
                <a href="#" class="city-pill"><i class="fi fi-rr-marker"></i> {{ $city }}</a>
                @endforeach
            </div>
        </div>
        @endforeach
    </section>

    {{-- CTA --}}
    <section class="section">
        <div class="post-cta">
            <h2>Post Your Ad For Free <i class="fi fi-rr-rocket"></i></h2>
            <p>Reach thousands of potential clients in your city. Go live in under 2 minutes.</p>
            <div class="post-cta-btns">
                @auth
                <a href="#" class="btn btn-white"><i class="fi fi-rr-plus"></i> Post Your Ad Now</a>
                @else
                <a href="{{ route('register') }}" class="btn btn-white"><i class="fi fi-rr-rocket"></i> Get Started Free</a>
                <a href="{{ route('login') }}" class="btn btn-white-outline">Login to Post</a>
                @endauth
            </div>
        </div>
    </section>

</div>
@endsection

@section('scripts')
<script>
    function toggleFav(btn) {
        btn.classList.toggle('active');
        btn.innerHTML = btn.classList.contains('active') ? '<i class="fi fi-sr-heart"></i>' : '<i class="fi fi-rr-heart"></i>';
        showToast(btn.classList.contains('active') ? 'Added to favorites!' : 'Removed from favorites');
    }
    let page = 1;
    function loadMore() {
        const btn = document.getElementById('load-more-btn');
        btn.textContent = 'Loading…'; btn.disabled = true;
        setTimeout(() => {
            const c = document.getElementById('listings-container');
            for (let i = 0; i < 4; i++) {
                const d = document.createElement('div');
                d.className = 'listing-card';
                d.innerHTML = `
                    <div class="listing-img"><i class="fi fi-rr-user" style="font-size:44px; color:var(--pink-light);"></i></div>
                    <div class="listing-body">
                        <div class="listing-title">New Listing #${(page*4)+i+10}</div>
                        <div class="listing-desc">Premium adult entertainment service. Real photos, verified profile, available now.</div>
                        <div class="listing-loc"><i class="fi fi-rr-marker"></i> India · Available Now</div>
                        <div class="listing-tags"><span class="listing-tag listing-verified">&#10003; Verified</span><span class="listing-tag">24/7</span></div>
                        <div class="listing-actions">
                            <a href="#" class="listing-act"><i class="fi fi-rr-phone-call"></i> Call</a>
                            <a href="#" class="listing-act"><i class="fi fi-brands-whatsapp"></i> WhatsApp</a>
                            <button class="listing-act fav" onclick="toggleFav(this)"><i class="fi fi-rr-heart"></i></button>
                        </div>
                    </div>`;
                c.appendChild(d);
            }
            page++; btn.textContent = 'Load more listings'; btn.disabled = false;
            showToast('4 more listings loaded!');
        }, 700);
    }
</script>
@endsection