@extends('layouts.site')

@section('title', t('Kitaplarımız'))

@push('styles')
    @include('templates.books.css.main')
@endpush

@section('content')
<div class="grow shrink-0">
    
    {{-- Hero Section --}}
    @include('templates.books.sections.hero')

    {{-- Content Section --}}
    <section class="wrapper !bg-[#ffffff] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
      <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
        
        {{-- Section Title --}}
        <div class="flex flex-wrap mx-[-15px] !mb-12">
          <div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
            <h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">{{ t('Yayınlarımız') }}</h2>
            <p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-0">{{ t('Eğitim ve bilim alanında hazırladığımız kitaplarımızı keşfedin.') }}</p>
          </div>
        </div>

        {{-- Categories Removed --}}

        {{-- Book List --}}
        @include('templates.books.sections.book-list')

      </div>
    </section>

    {{-- CTA Footer --}}
    @include('templates.books.sections.footer')

</div>
@endsection

@push('scripts')
    @include('templates.books.js.global')
    @include('templates.books.js.slider')
@endpush