@php
    $fm = $post['frontmatter'] ?? [];
    $isLegacy = $legacy ?? false;
    $canonicalUrl = url('/blog/' . ($post['slug'] ?? ''));
    $rawMdUrl = url('/blog/' . ($post['slug'] ?? '') . '.md');

    $ogImage = $fm['og_image'] ?? $fm['featured_image'] ?? null;
    if ($ogImage && !Str::startsWith($ogImage, 'http')) {
        $ogImage = asset(ltrim($ogImage, '/'));
    }

    $seo = [
        'title'       => ($fm['title'] ?? 'Post') . ' · GE-AS Blog',
        'description' => $fm['excerpt'] ?? '',
        'robots'      => ($fm['noindex'] ?? false) ? 'noindex, follow' : 'index, follow',
        'canonical'   => $fm['canonical'] ?? $canonicalUrl,
        'og_type'     => 'article',
        'og_image'    => $ogImage,
        'extra_head'  => '<link rel="alternate" type="text/markdown" href="' . e($rawMdUrl) . '" title="Raw markdown source">',
        'json_ld'     => [
            '@context'         => 'https://schema.org',
            '@type'            => 'BlogPosting',
            'headline'         => $fm['title'] ?? '',
            'description'      => $fm['excerpt'] ?? '',
            'image'            => $ogImage ? [$ogImage] : [],
            'datePublished'    => !empty($fm['published_at']) ? \Carbon\Carbon::parse($fm['published_at'])->toIso8601String() : null,
            'dateModified'     => !empty($fm['updated_at']) ? \Carbon\Carbon::parse($fm['updated_at'])->toIso8601String() : (!empty($fm['published_at']) ? \Carbon\Carbon::parse($fm['published_at'])->toIso8601String() : null),
            'author'           => [
                '@type' => 'Person',
                'name'  => $post['author']['display_name'] ?? 'GE-AS Team',
            ],
            'publisher'        => [
                '@type' => 'Organization',
                'name'  => 'GE-AS',
                'url'   => url('/'),
                'logo'  => [
                    '@type' => 'ImageObject',
                    'url'   => asset('new-assets/logo.svg'),
                ],
            ],
            'mainEntityOfPage' => [
                '@type' => 'WebPage',
                '@id'   => $canonicalUrl,
            ],
            'keywords'         => $fm['keywords'] ?? [],
        ],
    ];
@endphp

@extends('layouts.user')

@section('content')

{{-- HERO --}}
@include('blog.partials.hero', ['post' => $post])

{{-- BREADCRUMBS --}}
<div style="max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 0; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #94a3b8;">
    <a href="{{ url('/') }}" style="color: inherit; text-decoration: none;">Home</a>
    <span aria-hidden="true" style="margin: 0 0.5rem;">/</span>
    <a href="{{ url('/blog') }}" style="color: inherit; text-decoration: none;">Blog</a>
    <span aria-hidden="true" style="margin: 0 0.5rem;">/</span>
    <span style="color: #64748b;">{{ Str::limit($fm['title'] ?? '', 60) }}</span>
</div>

{{-- ARTICLE + TOC LAYOUT --}}
<section style="max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem;">
    <div class="geas-article-layout" style="display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; align-items: start;">

        {{-- Sidebar TOC (desktop only) --}}
        <div class="geas-toc-sidebar" style="position: sticky; top: 6rem;">
            @include('blog.partials.toc', ['post' => $post])
        </div>

        {{-- Article body --}}
        <article class="geas-article-body" style="max-width: 720px; margin: 0 auto; width: 100%;">
            @if($isLegacy)
                <div style="margin-bottom: 2rem; padding: 0.875rem 1.125rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #1e40af;">
                    This post is being rewritten. Content shown is the original 2024 version.
                </div>
            @endif

            <div class="geas-article-content">
                {!! $post['html'] !!}
            </div>

            {{-- Share + updated-at footer --}}
            <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
                <div style="font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: #94a3b8;">
                    @if(!empty($fm['updated_at']))
                        Last updated {{ \Carbon\Carbon::parse($fm['updated_at'])->format('M j, Y') }}
                    @endif
                </div>
                @include('blog.partials.share', ['post' => $post])
            </div>

            {{-- Author bio --}}
            @include('blog.partials.author-bio', ['post' => $post])
        </article>
    </div>
</section>

{{-- RELATED POSTS --}}
@if(!empty($related))
<section style="background: #fafbfc; padding: 4rem 1.5rem; border-top: 1px solid #e2e8f0;">
    <div style="max-width: 1200px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 2.5rem;">
            <div style="font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 600; color: #f97316; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem;">
                Keep reading
            </div>
            <h2 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); color: #0f172a; margin: 0; letter-spacing: -0.015em;">
                More from the GE-AS blog
            </h2>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem;">
            @foreach($related as $r)
                @php
                    $rSlug = $r['slug'] ?? '#';
                    $rTitle = $r['title'] ?? 'Untitled';
                    $rExcerpt = $r['excerpt'] ?? '';
                    $rImage = $r['featured_image'] ?? null;
                    $rAuthor = $r['_author'] ?? null;
                    $rDate = !empty($r['published_at']) ? \Carbon\Carbon::parse($r['published_at']) : null;
                @endphp

                <a href="{{ url('/blog/' . $rSlug) }}" class="geas-related-card" style="display: block; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;">
                    <div style="aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);">
                        @if($rImage)
                            <img src="{{ Str::startsWith($rImage, ['http', '/']) ? $rImage : asset($rImage) }}" alt="{{ $rTitle }}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover; display: block;">
                        @else
                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                                <div aria-hidden="true" style="width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); display: flex; align-items: center; justify-content: center; color: #ffffff; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 1.5rem;">
                                    G
                                </div>
                            </div>
                        @endif
                    </div>
                    <div style="padding: 1.25rem;">
                        <h3 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: 1.125rem; line-height: 1.3; color: #0f172a; margin: 0 0 0.5rem;">
                            {{ $rTitle }}
                        </h3>
                        @if($rExcerpt)
                            <p style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: 0.9375rem; line-height: 1.5; color: #64748b; margin: 0 0 0.75rem;">
                                {{ Str::limit($rExcerpt, 100) }}
                            </p>
                        @endif
                        <div style="font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #94a3b8;">
                            @if($rDate){{ $rDate->format('M j, Y') }}@endif
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- BOTTOM CTA --}}
<section style="padding: 5rem 1.5rem; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); position: relative; overflow: hidden;">
    <div aria-hidden="true" style="position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(249, 115, 22, 0.2) 0%, transparent 60%); pointer-events: none;"></div>
    <div style="position: relative; max-width: 640px; margin: 0 auto; text-align: center;">
        <h2 style="font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.2; color: #0f172a; margin: 0 0 1rem; letter-spacing: -0.02em;">
            Start with $50. Trade in 3 minutes.
        </h2>
        <p style="font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1.0625rem; line-height: 1.55; color: #475569; margin: 0 0 2rem;">
            No inventory. No shipping. AI-driven arbitrage across 14 marketplaces.
        </p>
        <a href="{{ url('/register') }}?utm_source=blog&utm_medium=article-cta&utm_content={{ $post['slug'] ?? '' }}" class="geas-cta-btn" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 2rem; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3); transition: transform 0.15s, box-shadow 0.15s;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(249, 115, 22, 0.4)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 14px rgba(249, 115, 22, 0.3)';">
            Create your account
            <span>→</span>
        </a>
    </div>
</section>

{{-- ============================================================
     ARTICLE BODY TYPOGRAPHY
     Scoped to .geas-article-content so it doesn't leak into layout.
     ============================================================ --}}
<style>
    .geas-article-content {
        font-family: 'IBM Plex Serif', Georgia, serif;
        font-size: 1.1875rem;
        line-height: 1.75;
        color: #334155;
    }
    .geas-article-content > *:first-child { margin-top: 0; }

    .geas-article-content h2 {
        font-family: 'DM Sans', sans-serif;
        font-weight: 600;
        font-size: clamp(1.75rem, 3vw, 2rem);
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: #0f172a;
        margin: 3.5rem 0 1.25rem;
        scroll-margin-top: 5rem;
    }
    .geas-article-content h3 {
        font-family: 'DM Sans', sans-serif;
        font-weight: 600;
        font-size: 1.375rem;
        line-height: 1.3;
        color: #0f172a;
        margin: 2.5rem 0 1rem;
        scroll-margin-top: 5rem;
    }
    .geas-article-content p {
        margin: 0 0 1.5rem;
    }
    .geas-article-content a {
        color: #f97316;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        transition: color 0.15s;
    }
    .geas-article-content a:hover {
        color: #c2410c;
    }
    .geas-article-content strong {
        color: #0f172a;
        font-weight: 600;
    }
    .geas-article-content ul,
    .geas-article-content ol {
        margin: 0 0 1.5rem 1.5rem;
        padding: 0;
    }
    .geas-article-content li {
        margin-bottom: 0.5rem;
    }
    .geas-article-content li::marker {
        color: #f97316;
    }
    .geas-article-content blockquote {
        margin: 2rem 0;
        padding: 0.5rem 0 0.5rem 1.5rem;
        border-left: 4px solid #f97316;
        font-style: italic;
        color: #475569;
    }
    .geas-article-content code {
        font-family: 'IBM Plex Mono', 'Courier New', monospace;
        font-size: 0.9em;
        background: #fff7ed;
        color: #c2410c;
        padding: 0.15em 0.4em;
        border-radius: 4px;
    }
    .geas-article-content pre {
        background: #0f172a;
        color: #f1f5f9;
        padding: 1.25rem;
        border-radius: 8px;
        overflow-x: auto;
        margin: 2rem 0;
        font-size: 0.875rem;
        line-height: 1.6;
    }
    .geas-article-content pre code {
        background: transparent;
        color: inherit;
        padding: 0;
        font-size: inherit;
    }
    .geas-article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 2rem 0;
    }
    .geas-article-content hr {
        border: none;
        border-top: 1px solid #e2e8f0;
        margin: 3rem 0;
    }
    .geas-article-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.9375rem;
    }
    .geas-article-content th,
    .geas-article-content td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }
    .geas-article-content th {
        background: #f8fafc;
        font-weight: 600;
        color: #0f172a;
    }

    .geas-related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        border-color: #fed7aa !important;
    }

    @media (max-width: 960px) {
        .geas-article-layout {
            grid-template-columns: 1fr !important;
        }
        .geas-toc-sidebar {
            position: static !important;
            display: none;  /* hide TOC on mobile to save space */
        }
    }

    /* GEAS_MOBILE_TYPO_v1 */
    /* Safety: hide any accidental duplicate H1 inside article body */
    .geas-article-content h1 {
        display: none;
    }
    /* Prevent long unbreakable strings from pushing past viewport */
    .geas-article-content {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Tablet + small desktop */
    @media (max-width: 960px) {
        .geas-article-content {
            font-size: 1.0625rem;
            line-height: 1.7;
        }
        .geas-article-content h2 {
            font-size: 1.625rem;
            margin: 3rem 0 1rem;
        }
        .geas-article-content h3 {
            font-size: 1.25rem;
            margin: 2rem 0 0.75rem;
        }
    }

    /* Mobile */
    @media (max-width: 720px) {
        .geas-article-content {
            font-size: 1.0625rem;
            line-height: 1.65;
        }
        .geas-article-content h2 {
            font-size: 1.5rem;
            margin: 2.5rem 0 0.875rem;
        }
        .geas-article-content h3 {
            font-size: 1.1875rem;
            margin: 1.75rem 0 0.75rem;
        }
        .geas-article-content p,
        .geas-article-content ul,
        .geas-article-content ol {
            margin-bottom: 1.25rem;
        }
    }

    /* Small mobile — down to 360px */
    @media (max-width: 480px) {
        .geas-article-layout {
            gap: 1.5rem !important;
        }
        .geas-article-content {
            font-size: 1rem;
            line-height: 1.6;
        }
        .geas-article-content h2 {
            font-size: 1.375rem;
            line-height: 1.25;
            margin: 2.25rem 0 0.75rem;
        }
        .geas-article-content h3 {
            font-size: 1.125rem;
        }
        .geas-article-content ul,
        .geas-article-content ol {
            margin-left: 1.25rem;
        }
        /* Compact section paddings so text has more breathing room */
        section[style*="max-width: 1200px"] {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
    }

</style>

@endsection