@extends('layouts.site')

@section('content')

@php
    $partners = $page->data['partners'] ?? [];
@endphp

<style>
    .partners-section {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
        overflow-x: clip;
    }
   
    .partners-showcase-bg {
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
    }
    .partner-card {
        background: #ffffff;
        border-radius: 0.8rem;
        border: 1px solid #e2e8f0;
        box-shadow: rgba(30, 34, 40, 0.02) 0 2px 1px, rgba(30, 34, 40, 0.02) 0 4px 2px, rgba(30, 34, 40, 0.02) 0 8px 4px;
        height: 100%;
        padding: 1.75rem 1.25rem 1.5rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .partner-card:hover {
        transform: translateY(-6px);
        border-color: #cbd5e1;
        box-shadow: rgba(30, 34, 40, 0.04) 0 8px 16px, rgba(30, 34, 40, 0.06) 0 16px 32px;
    }
    .partner-card__logo-wrap {
        width: 100%;
        max-width: 140px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }
    .partner-card__logo-wrap img {
        max-width: 100%;
        max-height: 72px;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(20%);
        opacity: 0.88;
        transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    }
    .partner-card:hover .partner-card__logo-wrap img {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.04);
    }
    .partner-card__name {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.35;
        margin-bottom: 0;
    }
    .partner-card__link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.65rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--bs-primary);
        text-decoration: none;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .partner-card:hover .partner-card__link {
        opacity: 1;
        transform: translateY(0);
    }
    .partners-empty {
        padding: 3rem 2rem;
        background: #ffffff;
        border-radius: 0.8rem;
        border: 1px dashed #cbd5e1;
        text-align: center;
        max-width: 420px;
        margin: 0 auto;
    }
    .partners-showcase {
        position: relative;
        z-index: 1;
    }
    .partners-showcase__collage {
        position: relative;
        width: 100%;
        max-width: 540px;
        min-height: 300px;
        margin: 0 auto;
    }
    @media (min-width: 992px) {
        .partners-showcase__collage {
            min-height: 340px;
            max-width: none;
            margin: 0;
        }
    }
    .partners-showcase__item {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem;
        text-decoration: none;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    .partners-showcase__item:hover {
        transform: scale(1.08) !important;
        z-index: 2;
    }
    .partners-showcase__item img {
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(12%);
        opacity: 0.92;
        transition: filter 0.25s ease, opacity 0.25s ease;
    }
    .partners-showcase__item:hover img {
        filter: grayscale(0%);
        opacity: 1;
    }
    .partners-showcase__item--0 {
        top: 0;
        left: 0;
        width: 44%;
        transform: rotate(-2deg);
    }
    .partners-showcase__item--0 img { max-height: 76px; }
    .partners-showcase__item--1 {
        top: 4%;
        right: 0;
        width: 46%;
        transform: rotate(3deg);
    }
    .partners-showcase__item--1 img { max-height: 84px; }
    .partners-showcase__item--2 {
        top: 36%;
        left: 18%;
        width: 52%;
        transform: rotate(-1deg);
    }
    .partners-showcase__item--2 img { max-height: 96px; }
    .partners-showcase__item--3 {
        bottom: 2%;
        left: 2%;
        width: 42%;
        transform: rotate(2deg);
    }
    .partners-showcase__item--3 img { max-height: 72px; }
    .partners-showcase__item--4 {
        bottom: 0;
        right: 0;
        width: 40%;
        transform: rotate(-3deg);
    }
    .partners-showcase__item--4 img { max-height: 80px; }
    @media (max-width: 767.98px) {
        .partners-showcase__collage {
            min-height: 260px;
            max-width: 360px;
        }
        .partners-showcase__item--0 img,
        .partners-showcase__item--1 img,
        .partners-showcase__item--2 img,
        .partners-showcase__item--3 img,
        .partners-showcase__item--4 img {
            max-height: 64px;
        }
        .partners-showcase__item--2 img {
            max-height: 72px;
        }
    }
    .partners-stats-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        background: rgba(var(--bs-primary-rgb), 0.08);
        color: var(--bs-primary);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        margin-bottom: 1rem;
    }
</style>

<section class="wrapper partners-section">
    <div class="container pt-14 pb-6 xl:pt-20 xl:pb-8 lg:pt-20 lg:pb-8 md:pt-20 md:pb-8">

        <div class="row text-center mb-10">
            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                <h1 class="display-1 mb-3">{!! $page->title !!}</h1>
                @if($page->excerpt)
                    <p class="lead fs-lg mb-0">{!! $page->excerpt !!}</p>
                @else
                    <p class="lead fs-lg mb-0">{!! t('Güvenilir teknoloji ve iş ortaklarımızla birlikte daha güçlü çözümler sunuyoruz.') !!}</p>
                @endif
            </div>
        </div>

        @if(!empty($partners))
            <div class="flex flex-wrap mx-[-15px] row-cols-2 row-cols-md-4 row-cols-lg-5 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !text-center justify-center pb-12 xl:pb-16 lg:pb-16 md:pb-16">
                @foreach($partners as $partner)
                    @if(!empty($partner['logo']))
                        @php
                            $displayName = $partner['name'] ?? null;
                            if (!$displayName && !empty($partner['url'])) {
                                $host = parse_url($partner['url'], PHP_URL_HOST);
                                $displayName = $host ? preg_replace('/^www\./', '', $host) : null;
                            }
                        @endphp
                        <div class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[30px]">
                            @if(!empty($partner['url']))
                                <a href="{{ $partner['url'] }}" target="_blank" rel="nofollow noopener" class="block h-full no-underline text-inherit">
                            @endif

                            <article class="partner-card">
                                <div class="partner-card__logo-wrap">
                                    <img
                                        src="{{ asset('storage/' . $partner['logo']) }}"
                                        alt="{{ $displayName ?? t('Çözüm Ortağı') }}"
                                        loading="lazy"
                                    >
                                </div>
                                @if($displayName)
                                    <h4 class="partner-card__name">{!! e($displayName) !!}</h4>
                                @endif
                                @if(!empty($partner['url']))
                                    <span class="partner-card__link">
                                        {!! t('Web sitesini ziyaret et') !!}
                                        <i class="uil uil-arrow-up-right before:content-['\e950']"></i>
                                    </span>
                                @endif
                            </article>

                            @if(!empty($partner['url']))
                                </a>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        @else
            <div class="pb-12">
                <div class="partners-empty">
                    <i class="uil uil-users-alt text-6xl text-slate-300 mb-4 d-block"></i>
                    <h3 class="h4 text-slate-500 mb-2">{!! t('Henüz çözüm ortağı eklenmemiş.') !!}</h3>
                    <p class="text-slate-400 mb-0">{!! t('Yönetim panelinden çözüm ortaklarınızı ekleyebilirsiniz.') !!}</p>
                </div>
            </div>
        @endif

        @if($page->content || !empty($partners))
            <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center overflow-x-clip">
                @if(!empty($partners))
                    <div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] min-w-0 xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative overflow-hidden">
                        <div class="absolute partners-showcase-bg">
                            <img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy">
                        </div>
                        <div class="partners-showcase relative z-[1]">
                            <div class="partners-showcase__collage">
                                @foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 5) as $index => $featured)
                                    @php
                                        $featuredName = $featured['name'] ?? null;
                                        if (!$featuredName && !empty($featured['url'])) {
                                            $host = parse_url($featured['url'], PHP_URL_HOST);
                                            $featuredName = $host ? preg_replace('/^www\./', '', $host) : t('Çözüm Ortağı');
                                        }
                                    @endphp
                                    @if(!empty($featured['url']))
                                        <a href="{{ $featured['url'] }}" target="_blank" rel="nofollow noopener" class="partners-showcase__item partners-showcase__item--{{ $index }}" title="{{ $featuredName }}">
                                    @else
                                        <div class="partners-showcase__item partners-showcase__item--{{ $index }}">
                                    @endif
                                        <img
                                            src="{{ asset('storage/' . $featured['logo']) }}"
                                            alt="{{ $featuredName }}"
                                            loading="lazy"
                                        >
                                    @if(!empty($featured['url']))
                                        </a>
                                    @else
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full {{ !empty($partners) ? 'xl:w-5/12 lg:w-5/12 w-full' : 'w-full col-lg-8 mx-auto text-center' }}">
                    @if(!empty($partners))
                        <span class="partners-stats-badge">
                            <i class="uil uil-check-circle"></i>
                            {{ count(array_filter($partners, fn ($p) => !empty($p['logo']))) }}+ {!! t('güvenilir iş ortağı') !!}
                        </span>
                    @endif

                    <h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-4">
                        {!! t('Güçlü ekosistem, güçlü çözümler') !!}
                    </h2>

                    @if($page->content)
                        <div class="lead !text-[1.05rem] !leading-[1.65] !mb-6 prose max-w-none">
                            {!! $page->content !!}
                        </div>
                    @else
                        <p class="lead !text-[1.05rem] !leading-[1.65] !mb-6">
                            {!! t('Sektörün önde gelen markalarıyla stratejik iş birlikleri kurarak müşterilerimize en iyi teknoloji ve hizmet deneyimini sunuyoruz.') !!}
                        </p>
                    @endif

                    <a
                        href="{{ route('page.show', ['slug' => 'iletisim']) }}"
                        class="btn btn-lg btn-primary btn-icon btn-icon-end !rounded-[0.8rem]"
                    >
                        {!! t('İş birliği için iletişime geçin') !!}
                        <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i>
                    </a>
                </div>
            </div>
        @endif

    </div>
</section>

@endsection