@extends('layouts.app')

@section('title', 'Our Videos')
@section('meta_description', 'Watch Crosby Farm and Investments videos from our dairy, livestock, crop production, and farm investment operations.')

@section('content')
<section class="relative py-20 overflow-hidden">
    <div class="absolute inset-0">
        <img src="{{ asset('images/farm/cattle-barn-herd.jpeg') }}" alt="Crosby Farm video gallery" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-primary-900/94 via-primary-700/88 to-primary-600/82"></div>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-white font-serif mb-4">Our Videos</h1>
        <p class="max-w-2xl mx-auto text-primary-100 leading-7">Watch farm videos uploaded by the Crosby Farm administration team.</p>
    </div>
</section>

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if (count($videos))
            <div class="grid gap-8 lg:grid-cols-2">
                @foreach ($videos as $video)
                    <article class="rounded-lg border border-primary-100 bg-white p-4 shadow-lg shadow-primary-900/10">
                        <div class="overflow-hidden rounded-lg bg-black">
                            <video class="w-full object-contain" style="height: 360px; max-height: 360px;" controls preload="metadata" playsinline>
                                <source src="{{ $video['url'] }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                        <div class="pt-5">
                            <h2 class="text-xl font-extrabold text-primary-700">{{ $video['title'] ?? 'Farm Video' }}</h2>
                            @if (! empty($video['description']))
                                <p class="mt-2 text-sm font-semibold leading-6 text-slate-600">{{ $video['description'] }}</p>
                            @endif
                            <p class="mt-3 text-xs font-bold uppercase text-slate-400">{{ $video['uploaded_at'] ?? 'Published Video' }}</p>
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="rounded-lg border border-primary-100 bg-primary-50 p-8 text-center">
                <h2 class="text-2xl font-extrabold text-primary-700">No videos published yet.</h2>
                <p class="mt-2 text-sm font-semibold text-slate-600">Please check back soon for new farm videos.</p>
            </div>
        @endif
    </div>
</section>
@endsection