@extends('store.themes.modern-coffee-shop.layouts.app')

@section('title', __('Premium Fresh Roasted Coffee'))
@section('meta_description', __('Discover our selection of premium fresh roasted coffee beans from around the world'))

@section('content')
<!-- Hero Section -->
<section class="relative h-[600px] bg-gradient-to-r from-amber-900 to-amber-700">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="relative container mx-auto px-4 h-full flex items-center">
        <div class="text-white max-w-2xl">
            <h1 class="text-5xl md:text-6xl font-bold mb-4">{{ __('Premium Coffee') }}</h1>
            <p class="text-xl mb-8">{{ __('Freshly roasted beans delivered to your door') }}</p>
            <a href="{{ route('store.products') }}" class="bg-white text-amber-900 px-8 py-3 rounded-lg font-semibold hover:bg-amber-50 transition">
                {{ __('Shop Now') }}
            </a>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="py-16">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">{{ __('Featured Products') }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($featuredProducts as $product)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group">
                <div class="relative aspect-square overflow-hidden">
                    <img src="{{ $product->main_image }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-300">
                </div>
                <div class="p-4">
                    <h3 class="font-semibold mb-2">{{ $product->name }}</h3>
                    <div class="flex items-center justify-between">
                        <span class="text-lg font-bold text-amber-700">{{ number_format($product->price, 2) }} {{ __('EGP') }}</span>
                        <button onclick="addToCart({{ $product->id }})" class="bg-amber-700 text-white px-4 py-2 rounded hover:bg-amber-800 transition">
                            {{ __('Add') }}
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Offers Section -->
@if($offers->count() > 0)
<section class="py-16 bg-gray-100 dark:bg-gray-900">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold mb-8 text-center">{{ __('Special Offers') }}</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach($offers as $offer)
            <div class="bg-gradient-to-r from-red-600 to-orange-600 rounded-lg shadow-lg overflow-hidden text-white">
                <div class="p-6">
                    <span class="bg-white text-red-600 px-3 py-1 rounded-full text-sm font-bold">{{ $offer->discount_percentage }}% {{ __('OFF') }}</span>
                    <h3 class="text-2xl font-bold mt-4 mb-2">{{ $offer->title }}</h3>
                    <p class="mb-4">{{ $offer->description }}</p>
                    <a href="{{ route('store.offer-details', $offer->slug) }}" class="inline-block bg-white text-red-600 px-6 py-2 rounded font-semibold hover:bg-gray-100 transition">
                        {{ __('View Offer') }}
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<script>
function addToCart(productId) {
    fetch('/api/store/cart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ product_id: productId, quantity: 1 })
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            Alpine.store('cart').fetch();
            window.showToast('{{ __("Added to cart") }}', 'success');
        }
    });
}
</script>
@endsection