@props([
    'items' => collect(),
    'showHeader' => true,
])

@php
    $historyItems = $items instanceof \Illuminate\Support\Collection ? $items : collect($items);
    $gradientStops = $historyItems->values()->map(function ($item, $index) use ($historyItems) {
        $percent = $historyItems->count() > 1
            ? round(($index / ($historyItems->count() - 1)) * 100, 1)
            : 0;
        return ($item->color ?? '#17a2b8') . ' ' . $percent . '%';
    })->implode(', ');
@endphp

@include('components.company-history.fonts')

@if($historyItems->isNotEmpty())
<section class="company-history-timeline-section company-history-fonts wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
    <div class="container py-20 xl:py-28 lg:py-28 md:py-28">
        @if($showHeader)
        <div class="flex flex-wrap mx-[-15px] !mb-14 !text-center company-history-timeline__header">
            <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block !mb-3">
                    {{ __('company_history.timeline_section_badge') }}
                </span>
                <h2 class="company-history-timeline__section-title company-history-timeline__reveal !mb-3">
                    {{ __('company_history.timeline_section_title') }}
                </h2>
                <p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead max-w-[42rem] !mx-auto">
                    {{ __('company_history.timeline_section_subtitle') }}
                </p>
            </div>
        </div>
        @endif

        <div class="company-history-timeline" data-timeline-animate>
            <div class="company-history-timeline__start company-history-timeline__reveal">
                <span>{{ __('company_history.timeline_start') }}</span>
            </div>

            <div class="company-history-timeline__track" style="--timeline-gradient: linear-gradient(to bottom, {{ $gradientStops }});">
                @foreach($historyItems as $index => $item)
                    @php
                        $color = $item->color ?? '#17a2b8';
                        $position = in_array($item->position, ['left', 'right'], true)
                            ? $item->position
                            : ($index % 2 === 0 ? 'right' : 'left');
                        $title = method_exists($item, 'translate') ? ($item->translate('title') ?: $item->title) : $item->title;
                        $titleUpper = $title ? locale_upper($title) : null;
                        $content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
                    @endphp
                    <article
                        class="company-history-timeline__item company-history-timeline__item--{{ $position }} company-history-timeline__reveal"
                        style="--item-color: {{ $color }};"
                    >
                        <div class="company-history-timeline__side company-history-timeline__side--outer">
                            <div class="company-history-timeline__icon-ring">
                                <x-company-history.icon :icon="$item->icon" :color="$color" />
                            </div>
                        </div>

                        <div class="company-history-timeline__axis">
                            <span class="company-history-timeline__dot" aria-hidden="true"></span>
                        </div>

                        <div class="company-history-timeline__side company-history-timeline__side--inner">
                            <div class="company-history-timeline__content">
                                <div class="company-history-timeline__year">
                                    <span class="company-history-timeline__year-value">{{ $item->year }}</span>
                                    @if($item->quarter)
                                    <span class="company-history-timeline__quarter">{{ __('company_history.quarter_label_' . strtolower($item->quarter)) }}</span>
                                    @endif
                                </div>
                                @if($titleUpper)
                                <h3 class="company-history-timeline__title">{{ $titleUpper }}</h3>
                                @endif
                                @if($content)
                                <p class="company-history-timeline__text">{{ $content }}</p>
                                @endif
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="company-history-timeline__finish company-history-timeline__reveal">
                <span>{{ __('company_history.timeline_finish') }}</span>
            </div>
        </div>
    </div>
</section>

@once
    @push('styles')
    <style>
        .company-history-timeline__section-badge {
            font-family: var(--ch-font-label);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #e31e24;
        }

        .company-history-timeline__section-title {
            font-family: var(--ch-font-year);
            font-size: 1.85rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        @media (min-width: 1280px) {
            .company-history-timeline__section-title {
                font-size: 2.2rem;
            }
        }

        .company-history-timeline__section-subtitle {
            font-family: var(--ch-font-body);
            font-size: 1.05rem;
            font-weight: 400;
            line-height: 1.6;
            color: #60697b;
        }

        .company-history-timeline {
            max-width: 960px;
            margin: 0 auto;
            font-family: var(--ch-font-body);
        }

        .company-history-timeline__start,
        .company-history-timeline__finish {
            display: flex;
            justify-content: center;
            margin-bottom: 1.75rem;
        }

        .company-history-timeline__finish {
            margin-top: 1.75rem;
            margin-bottom: 0;
        }

        .company-history-timeline__start span,
        .company-history-timeline__finish span {
            display: inline-block;
            padding: 0.45rem 1.4rem;
            border: 2px solid #cbd5e0;
            border-radius: 999px;
            font-family: var(--ch-font-label);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.16em;
            color: #4a5568;
            background: #fff;
        }

        .company-history-timeline__track {
            position: relative;
            padding: 0.25rem 0;
        }

        .company-history-timeline__track::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            transform: translateX(-50%);
            background: var(--timeline-gradient);
            border-radius: 4px;
            z-index: 0;
        }

        .company-history-timeline__item {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 40px 1fr;
            align-items: center;
            gap: 0 1.5rem;
            min-height: 150px;
            margin-bottom: 2.75rem;
            z-index: 1;
        }

        .company-history-timeline__item:last-child {
            margin-bottom: 0;
        }

        .company-history-timeline__axis {
            grid-column: 2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .company-history-timeline__dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--item-color);
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px var(--item-color);
        }

        .company-history-timeline__icon-ring {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            border: 3px solid var(--item-color);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            position: relative;
        }

        .company-history-timeline__icon-ring::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 48px;
            height: 0;
            border-top: 2px dotted var(--item-color);
            opacity: 0.65;
        }

        .company-history-icon-svg {
            width: 34px;
            height: 34px;
        }

        .company-history-timeline__year {
            font-family: var(--ch-font-year);
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.5rem 0.75rem;
            margin-bottom: 0.35rem;
        }

        .company-history-timeline__year-value {
            font-size: 2.25rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.03em;
            font-variant-numeric: tabular-nums;
            color: var(--item-color);
        }

        @media (min-width: 768px) {
            .company-history-timeline__year-value {
                font-size: 2.65rem;
            }
        }

        @media (min-width: 1280px) {
            .company-history-timeline__year-value {
                font-size: 3rem;
            }
        }

        .company-history-timeline__quarter {
            font-family: var(--ch-font-label);
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--item-color);
            opacity: 0.85;
            padding: 0.15rem 0.55rem;
            border: 2px solid var(--item-color);
            border-radius: 0.35rem;
            line-height: 1.2;
        }

        .company-history-timeline__item--left .company-history-timeline__year {
            justify-content: flex-end;
        }

        .company-history-timeline__title {
            font-family: var(--ch-font-label);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            color: var(--item-color);
            margin: 0 0 0.75rem;
        }

        .company-history-timeline__text {
            font-family: var(--ch-font-body);
            font-size: 0.98rem;
            font-weight: 400;
            line-height: 1.7;
            color: #5c6b7a;
            margin: 0;
            max-width: 340px;
        }

        /* Sağ taraf: içerik sağda, ikon en sağda */
        .company-history-timeline__item--right .company-history-timeline__side--inner {
            grid-column: 3;
            text-align: left;
        }

        .company-history-timeline__item--right .company-history-timeline__side--outer {
            grid-column: 3;
            display: flex;
            justify-content: flex-end;
            margin-top: -5.5rem;
            padding-right: 0;
        }

        .company-history-timeline__item--right .company-history-timeline__icon-ring::before {
            right: 100%;
            margin-right: 4px;
        }

        .company-history-timeline__item--right .company-history-timeline__content {
            padding-right: 5.5rem;
        }

        /* Sol taraf: ikon en solda, içerik solda */
        .company-history-timeline__item--left .company-history-timeline__side--inner {
            grid-column: 1;
            text-align: right;
        }

        .company-history-timeline__item--left .company-history-timeline__side--outer {
            grid-column: 1;
            display: flex;
            justify-content: flex-start;
            margin-top: -5.5rem;
        }

        .company-history-timeline__item--left .company-history-timeline__icon-ring::before {
            left: 100%;
            margin-left: 4px;
        }

        .company-history-timeline__item--left .company-history-timeline__content {
            padding-left: 5.5rem;
        }

        .company-history-timeline__item--left .company-history-timeline__text {
            margin-left: auto;
        }

        .company-history-timeline__reveal {
            opacity: 0;
            transform: translate3d(0, 32px, 0);
            transition:
                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
            transition-delay: var(--reveal-delay, 0s);
            will-change: opacity, transform;
        }

        .company-history-timeline__item--left.company-history-timeline__reveal {
            transform: translate3d(-36px, 28px, 0);
        }

        .company-history-timeline__item--right.company-history-timeline__reveal {
            transform: translate3d(36px, 28px, 0);
        }

        .company-history-timeline__reveal.is-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .company-history-timeline__header .company-history-timeline__section-badge {
            --reveal-delay: 0s;
        }

        .company-history-timeline__header .company-history-timeline__section-title {
            --reveal-delay: 0.08s;
        }

        .company-history-timeline__header .company-history-timeline__section-subtitle {
            --reveal-delay: 0.16s;
        }

        @media (prefers-reduced-motion: reduce) {
            .company-history-timeline__reveal {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }

        @media (max-width: 767px) {
            .company-history-timeline__track::before {
                left: 24px;
                transform: none;
            }

            .company-history-timeline__item {
                grid-template-columns: 48px 1fr;
                gap: 0 1rem;
                min-height: auto;
            }

            .company-history-timeline__axis {
                grid-column: 1;
                grid-row: 1;
                align-self: start;
                padding-top: 1.25rem;
            }

            .company-history-timeline__item--left .company-history-timeline__side--inner,
            .company-history-timeline__item--right .company-history-timeline__side--inner {
                grid-column: 2;
                grid-row: 1;
                text-align: left;
            }

            .company-history-timeline__item--left .company-history-timeline__side--outer,
            .company-history-timeline__item--right .company-history-timeline__side--outer {
                grid-column: 2;
                grid-row: 2;
                margin-top: 0.75rem;
                justify-content: flex-start !important;
            }

            .company-history-timeline__item--left .company-history-timeline__content,
            .company-history-timeline__item--right .company-history-timeline__content {
                padding: 0 !important;
            }

            .company-history-timeline__icon-ring {
                width: 60px;
                height: 60px;
            }

            .company-history-timeline__icon-ring::before {
                display: none;
            }

            .company-history-timeline__item--left .company-history-timeline__text {
                margin-left: 0;
            }

            .company-history-timeline__item--left.company-history-timeline__reveal,
            .company-history-timeline__item--right.company-history-timeline__reveal {
                transform: translate3d(0, 28px, 0);
            }
        }
    </style>
    @endpush

    @push('scripts')
    <script>
        (function () {
            const timeline = document.querySelector('[data-timeline-animate]');
            if (!timeline) {
                return;
            }

            const revealElements = timeline.closest('.company-history-timeline-section')
                ?.querySelectorAll('.company-history-timeline__reveal');

            if (!revealElements || revealElements.length === 0) {
                return;
            }

            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                revealElements.forEach(function (element) {
                    element.classList.add('is-visible');
                });
                return;
            }

            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (!entry.isIntersecting) {
                        return;
                    }

                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                });
            }, {
                root: null,
                rootMargin: '0px 0px -10% 0px',
                threshold: 0.12,
            });

            revealElements.forEach(function (element) {
                observer.observe(element);
            });
        })();
    </script>
    @endpush
@endonce
@endif