@php
    /** @var \Illuminate\Support\Collection<int, \App\Models\Showcase> $featuredShowcases */
    $showcaseSlides = $featuredShowcases->values();
    $initialShowcase = $showcaseSlides->first();
@endphp

@once
    @push('styles')
        <style>
            .home-showcase-switcher {
                position: relative;
                padding: clamp(1.5rem, 3vw, 2.35rem);
                border-radius: 40px;
                background:
                    linear-gradient(180deg, rgba(247,250,255,.98), rgba(255,255,255,1)),
                    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px),
                    linear-gradient(180deg, rgba(15,23,42,.03) 1px, transparent 1px);
                background-size: auto, 28px 28px, 28px 28px;
                border: 1px solid rgba(15,23,42,.08);
                box-shadow: 0 34px 90px -58px rgba(15,23,42,.18);
                overflow: hidden;
            }
            .home-showcase-switcher::before {
                content: '';
                position: absolute;
                inset: auto auto -4rem -4rem;
                width: 220px;
                height: 220px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(200,160,90,.16), rgba(200,160,90,0) 72%);
                pointer-events: none;
            }
            .home-showcase-switcher-head,
            .home-showcase-switcher-body {
                position: relative;
                z-index: 1;
            }
            .home-showcase-switcher-head {
                display: flex;
                flex-wrap: wrap;
                align-items: end;
                justify-content: space-between;
                gap: 1rem;
                margin-bottom: 1.4rem;
            }
            .home-showcase-switcher-copy {
                max-width: 720px;
            }
            .home-showcase-switcher-copy h3 {
                margin-bottom: 0;
                color: #0f172a;
                line-height: 1.35;
            }
            .home-showcase-switcher-copy p {
                margin-bottom: 0;
                color: rgba(15,23,42,.7);
                max-width: 62ch;
                line-height: 2;
            }
            .home-showcase-switcher-badge {
                display: grid;
                gap: .25rem;
                min-width: 220px;
                padding: 1rem 1.15rem;
                border-radius: 26px;
                background: #fff;
                border: 1px solid rgba(38,125,255,.1);
                box-shadow: 0 18px 50px -36px rgba(15,23,42,.14);
            }
            .home-showcase-switcher-badge strong {
                color: #0f172a;
                font-size: 1.8rem;
                line-height: 1;
            }
            .home-showcase-switcher-body {
                display: grid;
                grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
                gap: 1.15rem;
                align-items: stretch;
            }
            .home-showcase-switcher-nav {
                display: grid;
                gap: .75rem;
            }
            .home-showcase-switcher-item {
                width: 100%;
                display: grid;
                gap: .7rem;
                text-align: right;
                padding: 1rem 1.05rem;
                border-radius: 26px;
                background: rgba(255,255,255,.82);
                border: 1px solid rgba(15,23,42,.08);
                transition: border-color .24s ease, background-color .24s ease, transform .24s ease, box-shadow .24s ease;
            }
            .home-showcase-switcher-item:hover {
                transform: translateY(-2px);
                border-color: rgba(38,125,255,.18);
                box-shadow: 0 18px 42px -30px rgba(15,23,42,.15);
            }
            .home-showcase-switcher-item.active {
                background: #0f172a;
                border-color: #0f172a;
                box-shadow: 0 24px 50px -34px rgba(15,23,42,.34);
            }
            .home-showcase-switcher-item-head,
            .home-showcase-switcher-item-tags,
            .home-showcase-stage-meta,
            .home-showcase-stage-tags,
            .home-showcase-stage-actions {
                display: flex;
                flex-wrap: wrap;
                gap: .55rem;
                align-items: center;
            }
            .home-showcase-switcher-item-code,
            .home-showcase-switcher-item-category,
            .home-showcase-stage-meta span,
            .home-showcase-stage-tags span {
                display: inline-flex;
                align-items: center;
                width: max-content;
                padding: .42rem .72rem;
                border-radius: 999px;
                font-weight: 700;
                font-size: .82rem;
            }
            .home-showcase-switcher-item-code,
            .home-showcase-stage-meta span {
                background: rgba(15,23,42,.06);
                color: rgba(15,23,42,.68);
            }
            .home-showcase-switcher-item-category,
            .home-showcase-stage-tags span {
                background: rgba(38,125,255,.08);
                color: var(--accent-color-8);
            }
            .home-showcase-switcher-item.active .home-showcase-switcher-item-code,
            .home-showcase-switcher-item.active .home-showcase-switcher-item-category {
                background: rgba(255,255,255,.1);
                color: rgba(255,255,255,.9);
            }
            .home-showcase-switcher-item h5 {
                margin: 0;
                color: #0f172a;
                line-height: 1.55;
            }
            .home-showcase-switcher-item p {
                margin: 0;
                color: rgba(15,23,42,.64);
                line-height: 1.85;
            }
            .home-showcase-switcher-item.active h5,
            .home-showcase-switcher-item.active p,
            .home-showcase-switcher-item.active span {
                color: #fff;
            }
            .home-showcase-stage {
                display: grid;
                gap: 1rem;
                padding: 1rem;
                border-radius: 32px;
                background: rgba(255,255,255,.96);
                border: 1px solid rgba(38,125,255,.1);
                box-shadow: 0 24px 60px -44px rgba(15,23,42,.16);
            }
            .home-showcase-stage-visual {
                position: relative;
                padding: 1rem;
                border-radius: 28px;
                background: linear-gradient(135deg, #f3f7ff, #edf4ff);
                overflow: hidden;
                min-height: 360px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .home-showcase-stage-visual::before {
                content: '';
                position: absolute;
                inset: auto auto -2.5rem -2.5rem;
                width: 170px;
                height: 170px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(200,160,90,.2), rgba(200,160,90,0) 72%);
            }
            .home-showcase-stage-visual::after {
                content: '';
                position: absolute;
                inset: 1rem 1rem auto auto;
                width: 110px;
                height: 110px;
                border-radius: 24px;
                border: 1px dashed rgba(38,125,255,.16);
                transform: rotate(10deg);
            }
            .home-showcase-stage-visual img {
                position: relative;
                z-index: 1;
                width: min(100%, 560px);
                border-radius: 24px;
                box-shadow: 0 24px 60px -38px rgba(15,23,42,.22);
            }
            .home-showcase-stage-content {
                display: grid;
                gap: 1rem;
                padding: .35rem;
            }
            .home-showcase-stage-title {
                margin: 0;
                color: #0f172a;
                font-size: clamp(1.45rem, 2.2vw, 2rem);
                line-height: 1.32;
            }
            .home-showcase-stage-lead {
                margin: 0;
                color: rgba(15,23,42,.72);
                line-height: 2;
            }
            .home-showcase-stage-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: .8rem;
            }
            .home-showcase-stage-stat,
            .home-showcase-stage-fact {
                padding: .95rem 1rem;
                border-radius: 22px;
                border: 1px solid rgba(38,125,255,.08);
            }
            .home-showcase-stage-stat {
                background: linear-gradient(180deg, rgba(15,23,42,.02), rgba(38,125,255,.06));
            }
            .home-showcase-stage-stat strong {
                display: block;
                color: #0f172a;
                font-size: 1.2rem;
                line-height: 1.15;
            }
            .home-showcase-stage-stat span,
            .home-showcase-stage-fact span {
                color: rgba(15,23,42,.62);
                font-size: .86rem;
            }
            .home-showcase-stage-facts {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: .8rem;
            }
            .home-showcase-stage-fact {
                background: rgba(15,23,42,.03);
            }
            .home-showcase-stage-fact strong {
                display: block;
                color: #0f172a;
                font-size: .96rem;
            }
            @media (max-width: 1199px) {
                .home-showcase-switcher-body {
                    grid-template-columns: 1fr;
                }
            }
            @media (max-width: 767px) {
                .home-showcase-stage-grid,
                .home-showcase-stage-facts {
                    grid-template-columns: 1fr;
                }
                .home-showcase-stage-visual {
                    min-height: 280px;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.querySelectorAll('[data-showcase-switcher]').forEach(function (switcher) {
                    const items = Array.from(switcher.querySelectorAll('[data-showcase-item]'));
                    const stage = switcher.querySelector('[data-showcase-stage]');

                    if (!items.length || !stage) {
                        return;
                    }

                    const render = function (payload) {
                        stage.querySelector('[data-showcase-image]').src = payload.hero_image;
                        stage.querySelector('[data-showcase-image]').alt = payload.hero_alt;
                        stage.querySelector('[data-showcase-title]').textContent = payload.title;
                        stage.querySelector('[data-showcase-headline]').textContent = payload.headline;
                        stage.querySelector('[data-showcase-link]').href = payload.link;

                        const meta = stage.querySelector('[data-showcase-meta]');
                        meta.innerHTML = payload.meta.map(function (item) {
                            return '<span>' + item + '</span>';
                        }).join('');

                        const tags = stage.querySelector('[data-showcase-tags]');
                        tags.innerHTML = payload.tags.map(function (item) {
                            return '<span>' + item + '</span>';
                        }).join('');

                        const stats = stage.querySelector('[data-showcase-stats]');
                        stats.innerHTML = payload.metrics.map(function (item) {
                            return '<div class="home-showcase-stage-stat"><strong>' + item.value + '</strong><span>' + item.label + '</span></div>';
                        }).join('');

                        const facts = stage.querySelector('[data-showcase-facts]');
                        facts.innerHTML = payload.facts.map(function (item) {
                            return '<div class="home-showcase-stage-fact"><strong>' + item.value + '</strong><span>' + item.label + '</span></div>';
                        }).join('');
                    };

                    items.forEach(function (item) {
                        item.addEventListener('click', function () {
                            items.forEach(function (entry) {
                                entry.classList.remove('active');
                                entry.setAttribute('aria-pressed', 'false');
                            });

                            item.classList.add('active');
                            item.setAttribute('aria-pressed', 'true');
                            render(JSON.parse(item.dataset.showcasePayload));
                        });
                    });

                    const activeItem = items.find(function (item) {
                        return item.classList.contains('active');
                    }) || items[0];

                    render(JSON.parse(activeItem.dataset.showcasePayload));
                });
            });
        </script>
    @endpush
@endonce


@if ($initialShowcase)
    <section class="section" id="home-showcases">
        <div class="r-container">
            <div class="home-showcase-switcher" data-showcase-switcher>
                <div class="home-showcase-switcher-head">
                    <div class="home-showcase-switcher-copy d-flex flex-column gap-3">
                        <h3>هر پروژه مسیر خود را طی میکند ...
                            <span class="accent-color-5">هر برند یک مسیر تازه ...</span></h3>
                        <p>
                            با گوشه ای از مسیر همراهی ما با مشتریانمان آشنا شوید ...
                        </p>
                    </div>
                </div>

                <div class="home-showcase-switcher-body">
                    <div class="home-showcase-switcher-nav">
                        @foreach ($showcaseSlides as $index => $showcase)
                            @php
                                $payload = [
                                    'title' => $showcase->title,
                                    'headline' => $showcase->headline,
                                    'hero_image' => asset($showcase->hero_image),
                                    'hero_alt' => $showcase->hero_alt,
                                    'link' => route('showcases.show', $showcase),
                                    'meta' => [$showcase->eyebrow, $showcase->category],
                                    'tags' => array_slice($showcase->tags ?? [], 0, 3),
                                    'metrics' => array_slice($showcase->metrics ?? [], 0, 3),
                                    'facts' => [
                                        ['label' => 'کارفرما', 'value' => $showcase->client_name],
                                        ['label' => 'زمان اجرا', 'value' => $showcase->duration_label],
                                        ['label' => 'موقعیت', 'value' => $showcase->location],
                                    ],
                                ];
                            @endphp
                            <button
                                type="button"
                                class="home-showcase-switcher-item {{ $index === 0 ? 'active' : '' }}"
                                data-showcase-item
                                data-showcase-payload='@json($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)'
                                aria-pressed="{{ $index === 0 ? 'true' : 'false' }}"
                            >
                                <h5>{{ $showcase->title }}</h5>
                                <p>{{ $showcase->excerpt }}</p>
                                <div class="home-showcase-switcher-item-tags">
                                    @foreach (array_slice($showcase->tags ?? [], 0, 2) as $tag)
                                        <span>{{ $tag }}</span>
                                    @endforeach
                                </div>
                            </button>
                        @endforeach
                        <a href="{{ route('showcases.index') }}" class="btn btn-accent d-flex flex-row gap-2 justify-content-center mt-2">
                            <span>مشاهده همه پرونده ها</span>
                            <i class="rtmicon rtmicon-arrow-up-right"></i>
                        </a>
                    </div>

                    <div class="home-showcase-stage" data-showcase-stage>
                        <div class="home-showcase-stage-visual">
                            <img src="{{ asset($initialShowcase->hero_image) }}" alt="{{ $initialShowcase->hero_alt }}" data-showcase-image>
                        </div>
                        <div class="home-showcase-stage-content">
                            <div class="home-showcase-stage-meta" data-showcase-meta></div>
                            <h4 class="home-showcase-stage-title" data-showcase-title>{{ $initialShowcase->title }}</h4>
                            <p class="home-showcase-stage-lead" data-showcase-headline>{{ $initialShowcase->headline }}</p>
                            <div class="home-showcase-stage-tags" data-showcase-tags></div>
                            <div class="home-showcase-stage-grid" data-showcase-stats></div>
                            <div class="home-showcase-stage-facts" data-showcase-facts></div>
                            <div class="home-showcase-stage-actions">
                                <a href="{{ route('showcases.show', $initialShowcase) }}" class="btn btn-accent d-flex flex-row gap-2" data-showcase-link>
                                    <span>ورود به پرونده کامل</span>
                                    <i class="rtmicon rtmicon-arrow-up-right"></i>
                                </a>
                                <a href="{{ route('contact') }}#consult-form" class="btn btn-accent line d-flex flex-row gap-2">
                                    <span>درخواست پروژه مشابه</span>
                                    <i class="rtmicon rtmicon-arrow-up-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif