@extends('layouts.app')
@section('title', 'Professional Office Cleaning Tips - Blog')
@section('keywords', 'Office cleaning tips, Professional cleaning, Workplace hygiene, Cleaning best practices')
@section('content')
<style>
    .hero-slider {
        position: relative;
    }

    .hero-slider::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }
</style>

<!-- Hero Section with Featured Image -->
<section class="relative min-h-[70vh] overflow-hidden hero-slider">
    <!-- Background Image -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-900/95 via-blue-900/90 to-indigo-900/95"
        style="background-image: url('{{ asset('images/blog-detail-hero.webp') }}'); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/50 to-transparent"></div>
    </div>

    <!-- Animated Particles -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="particle absolute w-2 h-2 bg-white/30 rounded-full animate-float-1" style="top: 20%; left: 10%;"></div>
        <div class="particle absolute w-1 h-1 bg-white/40 rounded-full animate-float-2" style="top: 60%; left: 80%;"></div>
        <div class="particle absolute w-3 h-3 bg-white/20 rounded-full animate-float-3" style="top: 30%; left: 70%;"></div>
    </div>

    <!-- Content -->
    <div class="relative z-20 min-h-[70vh] flex items-center" style="z-Index:999;">
        <div class="container mx-auto px-4 pb-16">
            <div class="max-w-4xl">
                <!-- Breadcrumb -->
                <nav class="mb-8" data-animate="fade-up">
                    <ol class="flex items-center space-x-2 text-white/80">
                        <li><a href="{{ route('home.page') }}" class="hover:text-white transition-colors">Home</a></li>
                        <li><i class="fas fa-chevron-right text-xs"></i></li>
                        <li><a href="{{ route('blog.page') }}" class="hover:text-white transition-colors">Blog</a></li>
                        <li><i class="fas fa-chevron-right text-xs"></i></li>
                    </ol>
                </nav>

                <!-- Category Badge -->
                <div class="mb-6" data-animate="fade-up" data-delay="100">
                    <span class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white text-sm font-semibold rounded-full">
                        <i class="fas fa-tag"></i>
                        Office Care
                    </span>
                </div>

                <!-- Title -->
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-black leading-tight text-white mb-6" data-animate="fade-up" data-delay="200">
                    {{$blog->title}}
                </h1>

                <!-- Meta Information -->
                <div class="flex flex-wrap items-center gap-6 text-white/90" data-animate="fade-up" data-delay="300">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 flex items-center justify-center">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                        <div>
                            <p class="font-semibold">{{$blog->author}}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-calendar text-orange-400"></i>
                        <span>{{$blog->created_at->format('F d, Y')}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="max-w-7xl mx-auto">
            <div class="grid lg:grid-cols-12 gap-12">
                <!-- Main Content -->
                <article class="lg:col-span-8">
                    <!-- Social Share Buttons - Sticky -->

                    <!-- Article Content -->
                    <div class="prose prose-lg max-w-none" data-animate="fade-up">
                        <p class="text-xl text-gray-600 leading-relaxed mb-8 font-medium">
                            {{$blog->content}}
                        </p>
                        <img src="{{ $blog->featured_image ? asset($blog->featured_image) : asset('elementor-placeholder-image.png') }}" alt="{{$blog->title}}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    </div>
                </article>


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

<!-- Related Posts -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-12" data-animate="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Related Articles</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Discover more insights and tips for maintaining a clean and healthy workplace</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($blogs as $blog)
                <!-- Related Post 1 -->
                <a href="{{ route('blog-details.page', $blog->slug) }}" class="block">
                    <article class="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-2" data-animate="fade-up" data-delay="100">
                        <div class="relative h-48 overflow-hidden">
                            <img src="{{ $blog->featured_image ? asset($blog->featured_image) : asset('elementor-placeholder-image.png') }}" alt="{{$blog->title}}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
                                {{$blog->title}}
                            </h3>
                            <p class="text-gray-600 text-sm mb-4 leading-relaxed">
                                {{$blog->excerpt}}
                            </p>
                            <div class="flex items-center justify-between text-sm text-gray-500">
                                <span class="flex items-center gap-1">
                                    <i class="fas fa-calendar"></i>
                                    {{$blog->created_at->format('F d, Y')}}
                                </span>
                            </div>
                            

                        </div>
                    </article>
                </a>
                @endforeach
            </div>

            <div class="text-center mt-12" data-animate="fade-up" data-delay="400">
                <a href="{{ route('blog.page') }}" class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold rounded-lg hover:from-orange-600 hover:to-red-600 transition-all duration-300 shadow-lg hover:shadow-xl">
                    <span>View All Articles</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Comments Section -->


@endsection

@push('styles')
<style>
    /* Particle animations */
    .animate-float-1 {
        animation: float1 6s ease-in-out infinite;
    }

    .animate-float-2 {
        animation: float2 8s ease-in-out infinite;
    }

    .animate-float-3 {
        animation: float3 7s ease-in-out infinite;
    }

    @keyframes float1 {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        33% {
            transform: translate(30px, -30px) rotate(120deg);
        }

        66% {
            transform: translate(-20px, 20px) rotate(240deg);
        }
    }

    @keyframes float2 {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        50% {
            transform: translate(-25px, -35px) rotate(180deg);
        }
    }

    @keyframes float3 {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        25% {
            transform: translate(20px, -20px) rotate(90deg);
        }

        50% {
            transform: translate(-15px, -25px) rotate(180deg);
        }

        75% {
            transform: translate(-25px, 15px) rotate(270deg);
        }
    }

    /* Smooth scrolling for table of contents */
    html {
        scroll-behavior: smooth;
    }

    /* Custom prose styles */
    .prose h2 {
        scroll-margin-top: 100px;
    }

    .prose h3 {
        scroll-margin-top: 100px;
    }
</style>
@endpush

@push('scripts')
<script>
    // Social sharing functions
    function shareOnFacebook() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(document.title);
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
    }

    function shareOnTwitter() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(document.title);
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank', 'width=600,height=400');
    }

    function shareOnLinkedIn() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(document.title);
        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'width=600,height=400');
    }

    function shareOnWhatsApp() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(document.title);
        window.open(`https://wa.me/?text=${title} ${url}`, '_blank');
    }

    function copyLink() {
        navigator.clipboard.writeText(window.location.href).then(function() {
            // Show success message
            const button = event.target.closest('button');
            const originalContent = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check"></i>';
            button.classList.add('bg-green-600', 'hover:bg-green-700');
            button.classList.remove('bg-gray-600', 'hover:bg-gray-700');

            setTimeout(() => {
                button.innerHTML = originalContent;
                button.classList.remove('bg-green-600', 'hover:bg-green-700');
                button.classList.add('bg-gray-600', 'hover:bg-gray-700');
            }, 2000);
        });
    }

    // Smooth scrolling for table of contents
    document.addEventListener('DOMContentLoaded', function() {
        const tocLinks = document.querySelectorAll('nav a[href^="#"]');

        tocLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);

                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Comment like functionality
        const likeButtons = document.querySelectorAll('button[onclick*="like"]');
        likeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const likeCount = this.querySelector('span');
                const currentCount = parseInt(likeCount.textContent.match(/\d+/)[0]);
                likeCount.textContent = `Like (${currentCount + 1})`;
                this.classList.add('text-orange-500');
                this.disabled = true;
            });
        });
    });
</script>
@endpush