@extends('layouts.app')

@section('title', $post->title . ' - HAndipartner')
@section('description', $post->excerpt ?: Str::limit(strip_tags($post->content), 160))
@section('og_type', 'article')
@section('published_time', optional($post->published_at)->toAtomString())
@section('modified_time', optional($post->updated_at ?? $post->published_at)->toAtomString())

@section('structured_data')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@type": "Article",
    "headline": {!! json_encode($post->title, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!},
    "description": {!! json_encode($post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 160), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!},
    "datePublished": "{{ optional($post->published_at)->toAtomString() }}",
    "dateModified": "{{ optional($post->updated_at ?? $post->published_at)->toAtomString() }}",
    "inLanguage": "fr-FR",
    "author": { "@@type": "Organization", "name": "HAndipartner" },
    "publisher": {
        "@@type": "Organization",
        "name": "HAndipartner",
        "logo": { "@@type": "ImageObject", "url": "{{ url('/logo.png') }}" }
    },
    "mainEntityOfPage": { "@@type": "WebPage", "@@id": "{{ url('/' . $post->slug) }}" }
}
</script>
@endsection

@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')

<style>
    .hp-post-hero { background:linear-gradient(145deg,{{ $catGradient[0] }},{{ $catGradient[1] }});padding:3.5rem 0 0;position:relative;overflow:hidden; }
    .hp-post-hero-grid { 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%); }
    .hp-post-hero-glow { top:-80px;right:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%); }
    .hp-post-breadcrumb { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:1.5rem; }
    .hp-post-breadcrumb-link { color:rgba(255,255,255,.45);text-decoration:none; }
    .hp-post-breadcrumb-sep { opacity:.4; }
    .hp-post-breadcrumb-current { color:rgba(255,255,255,.65);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:240px; }
    .hp-post-cats { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem; }
    .hp-post-cat { 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); }
    .hp-post-title { font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;color:white;line-height:1.15;margin-bottom:1.25rem;max-width:780px; }
    .hp-post-excerpt { font-size:1rem;color:rgba(255,255,255,.7);max-width:600px;line-height:1.75;margin-bottom:1.75rem; }
    .hp-post-meta { display:flex;align-items:center;gap:1.25rem;padding-bottom:2.5rem;font-size:.78rem;color:rgba(255,255,255,.5); }
    .hp-post-meta-item { display:flex;align-items:center;gap:.4rem; }
    .hp-post-hero-img-wrap { border-radius:20px 20px 0 0;overflow:hidden;height:320px;box-shadow:0 -8px 48px rgba(0,0,0,.2); }
    .hp-post-hero-img { width:100%;height:100%;object-fit:cover; }
    .hp-post-content-section-img { background:white;padding:2.5rem 0 3rem; }
    .hp-post-content-section-noimg { background:white;padding:3.5rem 0 3rem; }
    .hp-post-tags { margin-top:3rem;padding-top:1.5rem;border-top:1px solid #EEF1F8;display:flex;flex-wrap:wrap;gap:.5rem; }
    .hp-post-tag { font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;background:#EEF1F8;color:#6D6E71; }
    .hp-post-cta-section { background:linear-gradient(135deg,#0D2B5E 0%,#091E42 100%);padding:4rem 0;position:relative;overflow:hidden; }
    .hp-post-cta-grid { 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; }
    .hp-post-cta-title { font-size:1.6rem;font-weight:800;color:white;margin-bottom:.75rem;letter-spacing:-.02em; }
    .hp-post-cta-text { color:#9FB8DC;margin-bottom:1.75rem;font-size:.92rem;line-height:1.7; }
    .hp-post-related-section { background:#F7F9FF;padding:4rem 0; }
    .hp-post-related-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem; }
    .hp-post-related-title { font-size:1.3rem;font-weight:900;color:#0D2B5E; }
    .hp-post-related-all { display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:#1A4B9C;text-decoration:none; }
    .hp-post-related-card { text-decoration:none;border-radius:18px;overflow:hidden;background:white;box-shadow:0 4px 16px rgba(27,47,110,.07); }
    .hp-post-related-header { height:140px;position:relative;overflow:hidden;background:linear-gradient(145deg,#091E42,#0D2B5E); }
    .hp-post-related-blob { position:absolute;top:-20px;right:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.07); }
    .hp-post-related-img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease;opacity:.85; }
    .hp-post-related-icon-wrap { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
    .hp-post-related-body { padding:1.25rem 1.25rem 1rem; }
    .hp-post-related-cat { font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#091E42; }
    .hp-post-related-cardtitle { 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; }
    .hp-post-related-read { display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:#091E42;transition:gap .25s ease; }
</style>

{{-- ══ HERO ARTICLE ══ --}}
<section class="hp-post-hero">

    {{-- Grille de fond --}}
    <div class="absolute inset-0 pointer-events-none hp-post-hero-grid"></div>
    <div class="absolute pointer-events-none hp-post-hero-glow"></div>

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

        {{-- Breadcrumb --}}
        <nav class="hp-post-breadcrumb">
            <a href="{{ route('home') }}" class="hp-post-breadcrumb-link"
               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" class="hp-post-breadcrumb-sep"><path d="M9 18l6-6-6-6"/></svg>
            <a href="{{ route('blog.index') }}" class="hp-post-breadcrumb-link"
               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" class="hp-post-breadcrumb-sep"><path d="M9 18l6-6-6-6"/></svg>
            <span class="hp-post-breadcrumb-current">
                {{ $post->title }}
            </span>
        </nav>

        {{-- Catégories --}}
        @if ($post->categories && count($post->categories))
        <div class="hp-post-cats">
            @foreach ($post->categories as $cat)
            <span class="hp-post-cat">
                {{ $cat }}
            </span>
            @endforeach
        </div>
        @endif

        {{-- Titre --}}
        <h1 class="hp-post-title">
            {{ $post->title }}
        </h1>

        @if ($post->excerpt)
        <p class="hp-post-excerpt">
            {{ $post->excerpt }}
        </p>
        @endif

        {{-- Meta date --}}
        <div class="hp-post-meta">
            <span class="hp-post-meta-item">
                {!! icon($_ic_clock, 'rgba(255,255,255,.5)', 13) !!}
                {{ $post->published_at?->format('d M Y') }}
            </span>
            <span class="hp-post-meta-item">
                {!! icon('<circle cx="12" cy="7" r="4"/><path d="M5.5 21a6.5 6.5 0 0 1 13 0"/>', 'rgba(255,255,255,.5)', 13) !!}
                Par la rédaction HAndipartner
            </span>
            @if ($post->tags && count($post->tags))
            <span class="hp-post-meta-item">
                {!! 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 class="hp-post-hero-img-wrap">
            <img loading="lazy" decoding="async" src="{{ $post->featured_image }}" alt="{{ $post->title }}"
                 class="hp-post-hero-img">
        </div>
    </div>
    @endif
</section>

{{-- ══ CONTENU ARTICLE ══ --}}
<section class="{{ $post->featured_image ? 'hp-post-content-section-img' : 'hp-post-content-section-noimg' }}">
    <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 class="hp-post-tags">
            @foreach ($post->tags as $tag)
            <span class="hp-post-tag">
                # {{ $tag }}
            </span>
            @endforeach
        </div>
        @endif

    </div>
</section>

{{-- ══ CTA INLINE ══ --}}
<section class="hp-post-cta-section">
    <div class="absolute inset-0 pointer-events-none hp-post-cta-grid"></div>
    <div class="relative z-10 max-w-2xl mx-auto px-4 text-center">
        <h3 class="hp-post-cta-title">
            Optimisez votre contribution AGEFIPH
        </h3>
        <p class="hp-post-cta-text">
            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 class="hp-post-related-section">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="hp-post-related-head">
            <h2 class="hp-post-related-title">Articles liés</h2>
            <a href="{{ route('blog.index') }}"
               class="hp-post-related-all">
                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 hp-post-related-card">

                {{-- Header coloré --}}
                <div class="hp-post-related-header">
                    <div class="hp-post-related-blob"></div>
                    @if ($rel->featured_image)
                    <img loading="lazy" decoding="async" src="{{ $rel->featured_image }}" alt="{{ $rel->title }}"
                         class="group-hover:scale-105 hp-post-related-img">
                    @else
                    <div class="hp-post-related-icon-wrap">
                        {!! icon($_ic_book, 'rgba(255,255,255,.35)', 28) !!}
                    </div>
                    @endif
                </div>

                <div class="hp-post-related-body">
                    @if (!empty($rel->categories))
                    <span class="hp-post-related-cat">{{ $rel->categories[0] }}</span>
                    @endif
                    <h3 class="hp-post-related-cardtitle">
                        {{ $rel->title }}
                    </h3>
                    <span class="group-hover:gap-3 hp-post-related-read">
                        Lire
                        {!! icon($_ic_arrow, $rColors[0], 12) !!}
                    </span>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection