@php
    $seo = [
        'title'       => 'Blog · GE-AS',
        'description' => 'Insights, tactics, and hard numbers on e-commerce arbitrage from the GE-AS team. AI trading, pilot mode, marketplace mechanics.',
        'robots'      => 'index, follow',
        'og_type'     => 'website',
        'json_ld'     => [
            '@context'    => 'https://schema.org',
            '@type'       => 'Blog',
            'name'        => 'GE-AS Blog',
            'description' => 'Insights, tactics, and hard numbers on e-commerce arbitrage.',
            'url'         => url('/blog'),
            'publisher'   => [
                '@type' => 'Organization',
                'name'  => 'GE-AS',
                'url'   => url('/'),
            ],
        ],
    ];
@endphp

@extends('layouts.user')

@section('content')

{{-- ============================================================
     HERO BAND
     ============================================================ --}}
<section style="position: relative; padding: 5rem 1.5rem 3.5rem; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%); border-bottom: 1px solid #fed7aa;">
    <div aria-hidden="true" style="position: absolute; top: -20%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 60%); pointer-events: none;"></div>
    <div aria-hidden="true" style="position: absolute; bottom: -30%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(254, 215, 170, 0.35) 0%, transparent 65%); pointer-events: none;"></div>

    <div style="position: relative; max-width: 900px; margin: 0 auto; text-align: center;">
        <div style="display: inline-block; padding: 0.375rem 0.875rem; margin-bottom: 1.25rem; background: #ffffff; color: #f97316; font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #fed7aa; border-radius: 999px;">
            The GE-AS Blog
        </div>
        <h1 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 1rem;">
            Insights, tactics, and hard numbers
        </h1>
        <p style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: #475569; margin: 0 auto; max-width: 600px;">
            How e-commerce arbitrage actually works, straight from the team building it.
        </p>
    </div>
</section>

{{-- ============================================================
     POSTS GRID
     ============================================================ --}}
<section style="padding: 3.5rem 1.5rem 5rem; background: #ffffff;">
    <div style="max-width: 1200px; margin: 0 auto;">

    @if($posts->count() === 0)
        {{-- Empty state --}}
        <div style="text-align: center; padding: 4rem 2rem; background: #fafbfc; border: 1px dashed #e2e8f0; border-radius: 12px;">
            <div style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1.375rem; color: #0f172a; margin-bottom: 0.75rem;">First posts coming soon.</div>
            <p style="font-family: 'DM Sans', sans-serif; color: #64748b; margin: 0;">
                The team is writing. Check back this week.
            </p>
        </div>
    @else
        <div class="geas-blog-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; align-items: start;">
            @foreach($posts as $i => $p)
                @php
                    $isFeatured = $i === 0 && $posts->currentPage() === 1;
                    $slug = $p['slug'] ?? '#';
                    $title = $p['title'] ?? 'Untitled';
                    $excerpt = $p['excerpt'] ?? '';
                    $category = $p['category'] ?? null;
                    $featuredImage = $p['featured_image'] ?? null;
                    $author = $p['_author'] ?? null;
                    $publishedAt = !empty($p['published_at']) ? \Carbon\Carbon::parse($p['published_at']) : null;
                    $readingTime = $p['reading_time'] ?? 5;
                @endphp

                <article class="geas-blog-card {{ $isFeatured ? 'is-featured' : '' }}" style="{{ $isFeatured ? 'grid-column: 1 / -1;' : '' }} background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;">
                    <a href="{{ url('/blog/' . $slug) }}" style="display: {{ $isFeatured ? 'grid' : 'block' }}; {{ $isFeatured ? 'grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0;' : '' }} text-decoration: none; color: inherit;">
                        {{-- Image --}}
                        <div style="position: relative; aspect-ratio: {{ $isFeatured ? '16/10' : '16/10' }}; overflow: hidden; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);">
                            @if($featuredImage)
                                <img src="{{ Str::startsWith($featuredImage, ['http', '/']) ? $featuredImage : asset($featuredImage) }}" alt="{{ $title }}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover; display: block;">
                            @else
                                {{-- Category blueprint fallback (auto-generated SVG by category) --}}
                                <div aria-hidden="true" style="position: absolute; inset: 0;">
                                    @include('blog.partials.blueprint', ['category' => $category])
                                </div>
                            @endif
                            @if($category)
                                <div style="position: absolute; top: 0.875rem; left: 0.875rem; padding: 0.25rem 0.625rem; background: rgba(255, 255, 255, 0.95); color: #f97316; font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; backdrop-filter: blur(4px);">
                                    {{ str_replace('-', ' ', $category) }}
                                </div>
                            @endif
                        </div>

                        {{-- Text body --}}
                        <div style="padding: {{ $isFeatured ? '2rem' : '1.5rem' }}; display: flex; flex-direction: column; gap: 0.75rem;">
                            <h2 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: {{ $isFeatured ? 'clamp(1.5rem, 2.75vw, 2rem)' : '1.25rem' }}; line-height: 1.25; letter-spacing: -0.015em; color: #0f172a; margin: 0;">
                                {{ $title }}
                            </h2>

                            @if($excerpt)
                                <p style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: {{ $isFeatured ? '1.0625rem' : '0.9375rem' }}; line-height: 1.6; color: #475569; margin: 0;">
                                    {{ Str::limit($excerpt, $isFeatured ? 220 : 140) }}
                                </p>
                            @endif

                            <div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #64748b;">
                                @if($author)
                                    <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
                                        @if(!empty($author['avatar']))
                                            <img src="{{ asset($author['avatar']) }}" alt="{{ $author['display_name'] ?? '' }}" style="width: 22px; height: 22px; border-radius: 50%; object-fit: cover;">
                                        @else
                                            <span style="width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 0.75rem;">
                                                {{ strtoupper(substr($author['display_name'] ?? 'A', 0, 1)) }}
                                            </span>
                                        @endif
                                        <span style="color: #334155; font-weight: 500;">{{ $author['display_name'] ?? '' }}</span>
                                    </div>
                                    <span aria-hidden="true" style="color: #cbd5e1;">·</span>
                                @endif
                                @if($publishedAt)
                                    <span>{{ $publishedAt->format('M j, Y') }}</span>
                                    <span aria-hidden="true" style="color: #cbd5e1;">·</span>
                                @endif
                                <span>{{ $readingTime }} min</span>
                            </div>
                        </div>
                    </a>
                </article>
            @endforeach
        </div>

        {{-- Pagination --}}
        @if($posts->hasPages())
            <nav style="margin-top: 3rem; display: flex; justify-content: center; gap: 0.5rem; font-family: 'DM Sans', sans-serif;">
                @if($posts->onFirstPage())
                    <span style="padding: 0.5rem 0.875rem; color: #cbd5e1; font-size: 0.875rem;">← Previous</span>
                @else
                    <a href="{{ $posts->previousPageUrl() }}" style="padding: 0.5rem 0.875rem; color: #f97316; font-size: 0.875rem; text-decoration: none; border-radius: 6px; transition: background 0.15s;" onmouseover="this.style.background='#fff7ed';" onmouseout="this.style.background='';">← Previous</a>
                @endif

                <span style="padding: 0.5rem 0.875rem; color: #64748b; font-size: 0.875rem;">
                    Page {{ $posts->currentPage() }} of {{ $posts->lastPage() }}
                </span>

                @if($posts->hasMorePages())
                    <a href="{{ $posts->nextPageUrl() }}" style="padding: 0.5rem 0.875rem; color: #f97316; font-size: 0.875rem; text-decoration: none; border-radius: 6px; transition: background 0.15s;" onmouseover="this.style.background='#fff7ed';" onmouseout="this.style.background='';">Next →</a>
                @else
                    <span style="padding: 0.5rem 0.875rem; color: #cbd5e1; font-size: 0.875rem;">Next →</span>
                @endif
            </nav>
        @endif
    @endif

    </div>
</section>

<style>
    .geas-blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        border-color: #fed7aa !important;
    }
    @media (max-width: 720px) {
        .geas-blog-card.is-featured a {
            grid-template-columns: 1fr !important;
        }
    }
</style>

@endsection