@extends('layouts.app')

@section('title', 'Browse Movies')

@section('content')
<style>
    :root{
        --bg:#070b14;
        --bg-2:#0d1320;
        --panel:#101826;
        --panel-2:#151f31;
        --line:rgba(255,255,255,.08);
        --text:#f8fafc;
        --muted:#94a3b8;
        --red:#e50914;
        --red-2:#b20710;
        --blue:#3b82f6;
        --green:#22c55e;
        --radius:22px;
        --shadow:0 20px 50px rgba(0,0,0,.35);
    }

    body{
        background:
            radial-gradient(circle at top left, rgba(229,9,20,.10), transparent 28%),
            radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 28%),
            linear-gradient(180deg, #060912 0%, #0b1020 100%);
        color:var(--text);
    }

    .browse-page{
        max-width:1450px;
        margin:0 auto;
        padding:28px 24px 40px;
    }

    .browse-hero{
        position:relative;
        overflow:hidden;
        border:1px solid var(--line);
        border-radius:28px;
        min-height:430px;
        background:
            linear-gradient(90deg, rgba(5,8,15,.95) 0%, rgba(5,8,15,.82) 35%, rgba(5,8,15,.35) 65%, rgba(5,8,15,.15) 100%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
            #0d1422;
        box-shadow:var(--shadow);
        display:flex;
        align-items:end;
        margin-bottom:24px;
    }

    .browse-hero::before{
        content:"";
        position:absolute;
        inset:0;
        background-image:var(--hero-image);
        background-size:cover;
        background-position:center;
        z-index:0;
        opacity:.38;
        transform:scale(1.03);
    }

    .browse-hero-inner{
        position:relative;
        z-index:1;
        width:100%;
        padding:42px;
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:24px;
        align-items:end;
    }

    @media (max-width: 960px){
        .browse-hero-inner{
            grid-template-columns:1fr;
            padding:28px;
        }
    }

    .eyebrow{
        display:inline-flex;
        align-items:center;
        gap:8px;
        font-size:12px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:#fecaca;
        background:rgba(229,9,20,.14);
        border:1px solid rgba(229,9,20,.22);
        padding:8px 12px;
        border-radius:999px;
        margin-bottom:14px;
    }

    .browse-hero h1{
        margin:0 0 12px;
        font-size:clamp(2rem, 5vw, 4rem);
        line-height:1;
        font-weight:900;
        letter-spacing:-0.04em;
    }

    .browse-hero p{
        margin:0;
        max-width:780px;
        color:#dbe4f0;
        font-size:15px;
        line-height:1.75;
    }

    .hero-meta{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:18px;
    }

    .meta-pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:9px 12px;
        border-radius:999px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.10);
        color:#fff;
        font-size:12px;
        font-weight:700;
    }

    .hero-actions{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:22px;
    }

    .btn-main,
    .btn-secondary{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:14px 18px;
        border-radius:14px;
        text-decoration:none;
        font-weight:800;
        font-size:14px;
        transition:.2s ease;
        border:none;
        cursor:pointer;
    }

    .btn-main{
        background:linear-gradient(180deg, #ef1723 0%, #c50812 100%);
        color:#fff;
        box-shadow:0 16px 28px rgba(229,9,20,.28);
    }

    .btn-secondary{
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.10);
        color:#fff;
    }

    .btn-main:hover,
    .btn-secondary:hover{
        transform:translateY(-1px);
    }

    .hero-side-card{
        margin-left:auto;
        width:100%;
        max-width:360px;
        background:rgba(9,14,25,.72);
        backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.08);
        border-radius:24px;
        padding:20px;
    }

    .hero-side-card h3{
        margin:0 0 8px;
        font-size:18px;
        font-weight:900;
    }

    .hero-side-card p{
        margin:0;
        color:var(--muted);
        font-size:13px;
        line-height:1.7;
    }

    .hero-stat-grid{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
        margin-top:18px;
    }

    .hero-stat{
        background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.06);
        border-radius:18px;
        padding:16px;
    }

    .hero-stat strong{
        display:block;
        font-size:22px;
        margin-bottom:6px;
    }

    .hero-stat span{
        color:var(--muted);
        font-size:12px;
    }

    .browse-toolbar{
        display:grid;
        grid-template-columns:1.2fr .8fr;
        gap:18px;
        margin-bottom:22px;
    }

    @media (max-width: 960px){
        .browse-toolbar{
            grid-template-columns:1fr;
        }
    }

    .search-panel,
    .filters-panel{
        background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
        border:1px solid var(--line);
        border-radius:24px;
        box-shadow:var(--shadow);
        padding:18px;
    }

    .search-form{
        display:grid;
        grid-template-columns:1fr auto;
        gap:12px;
        align-items:center;
    }

    @media (max-width: 640px){
        .search-form{
            grid-template-columns:1fr;
        }
    }

    .search-input,
    .filter-select{
        width:100%;
        border-radius:16px;
        background:var(--panel-2);
        border:1px solid rgba(255,255,255,.08);
        color:#fff;
        padding:15px 16px;
        font-size:14px;
        outline:none;
    }

    .search-input:focus,
    .filter-select:focus{
        border-color:rgba(59,130,246,.8);
        box-shadow:0 0 0 4px rgba(59,130,246,.12);
    }

    .search-btn{
        height:52px;
        min-width:130px;
    }

    .filters-grid{
        display:grid;
        grid-template-columns:1fr 1fr auto;
        gap:12px;
        align-items:center;
    }

    @media (max-width: 640px){
        .filters-grid{
            grid-template-columns:1fr;
        }
    }

    .clear-link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        height:52px;
        padding:0 18px;
        border-radius:16px;
        background:rgba(255,255,255,.06);
        color:#fff;
        text-decoration:none;
        border:1px solid rgba(255,255,255,.08);
        font-weight:700;
        white-space:nowrap;
    }

    .section-head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:16px;
        flex-wrap:wrap;
        margin-bottom:16px;
    }

    .section-head h2{
        margin:0;
        font-size:24px;
        font-weight:900;
        letter-spacing:-0.02em;
    }

    .section-head p{
        margin:4px 0 0;
        color:var(--muted);
        font-size:13px;
    }

    .result-count{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:10px 14px;
        border-radius:999px;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        color:#dbe4f0;
        font-size:12px;
        font-weight:800;
    }

    .movie-grid{
        display:grid;
        grid-template-columns:repeat(6, minmax(0, 1fr));
        gap:18px;
        overflow:visible;
    }

    @media (max-width: 1400px){
        .movie-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
    }

    @media (max-width: 1180px){
        .movie-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 860px){
        .movie-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 640px){
        .movie-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 440px){
        .movie-grid{ grid-template-columns:1fr; }
    }

    .movie-card{
        position:relative;
        overflow:hidden;
        border-radius:24px;
        background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
        border:1px solid var(--line);
        box-shadow:var(--shadow);
        transition:.24s ease;
        z-index:1;
    }

    .movie-card:hover{
        z-index:20;
        transform:translateY(-8px) scale(1.02);
        border-color:rgba(255,255,255,.18);
        box-shadow:0 28px 60px rgba(0,0,0,.45);
    }

    .movie-link{
        text-decoration:none;
        color:inherit;
        display:block;
    }

    .movie-poster-wrap{
        position:relative;
        aspect-ratio:2 / 3;
        background:linear-gradient(180deg, #151c2c 0%, #0f1420 100%);
        overflow:hidden;
    }

    .movie-poster-link{
        position:absolute;
        inset:0;
        z-index:1;
        display:block;
    }

    .movie-poster{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition:transform .45s ease, filter .3s ease;
    }

    .movie-card:hover .movie-poster{
        transform:scale(1.08);
        filter:brightness(.72);
    }

    .movie-overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%);
        pointer-events:none;
    }

    .movie-badge{
        position:absolute;
        top:12px;
        left:12px;
        z-index:4;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:7px 10px;
        border-radius:999px;
        font-size:11px;
        font-weight:900;
        letter-spacing:.04em;
        text-transform:uppercase;
        background:rgba(229,9,20,.88);
        color:#fff;
        box-shadow:0 10px 20px rgba(229,9,20,.28);
    }

    .movie-rating{
        position:absolute;
        top:12px;
        right:12px;
        z-index:4;
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:7px 10px;
        border-radius:999px;
        font-size:11px;
        font-weight:900;
        background:rgba(15,23,42,.82);
        border:1px solid rgba(255,255,255,.10);
        color:#fff;
    }

    .movie-hover-layer{
        position:absolute;
        inset:0;
        z-index:3;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        padding:16px;
        opacity:0;
        visibility:hidden;
        transform:translateY(18px);
        transition:all .28s ease;
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.04) 0%,
            rgba(0,0,0,.18) 35%,
            rgba(0,0,0,.82) 100%
        );
        pointer-events:none;
    }

    .movie-card:hover .movie-hover-layer{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .movie-hover-actions{
        display:flex;
        align-items:center;
        gap:10px;
        margin-bottom:14px;
        position:relative;
        z-index:50;
    }

    .hover-play-btn,
    .hover-mini-btn{
        border:none;
        cursor:pointer;
        transition:.2s ease;
        position:relative;
        z-index:60;
    }

    .hover-play-btn:hover,
    .hover-mini-btn:hover{
        transform:translateY(-1px);
    }

    .hover-play-btn{
        width:46px;
        height:46px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:#fff;
        color:#000;
        font-size:16px;
        font-weight:900;
        box-shadow:0 14px 24px rgba(0,0,0,.35);
        text-decoration:none;
    }

    .hover-mini-btn{
        width:38px;
        height:38px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.18);
        color:#fff;
        font-size:14px;
        font-weight:900;
        backdrop-filter:blur(8px);
    }

    .movie-hover-info{
        display:grid;
        gap:10px;
        position:relative;
        z-index:5;
    }

    .movie-hover-meta{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .movie-hover-meta span{
        display:inline-flex;
        align-items:center;
        padding:6px 10px;
        border-radius:999px;
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.12);
        color:#fff;
        font-size:11px;
        font-weight:800;
    }

    .movie-hover-desc{
        margin:0;
        color:#dbe4f0;
        font-size:12px;
        line-height:1.6;
    }

    .movie-card-body{
        padding:14px 14px 16px;
        transition:background .28s ease;
        position:relative;
        z-index:2;
    }

    .movie-card:hover .movie-card-body{
        background:linear-gradient(180deg, rgba(19,29,47,.96), rgba(12,19,31,.98));
    }

    .movie-title{
        margin:0;
        font-size:16px;
        font-weight:900;
        line-height:1.35;
        letter-spacing:-0.01em;
        min-height:43px;
    }

    .movie-meta{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-top:10px;
    }

    .movie-meta span{
        display:inline-flex;
        align-items:center;
        padding:6px 9px;
        border-radius:999px;
        background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.06);
        color:#dbe4f0;
        font-size:11px;
        font-weight:700;
    }

    .movie-desc{
        margin:12px 0 0;
        color:var(--muted);
        font-size:12px;
        line-height:1.65;
        min-height:58px;
    }

    .movie-footer{
        margin-top:14px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .movie-footer .watch-text{
        color:#fff;
        font-weight:800;
        font-size:13px;
    }

    .movie-footer .arrow{
        width:36px;
        height:36px;
        border-radius:50%;
        display:grid;
        place-items:center;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        color:#fff;
        font-weight:900;
    }

    .details-link{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        text-decoration:none;
        color:inherit;
        width:100%;
    }

    .empty-state{
        background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
        border:1px solid var(--line);
        border-radius:26px;
        box-shadow:var(--shadow);
        padding:36px;
        text-align:center;
    }

    .empty-state h3{
        margin:0 0 10px;
        font-size:24px;
        font-weight:900;
    }

    .empty-state p{
        margin:0 auto 18px;
        color:var(--muted);
        max-width:640px;
        line-height:1.8;
    }

    .pagination-wrap{
        margin-top:24px;
        display:flex;
        justify-content:center;
    }

    .pagination-wrap nav{
        width:100%;
    }

    .fallback-poster{
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        color:#94a3b8;
        background:linear-gradient(180deg, #111827 0%, #0b1220 100%);
    }

    @media (max-width: 768px){
        .movie-card:hover{
            transform:translateY(-4px) scale(1.01);
        }

        .movie-hover-desc{
            font-size:11px;
        }
    }
</style>

@php
    $resolvePosterUrl = function ($movie) {
        $candidates = [
            $movie->poster ?? null,
            $movie->thumbnail ?? null,
        ];

        foreach ($candidates as $path) {
            if (empty($path)) {
                continue;
            }

            $path = trim($path);

            if (\Illuminate\Support\Str::startsWith($path, ['http://', 'https://'])) {
                return $path;
            }

            if (\Illuminate\Support\Str::startsWith($path, ['uploads/', '/uploads/'])) {
                return asset(ltrim($path, '/'));
            }

            if (\Illuminate\Support\Str::startsWith($path, ['storage/', '/storage/'])) {
                return asset(ltrim($path, '/'));
            }

            if (\Illuminate\Support\Str::startsWith($path, ['movies/', '/movies/'])) {
                return asset('storage/' . ltrim($path, '/'));
            }

            return asset(ltrim($path, '/'));
        }

        return null;
    };

    $heroImage = null;
    if (!empty($featuredMovie)) {
        if (!empty($featuredMovie->backdrop)) {
            $heroBackdrop = trim($featuredMovie->backdrop);

            if (\Illuminate\Support\Str::startsWith($heroBackdrop, ['http://', 'https://'])) {
                $heroImage = $heroBackdrop;
            } elseif (\Illuminate\Support\Str::startsWith($heroBackdrop, ['uploads/', '/uploads/'])) {
                $heroImage = asset(ltrim($heroBackdrop, '/'));
            } elseif (\Illuminate\Support\Str::startsWith($heroBackdrop, ['storage/', '/storage/'])) {
                $heroImage = asset(ltrim($heroBackdrop, '/'));
            } elseif (\Illuminate\Support\Str::startsWith($heroBackdrop, ['movies/', '/movies/'])) {
                $heroImage = asset('storage/' . ltrim($heroBackdrop, '/'));
            } else {
                $heroImage = asset(ltrim($heroBackdrop, '/'));
            }
        }

        if (!$heroImage) {
            $heroImage = $resolvePosterUrl($featuredMovie);
        }
    }

    if (!$heroImage) {
        $heroImage = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Crect width='100%25' height='100%25' fill='%230d1422'/%3E%3C/svg%3E";
    }

    $totalMovies = method_exists($movies, 'total') ? $movies->total() : count($movies);
@endphp

<div class="browse-page">
    <section class="browse-hero" style="--hero-image: url('{{ $heroImage }}');">
        <div class="browse-hero-inner">
            <div>
                <div class="eyebrow">Premium Browse Experience</div>

                <h1>
                    {{ $featuredMovie->title ?? 'Browse Movies' }}
                </h1>

                <p>
                    {{ $featuredMovie->description
                        ?? 'Discover trending titles, browse your favorite genres, and find something worth watching with a premium streaming-style experience.' }}
                </p>

                <div class="hero-meta">
                    @if(!empty($featuredMovie?->release_year))
                        <span class="meta-pill">{{ $featuredMovie->release_year }}</span>
                    @endif

                    @if(!empty($featuredMovie?->duration))
                        <span class="meta-pill">{{ $featuredMovie->duration }} min</span>
                    @endif

                    @if(!empty($featuredMovie?->age_rating))
                        <span class="meta-pill">{{ $featuredMovie->age_rating }}</span>
                    @endif

                    @if(!empty($featuredMovie?->imdb_rating))
                        <span class="meta-pill">⭐ {{ $featuredMovie->imdb_rating }}/10</span>
                    @endif
                </div>

                <div class="hero-actions">
                    @if(!empty($featuredMovie?->slug))
                        <a href="{{ route('title.show', $featuredMovie->slug) }}" class="btn-main">Watch Details</a>
                    @endif

                    <a href="#browse-results" class="btn-secondary">Explore Catalog</a>
                </div>
            </div>

            <div class="hero-side-card">
                <h3>Find your next watch</h3>
                <p>
                    Search by title, filter by genre, sort by newest or top-rated movies and browse our catalog.
                </p>

                <div class="hero-stat-grid">
                    <div class="hero-stat">
                        <strong>{{ $totalMovies }}</strong>
                        <span>Available titles</span>
                    </div>

                    <div class="hero-stat">
                        <strong>{{ ($genres ?? collect())->count() }}</strong>
                        <span>Genres</span>
                    </div>

                    <div class="hero-stat">
                        <strong>{{ !empty($searchTerm) ? '1' : '0' }}</strong>
                        <span>Search active</span>
                    </div>

                    <div class="hero-stat">
                        <strong>{{ !empty($selectedGenre) ? '1' : '0' }}</strong>
                        <span>Genre filter</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="browse-toolbar">
        <div class="search-panel">
            <form method="GET" action="{{ route('browse') }}" class="search-form">
                <input
                    type="text"
                    name="q"
                    class="search-input"
                    placeholder="Search movies, cast, tags, directors..."
                    value="{{ $searchTerm }}"
                >

                @if(!empty($selectedGenre))
                    <input type="hidden" name="genre" value="{{ $selectedGenre }}">
                @endif

                @if(!empty($selectedSort))
                    <input type="hidden" name="sort" value="{{ $selectedSort }}">
                @endif

                <button type="submit" class="btn-main search-btn">Search</button>
            </form>
        </div>

        <div class="filters-panel">
            <form method="GET" action="{{ route('browse') }}" class="filters-grid">
                @if(!empty($searchTerm))
                    <input type="hidden" name="q" value="{{ $searchTerm }}">
                @endif

                <select name="genre" class="filter-select" onchange="this.form.submit()">
                    <option value="">All Genres</option>
                    @foreach(($genres ?? collect()) as $genre)
                        <option value="{{ $genre->id }}" @selected((string)$selectedGenre === (string)$genre->id)>
                            {{ $genre->name }}
                        </option>
                    @endforeach
                </select>

                <select name="sort" class="filter-select" onchange="this.form.submit()">
                    <option value="latest" @selected($selectedSort === 'latest')>Latest</option>
                    <option value="az" @selected($selectedSort === 'az')>A - Z</option>
                    <option value="rating" @selected($selectedSort === 'rating')>Top Rated</option>
                    <option value="year" @selected($selectedSort === 'year')>Release Year</option>
                    <option value="featured" @selected($selectedSort === 'featured')>Featured First</option>
                </select>

                <a href="{{ route('browse') }}" class="clear-link">Reset</a>
            </form>
        </div>
    </div>

    <section id="browse-results">
        <div class="section-head">
            <div>
                <h2>Browse Catalog</h2>
                <p>Premium movie discovery with fast scanning and clean filtering.</p>
            </div>

            <div class="result-count">
                {{ $movies->count() }} shown · {{ $totalMovies }} total
            </div>
        </div>

        @if($movies->count())
            <div class="movie-grid">
                @foreach($movies as $movie)
                    @php
    $posterUrl = $resolvePosterUrl($movie);
    $desc = $movie->description ?? 'No synopsis available yet.';
    $detailUrl = !empty($movie->slug) ? route('title.show', $movie->slug) : '#';
    $watchUrl = !empty($movie->slug) ? route('watch.movie', $movie->slug) : '#';
    $myListKey = $movie->slug ?? $movie->title ?? $movie->name ?? $movie->id;
@endphp
                    <article class="movie-card">
                        <div class="movie-poster-wrap">
                            <a href="{{ $detailUrl }}" class="movie-poster-link" aria-label="View {{ $movie->title }}"></a>

                            @if(!empty($movie->is_featured))
                                <span class="movie-badge">Featured</span>
                            @endif

                            @if(!empty($movie->imdb_rating))
                                <span class="movie-rating">⭐ {{ $movie->imdb_rating }}</span>
                            @endif

                            @if($posterUrl)
                                <img
                                    src="{{ $posterUrl }}"
                                    alt="{{ $movie->title }}"
                                    class="movie-poster"
                                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                                >
                                <div class="fallback-poster" style="display:none;">No Image</div>
                            @else
                                <div class="fallback-poster">No Image</div>
                            @endif

                            <div class="movie-overlay"></div>

                            <div class="movie-hover-layer">
                                <div class="movie-hover-actions">
                                    <a href="{{ $watchUrl }}" class="hover-play-btn" title="Play">▶</a>

                                    <button
                                        type="button"
                                        class="hover-mini-btn"
                                        title="Add to My List"
                                        onclick="document.getElementById('mylist-form-{{ $movie->id }}').submit();"
                                    >+</button>

                                    <a href="{{ $detailUrl }}" class="hover-mini-btn" title="More Info">i</a>
                                </div>

                                <div class="movie-hover-info">
                                    <div class="movie-hover-meta">
                                        @if(!empty($movie->release_year))
                                            <span>{{ $movie->release_year }}</span>
                                        @endif

                                        @if(!empty($movie->duration))
                                            <span>{{ $movie->duration }} min</span>
                                        @endif

                                        @if(!empty($movie->age_rating))
                                            <span>{{ $movie->age_rating }}</span>
                                        @endif
                                    </div>

                                    <p class="movie-hover-desc">
                                        {{ \Illuminate\Support\Str::limit(strip_tags($desc), 90) }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="movie-card-body">
                            <a href="{{ $detailUrl }}" class="movie-link">
                                <h3 class="movie-title">{{ $movie->title }}</h3>

                                <div class="movie-meta">
                                    @if(!empty($movie->release_year))
                                        <span>{{ $movie->release_year }}</span>
                                    @endif

                                    @if(!empty($movie->duration))
                                        <span>{{ $movie->duration }} min</span>
                                    @endif

                                    @if(!empty($movie->age_rating))
                                        <span>{{ $movie->age_rating }}</span>
                                    @endif
                                </div>

                                <p class="movie-desc">
                                    {{ \Illuminate\Support\Str::limit(strip_tags($desc), 95) }}
                                </p>
                            </a>

                            <div class="movie-footer" style="display:flex; gap:10px;">
    <a href="{{ $watchUrl }}" class="details-link" style="flex:1;">
        <span class="watch-text">▶ Play Now</span>
        <span class="arrow">→</span>
    </a>
</div>
                        </div>

                        <form
                            id="mylist-form-{{ $movie->id }}"
                            method="POST"
                            action="{{ route('mylist.toggle', $myListKey) }}"
                            style="display:none;"
                        >
                            @csrf
                        </form>
                    </article>
                @endforeach
            </div>

            <div class="pagination-wrap">
                {{ $movies->links() }}
            </div>
        @else
            <div class="empty-state">
                <h3>No titles found</h3>
                <p>
                    No movies matched your current search or filters. Try clearing the filters, choosing another genre, or searching with a different title.
                </p>
                <a href="{{ route('browse') }}" class="btn-main">Reset Browse</a>
            </div>
        @endif
    </section>
</div>
@endsection