<x-layout :title="$title" :description="$description">

    {{-- Reading progress bar --}}
    <div class="reading-progress" id="reading-progress" role="progressbar" aria-hidden="true"></div>

    {{-- Hero --}}
    <section class="pt-32 pb-0" style="background: #f8fafc;">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Breadcrumb --}}
            <nav style="display:flex; align-items:center; gap:0.5rem; margin-bottom:1.75rem; font-size:0.8125rem; color:#94a3b8;">
                <a href="{{ route('home') }}" style="color:#94a3b8; text-decoration:none; transition:color 0.15s;" onmouseover="this.style.color='#25b87e'" onmouseout="this.style.color='#94a3b8'">Home</a>
                <span>›</span>
                <a href="{{ route('blog') }}" style="color:#94a3b8; text-decoration:none; transition:color 0.15s;" onmouseover="this.style.color='#25b87e'" onmouseout="this.style.color='#94a3b8'">Blog</a>
                <span>›</span>
                <span style="color:#64748b;">{{ Str::limit($post->title, 40) }}</span>
            </nav>

            {{-- Category + meta --}}
            <div style="display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.25rem;">
                <span class="badge badge-green">{{ $post->category }}</span>
                <span style="font-size:0.8125rem; color:#94a3b8;">
                    {{ $post->published_at?->format('d \d\e F \d\e Y') }}
                </span>
                <span style="color:#cbd5e1;">·</span>
                <span style="font-size:0.8125rem; color:#94a3b8;">{{ $post->read_time }} min de leitura</span>
                @if($post->author)
                    <span style="color:#cbd5e1;">·</span>
                    <span style="font-size:0.8125rem; color:#94a3b8;">por {{ $post->author->name }}</span>
                @endif
            </div>

            {{-- Title --}}
            <h1 class="display-xl reveal" style="font-size: clamp(1.625rem, 4vw, 2.375rem); line-height: 1.2; color: #1e3a5f; margin-bottom: 1.5rem;">
                {{ $post->title }}
            </h1>

            @if($post->excerpt)
                <p style="font-size: 1.0625rem; color: #64748b; line-height: 1.7; margin-bottom: 2rem;">
                    {{ $post->excerpt }}
                </p>
            @endif
        </div>

        {{-- Cover --}}
        @if($post->cover_url)
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <img src="{{ $post->cover_url }}" alt="{{ $post->title }}"
                     style="width:100%; border-radius:12px 12px 0 0; max-height:420px; object-fit:cover; display:block;">
            </div>
        @elseif($post->cover_emoji)
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <div style="height:220px; border-radius:12px 12px 0 0; background:linear-gradient(135deg,#e8f8f1,#eff6ff); display:flex; align-items:center; justify-content:center;">
                    <span style="font-size:5rem;">{{ $post->cover_emoji }}</span>
                </div>
            </div>
        @endif
    </section>

    {{-- Content --}}
    <section style="background:#fff; padding-bottom: 4rem;">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-12">
            <div class="flex gap-10 items-start">

                {{-- Article body --}}
                <div class="flex-1 min-w-0">
                    <div class="prose-opcon" id="article-body">
                        {!! $post->content !!}
                    </div>

                    {{-- Author card --}}
                    @if($post->author)
                    <div style="margin-top:2.5rem; padding-top:2rem; border-top:1px solid #e2e8f0; display:flex; align-items:center; gap:1rem;">
                        <div style="width:48px; height:48px; border-radius:50%; background:rgba(37,184,126,0.12); border:2px solid rgba(37,184,126,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                            <span style="font-size:1rem; font-weight:700; color:#25b87e; text-transform:uppercase;">{{ substr($post->author->name, 0, 1) }}</span>
                        </div>
                        <div>
                            <p style="font-size:0.875rem; font-weight:700; color:#1e3a5f; margin:0;">{{ $post->author->name }}</p>
                            <p style="font-size:0.8125rem; color:#94a3b8; margin:0.1rem 0 0;">Especialista OPCON</p>
                        </div>
                    </div>
                    @endif
                </div>

                {{-- Desktop share sidebar --}}
                <aside class="hidden lg:flex flex-col gap-3 flex-shrink-0 items-center" style="width:48px; position:sticky; top:96px;">
                    <p style="font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#cbd5e1; writing-mode:vertical-lr; transform:rotate(180deg); margin-bottom:0.25rem;">Compartilhar</p>

                    {{-- WhatsApp --}}
                    <a href="https://wa.me/?text={{ urlencode($post->title . ' — ' . url()->current()) }}"
                       target="_blank" rel="noopener" class="share-btn" title="Compartilhar no WhatsApp">
                        <svg style="width:18px;height:18px;" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                        </svg>
                    </a>

                    {{-- LinkedIn --}}
                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(url()->current()) }}"
                       target="_blank" rel="noopener" class="share-btn" title="Compartilhar no LinkedIn">
                        <svg style="width:16px;height:16px;" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                        </svg>
                    </a>

                    {{-- Copy link --}}
                    <button class="share-btn" title="Copiar link" onclick="copyLink(this)" type="button">
                        <svg style="width:16px;height:16px;" 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>
                    </button>
                </aside>
            </div>
        </div>
    </section>

    {{-- Related posts --}}
    @if($related->isNotEmpty())
        <section class="py-16" style="background:#f8fafc;">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="font-bold text-2xl mb-8 reveal" style="color:#1e3a5f;">Artigos relacionados</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    @foreach($related as $i => $rel)
                        <article class="card-premium overflow-hidden flex flex-col reveal" style="transition-delay: {{ $i * 100 }}ms;">
                            <div class="h-32 flex items-center justify-center text-3xl"
                                 style="background: linear-gradient(135deg, #e8f8f1, #f8fafc);">
                                {{ $rel->cover_emoji ?: '📝' }}
                            </div>
                            <div class="p-5 flex flex-col flex-1">
                                <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.625rem;">
                                    <span class="badge badge-green" style="font-size:0.7rem;">{{ $rel->category }}</span>
                                    <span style="font-size:0.75rem; color:#94a3b8;">{{ $rel->read_time }} min</span>
                                </div>
                                <h3 class="font-semibold mb-3 line-clamp-2" style="color:#1e3a5f; font-size:0.9375rem; line-height:1.4;">{{ $rel->title }}</h3>
                                <div class="mt-auto pt-3" style="border-top:1px solid #e2e8f0;">
                                    <a href="{{ route('blog.show', $rel) }}"
                                       class="text-sm font-semibold inline-flex items-center gap-1 transition-colors duration-200"
                                       style="color:#25b87e; text-decoration:none;"
                                       onmouseover="this.style.color='#1a9b68'" onmouseout="this.style.color='#25b87e'">
                                        Ler artigo
                                        <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="M9 5l7 7-7 7"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- CTA --}}
    <section class="py-16" style="background:#fff;">
        <div class="max-w-2xl mx-auto px-4 text-center">
            <h2 class="font-bold text-2xl mb-3" style="color:#1e3a5f;">Quer um acompanhamento personalizado?</h2>
            <p class="mb-6" style="color:#64748b;">Nossa equipe está pronta para transformar sua contabilidade em estratégia de crescimento.</p>
            <a href="{{ route('contato') }}" class="btn-primary inline-flex items-center gap-2">
                Falar com um especialista
                <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="M13 7l5 5m0 0l-5 5m5-5H6"/>
                </svg>
            </a>
        </div>
    </section>

</x-layout>

<script>
// Reading progress
(function () {
    var bar = document.getElementById('reading-progress');
    if (!bar) return;
    function update() {
        var doc = document.documentElement;
        var h   = doc.scrollHeight - doc.clientHeight;
        var pct = h > 0 ? (window.scrollY / h) * 100 : 0;
        bar.style.width = Math.min(pct, 100) + '%';
    }
    window.addEventListener('scroll', update, { passive: true });
    update();
}());

// Copy link
function copyLink(btn) {
    navigator.clipboard.writeText(window.location.href).then(function () {
        var orig = btn.innerHTML;
        btn.innerHTML = '<svg style="width:16px;height:16px;color:#25b87e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>';
        setTimeout(function () { btn.innerHTML = orig; }, 2000);
    }).catch(function () {
        window.prompt('Copie o link:', window.location.href);
    });
}
</script>

<style>
.prose-opcon {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #374151;
}
.prose-opcon h2 { font-size: 1.375rem; font-weight: 700; color: #1e3a5f; margin: 2rem 0 1rem; }
.prose-opcon h3 { font-size: 1.125rem; font-weight: 600; color: #1e3a5f; margin: 1.5rem 0 0.75rem; }
.prose-opcon p  { margin: 0 0 1.25rem; }
.prose-opcon ul, .prose-opcon ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.prose-opcon li { margin-bottom: 0.375rem; }
.prose-opcon strong { color: #1e3a5f; font-weight: 600; }
.prose-opcon a { color: #25b87e; text-decoration: underline; }
.prose-opcon a:hover { color: #1a9b68; }
.prose-opcon blockquote { border-left: 3px solid #25b87e; padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: #f0fdf4; border-radius: 0 8px 8px 0; color: #374151; }
.prose-opcon code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.9em; color: #1e3a5f; }
.prose-opcon hr { border: none; border-top: 1px solid #e2e8f0; margin: 2rem 0; }
</style>
