@extends('frontend::layouts.master')

@section('content')
    <style>
        /* Related Articles slider */
        .related-articles-swiper {
            padding: 0 0 0.5rem;
        }
        .related-articles-next,
        .related-articles-prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            color: var(--primary);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: background 0.2s, box-shadow 0.2s;
        }
        .related-articles-next:hover,
        .related-articles-prev:hover {
            background: var(--muted);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
        .related-articles-next::after,
        .related-articles-prev::after {
            font-size: 0.4rem !important;
        }
        .related-articles-next svg,
        .related-articles-prev svg {
            width: 52% !important;
            height: 52% !important;
        }
        @media (min-width: 768px) {
            .related-articles-next::after,
            .related-articles-prev::after {
                font-size: 0.45rem !important;
            }
            .related-articles-next svg,
            .related-articles-prev svg {
                width: 55% !important;
                height: 55% !important;
            }
        }
        .related-articles-next {
            left: auto;
            right: -0.5rem;
        }
        .related-articles-prev {
            right: auto;
            left: -0.5rem;
        }
        .related-articles-pagination {
            display: flex !important;
            justify-content: center;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0.5rem 0.25rem;
            gap: 0.375rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .related-articles-pagination::-webkit-scrollbar {
            display: none;
        }
        .related-articles-pagination .swiper-pagination-bullet {
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            min-width: 8px;
            min-height: 8px;
            margin: 0 !important;
            background: var(--muted-foreground);
            opacity: 0.4;
        }
        .related-articles-pagination .swiper-pagination-bullet-active {
            background: var(--primary);
            opacity: 1;
        }
        @media (min-width: 768px) {
            .related-articles-pagination .swiper-pagination-bullet {
                width: 10px;
                height: 10px;
                min-width: 10px;
                min-height: 10px;
            }
        }
        @media (max-width: 767px) {
            .related-articles-next {
                right: 0.25rem;
            }
            .related-articles-prev {
                left: 0.25rem;
            }
            .related-articles-next,
            .related-articles-prev {
                width: 36px;
                height: 36px;
                margin-top: -18px;
            }
            .related-articles-next::after,
            .related-articles-prev::after {
                font-size: 0.35rem !important;
            }
            .related-articles-next svg,
            .related-articles-prev svg {
                width: 48% !important;
                height: 48% !important;
            }
        }
    </style>
    {{-- Breadcrumb & Back --}}
    <section class="bg-[var(--muted)]/30 py-6 border-b border-[var(--border)]">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="flex items-center gap-4">
                <a href="{{ route('frontend.blog') }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[var(--muted)] transition-colors text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                    Back to Blog
                </a>
                <span class="text-[var(--muted-foreground)]">/</span>
                <span class="text-sm text-[var(--muted-foreground)] line-clamp-1">{{ $post['title'] }}</span>
            </div>
        </div>
    </section>

    <div class="relative overflow-hidden">
        @include('frontend::components.tsic-ellipse-decoration')

        {{-- Article Hero - Gradient: primary/10 → accent/5 → background --}}
        <section class="py-12 lg:py-20 bg-gradient-to-br from-[var(--primary-10)] via-[var(--accent-5)] to-[var(--background)]">
            <div class="container mx-auto px-4 lg:px-8">
                <div class="max-w-3xl mx-auto">
                    @if(!empty($post['category']) || !empty($post['readTime']))
                    <div class="flex items-center gap-3 mb-6 flex-wrap">
                        @if(!empty($post['category']))
                            <span class="px-3 py-1 bg-[var(--primary-10)] text-[var(--primary)] text-xs font-medium rounded-full">
                                {{ $post['category'] }}
                            </span>
                        @endif
                    </div>
                    @endif

                    <h1 class="text-4xl md:text-5xl font-bold mb-6 text-balance">
                        {{ $post['title'] }}
                    </h1>

                    <div class="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <span>{{ \Carbon\Carbon::parse($post['date'])->format('F j, Y') }}</span>
                    </div>
                </div>
            </div>
        </section>

        {{-- Article Image / Featured --}}
        <section class="py-8 bg-[var(--background)]">
            <div class="container mx-auto px-4 lg:px-8">
                <div class="max-w-4xl mx-auto">
                    <div class="aspect-video rounded-[2rem] overflow-hidden bg-[var(--muted)] relative">
                        @if(!empty($post['image']))
                            <img src="{{ asset('modules/frontend/images/blog/' . $post['image']) }}" alt="{{ $post['title'] }}" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');">
                            <div class="hidden absolute inset-0 bg-gradient-to-br from-[var(--primary-20)] to-[var(--accent-20)] flex items-center justify-center">
                                <svg class="w-24 h-24 text-[var(--primary)]/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            </div>
                        @else
                            <div class="absolute inset-0 bg-gradient-to-br from-[var(--primary-20)] to-[var(--accent-20)] flex items-center justify-center">
                                <svg class="w-24 h-24 text-[var(--primary)]/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- Article Content --}}
        <section class="py-12 bg-[var(--background)]">
            <div class="container mx-auto px-4 lg:px-8">
                <div class="max-w-3xl mx-auto prose prose-lg prose-[var(--foreground)]">
                    <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty text-lg">
                        {{ $post['excerpt'] }}
                    </p>
                    <div class="mt-8 text-[var(--foreground)] leading-relaxed text-pretty">
                        <p>{{ $post['body'] }}</p>
                    </div>
                </div>
            </div>
        </section>

    </div>

    {{-- Related Posts --}}
    @if(count($relatedPosts) > 0)
    <section class="relative overflow-hidden py-20 bg-[var(--muted)]/30">
        @include('frontend::components.tsic-ellipse-decoration')
        <div class="container relative z-10 mx-auto px-4 lg:px-8 max-w-5xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Related Articles</h2>
                <p class="text-lg text-[var(--muted-foreground)]">More insights from TSIC</p>
            </div>

            <div class="relative">
                <div class="swiper related-articles-swiper overflow-hidden rounded-[2rem]">
                    <div class="swiper-wrapper">
                        @foreach($relatedPosts as $related)
                        <div class="swiper-slide pb-[1.5rem]">
                            <a href="{{ route('frontend.blog.show', $related['id']) }}" class="group flex w-full h-full">
                                <div class="flex flex-col w-full h-full overflow-hidden rounded-[2rem] cursor-pointer hover:shadow-lg transition-all hover:-translate-y-1 bg-[var(--card)] border border-[var(--border)] shadow-sm">
                                    <div class="aspect-video overflow-hidden bg-[var(--muted)] relative">
                                        @if(!empty($related['image']))
                                            <img src="{{ asset('modules/frontend/images/blog/' . $related['image']) }}" alt="{{ $related['title'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');">
                                            <div class="hidden absolute inset-0 bg-gradient-to-br from-[var(--primary-20)] to-[var(--accent-20)] flex items-center justify-center">
                                                <svg class="w-16 h-16 text-[var(--primary)]/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                            </div>
                                        @else
                                            <div class="absolute inset-0 bg-gradient-to-br from-[var(--primary-20)] to-[var(--accent-20)] flex items-center justify-center">
                                                <svg class="w-16 h-16 text-[var(--primary)]/40 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="p-6 flex-1">
                                        @if(!empty($related['category']))
                                            <span class="inline-block px-2.5 py-0.5 mb-2 text-xs font-medium rounded-full bg-[var(--primary-10)] text-[var(--primary)] w-fit">
                                                {{ $related['category'] }}
                                            </span>
                                        @endif
                                        <h3 class="font-bold text-lg mb-2 line-clamp-2 text-balance group-hover:text-[var(--primary)] transition-colors">{{ $related['title'] }}</h3>
                                        <p class="text-[var(--muted-foreground)] text-sm leading-relaxed line-clamp-2 text-pretty">{{ $related['excerpt'] }}</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="swiper-button-next related-articles-next !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Next"></div>
                <div class="swiper-button-prev related-articles-prev !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Previous"></div>
                <div class="related-articles-pagination mt-6 flex justify-center gap-1"></div>
            </div>
        </div>
    </section>
    @endif

    {{-- CTA Section --}}

    @include('frontend::components.cta-section')

    {{-- CTA Section - gradient: primary → accent (stronger than hero) --}}
    {{--
    <section class="py-20 bg-gradient-to-br from-[var(--primary-10)] via-[var(--accent-5)] to-[var(--background)]">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-balance">
                    Stay Updated
                </h2>
                <p class="text-lg text-[var(--muted-foreground)] mb-8 text-pretty">
                    Subscribe to our newsletter for more industry insights and company news
                </p>
                <a href="{{ route('frontend.blog') }}#newsletter" class="inline-flex items-center justify-center rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] px-8 py-3 font-semibold hover:opacity-90 transition-opacity">
                    Back to Blog
                </a>
            </div>
        </div>
    </section>
    --}}

@push('scripts')
<script>
(function () {
    function initRelatedArticlesSwiper() {
        var el = document.querySelector('.related-articles-swiper');
        if (!el || typeof Swiper === 'undefined') return;

        new Swiper('.related-articles-swiper', {
            slidesPerView: 1,
            spaceBetween: 24,
            loop: true,
            navigation: {
                nextEl: '.related-articles-next',
                prevEl: '.related-articles-prev'
            },
            pagination: {
                el: '.related-articles-pagination',
                clickable: true
            },
            breakpoints: {
                640: { slidesPerView: 2 },
                1024: { slidesPerView: 3 }
            },
            touchRatio: 1,
            touchStartPreventDefault: false
        });
    }

    window.addEventListener('load', initRelatedArticlesSwiper);
})();
</script>
@endpush
@endsection