@extends('layouts.app')
@section('title', 'À propos — Kania Immobilier')

@php
$colorMap = [
    'navy'   => 'linear-gradient(135deg,var(--navy),var(--navy-light))',
    'gold'   => 'linear-gradient(135deg,#C9A96E,#8B6914)',
    'green'  => 'linear-gradient(135deg,#059669,#047857)',
    'purple' => 'linear-gradient(135deg,#7C3AED,#5B21B6)',
    'red'    => 'linear-gradient(135deg,#DC2626,#991B1B)',
    'blue'   => 'linear-gradient(135deg,#0891B2,#0E7490)',
];
@endphp

@section('content')

{{-- ══ Hero ══ --}}
<section class="page-hero" style="padding:6rem 0 4rem;">
    <div class="container page-hero-inner">
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Accueil</a><span class="breadcrumb-sep">/</span>
            <span>À propos</span>
        </div>
        <div class="section-label">Notre histoire</div>
        <h1 style="color:var(--white);margin-top:.5rem;">À propos de <em style="color:var(--gold);font-style:normal;">Kania Immobilier</em></h1>
        @if($about['hero_desc'])
            <p class="page-hero-desc">{{ $about['hero_desc'] }}</p>
        @endif
    </div>
</section>

{{-- ══ Notre histoire ══ --}}
@if($about['histoire_p1'] || $about['histoire_p2'] || $about['histoire_p3'] || count($about['stats']))
<section class="section">
    <div class="container">
        <div class="about-story-grid">
            <div>
                <div class="section-label">Qui sommes-nous</div>
                <h2 class="section-title" style="margin-top:.5rem;">Un ancrage local,<br>une ambition nationale</h2>
                <div class="title-underline" style="margin:0 0 1.5rem;"></div>
                @if($about['histoire_p1'])
                    <p style="color:var(--text-light);line-height:1.85;margin-bottom:1.25rem;">{{ $about['histoire_p1'] }}</p>
                @endif
                @if($about['histoire_p2'])
                    <p style="color:var(--text-light);line-height:1.85;margin-bottom:1.25rem;">{{ $about['histoire_p2'] }}</p>
                @endif
                @if($about['histoire_p3'])
                    <p style="color:var(--text-light);line-height:1.85;">{{ $about['histoire_p3'] }}</p>
                @endif
                <div style="display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;">
                    <a href="{{ route('biens.index') }}" class="btn btn-primary">Voir nos biens</a>
                    <a href="{{ route('home') }}#contact" class="btn btn-outline">Nous contacter</a>
                </div>
            </div>

            @if(count($about['stats']))
            <div class="about-story-visual">
                @foreach($about['stats'] as $stat)
                <div class="about-story-card">
                    <div style="font-size:3.5rem;margin-bottom:.75rem;">{{ $stat['emoji'] ?? '🏛️' }}</div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:2.75rem;font-weight:700;color:var(--navy);line-height:1;">{{ $stat['number'] ?? '' }}</div>
                    <div style="font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:.35rem;">{{ $stat['label'] ?? '' }}</div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</section>
@endif

{{-- ══ Nos valeurs ══ --}}
@if(count($about['valeurs']))
<section class="section section-off-white">
    <div class="container">
        <div class="section-header">
            <div class="section-label">Ce qui nous guide</div>
            <h2 class="section-title">Nos valeurs</h2>
            <div class="title-underline"></div>
        </div>
        <div class="grid-3">
            @foreach($about['valeurs'] as $valeur)
            <div class="card" style="padding:2rem;text-align:center;">
                <div style="font-size:2.5rem;margin-bottom:1rem;">{{ $valeur['emoji'] ?? '' }}</div>
                <h3 style="font-size:1.2rem;margin-bottom:.75rem;color:var(--navy);">{{ $valeur['titre'] ?? '' }}</h3>
                <p style="color:var(--text-light);font-size:.9rem;line-height:1.7;">{{ $valeur['texte'] ?? '' }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══ Nos services ══ --}}
@if($services->count())
<section class="section" id="services">
    <div class="container">
        <div class="section-header">
            <div class="section-label">Ce que nous faisons</div>
            <h2 class="section-title">Nos {{ $services->count() }} services</h2>
            <p class="section-desc">Un accompagnement complet pour tous vos projets, de A à Z.</p>
            <div class="title-underline"></div>
        </div>
        <div class="services-grid">
            @foreach($services as $service)
            @php $gradient = $colorMap[$service->couleur] ?? $colorMap['navy']; @endphp
            <div class="service-card">
                <div class="service-card-icon" style="background:{{ $gradient }};">
                    {{ $service->emoji }}
                </div>
                <div class="service-card-body">
                    <div style="font-family:'Cormorant Garamond',serif;font-size:.8rem;font-weight:700;color:var(--text-muted);letter-spacing:.1em;margin-bottom:.35rem;">{{ $service->numero }}</div>
                    <h3 class="service-card-title">{{ $service->titre }}</h3>
                    <p class="service-card-desc">{{ Str::limit($service->description, 100) }}</p>
                    @if($service->prix)
                        <div style="font-size:.8rem;color:var(--gold-dark);font-weight:500;margin-bottom:1rem;">💰 {{ $service->prix }}</div>
                    @endif
                    <a href="{{ route('services.show', $service) }}" style="font-size:.85rem;color:var(--navy);font-weight:600;">Découvrir →</a>
                </div>
            </div>
            @endforeach
        </div>
        <div style="text-align:center;margin-top:2.5rem;">
            <a href="{{ route('services.index') }}" class="btn btn-outline">Voir tous nos services →</a>
        </div>
    </div>
</section>
@endif

{{-- ══ Notre équipe ══ --}}
@if(count($about['equipe']))
<section class="section section-cream">
    <div class="container">
        <div class="section-header">
            <div class="section-label">Les visages derrière Kania</div>
            <h2 class="section-title">Notre équipe</h2>
            <p class="section-desc">Des professionnels passionnés, engagés à faire de chaque projet une réussite.</p>
            <div class="title-underline"></div>
        </div>
        <div class="grid-3">
            @foreach($about['equipe'] as $membre)
            <div class="card" style="overflow:hidden;">
                <div style="height:180px;background:linear-gradient(135deg,var(--navy-dark),var(--navy));display:flex;align-items:center;justify-content:center;font-size:5rem;">
                    {{ $membre['emoji'] ?? '👤' }}
                </div>
                <div style="padding:1.5rem;text-align:center;">
                    <h3 style="font-size:1.15rem;margin-bottom:.25rem;">{{ $membre['nom'] ?? '' }}</h3>
                    <div class="badge badge-gold" style="margin-bottom:1rem;">{{ $membre['poste'] ?? '' }}</div>
                    <p style="color:var(--text-light);font-size:.88rem;line-height:1.7;">{{ $membre['bio'] ?? '' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══ Processus ══ --}}
@if(count($about['processus']))
<section class="section">
    <div class="container">
        <div class="section-header">
            <div class="section-label">Comment ça marche</div>
            <h2 class="section-title">Notre processus</h2>
            <div class="title-underline"></div>
        </div>
        <div class="process-steps" style="--steps: {{ count($about['processus']) }};">
            @foreach($about['processus'] as $etape)
            <div class="process-step">
                <div class="process-step-num">{{ $etape['num'] ?? sprintf('%02d', $loop->iteration) }}</div>
                <div class="process-step-icon">{{ $etape['emoji'] ?? '📌' }}</div>
                <h3 style="font-size:1.1rem;margin-bottom:.6rem;color:var(--dark);">{{ $etape['titre'] ?? '' }}</h3>
                <p style="color:var(--text-light);font-size:.88rem;line-height:1.7;">{{ $etape['desc'] ?? '' }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══ CTA ══ --}}
<section class="cta-section">
    <div class="container" style="position:relative;z-index:1;">
        <div class="section-label">Prêt à commencer ?</div>
        <h2 style="color:var(--white);margin:.75rem 0 1rem;">Parlons de votre projet</h2>
        <p style="color:rgba(255,255,255,.75);max-width:520px;margin:0 auto 2.5rem;font-size:1.05rem;line-height:1.7;">
            Notre équipe est disponible du lundi au samedi de 8h à 18h pour répondre à toutes vos questions.
        </p>
        <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
            <a href="{{ route('home') }}#contact" class="btn btn-primary btn-lg"><i class="fa-solid fa-paper-plane"></i> Nous contacter</a>
            <a href="{{ route('biens.index') }}" class="btn btn-outline-white btn-lg"><i class="fa-solid fa-house"></i> Voir les biens</a>
        </div>
    </div>
</section>

<style>
.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-story-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.about-story-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow);
    text-align: center;
    border-top: 3px solid var(--gold);
    transition: var(--transition);
}
.about-story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.service-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.service-card-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    flex-shrink: 0;
}
.service-card-body { padding: 1.75rem; flex: 1; }
.service-card-title { font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:.75rem; }
.service-card-desc  { color:var(--text-light);font-size:.9rem;line-height:1.7;margin-bottom:1.25rem; }
.service-list { list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0; }
.service-list li { font-size:.85rem;color:var(--text);padding-left:1.25rem;position:relative; }
.service-list li::before { content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700; }

.process-steps {
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), 1fr);
    gap: 2rem;
    position: relative;
}
.process-steps::before {
    content: '';
    position: absolute;
    top: 2.5rem;
    left: calc(100% / var(--steps) / 2);
    right: calc(100% / var(--steps) / 2);
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.process-step { text-align: center; position: relative; z-index: 1; }
.process-step-num {
    display: inline-block;
    font-family:'Cormorant Garamond',serif;
    font-size:.75rem;font-weight:700;letter-spacing:.1em;
    color:var(--gold);background:var(--gold-pale);
    padding:.2rem .6rem;border-radius:999px;margin-bottom:.75rem;
}
.process-step-icon {
    width:64px;height:64px;
    background:var(--white);border:3px solid var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.75rem;margin:0 auto 1rem;
    box-shadow:var(--shadow);
}

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
    .process-steps::before { display: none; }
}
@media (max-width: 768px) {
    .about-story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .services-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 480px) {
    .about-story-visual { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .process-steps { grid-template-columns: 1fr; }
}
</style>

@endsection