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

@section('content')
@php
    $awards = \App\Models\Award::active()->ordered()->get();
    
    // Extracted categories from active awards for dynamic filter options
    $categories = $awards->pluck('category')->unique()->toArray();
    
    $heroTitle = $page ? ($page->translate('title') ?: $page->title) : t('Ödüllerimiz ve Başarılarımız');
    $heroExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : t('Yenilikçi teknolojilerimizle sektöre yön veriyor, başarılarımızı küresel ödüllerle taçlandırıyoruz.');

    // Timeline color palette
    $colors = ['#e31e24', '#f5a623', '#27ae60', '#2980b9', '#8e44ad', '#1abc9c'];
@endphp

<div class="grow shrink-0 bg-[#fbfcfd]">
    
    <!-- Hero Section -->
    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.55)]" data-image-src="{{ asset('assets/img/photos/bg4.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg4.webp') }}');">
        <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
            <div class="flex flex-wrap mx-[-15px]">
                <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
                    <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.6rem] !mb-4 !text-white">{{ $heroTitle }}</h1>
                    <p class="lead !text-[1.05rem] !leading-[1.6] !text-white opacity-90 max-w-2xl mx-auto mb-6">{{ $heroExcerpt }}</p>
                    <nav class="inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px] justify-center">
                            <li class="breadcrumb-item flex !text-[#c3c3c3]"><a class="!text-white hover:text-[#e31e24]" href="{{ url('/') }}">{{ t('Anasayfa') }}</a></li>
                            <li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">{{ t('Ödüllerimiz') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content wrapper with Timeline -->
    <section class="wrapper !bg-[#f4f6f8] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#f4f6f8] 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 pb-16">
            <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem] relative z-10">
                
                <!-- Category Filters -->
                <div class="flex flex-wrap justify-center gap-2 mb-14" id="awards-filter-tabs">
                    <button class="filter-btn active px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="all">
                        {{ t('Tüm Ödüller') }}
                    </button>
                    @if(in_array('hackathon', $categories))
                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="hackathon">
                            {{ t('Hackathon / Yarışma') }}
                        </button>
                    @endif
                    @if(in_array('export', $categories))
                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="export">
                            {{ t('İhracat / Başarı') }}
                        </button>
                    @endif
                    @if(in_array('innovation', $categories))
                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="innovation">
                            {{ t('İnovasyon / Ar-Ge') }}
                        </button>
                    @endif
                    @if(in_array('design', $categories))
                        <button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="design">
                            {{ t('Tasarım') }}
                        </button>
                    @endif
                </div>

                <!-- Timeline Container -->
                <div class="awards-timeline" data-timeline-animate>
                    <div class="awards-timeline__start awards-timeline__reveal">
                        <span>{{ t('BAŞLANGIÇ') }}</span>
                    </div>

                    <div class="awards-timeline__track">
                        @foreach($awards as $index => $award)
                            @php
                                $color = $colors[$index % count($colors)];
                                $position = $index % 2 === 0 ? 'right' : 'left';
                                $imgSrc = str_starts_with($award->image, 'assets/') ? asset($award->image) : asset('storage/' . $award->image);
                            @endphp
                            <article class="awards-timeline__item awards-timeline__item--{{ $position }} awards-timeline__reveal" style="--item-color: {{ $color }};" data-category="{{ $award->category }}">
                                
                                <!-- Timeline Axis Dot & Line -->
                                <div class="awards-timeline__axis">
                                    <span class="awards-timeline__dot"></span>
                                </div>

                                <!-- Timeline Card -->
                                <div class="awards-timeline__side awards-timeline__side--inner">
                                    <div class="awards-timeline__content bg-white rounded-[0.8rem] border border-[rgba(30,34,40,0.06)] hover:translate-y-[-0.25rem] transition-all duration-300 hover:shadow-[0_1rem_2.5rem_rgba(30,34,40,0.08)] flex flex-col overflow-hidden group">
                                        
                                        <!-- Ceremony Photo Banner -->
                                        <div class="award-photo-wrapper" style="width: 100%; height: 240px; overflow: hidden; position: relative; background: #eef1f4;">
                                            <img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;" class="award-photo-img group-hover:scale-105" />
                                            <!-- Badge on Image -->
                                            <div style="position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;">
                                                <span class="badge bg-[#1e2229]/80 !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;">
                                                    {{ $award->category === 'hackathon' ? t('Yarışma') : ($award->category === 'export' ? t('İhracat') : t('Başarı')) }}
                                                </span>
                                                @if($award->is_featured)
                                                    <span class="badge bg-[#f5a623] !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;">
                                                        <i class="uil uil-star"></i> {{ t('Öne Çıkan') }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Card Info Padding Content -->
                                        <div class="p-6 md:p-8 flex flex-col gap-3 text-start">
                                            <div style="font-size: 0.72rem; color: #959ca9; font-weight: 600;">
                                                <i class="uil uil-calendar-alt"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
                                            </div>

                                            <h3 class="text-base font-extrabold text-gray-900 mb-1 leading-snug group-hover:text-[#e31e24] transition-colors duration-300">
                                                {{ $award->translate('title') }}
                                            </h3>

                                            <p class="text-xs leading-relaxed text-gray-500 mb-2">
                                                {{ $award->translate('description') }}
                                            </p>

                                            <!-- Footer elements -->
                                            <div class="flex items-center justify-between pt-3 border-t border-gray-100 mt-2">
                                                <span class="text-[0.72rem] font-bold text-gray-600 flex items-center gap-1">
                                                    <i class="uil uil-award text-[#e31e24] text-sm"></i> {{ $award->translate('issuer') }}
                                                </span>
                                                @if($award->external_link)
                                                    <a href="{{ $award->external_link }}" target="_blank" class="text-[0.72rem] font-bold text-[#e31e24] hover:underline flex items-center gap-0.5">
                                                        {{ t('Doğrula') }} <i class="uil uil-external-link-alt"></i>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </article>
                        @endforeach
                    </div>

                    <div class="awards-timeline__finish awards-timeline__reveal">
                        <span>{{ t('BUGÜN') }}</span>
                    </div>
                </div>

                <!-- Standards and Trust elements -->
                <div class="my-16 border-t border-gray-200/60 pt-16">
                    <div class="text-center mb-8">
                        <span class="badge bg-pale-red text-red !rounded-[50rem] uppercase tracking-wider font-semibold text-[0.7rem] px-3 py-1 mb-2 inline-block">{{ t('GÜVEN & STANDARTLAR') }}</span>
                        <h3 class="!text-[calc(1.2rem_+_0.6vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] text-[#1e2229]">{{ t('Standartlarımız ve Sertifikalarımız') }}</h3>
                        <p class="text-xs text-gray-500 leading-relaxed max-w-xl mx-auto mt-2">{{ t('Bir teknoloji şirketi olarak, geliştirdiğimiz tüm sistemlerde ulusal ve uluslararası güvenlik ve kalite standartlarına tam uyum sağlıyoruz.') }}</p>
                    </div>

                    <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12 mt-10">
                        <!-- ISO 27001 -->
                        <div class="flex flex-col items-center max-w-[120px] text-center group">
                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
                                <i class="uil uil-shield-check text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
                            </div>
                            <span class="text-xs font-bold text-gray-700 leading-tight">ISO 27001</span>
                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Bilgi Güvenliği') }}</span>
                        </div>
                        <!-- ISO 9001 -->
                        <div class="flex flex-col items-center max-w-[120px] text-center group">
                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
                                <i class="uil uil-check-square text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
                            </div>
                            <span class="text-xs font-bold text-gray-700 leading-tight">ISO 9001</span>
                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Kalite Yönetimi') }}</span>
                        </div>
                        <!-- KVKK / GDPR -->
                        <div class="flex flex-col items-center max-w-[120px] text-center group">
                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
                                <i class="uil uil-lock text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
                            </div>
                            <span class="text-xs font-bold text-gray-700 leading-tight">KVKK / GDPR</span>
                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Veri Güvenliği') }}</span>
                        </div>
                        <!-- Teknopark -->
                        <div class="flex flex-col items-center max-w-[120px] text-center group">
                            <div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
                                <i class="uil uil-building text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
                            </div>
                            <span class="text-xs font-bold text-gray-700 leading-tight">Teknopark</span>
                            <span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Ar-Ge Liderliği') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Employer Branding Closing CTA -->
                <div class="my-16 bg-gradient-to-r from-red to-rose-600 rounded-[1rem] p-8 md:p-12 !text-white text-center shadow-lg relative overflow-hidden group">
                    <div class="absolute -right-16 -top-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div>
                    <div class="absolute -left-16 -bottom-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div>
                    
                    <h3 class="text-xl md:text-2xl font-bold !text-white mb-3 relative z-10">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
                    <p class="text-sm leading-relaxed max-w-xl mx-auto mb-6 opacity-90 relative z-10">{{ t('Geleceği yenilikçi teknolojilerle şekillendiren bu harika ekibin bir parçası olmak, bizimle yeni ödüllere koşmak ister misin?') }}</p>
                    <a href="{{ url('/kariyer') }}" class="btn btn-white !rounded-[50rem] px-6 py-2.5 text-xs font-bold hover:translate-y-[-0.15rem] hover:shadow-md transition-all relative z-10 !bg-white !text-[#e31e24] hover:!bg-gray-50 border-0">
                        {{ t('Aramıza Katıl') }} <i class="uil uil-arrow-right ml-1"></i>
                    </a>
                </div>

            </div>
        </div>
    </section>
</div>

@push('styles')
<style>
    .filter-btn.active {
        background-color: #e31e24 !important;
        border-color: #e31e24 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2);
    }
    
    /* Timeline Design System drawing inspiration from hakkimizda */
    .awards-timeline {
        max-width: 960px;
        margin: 0 auto;
        position: relative;
    }

    .awards-timeline__start,
    .awards-timeline__finish {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .awards-timeline__finish {
        margin-top: 2rem;
        margin-bottom: 0;
    }

    .awards-timeline__start span,
    .awards-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.16em;
        color: #4a5568;
        background: #fff;
    }

    .awards-timeline__track {
        position: relative;
        padding: 0.5rem 0;
    }

    .awards-timeline__track::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, #e31e24, #f5a623, #27ae60, #2980b9);
        border-radius: 4px;
        z-index: 0;
    }

    .awards-timeline__item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 40px 1fr;
        align-items: center;
        gap: 0 2rem;
        margin-bottom: 2.75rem;
        z-index: 1;
        transition: all 0.45s ease;
    }

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

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

    .awards-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);
        transition: all 0.3s ease;
    }

    .awards-timeline__item:hover .awards-timeline__dot {
        transform: scale(1.3);
    }

    /* Alternating Right side */
    .awards-timeline__item--right .awards-timeline__side--inner {
        grid-column: 3;
        text-align: left;
    }

    /* Alternating Left side */
    .awards-timeline__item--left .awards-timeline__side--inner {
        grid-column: 1;
        text-align: right;
    }

    /* Animations reveal */
    .awards-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);
        will-change: opacity, transform;
    }

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

    /* Dynamic hide class */
    .awards-timeline__item.hidden-by-filter {
        display: none !important;
    }

    @media (max-width: 767px) {
        .awards-timeline__track::before {
            left: 20px;
            transform: none;
        }

        .awards-timeline__item {
            grid-template-columns: 40px 1fr;
            gap: 0 1rem;
        }

        .awards-timeline__axis {
            grid-column: 1;
            align-self: start;
            padding-top: 1.5rem;
        }

        .awards-timeline__item--left .awards-timeline__side--inner,
        .awards-timeline__item--right .awards-timeline__side--inner {
            grid-column: 2;
            text-align: left;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const awardCards = document.querySelectorAll('.awards-timeline__item');

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');

                const filterValue = this.getAttribute('data-filter');

                awardCards.forEach(card => {
                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                        card.classList.remove('hidden-by-filter');
                    } else {
                        card.classList.add('hidden-by-filter');
                    }
                });
            });
        });

        // Reveal animation on scroll drawing inspiration from hakkimizda.blade.php
        const revealElements = document.querySelectorAll('.awards-timeline__reveal');
        
        if (revealElements.length > 0) {
            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                root: null,
                rootMargin: '0px 0px -10% 0px',
                threshold: 0.1,
            });

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