@extends('layouts.site', [
    'header' => 'partials.header-demo31',
    'footer' => 'partials.footer',
])

@section('content')
    @php
        $historyItems = \App\Models\CompanyHistoryItem::active()->ordered()->get();
        $pageTitle = $page ? ($page->translate('title') ?: $page->title) : __('company_history.timeline_section_title');
        $pageExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : null;
    @endphp

    <section class="wrapper !bg-[#ffffff]">
        <div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-10 xl:pb-14 lg:pb-14 md:pb-14 !text-center">
            <div class="flex flex-wrap mx-[-15px]">
                <div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                    <h1 class="xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] font-bold !leading-[1.15] !tracking-[-0.03em] !mb-4 md:!px-8 lg:!px-0">
                        {{ $pageTitle }}
                    </h1>
                    @if($pageExcerpt)
                    <p class="lead !text-[1.2rem] !leading-[1.5] !mb-0 !text-[#60697b]">
                        {{ $pageExcerpt }}
                    </p>
                    @endif
                </div>
            </div>

            @if($page && ($page->translate('content') ?: $page->content))
            <div class="flex flex-wrap mx-[-15px] !mt-10">
                <div class="lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                    <div class="prose max-w-none !text-[#60697b] !text-center">
                        {!! $page->translate('content') ?: $page->content !!}
                    </div>
                </div>
            </div>
            @endif
        </div>
    </section>

    <x-company-history.timeline :items="$historyItems" />
@endsection