@extends('layouts.app')

@section('title', 'Insights - Texora')
@section('meta_description', 'Texora insights on business registration, tax compliance, NTN, FBR filing, company setup, and international expansion.')

@section('content')
<main class="txp-page" data-txp-page>
    <section class="txp-hero txp-hero--dark" data-txp-hero>
        <div class="txp-shell txp-hero-grid">
            <div>
                <span class="txp-kicker txp-reveal">Texora insights</span>
                <h1 class="txp-title txp-reveal">Useful compliance thinking<span class="txp-dot">.</span></h1>
            </div>
            <p class="txp-lede txp-reveal">Real articles from Texora about registration, tax, compliance, and global business setup, styled to match the new homepage.</p>
        </div>
    </section>

    <section class="txp-section--tight" data-txp-section>
        <div class="txp-shell">
            <div class="flex flex-wrap gap-3">
                <a href="{{ route('blog.index') }}" class="txp-button{{ !request('category') ? '' : '-dark' }}">All Topics</a>
                @foreach($categories as $cat)
                    <a href="{{ route('blog.index', ['category' => $cat->slug]) }}" class="{{ request('category') == $cat->slug ? 'txp-button' : 'txp-button-dark' }}">
                        {{ $cat->name }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <section class="txp-section" data-txp-section>
        <div class="txp-shell">
            <div class="txp-section-head">
                <h2>Latest<span class="txp-dot">.</span></h2>
                <p>Clickable blog cards with categories, dates, excerpts, and optimized lazy-loaded images.</p>
            </div>

            <div class="txp-grid">
                @forelse($posts as $post)
                    <a href="{{ route('blog.show', $post->slug) }}" class="txp-card">
                        <div class="-mx-4 -mt-4 mb-8 aspect-[16/10] overflow-hidden bg-[#262626] md:-mx-8 md:-mt-8">
                            <img
                                src="{{ $post->featured_image ? asset('storage/'.$post->featured_image) : 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1200&auto=format&fit=crop' }}"
                                alt="{{ $post->title }}"
                                loading="lazy"
                                class="txp-image"
                            >
                        </div>
                        <small>{{ $post->category?->name ?? 'Update' }} / {{ $post->published_at?->format('M d, Y') ?? $post->created_at->format('M d, Y') }}</small>
                        <h3>{{ $post->title }}</h3>
                        <p>{{ $post->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($post->content), 130) }}</p>
                        <div class="txp-card-meta">
                            <span>{{ $post->read_time ?? '5' }} min read</span>
                            <span>Read -></span>
                        </div>
                    </a>
                @empty
                    <div class="txp-card">
                        <small>Empty</small>
                        <h3>No posts yet</h3>
                        <p>Texora insights will appear here once published from the admin panel.</p>
                    </div>
                @endforelse
            </div>

            <div class="mt-16">
                {{ $posts->links() }}
            </div>
        </div>
    </section>
</main>
@endsection