@extends('layouts.app')

@section('title', settings('site_title', 'Ahmad Hasan Dynamics Musings') . ' — ' . settings('site_tagline', ''))

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    {{-- Hero --}}
    @if($featured->isNotEmpty())
    <section class="mb-16">
        <h1 class="font-display text-3xl md:text-4xl font-bold text-stone-900 dark:text-stone-100 mb-8">
            Featured Articles
        </h1>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($featured as $post)
                @include('partials.post-card', ['post' => $post])
            @endforeach
        </div>
    </section>
    @endif

    {{-- Latest Posts --}}
    <section class="mb-16">
        <div class="flex items-center justify-between mb-8">
            <h2 class="font-display text-2xl md:text-3xl font-bold text-stone-900 dark:text-stone-100">
                Latest Posts
            </h2>
            <a href="{{ route('posts.index') }}" class="text-sm font-sans text-amber-700 dark:text-amber-500 hover:underline">
                View all →
            </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            @foreach($posts as $post)
                @include('partials.post-card', ['post' => $post])
            @endforeach
        </div>
    </section>

    {{-- Sidebar --}}
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {{-- Categories --}}
        @if($categories->isNotEmpty())
        <aside class="lg:col-span-1 space-y-8">
            <div class="bg-white dark:bg-stone-900 rounded-lg p-6 border border-stone-200 dark:border-stone-800">
                <h3 class="font-sans text-sm font-semibold uppercase tracking-wide text-stone-900 dark:text-stone-100 mb-4">Categories</h3>
                <ul class="space-y-2 text-sm font-sans">
                    @foreach($categories as $category)
                        <li>
                            <a href="{{ route('categories.show', $category->slug) }}" class="text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 flex justify-between">
                                <span>{{ $category->name }}</span>
                                <span class="text-stone-400">{{ $category->posts_count }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Subscribe --}}
            @if(settings('show_subscribe_sidebar', true))
            <div class="bg-amber-50 dark:bg-amber-950/30 rounded-lg p-6 border border-amber-200 dark:border-amber-900">
                <h3 class="font-display text-lg font-bold text-stone-900 dark:text-stone-100 mb-2">Subscribe</h3>
                <p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Get the latest Dynamics 365 articles delivered to your inbox.</p>
                <form action="{{ route('subscribe.store') }}" method="POST" class="space-y-3">
                    @csrf
                    <input type="email" name="email" placeholder="your@email.com" required class="w-full px-3 py-2 rounded-md border border-stone-300 dark:border-stone-700 bg-white dark:bg-stone-900 text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent">
                    <button type="submit" class="w-full px-4 py-2 bg-amber-600 text-white text-sm font-medium rounded-md hover:bg-amber-700 transition">Subscribe</button>
                </form>
            </div>
            @endif
        </aside>
        @endif
    </div>
</div>
@endsection