@extends('frontend.layout.app')

@section('title', 'UCN News - Video Gallery')

@section('content')
<div class="bg-dark p-4 rounded-3 text-white mb-5">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold border-start border-danger border-5 ps-3">UCN LIVE TV</h2>
            <p class="text-secondary small">Nagpur's Leading News Network - Watch Live 24/7</p>
            <div class="ratio ratio-16x9 shadow-lg rounded overflow-hidden mt-3">
                <iframe src="https://www.youtube.com/embed/S_8Vp40f13w?autoplay=1&mute=1" title="Live Stream" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-4 mt-4 mt-md-0">
            <h5 class="fw-bold mb-3 text-danger">Up Next / Live Feed</h5>
            <div class="overflow-auto" style="max-height: 400px;">
                @for ($i = 1; $i <= 6; $i++)
                <div class="d-flex mb-3 align-items-center border-bottom border-secondary pb-2">
                    <img src="https://via.placeholder.com/120x70/222/fff?text=UCN+Video" class="rounded me-2" style="width: 100px;">
                    <div>
                        <h6 class="small fw-bold mb-0">Exclusive: Interview with Nagpur Mayor...</h6>
                        <small class="text-danger">05:20</small>
                    </div>
                </div>
                @endfor
            </div>
        </div>
    </div>
</div>

<h4 class="section-title"><span>More Videos (वीडियो गैलरी)</span></h4>
<div class="row g-4 mt-2">
    @for ($j = 1; $j <= 8; $j++)
    <div class="col-md-3">
        <div class="card bg-transparent border-0 video-card">
            <div class="position-relative">
                <img src="https://via.placeholder.com/400x250/333/eee" class="card-img-top rounded shadow-sm">
                <div class="position-absolute top-50 start-50 translate-middle">
                    <i class="bi bi-play-circle-fill text-white display-4 opacity-75"></i>
                </div>
            </div>
            <div class="card-body px-0">
                <h6 class="fw-bold line-clamp-2">Nagpur Smart City: New projects update from the ground...</h6>
                <small class="text-muted"><i class="bi bi-calendar"></i> 2 days ago</small>
            </div>
        </div>
    </div>
    @endfor
</div>

<style>
    .video-card:hover img { filter: brightness(0.7); transition: 0.3s; }
    .video-card:hover i { opacity: 1 !important; transform: scale(1.1); transition: 0.3s; }
</style>
@endsection