@extends('themes.classic.layouts.app')

@section('title', $page->title ?? ($site_name ?? 'Accueil'))

@section('content')
@php
    $hasClassicBackground = !empty($classic_background_image ?? null);
    $classicBgSize = in_array(($classic_background_size ?? 'cover'), ['cover', 'contain', 'auto'], true) ? $classic_background_size : 'cover';
    $classicBgOverlay = max(0, min(80, (int) ($classic_background_overlay ?? 35)));
    $classicBgUrl = '';
    if ($hasClassicBackground) {
        if (str_starts_with($classic_background_image, 'http://') || str_starts_with($classic_background_image, 'https://') || str_starts_with($classic_background_image, '/')) {
            $classicBgUrl = $classic_background_image;
        } else {
            $classicBgUrl = asset('storage/'.$classic_background_image);
        }
    }
    $resolveSectionBg = static function ($configuredColor, string $fallbackColor): string {
        $color = trim((string) ($configuredColor ?? $fallbackColor));
        if ($color === '') {
            $color = $fallbackColor;
        }
        return $color;
    };
    $servicesIdAdded = false;
@endphp
@foreach(\App\Models\Page::filterSectionsForDisplay($page->sections ?? []) as $section)
    @php
        $type = $section['type'] ?? 'text';
        $d = $section['data'] ?? [];
        $heroWithBackground = $type === 'hero' && $loop->first && ($page->is_home ?? false) && $hasClassicBackground && $classicBgUrl !== '';
        $heroSectionStyle = $heroWithBackground
            ? "background-image: url('{$classicBgUrl}'); background-size: {$classicBgSize}; background-position: center; background-repeat: no-repeat;"
            : 'background-color: '.$resolveSectionBg($d['bg_color'] ?? null, '#ffffff');
    @endphp
    @if($type === 'hero')
        @php
            $heroTitle = trim($d['title'] ?? '');
            $heroSubtitle = trim($d['subtitle'] ?? '');
            $useDefaultHero = $heroTitle === '' && ($page->is_home ?? false);
            $heroDisplayTitle = $heroTitle !== '' ? $heroTitle : __('Bienvenue');
            $heroDisplaySubtitle = $heroSubtitle !== '' ? $heroSubtitle : __('Un site vitrine moderne et épuré. Découvrez nos services et prenez contact pour vos projets.');
            $heroEyebrow = trim($classic_hero_eyebrow ?? '');
        @endphp
        <section class="w-full {{ $heroWithBackground ? 'relative min-h-[calc(100dvh-5rem)] flex flex-col justify-center overflow-hidden' : 'py-24 md:py-32' }}" style="{{ $heroSectionStyle }}">
            @if($heroWithBackground)
                <div class="absolute inset-0" style="background: linear-gradient(105deg, rgba(0,0,0,{{ $classicBgOverlay / 100 * 0.95 }}) 0%, rgba(0,0,0,{{ $classicBgOverlay / 100 * 0.6 }}) 45%, rgba(0,0,0,{{ $classicBgOverlay / 100 * 0.2 }}) 100%);"></div>
            @endif
            <div class="w-full max-w-6xl mx-auto px-6 lg:px-16 {{ $heroWithBackground ? 'relative z-10' : '' }}">
                <div class="{{ $heroWithBackground ? 'max-w-2xl' : '' }}">
                    @if(($classic_hero_eyebrow_enabled ?? true) && $heroEyebrow !== '')
                        <span class="inline-block text-xs font-semibold tracking-[0.2em] uppercase mb-6 border-l-2 pl-4 {{ $heroWithBackground ? 'text-white/80 border-white/60' : 'text-slate-500 border-slate-300' }}">{{ $heroEyebrow }}</span>
                    @endif
                    <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight {{ $heroWithBackground ? 'text-white' : 'text-slate-900' }}" style="{{ $heroWithBackground ? 'text-shadow: 0 2px 24px rgba(0,0,0,0.4);' : '' }}">
                        @if($useDefaultHero)
                            {{ __('Bienvenue sur') }}<br>
                            <span class="{{ $heroWithBackground ? 'text-white/90' : 'text-slate-600' }}">{{ $site_name ?? __('notre site') }}</span>
                        @else
                            {{ $heroDisplayTitle }}
                        @endif
                    </h1>
                    <div class="mt-6 text-lg md:text-xl max-w-xl leading-relaxed {{ $heroWithBackground ? 'text-white/90 prose-invert' : 'text-slate-600' }} prose prose-lg max-w-none" style="{{ $heroWithBackground ? 'text-shadow: 0 1px 12px rgba(0,0,0,0.3);' : '' }}">
                        {!! \App\Support\SafeHtml::richText($heroDisplaySubtitle) !!}
                    </div>
                    <div class="mt-10 flex flex-wrap gap-4">
                        @if(!empty($d['cta_text']))
                            <a href="{{ $d['cta_url'] ?? '#services' }}" class="{{ $heroWithBackground ? 'group inline-flex items-center gap-2 px-8 py-4 bg-white text-slate-900 rounded-xl font-semibold shadow-lg shadow-black/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-200' : 'inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800 transition' }}">
                                {{ $d['cta_text'] }}
                                <svg class="w-4 h-4 {{ $heroWithBackground ? 'group-hover:translate-x-1 transition-transform' : '' }}" 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"/></svg>
                            </a>
                        @else
                            <a href="#services" class="{{ $heroWithBackground ? 'group inline-flex items-center gap-2 px-8 py-4 bg-white text-slate-900 rounded-xl font-semibold shadow-lg shadow-black/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-200' : 'inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800 transition' }}">
                                {{ __('Nos services') }}
                                <svg class="w-4 h-4 {{ $heroWithBackground ? 'group-hover:translate-x-1 transition-transform' : '' }}" 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"/></svg>
                            </a>
                            <a href="#contact" class="{{ $heroWithBackground ? 'inline-flex items-center gap-2 px-6 py-3 border border-white/50 text-white rounded-xl font-medium hover:bg-white/10 transition' : 'inline-flex items-center gap-2 px-6 py-3 border border-slate-200 rounded-lg font-medium hover:bg-slate-50 transition text-slate-700' }}">
                                {{ __('Nous contacter') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @if($heroWithBackground)
                <a href="#services" class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/60 hover:text-white/90 transition-colors">
                    <span class="text-xs font-medium tracking-widest uppercase">Découvrir</span>
                    <svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                </a>
            @endif
        </section>
    @elseif($type === 'text')
        <section class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#f8fafc') }}">
            <div class="max-w-5xl mx-auto px-6">
                <div class="max-w-none leading-relaxed text-slate-600 prose prose-slate">
                    {!! \App\Support\SafeHtml::richText($d['content'] ?? '') !!}
                </div>
            </div>
        </section>
    @elseif($type === 'image')
        <section class="w-full py-16" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#ffffff') }}">
            <div class="max-w-5xl mx-auto px-6">
                @if(!empty($d['image']))
                    @php $imgSrc = str_starts_with($d['image'], 'http') || str_starts_with($d['image'], '/') ? $d['image'] : asset('storage/'.$d['image']); @endphp
                    <img src="{{ $imgSrc }}" alt="{{ $d['alt'] ?? '' }}" class="w-full rounded-2xl object-cover max-h-[500px]">
                @endif
            </div>
        </section>
    @elseif($type === 'text_image')
        @php
            $imgSrc = null;
            if (!empty($d['image'])) {
                $imgSrc = str_starts_with($d['image'], 'http') || str_starts_with($d['image'], '/') ? $d['image'] : asset('storage/'.$d['image']);
            }
            $layoutRight = ($d['layout'] ?? 'left') === 'right';
        @endphp
        <section class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#f8fafc') }}">
            <div class="max-w-6xl mx-auto px-6">
                <div class="grid md:grid-cols-2 gap-12 md:gap-16 items-center {{ $layoutRight ? '' : '' }}">
                    @if($layoutRight)
                    <div class="order-2 md:order-1">
                        @if(!empty($d['title']))<h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">{{ $d['title'] }}</h2>@endif
                        <div class="text-slate-600 leading-relaxed prose prose-slate max-w-none">{!! \App\Support\SafeHtml::richText($d['content'] ?? '') !!}</div>
                        @if(!empty($d['cta_text']))
                        <a href="{{ $d['cta_url'] ?? '#' }}" class="inline-flex items-center gap-2 mt-6 px-6 py-3 bg-slate-900 text-white rounded-xl font-medium hover:bg-slate-800 transition">
                            {{ $d['cta_text'] }}
                            <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                        @endif
                    </div>
                    <div class="order-1 md:order-2">
                        @if($imgSrc)
                        <img src="{{ $imgSrc }}" alt="{{ $d['alt'] ?? '' }}" class="w-full rounded-2xl object-cover aspect-[4/3] shadow-lg">
                        @else
                        <div class="w-full aspect-[4/3] rounded-2xl bg-slate-200 flex items-center justify-center text-slate-400 text-6xl">🖼</div>
                        @endif
                    </div>
                    @else
                    <div>
                        @if($imgSrc)
                        <img src="{{ $imgSrc }}" alt="{{ $d['alt'] ?? '' }}" class="w-full rounded-2xl object-cover aspect-[4/3] shadow-lg">
                        @else
                        <div class="w-full aspect-[4/3] rounded-2xl bg-slate-200 flex items-center justify-center text-slate-400 text-6xl">🖼</div>
                        @endif
                    </div>
                    <div>
                        @if(!empty($d['title']))<h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">{{ $d['title'] }}</h2>@endif
                        <div class="text-slate-600 leading-relaxed prose prose-slate max-w-none">{!! \App\Support\SafeHtml::richText($d['content'] ?? '') !!}</div>
                        @if(!empty($d['cta_text']))
                        <a href="{{ $d['cta_url'] ?? '#' }}" class="inline-flex items-center gap-2 mt-6 px-6 py-3 bg-slate-900 text-white rounded-xl font-medium hover:bg-slate-800 transition">
                            {{ $d['cta_text'] }}
                            <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </section>
    @elseif($type === 'features')
        <section @if(!$servicesIdAdded) id="services" @endif class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#ffffff') }}">
            @php $servicesIdAdded = true; @endphp
            <div class="max-w-5xl mx-auto px-6">
                @if(!empty($d['title']))
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12">{{ $d['title'] }}</h2>
                @endif
                <div class="grid md:grid-cols-3 gap-8">
                    @foreach($d['items'] ?? [] as $i => $item)
                        <div class="p-6 rounded-2xl border border-slate-100 hover:border-slate-200 hover:shadow-lg transition">
                            <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center mb-4 text-slate-600 font-bold">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</div>
                            <h3 class="font-semibold text-slate-900 mb-2">{{ $item['title'] ?? '' }}</h3>
                            <div class="text-slate-600 text-sm leading-relaxed prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText($item['text'] ?? '') !!}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'stats')
        <section class="w-full py-20 text-white" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#0f172a') }}">
            <div class="max-w-5xl mx-auto px-6">
                @if(!empty($d['title']))
                    <h2 class="text-2xl md:text-3xl font-bold text-center mb-12">{{ $d['title'] }}</h2>
                @endif
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
                    @foreach($d['items'] ?? [] as $item)
                        @if(!empty($item['number']) || !empty($item['label']))
                            <div class="text-center">
                                <div class="text-4xl md:text-5xl font-bold mb-2">{{ $item['number'] ?? '—' }}</div>
                                <div class="text-white/80 text-sm font-medium uppercase tracking-wider">{{ $item['label'] ?? '' }}</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'testimonials')
        <section class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#ffffff') }}">
            <div class="max-w-5xl mx-auto px-6">
                @if(!empty($d['title']))
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
                @endif
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($d['items'] ?? [] as $item)
                        @if(!empty($item['text']))
                            <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100">
                                <div class="text-slate-600 italic mb-6 prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText($item['text']) !!}</div>
                                <div class="font-semibold text-slate-900">{{ $item['name'] ?? 'Anonyme' }}</div>
                                <div class="text-sm text-slate-500">{{ $item['role'] ?? '' }}</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'team')
        <section class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#ffffff') }}">
            <div class="max-w-5xl mx-auto px-6">
                @if(!empty($d['title']))
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
                @endif
                <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
                    @foreach($d['items'] ?? [] as $item)
                        @if(!empty($item['name']))
                            <div class="text-center group">
                                <div class="aspect-square rounded-2xl bg-slate-200 mb-4 overflow-hidden">
                                    @if(!empty($item['image']))
                                        <img src="{{ str_starts_with($item['image'], 'http') || str_starts_with($item['image'], '/') ? $item['image'] : asset('storage/'.$item['image']) }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-4xl text-slate-400 font-bold">{{ mb_substr($item['name'], 0, 1) }}</div>
                                    @endif
                                </div>
                                <h3 class="font-semibold text-slate-900">{{ $item['name'] }}</h3>
                                <p class="text-sm text-slate-500">{{ $item['role'] ?? '' }}</p>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'faq')
        <section class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#f8fafc') }}">
            <div class="max-w-3xl mx-auto px-6">
                @if(!empty($d['title']))
                    <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
                @endif
                <div class="space-y-4">
                    @foreach($d['items'] ?? [] as $item)
                        @if(!empty($item['question']))
                            <details class="group bg-white rounded-xl border border-slate-200 overflow-hidden">
                                <summary class="px-6 py-4 font-semibold text-slate-900 cursor-pointer list-none flex items-center justify-between">
                                    {{ $item['question'] }}
                                    <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </summary>
                                <div class="px-6 pb-4 pt-0 text-slate-600 leading-relaxed border-t border-slate-100 prose prose-slate prose-sm max-w-none">
                                    {!! \App\Support\SafeHtml::richText($item['answer'] ?? '') !!}
                                </div>
                            </details>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'cta')
        <section class="w-full py-24 text-white" style="background-color: {{ $d['bg_color'] ?? '#0f172a' }}">
            <div class="max-w-5xl mx-auto px-6 text-center">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">{{ $d['title'] ?? 'Prêt à démarrer ?' }}</h2>
                <div class="text-white/80 mb-8 max-w-xl mx-auto prose prose-invert prose-lg max-w-none">{!! \App\Support\SafeHtml::richText($d['text'] ?? '') !!}</div>
                @if(!empty($d['button_text']))
                    <a href="{{ $d['button_url'] ?? '#' }}" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-slate-900 rounded-lg font-semibold hover:bg-slate-100 transition">
                        {{ $d['button_text'] }}
                    </a>
                @endif
            </div>
        </section>
    @elseif(in_array($type, ['gallery', 'pricing', 'timeline', 'video', 'logos', 'carousel', 'animations']))
        @include('partials.sections.'.$type, ['d' => $d])
    @elseif($type === 'contact')
        <section id="contact" class="w-full py-24" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, '#f8fafc') }}">
            <div class="max-w-2xl mx-auto px-6">
                <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">{{ $d['title'] ?? 'Contact' }}</h2>
                <div class="text-slate-600 mb-8 prose prose-slate max-w-none">{!! \App\Support\SafeHtml::richText($d['text'] ?? '') !!}</div>
                @if(session('contact_success'))
                    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl">
                        {{ session('contact_success') }}
                    </div>
                @endif
                <form method="POST" action="{{ route('contact.store') }}" class="space-y-4">
                    @csrf
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Nom *</label>
                            <input type="text" name="name" value="{{ old('name') }}" required class="w-full border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-slate-900 focus:border-slate-900" placeholder="Votre nom">
                            @error('name')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Email *</label>
                            <input type="email" name="email" value="{{ old('email') }}" required class="w-full border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-slate-900 focus:border-slate-900" placeholder="votre@email.fr">
                            @error('email')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    @if($d['show_phone'] ?? true)
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Téléphone</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" class="w-full border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-slate-900 focus:border-slate-900" placeholder="06 12 34 56 78">
                            @error('phone')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>
                    @endif
                    @if($d['show_subject'] ?? true)
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Sujet</label>
                            <input type="text" name="subject" value="{{ old('subject') }}" class="w-full border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-slate-900 focus:border-slate-900" placeholder="Objet de votre message">
                            @error('subject')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                        </div>
                    @endif
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Message *</label>
                        <textarea name="message" rows="5" required class="w-full border border-slate-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-slate-900 focus:border-slate-900" placeholder="Votre message">{{ old('message') }}</textarea>
                        @error('message')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    @include('partials.captcha-widget', ['context' => 'contact'])
                    <button type="submit" class="w-full sm:w-auto px-8 py-4 bg-slate-900 text-white rounded-xl font-semibold hover:bg-slate-800 transition">
                        Envoyer le message
                    </button>
                </form>
            </div>
        </section>
    @endif
@endforeach
@endsection
