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

@section('title', $page->title ?? ($site_name ?? 'Saïjana'))

@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;
    $saijanaCream = '#f5ebe0';
    $saijanaCharcoal = '#3d2a1f';
@endphp
@foreach(\App\Models\Page::filterSectionsForDisplay($page->sections ?? []) as $section)
    @php
        $type = $section['type'] ?? 'text';
        $d = $section['data'] ?? [];
        $isHomeHero = $type === 'hero' && $loop->first && ($page->is_home ?? false);
        $heroWithImage = $isHomeHero && $hasClassicBackground && $classicBgUrl !== '';
        $heroBgColor = $isHomeHero ? $saijanaCream : $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream);
    @endphp
    @if($type === 'hero')
        @php
            $heroTitle = trim($d['title'] ?? '');
            $heroSubtitle = trim($d['subtitle'] ?? '');
            $heroDisplayTitle = $heroTitle !== '' ? $heroTitle : __('Bijoux en micro-macramé');
            $heroDisplaySubtitle = $heroSubtitle !== '' ? $heroSubtitle : __('et atelier créatif en Haute-Savoie. Faits main avec soin et amour.');
            $heroEyebrow = trim($classic_hero_eyebrow ?? '');
        @endphp
        <section class="w-full relative min-h-[calc(100dvh-5rem)] flex flex-col justify-center overflow-hidden py-16 sm:py-24 md:py-16" style="background-color: {{ $heroBgColor }};">
            <div class="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-16 relative z-10 min-w-0">
                <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center {{ !$heroWithImage ? 'lg:grid-cols-1' : '' }}">
                    <div class="{{ !$heroWithImage ? '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 text-saijana-brown border-primary-500">{{ $heroEyebrow }}</span>
                    @endif
                    <h1 class="font-display text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight text-saijana-charcoal">
                        {{ is_string($heroDisplayTitle) ? __($heroDisplayTitle) : $heroDisplayTitle }}
                    </h1>
                    <div class="mt-6 text-lg md:text-xl max-w-xl leading-relaxed text-saijana-brown prose prose-slate prose-lg max-w-none">{!! \App\Support\SafeHtml::richText($heroSubtitle !== '' ? $heroSubtitle : __('et atelier créatif en Haute-Savoie. Faits main avec soin et amour.')) !!}</div>
                    <div class="mt-10 flex flex-wrap gap-4">
                        @if(!empty($d['cta_text']))
                            <a href="{{ $d['cta_url'] ?? '#services' }}" class="group inline-flex items-center gap-2 px-8 py-4 bg-primary-600 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all">
                                {{ __($d['cta_text']) }}
                                <svg class="w-4 h-4 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="{{ route('ecommerce.index') }}" class="group inline-flex items-center gap-2 px-8 py-4 bg-primary-600 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl hover:scale-[1.02] transition-all">
                                {{ __('Voir la boutique') }}
                                <svg class="w-4 h-4 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="inline-flex items-center gap-2 px-6 py-3 border-2 border-primary-600 text-primary-600 rounded-xl font-medium hover:bg-primary-50 transition">
                                {{ __('Nous contacter') }}
                            </a>
                        @endif
                    </div>
                    </div>
                    @if($heroWithImage)
                    <div>
                        <img src="{{ $classicBgUrl }}" alt="{{ $heroDisplayTitle }}" class="w-full max-h-[70vh] object-contain rounded-2xl shadow-xl">
                    </div>
                    @endif
                </div>
            </div>
            <a href="#services" class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-saijana-brown/60 hover:text-primary-600 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>
        </section>
    @elseif($type === 'text')
        <section class="w-full py-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                <div class="max-w-none leading-relaxed text-saijana-brown prose prose-slate max-w-none">{!! \App\Support\SafeHtml::richText($d['content'] ?? '') !!}</div>
            </div>
        </section>
    @elseif($type === 'image')
        <section class="w-full py-16 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                @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-contain 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-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 min-w-0">
                <div class="grid md:grid-cols-2 gap-12 md:gap-16 items-center">
                    @if($layoutRight)
                    <div class="order-2 md:order-1">
                        @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal mb-6">{{ __($d['title']) }}</h2>@endif
                        <div class="text-saijana-brown leading-relaxed max-w-none 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-primary-600 text-white rounded-xl font-medium hover:bg-primary-700 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-contain aspect-[4/3] shadow-lg">@else<div class="w-full aspect-[4/3] rounded-2xl bg-saijana-sand flex items-center justify-center text-saijana-brown/50 text-6xl">🖼</div>@endif
                    </div>
                    @else
                    <div>
                        @if($imgSrc)<img src="{{ $imgSrc }}" alt="{{ __($d['alt'] ?? '') }}" class="w-full rounded-2xl object-contain aspect-[4/3] shadow-lg">@else<div class="w-full aspect-[4/3] rounded-2xl bg-saijana-sand flex items-center justify-center text-saijana-brown/50 text-6xl">🖼</div>@endif
                    </div>
                    <div>
                        @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal mb-6">{{ __($d['title']) }}</h2>@endif
                        <div class="text-saijana-brown leading-relaxed max-w-none 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-primary-600 text-white rounded-xl font-medium hover:bg-primary-700 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, $saijanaCream) }}">
            @php $servicesIdAdded = true; @endphp
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal 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-saijana-sand hover:border-primary-500/30 hover:shadow-lg transition">
                            <div class="w-12 h-12 rounded-xl bg-primary-100 flex items-center justify-center mb-4 text-primary-600 font-bold">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</div>
                            <h3 class="font-semibold text-saijana-charcoal mb-2">{{ __($item['title'] ?? '') }}</h3>
                            <div class="text-saijana-brown 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-16 sm:py-20 text-saijana-cream overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCharcoal) }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                @if(!empty($d['title']))<h2 class="font-display 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-saijana-cream/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-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal 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-saijana-cream border border-saijana-sand">
                                <div class="text-saijana-brown italic mb-6 prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText($item['text']) !!}</div>
                                <div class="font-semibold text-saijana-charcoal">{{ __($item['name'] ?? 'Anonyme') }}</div>
                                <div class="text-sm text-saijana-brown/70">{{ __($item['role'] ?? '') }}</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'team')
        <section class="w-full py-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 min-w-0">
                @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal 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-saijana-sand 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-contain group-hover:scale-105 transition duration-300">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-4xl text-primary-500 font-bold font-display">{{ mb_substr($item['name'], 0, 1) }}</div>
                                    @endif
                                </div>
                                <h3 class="font-semibold text-saijana-charcoal">{{ __($item['name']) }}</h3>
                                <p class="text-sm text-saijana-brown/70">{{ __($item['role'] ?? '') }}</p>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @elseif($type === 'faq')
        <section class="w-full py-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-3xl mx-auto px-4 sm:px-6 min-w-0">
                @if(!empty($d['title']))<h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal 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-saijana-sand overflow-hidden">
                                <summary class="px-6 py-4 font-semibold text-saijana-charcoal cursor-pointer list-none flex items-center justify-between">
                                    {{ __($item['question']) }}
                                    <svg class="w-5 h-5 text-saijana-brown/50 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-saijana-brown leading-relaxed border-t border-saijana-sand/50 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-16 sm:py-24 text-saijana-cream overflow-x-hidden" style="background-color: {{ $d['bg_color'] ?? $saijanaCharcoal }}">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 text-center min-w-0">
                <h2 class="font-display text-2xl md:text-3xl font-bold mb-4">{{ __($d['title'] ?? 'Prête à créer ?') }}</h2>
                <div class="text-saijana-cream/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-primary-500 text-white rounded-xl font-semibold hover:bg-primary-600 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-16 sm:py-24 overflow-x-hidden" style="background-color: {{ $resolveSectionBg($d['bg_color'] ?? null, $saijanaCream) }}">
            <div class="max-w-2xl mx-auto px-4 sm:px-6 min-w-0">
                <h2 class="font-display text-2xl md:text-3xl font-bold text-saijana-charcoal mb-4">{{ __($d['title'] ?? 'Contact') }}</h2>
                <div class="text-saijana-brown 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-saijana-charcoal mb-1">Nom *</label>
                            <input type="text" name="name" value="{{ old('name') }}" required class="w-full border border-saijana-sand rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 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-saijana-charcoal mb-1">Email *</label>
                            <input type="email" name="email" value="{{ old('email') }}" required class="w-full border border-saijana-sand rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 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-saijana-charcoal mb-1">Téléphone</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" class="w-full border border-saijana-sand rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 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-saijana-charcoal mb-1">Sujet</label>
                            <input type="text" name="subject" value="{{ old('subject') }}" class="w-full border border-saijana-sand rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 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-saijana-charcoal mb-1">Message *</label>
                        <textarea name="message" rows="5" required class="w-full border border-saijana-sand rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" 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-primary-600 text-white rounded-xl font-semibold hover:bg-primary-700 transition">Envoyer le message</button>
                </form>
            </div>
        </section>
    @endif
@endforeach
@endsection
