@extends('layouts.main')

@section('title', 'Anasayfa')
@section('meta_description', 'Serap Gerebiç - Kilisin en lezzetli geleneksel tatlıları ve unlu mamülleri')
@section('meta_keywords', 'Serap Gerebiç, Kilis, geleneksel lezzetler, tatlılar, unlu mamüller, yöresel ürünler')
@section('og_title', 'Serap Gerebiç - Kilisin Geleneksel Lezzetleri')
@section('og_description', 'Serap Gerebiç - Kilisin en lezzetli geleneksel tatlıları ve unlu mamülleri')
@section('og_type', 'website')

@php
    $aboutBlock = \App\View\Components\Helper::getBlock('ABOUT_BLOCK_3');
    $categories = \App\Models\Category::active()
        ->onlineMenu()
        ->ordered()
        ->get();
@endphp

@section('content')
    @include('slider')

    <!-- Categories Section (Block3 yerine - /siparis sayfası gibi) -->
    <div class="bg-[#b4bf9f] py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <div class="text-[#105B2E] uppercase tracking-wider text-sm font-medium mb-4">Ürünlerimiz</div>
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">Online Sipariş</h2>
                <p class="text-gray-700 text-lg mt-4">Türkiye'nin her yerine özenle gönderim</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
                @foreach($categories as $key => $category)
                    <a href="{{ route('order.category', $category->slug) }}" class="group relative overflow-hidden rounded-2xl shadow-xl transition-transform duration-300 hover:-translate-y-2">
                        <div class="aspect-[4/3] relative">
                            <img src="{{ $key == 0 ? asset('img/kategori_gerebic.jpeg') : asset('img/kategori_yoresel.jpeg') }}" alt="{{ $category->name }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-b from-black/10 via-black/20 to-black/60"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-8">
                                <h2 class="text-3xl font-bold text-white mb-3 [text-shadow:_2px_2px_4px_rgb(0_0_0_/_60%)]">{{ $category->name }}</h2>
                                @if($category->description)
                                <div class="text-white [text-shadow:_1px_1px_2px_rgb(0_0_0_/_60%)]">{!! $category->description !!}</div>
                                @endif
                                <div class="mt-4 inline-flex items-center text-white font-medium">
                                    <span class="mr-2">Kategoriyi İncele</span>
                                    <svg class="w-5 h-5 transform transition-transform duration-300 group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Divider -->
    <div class="relative py-0 bg-[#b4bf9f]">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-[#105B2E]"></div>
        </div>
        <div class="relative flex justify-center">
            <span class="px-6 bg-[#b4bf9f] text-[#105B2E]">
                <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path fill="none"
                          stroke="currentColor"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="1.5"
                          d="M3.194 14.077c-1.248 1.231-1.35 3.54-1.057 5.674c.265 1.935 2.442 2.848 4.075 1.825c2.987-1.87 6.106-4.334 9.095-7.281c3.07-3.028 4.753-5.334 6.237-7.927c.9-1.573.478-3.67-1.344-4.136c-1.995-.509-4.58-.3-6.862 1.846m-10.144 10c-.834-3.74 2.096-8.146 8.972-4.284m-8.972 4.283c.623.013 2.024.295 3.36 1.248m.292-7.13c.063-1.94 1.977-5.19 6.492-4.117m0 0c.966.23 2.052.657 3.264 1.338"
                          color="currentColor"/>
                </svg>
            </span>
        </div>
    </div>

    @include('featured')

    <section class="bg-white">
        <div class="relative w-full h-[400px] group">
            <img src="{{ asset('img/gerebic2.jpeg') }}" alt="Promotional Banner" class="w-full h-full object-cover object-center">
            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
            <div class="absolute inset-0 flex items-center justify-center px-4">
                <h2 class="text-white text-3xl md:text-4xl lg:text-5xl text-center font-medium max-w-4xl banner-text opacity-0">
                    Kilis'in yöresel lezzetlerini Türkiye'nin 81 iline ulaştırmanın gururunu yaşıyoruz.
                </h2>
            </div>
        </div>
    </section>

    @include('testimonials')
    
    <!-- About Section (Block3 en alta taşındı) -->
    @if($aboutBlock)
    <section class="py-20 bg-[#b4bf9f] relative">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <!-- Left Side - Image -->
                <div class="relative animate-slide-left opacity-0">
                    @if($aboutBlock->image_path)
                        <img src="{{ asset('storage/'.$aboutBlock->image_path) }}" alt="{{ $aboutBlock->title }}" class="w-full h-[500px] object-cover rounded-lg shadow-xl">
                    @endif
                </div>

                <!-- Right Side - Content -->
                <div class="space-y-6 animate-slide-right opacity-0">
                    <div class="text-[#105B2E] uppercase tracking-wider text-sm font-medium">Serap Gerebiç</div>
                    <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">{{ $aboutBlock->title }}</h2>
                    <p class="text-gray-700 text-lg leading-relaxed">
                        {!! $aboutBlock->content !!}
                    </p>
                    <div class="pt-4">
                        <a href="{{ route('about') }}" class="inline-block px-8 py-4 bg-[#105B2E] text-white rounded-lg hover:bg-[#0d4a25] transition-colors duration-300 font-medium">
                            Hakkımızda
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
@endsection

@section('scripts')
@endsection