@extends('layouts.app')

@section('title', 'Charitable Auction — Capital Forge League')

@section('content')
<div class="min-h-screen bg-navy-950 text-white">
    {{-- Hero --}}
    <section class="relative py-16 px-6 text-center border-b border-green-500/30">
        <h1 class="text-5xl font-bold tracking-tight">
            <span class="text-white">CHARITABLE</span>
            <span class="text-green-400"> AUCTION</span>
        </h1>
        <p class="mt-4 text-xl text-green-300 max-w-3xl mx-auto">
            Proceeds benefit helmet safety research and sports-related internships &amp; entrepreneurship.
        </p>
        <p class="mt-2 text-sm text-gray-400">
            100% of net proceeds support research + CFL programs. Forging futures for veterans &amp; athletes.
        </p>
        <div class="mt-8 flex justify-center gap-4">
            <a href="#lots" class="bg-green-500 hover:bg-green-400 text-black font-semibold px-8 py-3 rounded-lg">
                Browse Lots
            </a>
            <a href="{{ route('progress') }}" class="border border-green-500 text-green-400 px-8 py-3 rounded-lg">
                View Impact
            </a>
        </div>
    </section>

    {{-- Featured Lots --}}
    <section id="lots" class="py-12 px-6 max-w-7xl mx-auto">
        <h2 class="text-2xl font-bold mb-6 text-green-400">Featured Lots</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($featured as $lot)
                <div class="bg-navy-900 rounded-xl border border-gray-800 overflow-hidden hover:border-green-500/50 transition">
                    @if($lot->getFirstMediaUrl('primary'))
                        <img src="{{ $lot->getFirstMediaUrl('primary') }}" alt="{{ $lot->title }}" class="w-full h-48 object-cover">
                    @endif
                    <div class="p-4">
                        <span class="text-xs text-green-400 uppercase tracking-wide">Charitable Lot</span>
                        <h3 class="font-semibold mt-1 line-clamp-2">{{ $lot->title }}</h3>
                        <div class="mt-3 flex justify-between items-end">
                            <div>
                                <p class="text-xs text-gray-400">Current Bid</p>
                                <p class="text-xl font-bold text-green-400">${{ number_format($lot->current_bid, 0) }}</p>
                            </div>
                            <a href="{{ route('lots.show', $lot) }}" class="bg-green-500 text-black text-sm font-medium px-4 py-2 rounded">
                                Place Bid
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <footer class="py-8 text-center text-sm text-gray-500 border-t border-gray-800">
        Capital Forge League, Inc. • 100% of net proceeds support helmet safety research + internships & entrepreneurship.
    </footer>
</div>
@endsection
