@extends('layouts.app')

@section('title', $post->meta_title ?: $post->title . ' - HOCHMAN Legal')
@section('description', $post->meta_description ?: $post->excerpt)

@section('content')
<div class="min-h-screen bg-white">
    <!-- Article Banner with Title Overlay -->
    <div class="relative h-96 overflow-hidden">
        <div class="absolute inset-0">
            @if($post->featured_image)
                <img src="{{ Storage::url($post->featured_image) }}" 
                     alt="{{ $post->title }}" 
                     class="w-full h-full object-cover filter grayscale">
            @else
                <!-- Default strategic image for articles without featured image -->
                <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
                     alt="{{ $post->title }}" 
                     class="w-full h-full object-cover filter grayscale">
            @endif
            <div class="absolute inset-0 bg-red-600 opacity-10"></div>
            <div class="absolute inset-0 bg-black opacity-70"></div>
        </div>
        <div class="relative z-10 flex items-center justify-center h-full px-4">
            <div class="text-center text-white max-w-4xl">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight" style="font-family: 'Roboto', sans-serif; color: #FFFFFF;">
                    {{ $post->title }}
                </h1>
            </div>
        </div>
    </div>

    <!-- Article Content -->
    <article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Breadcrumb -->
        <nav class="mb-8">
            <ol class="flex items-center space-x-2 text-sm text-gray-600" style="font-family: 'Roboto', sans-serif;">
                <li><a href="{{ route('home') }}" class="text-black underline hover:text-red-600">Accueil</a></li>
                <li><span class="mx-2">/</span></li>
                <li><a href="{{ route('blog.index') }}" class="text-black underline hover:text-red-600">Blog</a></li>
                @if($post->categories->first())
                <li><span class="mx-2">/</span></li>
                <li><a href="{{ route('blog.category', $post->categories->first()) }}" class="text-black underline hover:text-red-600">{{ $post->categories->first()->name }}</a></li>
                @endif
                <li><span class="mx-2">/</span></li>
                <li class="text-black">{{ Str::limit($post->title, 50) }}</li>
            </ol>
        </nav>

        <!-- Article Meta -->
        <div class="flex flex-wrap items-center text-gray-600 mb-8 space-x-4" style="font-family: 'Roboto', sans-serif;">
            <time datetime="{{ $post->published_at->format('Y-m-d') }}" class="flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
                Publié le {{ $post->published_at->format('d F Y') }}
            </time>
            
            <span class="flex items-center">
                Par <a href="{{ route('cabinet') }}" class="ml-1 text-black underline hover:text-red-600 font-medium">Boris Hochman</a>
            </span>
            
            @if($post->categories->count() > 0)
            <span class="flex items-center">
                dans 
                @foreach($post->categories as $category)
                    <a href="{{ route('blog.category', $category) }}" class="ml-1 text-black underline hover:text-red-600 font-medium">
                        {{ $category->name }}{{ !$loop->last ? ',' : '' }}
                    </a>
                @endforeach
            </span>
            @endif
            
            <span class="flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {{ $post->reading_time }} min de lecture
            </span>
        </div>

        <!-- Article Content with Typography Hierarchy -->
        <div class="article-content max-w-none">
            <!-- Introduction styling -->
            <div class="text-xl font-medium leading-relaxed mb-8 p-6 bg-gray-50 border-l-2 border-red-600" style="font-family: 'Roboto', sans-serif; color: #666666;">
                {{ $post->excerpt }}<span style="color: #D52B2B;">.</span>
            </div>
            
            <!-- Main content -->
            <div class="article-body" style="font-family: 'Roboto', sans-serif;">
                {!! $post->content !!}
            </div>
        </div>

        <!-- CTA Block with Corporate Style -->
        <div class="my-12 p-8 bg-gray-50">
            <h3 class="text-2xl font-bold text-black mb-4" style="font-family: 'Roboto', sans-serif;">Besoin d'approfondir ce point précis ?</h3>
            <p class="text-black mb-6 leading-relaxed" style="font-family: 'Roboto', sans-serif;">
                Votre situation comporte des subtilités que seul un examen personnalisé peut éclaircir. Discutons-en.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="https://cal.com/maitre-hochman/30min" target="_blank" 
                   class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-6 py-3 font-semibold transition-all duration-300" 
                   style="font-family: 'Roboto', sans-serif;">
                    Prendre un RDV Stratégique
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
                <a href="mailto:bh@hochman.fr" 
                   class="inline-flex items-center border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white px-6 py-3 font-semibold transition-all duration-300" 
                   style="font-family: 'Roboto', sans-serif;">
                    Poser une question par email
                </a>
            </div>
        </div>

        <!-- Social Share -->
        <div class="my-12 p-6 bg-gray-50">
            <h4 class="text-lg font-semibold text-black mb-4" style="font-family: 'Roboto', sans-serif;">Partager cet article :</h4>
            <div class="flex space-x-4">
                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" target="_blank" 
                   class="flex items-center px-4 py-2 bg-red-600 text-white hover:bg-red-700 transition-colors duration-200" 
                   style="font-family: 'Roboto', sans-serif;">
                    <svg class="w-4 h-4 mr-2" 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.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 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>
                    LinkedIn
                </a>
                <a href="mailto:?subject={{ urlencode($post->title) }}&body={{ urlencode('Je vous recommande cet article : ' . request()->url()) }}" 
                   class="flex items-center px-4 py-2 border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-200" 
                   style="font-family: 'Roboto', sans-serif;">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                    Email
                </a>
            </div>
        </div>

        <!-- Author Block -->
        <div class="my-12 p-8 bg-white border border-gray-200">
            <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-6">
                <div class="flex-shrink-0">
                    <img src="{{ asset('images/tribunal-judiciaire.jpg') }}" alt="Boris Hochman" class="w-24 h-24 rounded-full object-cover filter grayscale">
                </div>
                <div class="flex-1">
                    <h4 class="text-xl font-bold text-black mb-2" style="font-family: 'Roboto', sans-serif;">À propos de l'auteur, Boris Hochman</h4>
                    <p class="text-black leading-relaxed" style="font-family: 'Roboto', sans-serif;">
                        Boris Hochman est un <strong>avocat au Barreau de Paris</strong> et un <strong>stratège juridique</strong> pour les dirigeants d'entreprise. Avec 20 ans d'expérience à Paris et Londres, il accompagne les entrepreneurs dans leurs défis quotidiens et leurs projets de croissance. 
                        <a href="{{ route('cabinet') }}" class="text-black underline hover:text-red-600 font-medium">En savoir plus</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- Final CTA with Black Background -->
        <div class="my-12 p-8 lg:p-12 bg-black text-white">
            <div class="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-8">
                <div class="flex-shrink-0">
                    <img src="{{ asset('images/tribunal-commerce.jpg') }}" alt="Boris Hochman" class="w-32 h-32 object-cover filter grayscale">
                </div>
                <div class="flex-1 text-center lg:text-left">
                    <h2 class="text-3xl lg:text-4xl font-bold mb-4" style="font-family: 'Roboto', sans-serif; color: #FFFFFF;">Un conseil stratégique pour votre situation ?</h2>
                    <p class="text-xl text-gray-300 mb-6 leading-relaxed" style="font-family: 'Roboto', sans-serif;">
                        Cet article vous a éclairé mais votre situation est unique et complexe. Ne restez pas avec vos questions. Réservez une consultation pour obtenir une analyse personnalisée et une stratégie sur-mesure de la part d'un <strong class="text-white">avocat d'expérience</strong>.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                        <a href="https://cal.com/maitre-hochman/30min" target="_blank" 
                           class="inline-flex items-center justify-center bg-red-600 text-white px-6 py-3 font-bold hover:bg-red-700 transition-all duration-300" 
                           style="font-family: 'Roboto', sans-serif;">
                            Prendre un RDV Stratégique
                        </a>
                        <a href="mailto:bh@hochman.fr" 
                           class="inline-flex items-center justify-center border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white px-6 py-3 font-bold transition-all duration-300" 
                           style="font-family: 'Roboto', sans-serif;">
                            Poser une question par email
                        </a>
                        <a href="tel:+33187663929" 
                           class="inline-flex items-center justify-center border-2 border-white text-white hover:bg-white hover:text-black px-6 py-3 font-bold transition-all duration-300" 
                           style="font-family: 'Roboto', sans-serif;">
                            Appeler le 01 87 66 39 29
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </article>

    <!-- Related Articles -->
    @if($relatedPosts->count() > 0)
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-black mb-12 text-center border-b-2 border-red-600 pb-4" style="font-family: 'Roboto', sans-serif;">Articles similaires</h2>
            <div class="grid md:grid-cols-3 gap-8">
                @foreach($relatedPosts as $relatedPost)
                <article class="bg-white border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300">
                    @if($relatedPost->featured_image)
                    <div class="aspect-video overflow-hidden">
                        <img src="{{ Storage::url($relatedPost->featured_image) }}" alt="{{ $relatedPost->title }}" class="w-full h-full object-cover filter grayscale">
                    </div>
                    @endif
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-black mb-3 hover:text-red-600 transition-colors duration-300" style="font-family: 'Roboto', sans-serif;">
                            <a href="{{ route('blog.show', $relatedPost) }}">
                                {{ $relatedPost->title }}
                            </a>
                        </h3>
                        <p class="text-gray-700 mb-4" style="font-family: 'Roboto', sans-serif;">{{ Str::limit($relatedPost->excerpt, 120) }}</p>
                        <div class="flex items-center text-sm text-gray-600" style="font-family: 'Roboto', sans-serif;">
                            <time>{{ $relatedPost->published_at->format('d M Y') }}</time>
                            <span class="mx-2">•</span>
                            <span>{{ $relatedPost->reading_time }} min</span>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif
</div>

<style>
/* Typography Hierarchy according to HOCHMAN Charter */
.article-content h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 48px;
    color: #000000;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.article-content h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 32px;
    color: #000000;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #D52B2B;
    padding-bottom: 0.5rem;
}

.article-content h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #000000;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-content ul, .article-content ol {
    font-family: 'Roboto', sans-serif;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0.5rem;
    color: #000000;
}

/* Citations and References */
.article-content blockquote {
    border-left: 2px solid #D52B2B;
    padding-left: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 2rem 0;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    color: #666666;
    background: transparent;
}

/* Tables */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-family: 'Roboto', sans-serif;
}

.article-content th {
    background-color: #F5F5F5;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #000000;
    padding: 0.75rem;
    border: 1px solid #DDDDDD;
}

.article-content td {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    padding: 0.75rem;
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
}

.article-content strong {
    font-weight: 600;
    color: #000000;
}

.article-content a {
    color: #000000;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.article-content a:hover {
    color: #D52B2B;
}
</style>
@endsection