@extends('layouts.app')

@section('title', $post->title . ' — HAndipartner')
@section('description', $post->excerpt ?: Str::limit(strip_tags($post->content), 160))

@php
if (!function_exists('icon')) {
    function icon(string $paths, string $color = '#0D2B5E', int $size = 20, string $extra = ''): string {
        return '<svg width="'.$size.'" height="'.$size.'" viewBox="0 0 24 24" fill="none"
            stroke="'.$color.'" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" '.$extra.'>'
            .$paths.'</svg>';
    }
}
$_ic_arrow  = '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>';
$_ic_book   = '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>';
$_ic_mail   = '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>';
$_ic_zap    = '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>';
$_ic_clock  = '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>';
$_ic_tag    = '<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>';
$_ic_share  = '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>';

// Identité navy unifiée (premium, cohérent sur tout le site)
$catGradient = ['#091E42','#0D2B5E'];
@endphp

@section('content')

{{-- ══ HERO ARTICLE ══ --}}
<section style="background:linear-gradient(145deg,{{ $catGradient[0] }},{{ $catGradient[1] }});
                padding:3.5rem 0 0;position:relative;overflow:hidden">

    {{-- Grille de fond --}}
    <div class="absolute inset-0 pointer-events-none" style="
        background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                         linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
        background-size:52px 52px;
        mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%)"></div>
    <div class="absolute pointer-events-none" style="top:-80px;right:-80px;width:340px;height:340px;
         border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%)"></div>

    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        {{-- Breadcrumb --}}
        <nav style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
                    font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:1.5rem">
            <a href="{{ route('home') }}" style="color:rgba(255,255,255,.45);text-decoration:none"
               onmouseenter="this.style.color='rgba(255,255,255,.8)'" onmouseleave="this.style.color='rgba(255,255,255,.45)'">Accueil</a>
            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="opacity:.4"><path d="M9 18l6-6-6-6"/></svg>
            <a href="{{ route('blog.index') }}" style="color:rgba(255,255,255,.45);text-decoration:none"
               onmouseenter="this.style.color='rgba(255,255,255,.8)'" onmouseleave="this.style.color='rgba(255,255,255,.45)'">Ressources</a>
            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="opacity:.4"><path d="M9 18l6-6-6-6"/></svg>
            <span style="color:rgba(255,255,255,.65);
                         display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:240px">
                {{ $post->title }}
            </span>
        </nav>

        {{-- Catégories --}}
        @if ($post->categories && count($post->categories))
        <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem">
            @foreach ($post->categories as $cat)
            <span style="font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
                         color:rgba(255,255,255,.8);background:rgba(255,255,255,.14);
                         border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:4px 12px;
                         backdrop-filter:blur(4px)">
                {{ $cat }}
            </span>
            @endforeach
        </div>
        @endif

        {{-- Titre --}}
        <h1 style="font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;color:white;
                   line-height:1.15;margin-bottom:1.25rem;max-width:780px">
            {{ $post->title }}
        </h1>

        @if ($post->excerpt)
        <p style="font-size:1rem;color:rgba(255,255,255,.7);max-width:600px;line-height:1.75;margin-bottom:1.75rem">
            {{ $post->excerpt }}
        </p>
        @endif

        {{-- Meta date --}}
        <div style="display:flex;align-items:center;gap:1.25rem;padding-bottom:2.5rem;
                    font-size:.78rem;color:rgba(255,255,255,.5)">
            <span style="display:flex;align-items:center;gap:.4rem">
                {!! icon($_ic_clock, 'rgba(255,255,255,.5)', 13) !!}
                {{ $post->published_at?->format('d M Y') }}
            </span>
            @if ($post->tags && count($post->tags))
            <span style="display:flex;align-items:center;gap:.4rem">
                {!! icon($_ic_tag, 'rgba(255,255,255,.5)', 13) !!}
                {{ implode(', ', array_slice($post->tags, 0, 3)) }}
            </span>
            @endif
        </div>

    </div>

    {{-- Image à la une en chevauchement --}}
    @if ($post->featured_image)
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div style="border-radius:20px 20px 0 0;overflow:hidden;height:320px;
                    box-shadow:0 -8px 48px rgba(0,0,0,.2)">
            <img loading="lazy" decoding="async" src="{{ $post->featured_image }}" alt="{{ $post->title }}"
                 style="width:100%;height:100%;object-fit:cover">
        </div>
    </div>
    @endif
</section>

{{-- ══ CONTENU ARTICLE ══ --}}
<section style="background:white;padding:{{ $post->featured_image ? '2.5rem 0 3rem' : '3.5rem 0 3rem' }}">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

        <style>
            .hc-article-content img { max-width:100%; border-radius:14px; box-shadow:0 8px 32px rgba(27,47,110,.1); margin:2rem 0 !important; }
            .hc-article-content h1,.hc-article-content h2 { font-size:1.5rem; font-weight:900; color:#0D2B5E; margin-top:2.5rem; margin-bottom:.75rem; line-height:1.25; }
            .hc-article-content h3,.hc-article-content h4 { font-size:1.1rem; font-weight:800; color:#091E42; margin-top:2rem; margin-bottom:.5rem; }
            .hc-article-content p { color:#374151; line-height:1.9; margin-bottom:1.25rem; font-size:.97rem; }
            .hc-article-content a { color:#1A4B9C; text-decoration:none; font-weight:600; }
            .hc-article-content a:hover { text-decoration:underline; }
            .hc-article-content ul,.hc-article-content ol { padding-left:1.5rem; margin-bottom:1.25rem; }
            .hc-article-content li { color:#374151; line-height:1.85; margin-bottom:.4rem; font-size:.97rem; }
            .hc-article-content blockquote { border-left:3px solid #F5820A; padding:1rem 1.25rem; color:#475569; font-style:italic; margin:1.75rem 0; background:#F4F8FE; border-radius:0 12px 12px 0; }
            .hc-article-content strong { color:#091E42; font-weight:800; }
            .hc-article-content table { width:100%; border-collapse:collapse; margin:2rem 0; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(27,47,110,.06); }
            .hc-article-content th { background:#0D2B5E; color:white; padding:12px 16px; font-size:.85rem; font-weight:700; text-align:left; }
            .hc-article-content td { padding:11px 16px; border-bottom:1px solid #EEF1F8; font-size:.88rem; color:#374151; }
            .hc-article-content tr:last-child td { border-bottom:none; }
        </style>

        <div class="hc-article-content">
            {!! $post->content !!}
        </div>

        {{-- Tags --}}
        @if ($post->tags && count($post->tags))
        <div style="margin-top:3rem;padding-top:1.5rem;border-top:1px solid #EEF1F8;display:flex;flex-wrap:wrap;gap:.5rem">
            @foreach ($post->tags as $tag)
            <span style="font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;background:#EEF1F8;color:#6D6E71">
                # {{ $tag }}
            </span>
            @endforeach
        </div>
        @endif

    </div>
</section>

{{-- ══ CTA INLINE ══ --}}
<section style="background:linear-gradient(135deg,#0D2B5E 0%,#091E42 100%);padding:4rem 0;position:relative;overflow:hidden">
    <div class="absolute inset-0 pointer-events-none" style="
        background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                         linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size:48px 48px"></div>
    <div class="relative z-10 max-w-2xl mx-auto px-4 text-center">
        <h3 style="font-size:1.6rem;font-weight:800;color:white;margin-bottom:.75rem;letter-spacing:-.02em">
            Optimisez votre contribution AGEFIPH
        </h3>
        <p style="color:#9FB8DC;margin-bottom:1.75rem;font-size:.92rem;line-height:1.7">
            Nos experts analysent votre situation gratuitement et identifient vos leviers d'optimisation, sous 48&nbsp;heures.
        </p>
        <a href="{{ route('simulateur') }}" class="btn-primary">
            Demander un audit gratuit
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.25" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
    </div>
</section>

{{-- ══ ARTICLES LIÉS ══ --}}
@if ($related->count())
<section style="background:#F7F9FF;padding:4rem 0">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">

        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem">
            <h2 style="font-size:1.3rem;font-weight:900;color:#0D2B5E">Articles liés</h2>
            <a href="{{ route('blog.index') }}"
               style="display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;
                      color:#1A4B9C;text-decoration:none">
                Tous les articles
                {!! icon($_ic_arrow, '#1A4B9C', 13) !!}
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            @foreach ($related as $rel)
            @php $rColors = ['#091E42','#0D2B5E']; @endphp
            <a href="{{ route('slug.dispatch', $rel->slug) }}"
               class="group card-lift"
               style="text-decoration:none;border-radius:18px;overflow:hidden;
                      background:white;box-shadow:0 4px 16px rgba(27,47,110,.07)">

                {{-- Header coloré --}}
                <div style="height:140px;position:relative;overflow:hidden;
                            background:linear-gradient(145deg,{{ $rColors[0] }},{{ $rColors[1] }})">
                    <div style="position:absolute;top:-20px;right:-20px;width:90px;height:90px;
                                border-radius:50%;background:rgba(255,255,255,.07)"></div>
                    @if ($rel->featured_image)
                    <img loading="lazy" decoding="async" src="{{ $rel->featured_image }}" alt="{{ $rel->title }}"
                         style="width:100%;height:100%;object-fit:cover;transition:transform .5s ease;opacity:.85"
                         class="group-hover:scale-105">
                    @else
                    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">
                        {!! icon($_ic_book, 'rgba(255,255,255,.35)', 28) !!}
                    </div>
                    @endif
                </div>

                <div style="padding:1.25rem 1.25rem 1rem">
                    @if (!empty($rel->categories))
                    <span style="font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
                                 color:{{ $rColors[0] }}">{{ $rel->categories[0] }}</span>
                    @endif
                    <h3 style="font-weight:800;font-size:.88rem;color:#0F172A;line-height:1.4;
                               margin-top:.35rem;margin-bottom:.75rem;
                               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
                        {{ $rel->title }}
                    </h3>
                    <span style="display:flex;align-items:center;gap:5px;font-size:.78rem;
                                 font-weight:700;color:{{ $rColors[0] }};transition:gap .25s ease"
                          class="group-hover:gap-3">
                        Lire
                        {!! icon($_ic_arrow, $rColors[0], 12) !!}
                    </span>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection