@extends('layouts.marketing')

@section('title', $post->seo_title . ' — Inventino Blog')
@section('description', $post->seo_description)
@section('keywords', implode(', ', array_filter([$post->category ?? '', 'Inventino Blog', 'inventory management Nigeria', 'business tips Nigeria'])))
@section('canonical', route('blog.show', $post->slug))
@section('og_type', 'article')
@section('og_title', $post->seo_title)
@section('og_description', $post->seo_description)
@if($post->cover_image_url)@section('og_image', url($post->cover_image_url))@endif
@section('og_image_alt', $post->seo_title)

@push('og_extra')
<meta property="article:published_time" content="{{ $post->published_at?->toIso8601String() }}">
@if($post->updated_at)<meta property="article:modified_time"  content="{{ $post->updated_at->toIso8601String() }}">@endif
@if($post->author)<meta property="article:author" content="{{ $post->author->name }}">@endif
@endpush

@push('schema')
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "@id": "{{ route('blog.show', $post->slug) }}#article",
    "headline": {{ Js::from($post->seo_title) }},
    "description": {{ Js::from($post->seo_description) }},
    "url": "{{ route('blog.show', $post->slug) }}",
    "datePublished": "{{ $post->published_at?->toIso8601String() }}",
    "dateModified": "{{ $post->updated_at->toIso8601String() }}",
    @if($post->cover_image_url)
    "image": {
        "@type": "ImageObject",
        "url": "{{ url($post->cover_image_url) }}",
        "width": 1200,
        "height": 630
    },
    @endif
    "author": {
        "@type": "Person",
        "name": {{ Js::from($post->author->name ?? 'Inventino Team') }}
    },
    "publisher": { "@id": "{{ url('/') }}/#organization" },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ route('blog.show', $post->slug) }}"
    },
    "isPartOf": { "@id": "{{ url('/') }}/#website" },
    "inLanguage": "en-NG"
}
</script>
@endpush

@push('styles')
<style>
/* Article typography */
.prose-blog {
    color: #cbd5e1;
    font-size: 1.0625rem;
    line-height: 1.85;
    max-width: 72ch;
}
.prose-blog h1, .prose-blog h2, .prose-blog h3, .prose-blog h4 {
    color: #f1f5f9;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.6em;
}
.prose-blog h2 { font-size: 1.5rem; }
.prose-blog h3 { font-size: 1.25rem; }
.prose-blog p  { margin-bottom: 1.4em; }
.prose-blog strong { color: #f1f5f9; font-weight: 700; }
.prose-blog em    { font-style: italic; }
.prose-blog a {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prose-blog a:hover { color: #93c5fd; }
.prose-blog ul, .prose-blog ol {
    margin: 1.2em 0 1.4em;
    padding-left: 1.8em;
}
.prose-blog ul { list-style: disc; }
.prose-blog ol { list-style: decimal; }
.prose-blog li { margin-bottom: 0.4em; }
.prose-blog blockquote {
    border-left: 3px solid rgba(59,130,246,0.5);
    padding: 0.8em 1.2em;
    margin: 1.5em 0;
    color: #94a3b8;
    background: rgba(30,41,59,0.5);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}
.prose-blog code {
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(99,118,150,0.2);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
    color: #7dd3fc;
}
.prose-blog pre {
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(99,118,150,0.2);
    border-radius: 0.75rem;
    padding: 1.2em 1.5em;
    overflow-x: auto;
    margin: 1.5em 0;
}
.prose-blog pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: #e2e8f0;
}
.prose-blog hr {
    border: none;
    border-top: 1px solid rgba(99,118,150,0.2);
    margin: 2.5em 0;
}
.prose-blog img {
    border-radius: 0.75rem;
    margin: 1.5em 0;
    max-width: 100%;
    height: auto;
}
.prose-blog table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.9em;
}
.prose-blog th {
    background: rgba(30,41,59,0.8);
    color: #f1f5f9;
    font-weight: 700;
    text-align: left;
    padding: 0.65em 1em;
    border-bottom: 1px solid rgba(99,118,150,0.3);
}
.prose-blog td {
    padding: 0.6em 1em;
    border-bottom: 1px solid rgba(99,118,150,0.12);
}
.table-of-contents a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    padding: 0.25rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: color 0.2s, border-color 0.2s;
}
.table-of-contents a:hover {
    color: #60a5fa;
    border-left-color: #3b82f6;
}
.tag-pill {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    color: #93c5fd;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}
.share-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
</style>
@endpush

@section('content')

<!-- ─── BREADCRUMB ────────────────────────────────────────────────────── -->
<nav class="pt-24 pb-4 bg-navy-900" aria-label="Breadcrumb">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <ol class="flex items-center gap-2 text-xs text-slate-500" itemscope itemtype="https://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="{{ route('home') }}" class="hover:text-slate-300 transition-colors" itemprop="item"><span itemprop="name">Home</span></a>
                <meta itemprop="position" content="1">
            </li>
            <li><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></li>
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="{{ route('blog') }}" class="hover:text-slate-300 transition-colors" itemprop="item"><span itemprop="name">Blog</span></a>
                <meta itemprop="position" content="2">
            </li>
            @if($post->category)
            <li><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></li>
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="{{ route('blog', ['category' => strtolower($post->category)]) }}" class="hover:text-slate-300 transition-colors" itemprop="item">
                    <span itemprop="name">{{ \Illuminate\Support\Str::title($post->category) }}</span>
                </a>
                <meta itemprop="position" content="3">
            </li>
            @endif
        </ol>
    </div>
</nav>

<!-- ─── ARTICLE HEADER ────────────────────────────────────────────────── -->
<header class="pt-6 pb-10 bg-navy-900"
        itemscope itemtype="https://schema.org/BlogPosting">
    <meta itemprop="url"            content="{{ route('blog.show', $post->slug) }}">
    <meta itemprop="datePublished"  content="{{ $post->published_at->toIso8601String() }}">
    <meta itemprop="dateModified"   content="{{ $post->updated_at->toIso8601String() }}">
    @if($post->cover_image_url)
    <meta itemprop="image"          content="{{ $post->cover_image_url }}">
    @endif

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Category & reading time -->
        <div class="flex flex-wrap items-center gap-3 mb-5">
            @if($post->category)
            <a href="{{ route('blog', ['category' => strtolower($post->category)]) }}"
               class="badge-blue text-xs font-semibold px-3 py-1 rounded-full">
                {{ \Illuminate\Support\Str::title($post->category) }}
            </a>
            @endif
            <span class="text-xs text-slate-500">{{ $post->published_at->format('F j, Y') }}</span>
            <span class="text-xs text-slate-600">•</span>
            <span class="text-xs text-slate-500">{{ $post->reading_time }} min read</span>
        </div>

        <!-- Title -->
        <h1 class="text-3xl sm:text-4xl md:text-5xl font-black text-white leading-tight mb-6" itemprop="headline">
            {{ $post->title }}
        </h1>

        @if($post->excerpt)
        <p class="text-slate-400 text-lg leading-relaxed mb-8 max-w-2xl" itemprop="description">
            {{ $post->excerpt }}
        </p>
        @endif

        <!-- Author + share row -->
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3" itemprop="author" itemscope itemtype="https://schema.org/Person">
                <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white flex-shrink-0"
                     style="background: linear-gradient(135deg, #3b82f6, #6366f1);">
                    {{ strtoupper(substr($post->author->name ?? 'I', 0, 2)) }}
                </div>
                <div>
                    <p class="text-sm font-semibold text-white" itemprop="name">{{ $post->author->name ?? 'The Inventino Team' }}</p>
                    <p class="text-xs text-slate-500">Inventino</p>
                </div>
            </div>

            <!-- Share buttons -->
            <div class="flex items-center gap-2">
                <button onclick="sharePost('twitter')" class="share-btn">
                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    Share
                </button>
                <button onclick="copyLink()" class="share-btn" id="copy-link-btn">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                    Copy link
                </button>
            </div>
        </div>
    </div>
</header>

@if($post->cover_image_url)
<!-- ─── COVER IMAGE ────────────────────────────────────────────────────── -->
<div class="bg-navy-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-10">
        <figure class="rounded-2xl overflow-hidden" style="max-height: 480px;">
            <img src="{{ $post->cover_image_url }}" alt="{{ e($post->title) }}"
                 class="w-full h-full object-cover"
                 loading="eager"
                 fetchpriority="high"
                 decoding="async"
                 width="896" height="480">
        </figure>
    </div>
</div>
@endif

<!-- ─── ARTICLE BODY ──────────────────────────────────────────────────── -->
<div class="section-divider"></div>
<div class="py-12 bg-navy-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex gap-12">

            <!-- Main content -->
            <article class="flex-1 min-w-0 prose-blog" itemprop="articleBody">
                {!! (new \League\CommonMark\CommonMarkConverter([
                    'html_input'         => 'strip',
                    'allow_unsafe_links' => false,
                    'max_nesting_level'  => 10,
                ]))->convert($post->content)->getContent() !!}
            </article>

            <!-- Sidebar: tags + related -->
            <aside class="hidden lg:block w-64 flex-shrink-0 space-y-8 sticky top-24 self-start">

                @if($post->tags && count($post->tags))
                <div class="feature-card rounded-2xl p-5">
                    <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">Tags</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($post->tags as $tag)
                        <span class="tag-pill">{{ $tag }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                @if($related->isNotEmpty())
                <div class="feature-card rounded-2xl p-5">
                    <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-4">Related Articles</h3>
                    <ul class="space-y-4">
                        @foreach($related as $rel)
                        <li>
                            <a href="{{ route('blog.show', $rel->slug) }}"
                               class="text-sm text-slate-300 hover:text-white transition-colors leading-snug block">
                                {{ $rel->title }}
                            </a>
                            <p class="text-xs text-slate-600 mt-1">{{ $rel->published_at->format('M j, Y') }} · {{ $rel->reading_time }} min read</p>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <!-- Back to blog -->
                <a href="{{ route('blog') }}"
                   class="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    All articles
                </a>
            </aside>
        </div>
    </div>
</div>

<!-- ─── TAGS (mobile) ─────────────────────────────────────────────────── -->
@if($post->tags && count($post->tags))
<div class="lg:hidden px-4 sm:px-6 pb-8 bg-navy-900">
    <div class="max-w-4xl mx-auto flex flex-wrap gap-2">
        @foreach($post->tags as $tag)
        <span class="tag-pill">{{ $tag }}</span>
        @endforeach
    </div>
</div>
@endif

<!-- ─── RELATED POSTS ─────────────────────────────────────────────────── -->
@if($related->isNotEmpty())
<div class="section-divider"></div>
<section class="py-14 bg-navy-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-xl font-bold text-white mb-8 scroll-reveal">Related Articles</h2>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($related as $i => $rel)
            @php
                $catKey = strtolower($rel->category ?? '');
                $colorMap = [
                    'inventory' => ['bg' => 'rgba(34,197,94,0.2), rgba(16,185,129,0.1)',  'badge' => 'badge-green',  'link' => 'text-green-400 hover:text-green-300'],
                    'pos'       => ['bg' => 'rgba(139,92,246,0.2), rgba(59,130,246,0.1)', 'badge' => 'badge-purple', 'link' => 'text-violet-400 hover:text-violet-300'],
                    'updates'   => ['bg' => 'rgba(245,158,11,0.2), rgba(251,191,36,0.1)', 'badge' => 'badge-orange', 'link' => 'text-amber-400 hover:text-amber-300'],
                    'business'  => ['bg' => 'rgba(236,72,153,0.2), rgba(168,85,247,0.1)', 'badge' => 'bg-pink-500/20 text-pink-400 border border-pink-500/30', 'link' => 'text-pink-400 hover:text-pink-300'],
                ];
                $c = $colorMap[$catKey] ?? ['bg' => 'rgba(59,130,246,0.2), rgba(14,165,233,0.1)', 'badge' => 'badge-blue', 'link' => 'text-blue-400 hover:text-blue-300'];
                $delays = ['scroll-reveal', 'scroll-reveal scroll-reveal-delay-1', 'scroll-reveal scroll-reveal-delay-2'];
            @endphp
            <article class="feature-card rounded-2xl overflow-hidden flex flex-col {{ $delays[$i] }} group">
                <a href="{{ route('blog.show', $rel->slug) }}" class="block">
                    <div class="h-40 relative overflow-hidden flex items-center justify-center"
                         style="background: linear-gradient(135deg, {{ $c['bg'] }});">
                        @if($rel->cover_image_url)
                            <img src="{{ $rel->cover_image_url }}" alt="{{ e($rel->title) }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 loading="lazy"
                                 decoding="async"
                                 width="400" height="160">
                        @else
                            <svg class="w-12 h-12 text-white/10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                        @endif
                        @if($rel->category)
                        <div class="absolute top-3 left-3">
                            <span class="text-xs font-bold px-2.5 py-1 rounded-full {{ $c['badge'] }}">{{ \Illuminate\Support\Str::title($rel->category) }}</span>
                        </div>
                        @endif
                    </div>
                </a>
                <div class="p-5 flex flex-col flex-1">
                    <p class="text-xs text-slate-500 mb-2">{{ $rel->published_at->format('M j, Y') }} · {{ $rel->reading_time }} min read</p>
                    <h3 class="font-bold text-white mb-3 flex-1 leading-snug text-sm">
                        <a href="{{ route('blog.show', $rel->slug) }}"
                           class="{{ $c['link'] }} transition-colors">{{ $rel->title }}</a>
                    </h3>
                    <a href="{{ route('blog.show', $rel->slug) }}"
                       class="text-xs font-semibold {{ $c['link'] }} transition-colors">Read more →</a>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- ─── CTA ───────────────────────────────────────────────────────────── -->
<div class="section-divider"></div>
<section class="py-16 cta-bg relative overflow-hidden">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center scroll-reveal">
        <h2 class="text-3xl font-black text-white mb-3">Ready to Take Control of Your Inventory?</h2>
        <p class="text-slate-300 mb-8 text-sm">Join thousands of Nigerian businesses using Inventino to manage stock, sales, and growth.</p>
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="/register" class="btn-primary px-7 py-3 rounded-xl text-white font-semibold text-sm">Start Free Today</a>
            <a href="{{ route('blog') }}"
               class="px-7 py-3 rounded-xl border border-white/20 text-white font-semibold text-sm hover:bg-white/10 transition-colors">
                Read More Articles
            </a>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
    function sharePost(platform) {
        const url   = encodeURIComponent(window.location.href);
        const title = encodeURIComponent(document.title);
        const urls  = {
            twitter: `https://twitter.com/intent/tweet?url=${url}&text=${title}`,
        };
        if (urls[platform]) window.open(urls[platform], '_blank', 'width=600,height=400');
    }

    function copyLink() {
        navigator.clipboard.writeText(window.location.href).then(() => {
            const btn = document.getElementById('copy-link-btn');
            const original = btn.innerHTML;
            btn.innerHTML = `<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Copied!`;
            btn.style.color = '#4ade80';
            setTimeout(() => { btn.innerHTML = original; btn.style.color = ''; }, 2000);
        });
    }
</script>
@endpush