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

@section('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);
        }
    }
@endphp
{{-- Hero --}}
<section class="{{ $classicBgUrl !== '' ? 'relative min-h-[calc(100dvh-5rem)] flex flex-col justify-center overflow-hidden' : 'py-24 md:py-32' }}"
    @if($classicBgUrl !== '')
        style="background-image: url('{{ $classicBgUrl }}'); background-size: {{ $classicBgSize }}; background-position: center; background-repeat: no-repeat;"
    @endif
>
    @if($classicBgUrl !== '')
        <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 {{ $classicBgUrl !== '' ? 'relative z-10' : '' }}">
        <div class="{{ $classicBgUrl !== '' ? 'max-w-2xl' : '' }}">
            @if($classicBgUrl !== '' && ($classic_hero_eyebrow_enabled ?? true) && !empty(trim($classic_hero_eyebrow ?? '')))
                <span class="inline-block text-xs font-semibold tracking-[0.2em] uppercase text-white/80 mb-6 border-l-2 border-white/60 pl-4">{{ $classic_hero_eyebrow }}</span>
            @endif
            <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight {{ $classicBgUrl !== '' ? 'text-white' : 'text-slate-900' }}" style="{{ $classicBgUrl !== '' ? 'text-shadow: 0 2px 24px rgba(0,0,0,0.4);' : '' }}">
                {{ __('Bienvenue sur') }}<br>
                <span class="{{ $classicBgUrl !== '' ? 'text-white/90' : 'text-slate-600' }}">{{ $site_name ?? __('notre site') }}</span>
            </h1>
            <p class="mt-6 text-lg md:text-xl max-w-xl leading-relaxed {{ $classicBgUrl !== '' ? 'text-white/90' : 'text-slate-600' }}" style="{{ $classicBgUrl !== '' ? 'text-shadow: 0 1px 12px rgba(0,0,0,0.3);' : '' }}">
                {{ __('Un site vitrine moderne et épuré. Découvrez nos services et prenez contact pour vos projets.') }}
            </p>
            <div class="mt-10 flex flex-wrap gap-4">
                <a href="#services" class="{{ $classicBgUrl !== '' ? '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 {{ $classicBgUrl !== '' ? '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="{{ $classicBgUrl !== '' ? '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>
            </div>
        </div>
    </div>
    @if($classicBgUrl !== '')
        <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>

{{-- Présentation --}}
<section class="bg-slate-50 py-24">
    <div class="max-w-5xl mx-auto px-6">
        <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">{{ __('Qui sommes-nous ?') }}</h2>
        <div class="grid md:grid-cols-2 gap-12">
            <p class="text-slate-600 leading-relaxed">
                {{ __('Nous accompagnons les entreprises dans leur transformation digitale. Notre approche combine stratégie, design et technique pour créer des expériences web qui convertissent.') }}
            </p>
            <p class="text-slate-600 leading-relaxed">
                {{ __('Que vous ayez besoin d\'un site vitrine, d\'une refonte ou d\'une application sur mesure, notre équipe est à votre écoute pour concrétiser vos projets.') }}
            </p>
        </div>
    </div>
</section>

{{-- Services --}}
<section id="services" class="py-24">
    <div class="max-w-5xl mx-auto px-6">
        <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">{{ __('Nos services') }}</h2>
        <p class="text-slate-600 mb-12 max-w-2xl">{{ __('Des solutions adaptées à vos besoins et à votre budget.') }}</p>
        <div class="grid md:grid-cols-3 gap-8">
            <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">01</div>
                <h3 class="font-semibold text-slate-900 mb-2">{{ __('Sites vitrines') }}</h3>
                <p class="text-slate-600 text-sm leading-relaxed">{{ __('Présentez votre activité avec un site moderne, responsive et optimisé pour le référencement.') }}</p>
            </div>
            <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">02</div>
                <h3 class="font-semibold text-slate-900 mb-2">{{ __('Refonte web') }}</h3>
                <p class="text-slate-600 text-sm leading-relaxed">{{ __('Modernisez votre site existant avec une nouvelle identité visuelle et des performances améliorées.') }}</p>
            </div>
            <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">03</div>
                <h3 class="font-semibold text-slate-900 mb-2">{{ __('Conseil & accompagnement') }}</h3>
                <p class="text-slate-600 text-sm leading-relaxed">{{ __('Stratégie digitale, UX et optimisation pour atteindre vos objectifs business.') }}</p>
            </div>
        </div>
    </div>
</section>

{{-- CTA Contact --}}
<section id="contact" class="bg-slate-900 text-white py-24">
    <div class="max-w-5xl mx-auto px-6 text-center">
        <h2 class="text-2xl md:text-3xl font-bold mb-4">{{ __('Prêt à démarrer ?') }}</h2>
        <p class="text-slate-300 mb-8 max-w-xl mx-auto">{{ __('Discutons de votre projet. Nous répondons sous 24h.') }}</p>
        <a href="/contact" 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">
            {{ __('Nous contacter') }}
        </a>
    </div>
</section>
@endsection
