@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 mapping for elegant signature styles
    $colors = [
        'hackathon' => '#e31e24',
        'export' => '#2980b9',
        'innovation' => '#27ae60',
        'design' => '#8e44ad',
        'general' => '#f5a623'
    ];
    
    $rgbColors = [
        'hackathon' => '227, 30, 36',
        'export' => '41, 128, 185',
        'innovation' => '39, 174, 96',
        'design' => '142, 68, 173',
        'general' => '245, 166, 35'
    ];

    $heroTitleBefore = t('Başarılarımızı ve ') ?? 'Başarılarımızı ve ';
    $heroHighlight = t('Ödüllerimizi ') ?? 'Ödüllerimizi ';
    $heroTitleAfter = t('Taçlandırıyoruz') ?? 'Taçlandırıyoruz';
    $heroCtaLabel = t('Ödülleri Keşfet') ?? 'Ödülleri Keşfet';
@endphp

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

<div class="grow shrink-0 bg-[#f8fafc]">
    
    <!-- Hero Section -->
    <section class="company-history-fonts company-history-hero wrapper bg-gradient-yellow relative overflow-hidden pb-12 pt-6">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(254,243,199,0.4),transparent_50%)]"></div>
        <div class="container pt-10 xl:pt-[5rem] lg:pt-[5rem] md:pt-[5rem] pb-10 xl:pb-14 lg:pb-14 md:pb-14 relative z-10">
            <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
                <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
                    <figure class="m-0 p-0">
                        <picture>
                            <img
                                class="w-auto max-w-full h-auto"
                                src="{{ asset('assets/img/illustrations/truncgil-odullerimiz.webp') }}"
                                alt="{{ t('Ödüllerimiz') }}"
                                style="max-height: 420px; object-fit: contain; width: 100%;"
                                loading="eager"
                                fetchpriority="high"
                                decoding="async"
                            >
                        </picture>
                    </figure>
                </div>

                <div class="md:w-10/12 lg:w-5/12 xl:w-5/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:!text-left xl:!text-left">
                   
                    <h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0 !leading-[1.2]">
                        {{ $heroTitleBefore }}<span class="company-history-hero__highlight text-[#e31e24]">{{ $heroHighlight }}</span>{{ $heroTitleAfter }}
                    </h1>
                    <p class="lead !text-[1.05rem] !leading-[1.7] text-gray-600 mb-8 max-w-xl mx-auto lg:mx-0">{{ $heroExcerpt }}</p>
                    <div class="flex flex-wrap justify-center lg:justify-start gap-4">
                        <a
                            href="#awards-timeline-section"
                            class="company-history-hero__cta btn btn-red !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#c8191f] hover:!border-[#c8191f] !rounded-[50rem] px-8 py-3.5 text-sm font-bold shadow-lg shadow-red-500/20 hover:shadow-red-500/30 hover:translate-y-[-0.15rem] transition-all duration-300"
                        >
                            {{ $heroCtaLabel }} <i class="uil uil-arrow-down ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content wrapper with Timeline -->
    <section id="awards-timeline-section" class="wrapper !bg-[#f8fafc] py-16 relative">
        <div class="container">
            
            <!-- Elegant Interactive Filter Tabs -->
            @if(count($categories) > 0)
            <div id="awards-filter-tabs" class="flex justify-center mb-16 relative z-10">
                <div class="inline-flex flex-wrap justify-center gap-2 p-1.5 bg-white/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-slate-100" style="border-radius: 999px !important;">
                    <button class="filter-btn px-5 py-2.5 text-xs font-extrabold uppercase tracking-wider transition-all duration-300 active" data-filter="all" style="border-radius: 999px !important;">
                        <i class="uil uil-apps mr-1 text-sm align-middle"></i> {{ t('Tümü') }}
                    </button>
                    @foreach($categories as $cat)
                        @php
                            $labelKey = 'awards.category_' . $cat;
                            $label = Lang::has($labelKey) ? __($labelKey) : ucfirst($cat);
                            $icon = 'uil-award';
                            if($cat === 'hackathon') $icon = 'uil-trophy';
                            elseif($cat === 'export') $icon = 'uil-globe';
                            elseif($cat === 'innovation') $icon = 'uil-lightbulb';
                            elseif($cat === 'design') $icon = 'uil-palette';
                        @endphp
                        <button class="filter-btn px-5 py-2.5 text-xs font-extrabold uppercase tracking-wider transition-all duration-300 text-gray-500 hover:text-gray-900 hover:bg-slate-50" data-filter="{{ $cat }}" style="border-radius: 999px !important;">
                            <i class="uil {{ $icon }} mr-1 text-sm align-middle"></i> {{ $label }}
                        </button>
                    @endforeach
                </div>
            </div>
            @endif

            <div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto relative z-10">
                
                <!-- 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
                                $catType = $award->category ?: 'general';
                                $color = $colors[$catType] ?? '#f5a623';
                                $rgb = $rgbColors[$catType] ?? '245, 166, 35';
                                $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 }}; --item-color-rgb: {{ $rgb }};" 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-2xl border border-slate-100/80 transition-all duration-300 flex flex-col overflow-hidden group">
                                        
                                        <!-- Ceremony Photo Banner -->
                                        <div class="award-photo-wrapper relative overflow-hidden bg-slate-100" style="width: 100%; height: 260px;">
                                            <img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);" class="award-photo-img group-hover:scale-105" />
                                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80"></div>
                                            
                                            <!-- Badge on Image -->
                                            <div class="absolute top-4 left-4 flex flex-wrap gap-2">
                                                <span class="badge backdrop-blur-md bg-white/90 text-slate-800 text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
                                                    {{ $award->category === 'hackathon' ? t('Yarışma') : ($award->category === 'export' ? t('İhracat') : t('Başarı')) }}
                                                </span>
                                                @if($award->is_featured)
                                                    <span class="badge backdrop-blur-md bg-[#f5a623] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
                                                        <i class="uil uil-star"></i> {{ t('Öne Çıkan') }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Card Content -->
                                        <div class="p-6 md:p-8 flex flex-col gap-4 text-start relative">
                                            <div class="flex items-center gap-1.5 text-[0.72rem] text-slate-400 font-bold">
                                                <i class="uil uil-calendar-alt text-[#e31e24]"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
                                            </div>

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

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

                                            <!-- Footer elements -->
                                            <div class="flex items-center justify-between pt-4 border-t border-slate-100 mt-2">
                                                <span class="text-[0.72rem] font-black text-slate-700 flex items-center gap-1.5">
                                                    <span class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-[#e31e24]">
                                                        <i class="uil uil-award text-[0.85rem]"></i>
                                                    </span>
                                                    {{ $award->translate('issuer') }}
                                                </span>
                                                @if($award->external_link)
                                                    <a href="{{ $award->external_link }}" target="_blank" class="verify-link text-[0.72rem] font-extrabold text-[#e31e24] flex items-center gap-1">
                                                        {{ t('Doğrula') }} <i class="uil uil-external-link-alt transform group-hover:translate-x-0.5 group-hover:translate-y-[-0.5px] transition-transform duration-300"></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>

                <!-- Employer Branding Closing CTA -->
                <div class="my-20 rounded-3xl p-8 md:p-14 text-center shadow-xl relative overflow-hidden group" style="background: linear-gradient(135deg, #e31e24 0%, #ea3c41 50%, #f43f5e 100%) !important; color: #ffffff !important;">
                    <div class="absolute -right-12 -top-12 w-64 h-64 rounded-full bg-white/10 opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
                    <div class="absolute -left-12 -bottom-12 w-64 h-64 rounded-full bg-white/10 opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
                    
                    <div class="relative z-10 max-w-2xl mx-auto flex flex-col items-center">
                        <img src="assets/img/truncgil-yatay-dark.svg" width="256" alt="">
                        <h3 class="text-2xl md:text-3xl font-black mb-4 tracking-tight leading-tight" style="color: #ffffff !important;">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
                        <p class="text-sm md:text-base leading-relaxed mb-8 font-medium max-w-xl" style="color: rgba(255, 255, 255, 0.95) !important;">{{ 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="inline-flex items-center gap-2 px-8 py-3.5 rounded-full text-xs font-black uppercase tracking-wider hover:translate-y-[-0.2rem] hover:shadow-2xl transition-all duration-350 border-0 group/btn" style="background-color: #ffffff !important; color: #e31e24 !important; text-decoration: none;">
                            {{ t('Aramıza Katıl') }} 
                            <i class="uil uil-arrow-right text-base transform group-hover/btn:translate-x-1 transition-transform"></i>
                        </a>
                    </div>
                </div>

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

@push('styles')
<style>
    /* Premium Interactive Filter styling */
    .filter-btn {
        background: transparent;
        border: 0;
        color: #64748b;
        border-radius: 999px !important;
    }
    .filter-btn.active {
        background-color: #e31e24 !important;
        border-color: #e31e24 !important;
        color: #ffffff !important;
        box-shadow: 0 10px 20px -5px rgba(227, 30, 36, 0.35);
    }
    
    /* 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.55rem 1.6rem;
        border: 2px solid #e2e8f0;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.2em;
        color: #475569;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .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(180deg, #e31e24, #f5a623, #27ae60, #2980b9, #8e44ad);
        border-radius: 4px;
        z-index: 0;
    }

    .awards-timeline__item {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 40px 1fr;
        align-items: center;
        gap: 0 2.5rem;
        margin-bottom: 3.5rem;
        z-index: 1;
        transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .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: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--item-color);
        border: 4px solid #fff;
        box-shadow: 0 0 0 2px var(--item-color);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }
    
    .awards-timeline__item:hover .awards-timeline__dot {
        transform: scale(1.3);
        box-shadow: 0 0 0 6px rgba(var(--item-color-rgb), 0.25), 0 0 0 2px var(--item-color);
    }

    /* 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;
    }

    /* Custom premium card shadow on hover */
    .awards-timeline__content {
        box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02), 0 2px 6px -1px rgba(0, 0, 0, 0.01);
        border-radius: 20px !important;
        overflow: hidden !important;
    }
    
    .awards-timeline__item:hover .awards-timeline__content {
        transform: translateY(-6px);
        border-color: rgba(var(--item-color-rgb), 0.2);
        box-shadow: 0 20px 35px -10px rgba(var(--item-color-rgb), 0.12), 0 10px 15px -5px rgba(0,0,0,0.02);
    }
    
    .verify-link:hover {
        text-decoration: none;
        opacity: 0.85;
    }

    /* Animations reveal */
    .awards-timeline__reveal {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
        transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 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;
            margin-bottom: 2.5rem;
        }

        .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() {
        // Reveal animation on scroll
        const revealElements = document.querySelectorAll('.awards-timeline__reveal');
        
        const revealObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, {
            root: null,
            rootMargin: '0px 0px -8% 0px',
            threshold: 0.05,
        });

        revealElements.forEach(function (element) {
            revealObserver.observe(element);
        });

        // Filter Logic
        const filterButtons = document.querySelectorAll('.filter-btn');
        const timelineItems = document.querySelectorAll('.awards-timeline__item');

        filterButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const filter = this.getAttribute('data-filter');
                
                // Toggle active filter classes
                filterButtons.forEach(b => {
                    b.classList.remove('active', 'bg-red', 'text-white');
                    b.classList.add('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');
                });
                
                this.classList.add('active');
                this.classList.remove('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');

                let visibleIndex = 0;
                
                timelineItems.forEach(item => {
                    const category = item.getAttribute('data-category');
                    if (filter === 'all' || category === filter) {
                        item.classList.remove('hidden-by-filter');
                        
                        // Re-assign alignment based on visibility index
                        item.classList.remove('awards-timeline__item--left', 'awards-timeline__item--right');
                        if (visibleIndex % 2 === 0) {
                            item.classList.add('awards-timeline__item--right');
                        } else {
                            item.classList.add('awards-timeline__item--left');
                        }
                        visibleIndex++;
                        
                        // Re-observe since they might be newly visible
                        revealObserver.observe(item);
                    } else {
                        item.classList.add('hidden-by-filter');
                        revealObserver.unobserve(item);
                    }
                });

                // Scroll slightly to timeline section if filter is clicked and user is above/below it
                const targetSec = document.getElementById('awards-timeline-section');
                if (window.scrollY > targetSec.offsetTop || window.scrollY + window.innerHeight < targetSec.offsetTop) {
                    targetSec.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    });
</script>
@endpush
@endsection