@extends('layouts.app')

@section('title', 'Blog Croloze')

@push('page-styles')
    <link rel="stylesheet" href="{{ asset('assets/css/blog.css') }}">
@endpush

@section('content')
    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 md:py-12">

        <!-- New Hero Section -->
        <section id="hero-section" class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-12" data-aos="fade-up">
            
            <!-- Left Column: Container for dynamic posts -->
            <div id="hero-left-column" class="lg:col-span-1 space-y-8">
                <!-- Placeholder -->
                <div class="bg-gray-100 rounded-lg p-4 h-28 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg p-4 h-28 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg p-4 h-28 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg p-4 h-28 placeholder-glow"></div>
            </div>

            <!-- Center Column (Featured): Container for dynamic post -->
            <div id="hero-center-column" class="lg:col-span-2">
                 <!-- Placeholder -->
                <div class="bg-gray-100 rounded-lg w-full h-64 md:h-80 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg w-3/4 h-8 mt-4 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg w-full h-6 mt-4 placeholder-glow"></div>
                <div class="bg-gray-100 rounded-lg w-1/2 h-6 mt-2 placeholder-glow"></div>
            </div>

            <!-- Right Column (Sidebar) -->
            <div class="lg:col-span-1">
                <div class="bg-gray-50 rounded-lg p-5 h-full">
                    <!-- About Croloze Section -->
                    <div>
                        <h3 class="font-bold text-gray-800 flex items-center mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zm-8 3a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /></svg>
                            About Croloze
                        </h3>
                        <div class="text-gray-700 text-sm leading-relaxed space-y-2">
                            <p><strong>Croloze</strong> adalah digital marketing agency yang membantu bisnis bertumbuh melalui solusi kreatif, data-driven, dan strategi digital yang efektif.</p>
                            <p>Kami berpengalaman dalam SEO, SEM, social media, web development, dan creative campaign untuk berbagai brand di Indonesia.</p>
                            <a href="https://croloze.com/about/" class="inline-block mt-2 text-teal-600 font-semibold hover:underline">Pelajari lebih lanjut &rarr;</a>
                        </div>
                    </div>
                    <!-- Top Stories Section (Static) -->
                    <div class="mt-8">
                        <h3 class="font-bold text-gray-800 flex items-center mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-rose-500" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
                            Artikel Terpopuler
                        </h3>
                        <div class="space-y-3">
                            <a href="/blog/seo-untuk-ukm" class="block font-semibold text-gray-800 hover:text-rose-600 text-sm">
                                Panduan SEO untuk UKM: Cara Naik di Google
                            </a>
                            <a href="/blog/social-media-strategy-2024" class="block font-semibold text-gray-800 hover:text-rose-600 text-sm">
                                Social Media Strategy 2024: Tips & Tren Terbaru
                            </a>
                            <a href="/blog/case-study-croloze" class="block font-semibold text-gray-800 hover:text-rose-600 text-sm">
                                Case Study: Klien Croloze Naik 300% Traffic
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Categories Section -->
        <section id="categories-section" class="mb-12" data-aos="fade-up">
            <div class="flex justify-between items-center border-b border-gray-200 pb-2 mb-8">
                 <h2 class="text-2xl font-bold text-gray-900">Explore Topics</h2>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6">
                <a href="{{ route('category.detail', ['slug' => 'berita']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-gray-50 border border-gray-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-gray-800 text-lg group-hover:text-gray-600">Berita</h3>
                </a>
                <a href="{{ route('category.detail', ['slug' => 'bisnis']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-teal-50 border border-teal-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-teal-800 text-lg group-hover:text-teal-600">Bisnis</h3>
                </a>
                <a href="{{ route('category.detail', ['slug' => 'performance-ads']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-sky-50 border border-sky-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-sky-800 text-lg group-hover:text-sky-600">Performance Ads</h3>
                </a>
                <a href="{{ route('category.detail', ['slug' => 'seo']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-indigo-50 border border-indigo-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-indigo-800 text-lg group-hover:text-indigo-600">SEO & Search Marketing</h3>
                </a>
                <a href="{{ route('category.detail', ['slug' => 'media-sosial']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-amber-50 border border-amber-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-amber-800 text-lg group-hover:text-amber-600">Social Media Marketing</h3>
                </a>
                <a href="{{ route('category.detail', ['slug' => 'website-development']) }}" class="group flex items-center justify-center text-center p-4 rounded-lg bg-rose-50 border border-rose-100 hover:shadow-lg transition-all duration-300 h-full">
                    <h3 class="font-bold text-rose-800 text-lg group-hover:text-rose-600">Website Development</h3>
                </a>
            </div>
        </section>

        <!-- Section Title -->
        <div class="flex justify-between items-center border-b border-gray-200 pb-2 mb-8">
            <h2 class="text-2xl font-bold text-gray-900">Latest Stories</h2>
        </div>

        <!-- Latest Posts Section: Container for dynamic posts -->
        <section id="latest-posts-section" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Placeholder -->
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
            <div class="bg-gray-100 rounded-lg h-96 placeholder-glow"></div>
        </section>

        <!-- Load More Button -->
        <div id="load-more-container" class="text-center mt-12">
            <button id="load-more-button" class="hidden bg-primary text-on-primary font-semibold px-6 py-3 rounded-lg hover:bg-primary-dark transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed">
                Load More
            </button>
        </div>
        
        <div id="error-message" class="hidden text-center text-red-500 font-semibold my-8"></div>

    </main>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/blog.js') }}" defer></script>
@endpush