@extends('layouts.app')
@section('title', ($website['website_name'] ?? 'Threeways Sports Pub').' | '.($website['tagline'] ?? 'Worth a Shot'))
@section('content')
@php($sectionMap=$sections->keyBy('key'))
@foreach($sections as $section)
    @php($content=$section->content??[])
    @if($section->key==='hero')
        <section class="hero"><div class="mx-auto grid min-h-[520px] max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-[1fr_250px]"><div class="text-white"><p class="display text-sm font-bold text-red-400">WELCOME TO</p><h1 class="display mt-2 text-5xl font-extrabold leading-none sm:text-7xl">{{$content['title']??$website['hero_heading']??'THREEWAYS SPORTS PUB'}}</h1><p class="mt-5 max-w-xl text-lg">{{$content['subtitle']??$website['hero_subtitle']??'Every big game. Premium bottles. Unforgettable nights.'}}</p><div class="mt-7 flex gap-3"><a href="https://wa.me/{{\App\Models\SiteSetting::value('whatsapp_number')}}" class="brand-bg rounded-lg px-5 py-3 text-xs font-bold">ORDER ON WHATSAPP</a><a href="{{route('contact')}}" class="violet-bg rounded-lg px-5 py-3 text-xs font-bold">RESERVE A TABLE</a></div></div><aside class="rounded-2xl bg-white p-4 text-center text-slate-900 shadow-2xl"><p class="rounded-lg brand-bg py-2 text-xs font-bold text-white">LIVE GAME NIGHT</p><p class="mt-5 text-xs font-bold text-violet-700">PREMIER LEAGUE</p><div class="my-4 flex justify-around text-sm font-bold"><span>ARSENAL</span><span>VS</span><span>CHELSEA</span></div><p class="display text-xl">8:30 PM</p><p class="mt-3 rounded bg-violet-100 py-2 text-xs font-bold text-violet-800">BIG SCREEN · SOUND ON</p></aside></div></section>
    @elseif($section->key==='categories')
        <section class="mx-auto max-w-7xl px-5 py-16"><div class="flex justify-between"><h2 class="display text-2xl font-extrabold violet">SHOP BY <span class="brand">DRINK</span></h2><a href="{{route('shop')}}" class="text-xs font-bold violet">VIEW ALL →</a></div><div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">@foreach($categories as $category)<a href="{{route('shop',['category'=>$category->slug])}}" class="group relative h-36 overflow-hidden rounded-xl bg-violet-900 shadow-premium"><img src="{{$category->image}}" alt="{{$category->name}}" class="h-full w-full object-cover opacity-65 transition group-hover:scale-110"><span class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 p-4 text-center text-xs font-bold text-white">{{$category->name}}</span></a>@endforeach</div></section>
    @elseif($section->key==='featured_products')
        <section class="mx-auto max-w-7xl px-5 py-12"><div class="flex justify-between"><h2 class="display text-2xl font-extrabold violet">MATCHDAY <span class="brand">PICKS</span></h2><a href="{{route('shop')}}" class="text-xs font-bold violet">VIEW ALL PRODUCTS →</a></div><div class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">@foreach($featured as $product)<x-product-card :product="$product" />@endforeach</div></section>
    @elseif($section->key==='happy_hour')
        <section class="mx-auto max-w-7xl px-5 py-12"><div class="overflow-hidden rounded-2xl bg-gradient-to-r from-violet-900 to-[#2b0b58] p-8 text-white md:flex md:items-center md:justify-between"><div><p class="text-sm font-bold text-red-300">HAPPY HOUR · EVERY DAY</p><h2 class="display text-3xl font-extrabold text-amber-300">5PM – 7PM</h2><p class="text-sm">Selected cocktails, mixers and premium pours.</p></div><a href="{{route('shop')}}" class="brand-bg mt-4 inline-block rounded-lg px-6 py-3 text-xs font-bold md:mt-0">SHOP THE OFFERS</a></div></section>
    @elseif($section->key==='benefits')
        <section class="mx-auto max-w-7xl px-5 py-16"><h2 class="display text-2xl font-extrabold violet">WHY <span class="brand">THREEWAYS?</span></h2><div class="mt-6 grid gap-4 md:grid-cols-4">@foreach(['Live games'=>'Every major match, giant screens','Premium pours'=>'Whisky, beer, wine & cocktails','Games & music'=>'Pool, darts, DJs and energy','Safe nights'=>'Great service and ample parking'] as $heading=>$text)<div class="rounded-xl bg-white p-5 text-center shadow-premium"><h3 class="text-sm font-bold violet">{{$heading}}</h3><p class="mt-2 text-xs text-slate-500">{{$text}}</p></div>@endforeach</div></section>
    @endif
    @foreach($banners->get('after_'.$section->key,collect()) as $banner)
        <section class="mx-auto max-w-7xl px-5 py-5"><div class="overflow-hidden rounded-2xl bg-violet-950 p-7 text-white md:flex md:items-center md:justify-between" @if($banner->image) style="background:linear-gradient(90deg,rgba(30,5,65,.95),rgba(30,5,65,.48)),url('{{$banner->image}}') center/cover" @endif><div><p class="text-xs font-bold tracking-wider text-red-300">SPECIAL OFFER</p><h2 class="display mt-2 text-2xl font-bold">{{$banner->title}}</h2><p class="mt-1 text-sm text-violet-100">{{$banner->subtitle}}</p></div>@if($banner->button_text)<a href="{{$banner->button_link?:'#'}}" class="brand-bg mt-4 inline-block rounded-lg px-5 py-3 text-xs font-bold md:mt-0">{{$banner->button_text}}</a>@endif</div></section>
    @endforeach
@endforeach
@endsection