@extends('layouts.app')

@section('title', $guide['meta_title'])
@section('description', $guide['meta_description'])

@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">
            <img src="{{ $guide['banner_image'] }}" 
                 alt="{{ $guide['banner_alt'] }}" 
                 class="w-full h-full object-cover filter grayscale">
            <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;">
                    {{ $guide['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;">
                @foreach($guide['breadcrumb'] as $item)
                    <li>
                        @if($item['route'])
                            <a href="{{ route($item['route']) }}" class="text-black underline hover:text-red-600">{{ $item['name'] }}</a>
                        @else
                            <span class="text-black">{{ $item['name'] }}</span>
                        @endif
                    </li>
                    @if(!$loop->last)
                        <li><span class="mx-2">/</span></li>
                    @endif
                @endforeach
            </ol>
        </nav>

        <!-- Introduction -->
        <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;">
            {{ $guide['introduction'] }}<span style="color: #D52B2B;">.</span>
        </div>

        <!-- Article Content -->
        <div class="article-content max-w-none">
            @include($guide['content_file'])
        </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>
    </article>
</div>

<!-- CSS Styles -->
<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;
}

.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;
}

.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