@extends('frontend.layouts.app')
@section('title', ($siteSettings['restaurant_name'] ?? 'Restaurant').' — Digital Menu & Offers')
@section('content')

<section class="hero" style="padding:0;">
    <div class="hero-bg" style="background-image:url('{{ (\App\Models\Setting::get('hero_image')) ? asset('storage/'.\App\Models\Setting::get('hero_image')) : 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1600' }}');"></div>
    <div class="hero-overlay"></div>
    <div class="container hero-content">
        <h1>{{ \App\Models\Setting::get('hero_title', 'Fresh Flavors, Made With Care') }}</h1>
        <p>{{ \App\Models\Setting::get('hero_subtitle', 'Discover our seasonal menu crafted daily.') }}</p>
        <a href="{{ \App\Models\Setting::get('hero_button_link', route('menu')) }}" class="btn btn-primary">{{ \App\Models\Setting::get('hero_button_text', 'View Menu') }} <i class="fa-solid fa-arrow-right"></i></a>
    </div>
    <div class="float-badge" style="bottom:60px; right:80px;"><i class="fa-solid fa-star" style="color:#F5B301;"></i> Loved by 2,000+ guests</div>
</section>

@if($banners->count())
<section style="padding:40px 0;">
    <div class="container grid" style="grid-template-columns: 1fr;">
        @foreach($banners as $b)
            <a href="{{ $b->button_link ?? '#' }}" class="card hover-lift" style="overflow:hidden; position:relative;">
                <img src="{{ asset('storage/'.$b->image) }}" style="width:100%; height:260px; object-fit:cover;">
                @if($b->title)
                <div style="position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.55), transparent); display:flex; flex-direction:column; justify-content:center; padding:40px; color:#fff;">
                    <h2>{{ $b->title }}</h2>
                    <p>{{ $b->subtitle }}</p>
                    @if($b->button_text)<span class="btn btn-primary" style="width:fit-content; margin-top:14px;">{{ $b->button_text }}</span>@endif
                </div>
                @endif
            </a>
        @endforeach
    </div>
</section>
@endif

<section>
    <div class="container">
        <div class="section-title"><h2>Browse by <span>Category</span></h2><p>Find exactly what you're craving</p></div>
        <div class="grid grid-4">
            @foreach($categories as $cat)
                <a href="{{ route('menu', ['category' => $cat->slug]) }}" class="card hover-lift" style="text-align:center; padding:30px 16px;">
                    <div style="width:64px; height:64px; margin:0 auto 14px; border-radius:16px; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.6rem;">
                        <i class="fa-solid {{ $cat->icon ?: 'fa-utensils' }}"></i>
                    </div>
                    <h4>{{ $cat->name }}</h4>
                </a>
            @endforeach
        </div>
    </div>
</section>

<section style="background:var(--accent);">
    <div class="container">
        <div class="section-title"><h2>Featured <span>Dishes</span></h2><p>Chef's picks, made fresh daily</p></div>
        <div class="grid grid-4">
            @foreach($featured as $p)
                <a href="{{ route('product.show', $p) }}" class="card product-card hover-lift">
                    @if($p->discountPercent())<span class="badge badge-discount">-{{ $p->discountPercent() }}%</span>@endif
                    <img src="{{ $p->image ? asset('storage/'.$p->image) : 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500' }}">
                    <div style="padding:18px;">
                        <h4>{{ $p->name }}</h4>
                        <p style="opacity:0.6; font-size:0.82rem; margin:6px 0 10px;">{{ Str::limit($p->description, 60) }}</p>
                        <div>
                            @if($p->discount_price)<span class="price-old">{{ $siteSettings['currency'] }}{{ number_format($p->regular_price,2) }}</span>@endif
                            <span class="price-new">{{ $siteSettings['currency'] }}{{ number_format($p->finalPrice(),2) }}</span>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

@if($offers->count())
<section>
    <div class="container">
        <div class="section-title"><h2>Special <span>Offers</span></h2><p>Limited-time deals you won't want to miss</p></div>
        <div class="grid grid-3">
            @foreach($offers as $o)
                <div class="card hover-lift" style="overflow:hidden;">
                    @if($o->banner_image)<img src="{{ asset('storage/'.$o->banner_image) }}" style="height:150px; object-fit:cover;">@endif
                    <div style="padding:20px;">
                        <h4>{{ $o->title }}</h4>
                        <p style="opacity:0.65; font-size:0.85rem; margin:8px 0;">{{ Str::limit($o->description, 80) }}</p>
                        <span class="price-new">{{ $o->discount_percentage ? $o->discount_percentage.'% OFF' : $siteSettings['currency'].$o->fixed_discount.' OFF' }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<section style="background:var(--accent);">
    <div class="container grid grid-2" style="align-items:center;">
        <div>
            <div class="section-title" style="text-align:left;"><h2>About <span>Us</span></h2></div>
            <p style="opacity:0.75; line-height:1.8;">{{ \App\Models\Setting::get('about_text') }}</p>
            <div class="grid grid-3" style="margin-top:30px;">
                <div><h3 style="color:var(--primary);"><i class="fa-solid fa-leaf"></i></h3><p style="font-size:0.85rem; margin-top:6px;">Fresh Ingredients</p></div>
                <div><h3 style="color:var(--primary);"><i class="fa-solid fa-clock"></i></h3><p style="font-size:0.85rem; margin-top:6px;">{{ $siteSettings['opening_hours'] }}</p></div>
                <div><h3 style="color:var(--primary);"><i class="fa-solid fa-star"></i></h3><p style="font-size:0.85rem; margin-top:6px;">5-Star Service</p></div>
            </div>
        </div>
        <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=700" class="card" style="border-radius:24px;">
    </div>
</section>
@endsection