@extends('layouts.layout-blog')

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

@push('head')
    <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">
                    <!-- Upcoming Events Section (Static) -->
                    <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-amber-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                            Upcoming Events
                        </h3>
                        <div class="space-y-4">
                            <div class="pb-3 border-b border-gray-200">
                                <p class="text-sm font-semibold text-gray-500">26 June 2025</p>
                                <a href="#" class="font-semibold text-gray-800 hover:text-amber-600">[Almost sold out!] Asia Economic Summit</a>
                            </div>
                            <div class="pb-3 border-b border-gray-200">
                                <p class="text-sm font-semibold text-gray-500">22 October 2025</p>
                                <a href="#" class="font-semibold text-gray-800 hover:text-amber-600">CTO of the Year Awards</a>
                            </div>
                        </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>
                            Top Stories
                        </h3>
                        <div class="space-y-3">
                            <a href="#" class="block font-semibold text-gray-800 hover:text-rose-600 text-sm">VC funds tracker: Quadria, ex-Northstar exec launch new vehicles</a>
                             <a href="#" class="block font-semibold text-gray-800 hover:text-rose-600 text-sm">Weekly funding: SDP Japan raises $31m</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-4 gap-4 md:gap-6">
                <a href="{{ url('blog/category/bisnis') }}" class="group block text-center p-4 rounded-lg bg-teal-50 border border-teal-100 hover:shadow-lg transition-all duration-300">
                    <h3 class="font-bold text-teal-800 text-lg group-hover:text-teal-600">Bisnis</h3>
                </a>
                <a href="{{ url('blog/category/seo') }}" class="group block text-center p-4 rounded-lg bg-indigo-50 border border-indigo-100 hover:shadow-lg transition-all duration-300">
                    <h3 class="font-bold text-indigo-800 text-lg group-hover:text-indigo-600">SEO</h3>
                </a>
                <a href="{{ url('blog/category/digital-marketing') }}" class="group block text-center p-4 rounded-lg bg-rose-50 border border-rose-100 hover:shadow-lg transition-all duration-300">
                    <h3 class="font-bold text-rose-800 text-lg group-hover:text-rose-600">Digital Marketing</h3>
                </a>
                <a href="{{ url('blog/category/media-sosial') }}" class="group block text-center p-4 rounded-lg bg-amber-50 border border-amber-100 hover:shadow-lg transition-all duration-300">
                    <h3 class="font-bold text-amber-800 text-lg group-hover:text-amber-600">Media Sosial</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