@extends('layouts.main')

@section('title', 'Hakkımızda')
@section('meta_description', 'Serap Gerebic - Geleneksel Türk mutfağının eşsiz lezzetlerini modern bir yaklaşımla sunan markamız hakkında bilgi edinin.')
@section('meta_keywords', 'Serap Gerebiç, hakkımızda, hikayemiz, Kilis, geleneksel lezzetler, misyon, vizyon')
@section('og_title', 'Serap Gerebiç Hakkında')
@section('og_description', 'Serap Gerebic - Geleneksel Türk mutfağının eşsiz lezzetlerini modern bir yaklaşımla sunan markamız hakkında bilgi edinin.')
@section('og_type', 'website')

@php
    $aboutBlock = \App\View\Components\Helper::getBlock('ABOUT_BLOCK');
    $aboutBlock2 = \App\View\Components\Helper::getBlock('ABOUT_BLOCK_2');
@endphp

@section('content')
    <!-- Hero Section -->
    <div class="relative h-[400px] overflow-hidden">
        <img src="{{ asset('img/bakery-hero.webp') }}" alt="Serap Gerebic Hero"
             class="w-full h-full object-cover scale-105 animate-slow-zoom brightness-[0.6]">
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/20 to-black/20"></div>
        <div class="absolute inset-0 flex items-center justify-center text-center" style="padding-top: 2rem;">
            <div class="max-w-4xl px-4 transform translate-y-8" data-aos="zoom-in" data-aos-duration="1200">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 [text-shadow:_2px_2px_8px_rgb(0_0_0_/_60%)]">
                    Geleneksel Lezzetler, Modern Sunum
                </h1>
                <p class="text-base md:text-lg text-white [text-shadow:_1px_1px_4px_rgb(0_0_0_/_60%)] max-w-2xl mx-auto">
                    Yılların deneyimi ve ustalığıyla, en kaliteli malzemelerle hazırlanan eşsiz tatlar
                </p>
            </div>
        </div>
    </div>

    <div class="py-16 md:py-24 bg-[#b4bf9f]">
        <div class="container mx-auto px-4">
            @if($aboutBlock)
            <div class="grid md:grid-cols-2 gap-12 items-center mb-3.5">
                <div class="relative overflow-hidden" data-aos="fade-up" data-aos-duration="1000">
                    <div class="absolute inset-0 bg-[#2C5530] transform rotate-3 rounded-2xl transition-transform duration-700 group-hover:rotate-2"></div>
                    @if($aboutBlock->image_path)
                        <img src="{{ asset('storage/'.$aboutBlock->image_path) }}" alt="{{ $aboutBlock->title }}"
                             class="relative rounded-2xl shadow-xl w-full h-[400px] object-cover transition-transform duration-700 hover:scale-105">
                    @endif
                </div>
                <div class="space-y-6" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                    <h2 class="text-3xl md:text-4xl font-bold text-[#2C5530] relative pb-4">
                        {{ $aboutBlock->title }}
                        <span class="absolute bottom-0 left-0 w-20 h-1 bg-[#2C5530] transition-all duration-300 group-hover:w-32"></span>
                    </h2>
                    <p class="text-gray-600 leading-relaxed">
                        {!! $aboutBlock->content !!}
                    </p>
                </div>
            </div>
            @endif

            <!-- Divider -->
            <div class="relative py-10 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>

            @if($aboutBlock2)
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="space-y-6 order-2 md:order-1" data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="text-3xl md:text-4xl font-bold text-[#2C5530] relative pb-4">
                        {{ $aboutBlock2->title }}
                        <span class="absolute bottom-0 left-0 w-20 h-1 bg-[#2C5530] transition-all duration-300 group-hover:w-32"></span>
                    </h2>
                    <p class="text-gray-600 leading-relaxed">
                        {!! $aboutBlock2->content !!}
                    </p>
                </div>
                <div class="relative overflow-hidden order-1 md:order-2" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
                    <div class="absolute inset-0 bg-[#2C5530] transform -rotate-3 rounded-2xl transition-transform duration-700 group-hover:-rotate-2"></div>
                    @if($aboutBlock2->image_path)
                        <img src="{{ asset('storage/'.$aboutBlock2->image_path) }}" alt="{{ $aboutBlock2->title }}"
                             class="relative rounded-2xl shadow-xl w-full h-[400px] object-cover transition-transform duration-700 hover:scale-105">
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>

@endsection

@section('scripts')
@endsection