citrus/resources/views/components/company-history/timeline.blade.php

@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

@if($historyItems->isNotEmpty())
<section class="company-history-timeline-section wrapper !bg-[#f4f6f8]">
    <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">
            <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                <span class="inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
                    {{ __('company_history.timeline_section_badge') }}
                </span>
                <h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
                    {{ __('company_history.timeline_section_title') }}
                </h2>
                <p class="lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
                    {{ __('company_history.timeline_section_subtitle') }}
                </p>
            </div>
        </div>
        @endif

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

            <div class="company-history-timeline__track" style="--timeline-gradient: linear-gradient(to bottom, {{ $gradientStops }});">
                @foreach($historyItems as $item)
                    @php
                        $color = $item->color ?? '#17a2b8';
                        $position = $item->resolved_position;
                        $title = method_exists($item, 'translate') ? ($item->translate('title') ?: $item->title) : $item->title;
                        $content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
                    @endphp
                    <article
                        class="company-history-timeline__item company-history-timeline__item--{{ $position }}"
                        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">{{ $item->year }}</div>
                                @if($title)
                                <h3 class="company-history-timeline__title">{{ strtoupper($title) }}</h3>
                                @endif
                                @if($content)
                                <p class="company-history-timeline__text">{{ $content }}</p>
                                @endif
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

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

@once
    @push('styles')
    <style>
        .company-history-timeline {
            max-width: 960px;
            margin: 0 auto;
        }

        .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-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            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-size: clamp(2rem, 4vw, 2.85rem);
            font-weight: 800;
            line-height: 1.05;
            color: var(--item-color);
            margin-bottom: 0.2rem;
        }

        .company-history-timeline__title {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: var(--item-color);
            margin: 0 0 0.7rem;
        }

        .company-history-timeline__text {
            font-size: 0.93rem;
            line-height: 1.65;
            color: #718096;
            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;
        }

        @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;
            }
        }
    </style>
    @endpush
@endonce
@endif