@extends('layouts.base')

@section('content')
<!-- Breadcrumb -->
<section class="breadcrumb-section bg-light py-3">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('homepage') }}">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Contact Header -->
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center text-center mb-5">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold text-primary mb-3">
                    <i class="fas fa-envelope me-3"></i>Contactez-nous
                </h1>
                <p class="lead text-muted">
                    Notre équipe d'experts est à votre écoute pour répondre à toutes vos questions 
                    et vous accompagner dans votre digitalisation immobilière.
                </p>
            </div>
        </div>

        <div class="row g-4">
            <!-- Carte principale de contact -->
            <div class="col-lg-8">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-body p-5">
                        <h3 class="text-primary mb-4">
                            <i class="fas fa-building me-2"></i>OCTAVE - Groupe Mozart
                        </h3>

                        <!-- Informations de contact -->
                        <div class="row g-4">
                            <!-- Email -->
                            <div class="col-md-6">
                                <div class="contact-item p-4 bg-light rounded-3 h-100">
                                    <div class="d-flex align-items-start">
                                        <div class="contact-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                            <i class="fas fa-envelope fa-lg"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h5 class="mb-2">Email</h5>
                                            <a href="mailto:marketing@mozartgroupe.fr" class="text-primary fw-semibold text-decoration-none">
                                                marketing@mozartgroupe.fr
                                            </a>
                                            <p class="text-muted small mb-0 mt-2">
                                                <i class="fas fa-clock me-1"></i>
                                                Réponse sous 24h ouvrées
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Téléphone -->
                            <div class="col-md-6">
                                <div class="contact-item p-4 bg-light rounded-3 h-100">
                                    <div class="d-flex align-items-start">
                                        <div class="contact-icon bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                            <i class="fas fa-phone fa-lg"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h5 class="mb-2">Téléphone</h5>
                                            <a href="tel:+33422533411" class="text-success fw-semibold text-decoration-none d-block mb-1">
                                                04 22 53 34 11
                                            </a>
                                            <p class="text-muted small mb-0">
                                                <i class="fas fa-info-circle me-1"></i>
                                                Prix d'un appel local
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Adresse -->
                            <div class="col-12">
                                <div class="contact-item p-4 bg-light rounded-3">
                                    <div class="d-flex align-items-start">
                                        <div class="contact-icon bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                            <i class="fas fa-map-marker-alt fa-lg"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h5 class="mb-2">Adresse</h5>
                                            <p class="mb-1 fw-semibold">Groupe Mozart</p>
                                            <p class="text-muted mb-0">
                                                Siège social<br>
                                                France
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Horaires -->
                        <div class="mt-4 p-4 bg-info bg-opacity-10 rounded-3">
                            <h5 class="text-primary mb-3">
                                <i class="fas fa-clock me-2"></i>Horaires d'ouverture
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1">
                                        <i class="fas fa-calendar-week me-2 text-primary"></i>
                                        <strong>Lundi - Vendredi :</strong>
                                    </p>
                                    <p class="text-muted ms-4">9h00 - 18h00</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1">
                                        <i class="fas fa-calendar-times me-2 text-muted"></i>
                                        <strong>Samedi - Dimanche :</strong>
                                    </p>
                                    <p class="text-muted ms-4">Fermé</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar d'informations complémentaires -->
            <div class="col-lg-4">
                <!-- Besoin d'aide -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <div class="text-center mb-3">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="fas fa-question fa-3x text-light"></i>
                            </div>
                            <h5 class="fw-bold">Besoin d'aide ?</h5>
                        </div>
                        <p class="text-muted text-center mb-3">
                            Notre équipe est disponible pour répondre à toutes vos questions sur OCTAVE.
                        </p>
                        <div class="d-grid gap-2">
                            <a href="mailto:marketing@mozartgroupe.fr" class="btn btn-warning">
                                <i class="fas fa-envelope me-2"></i>Envoyer un email
                            </a>
                            <a href="tel:+33422533411" class="btn btn-outline-success">
                                <i class="fas fa-phone me-2"></i>Appeler
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Demande de démonstration -->
                <div class="card border-0 shadow-sm bg-gradient-primary text-white">
                    <div class="card-body p-4">
                        <div class="text-center">
                            <div class="bg-white bg-opacity-25 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="fas fa-rocket fa-3x text-white"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Demander une démo</h5>
                            <p class="opacity-75 mb-4">
                                Découvrez OCTAVE en action avec une démonstration personnalisée.
                            </p>
                            <a href="mailto:marketing@mozartgroupe.fr?subject=Demande de démonstration OCTAVE" class="btn btn-light">
                                <i class="fas fa-calendar-check me-2"></i>Planifier une démo
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section Pourquoi nous contacter -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="card border-0 bg-light">
                    <div class="card-body p-5">
                        <h3 class="text-center text-primary mb-4">Pourquoi nous contacter ?</h3>
                        <div class="row g-4">
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
                                        <i class="fas fa-users fa-2x text-light"></i>
                                    </div>
                                    <h5 class="mb-2">Découvrir OCTAVE</h5>
                                    <p class="text-muted mb-0">
                                        Obtenez des informations détaillées sur notre plateforme et ses fonctionnalités.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
                                        <i class="fas fa-tags fa-2x text-success"></i>
                                    </div>
                                    <h5 class="mb-2">Devenir partenaire</h5>
                                    <p class="text-muted mb-0">
                                        Rejoignez l'écosystème OCTAVE et développez votre activité avec nous.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <div class="bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
                                        <i class="fas fa-life-ring fa-2x text-info"></i>
                                    </div>
                                    <h5 class="mb-2">Support technique</h5>
                                    <p class="text-muted mb-0">
                                        Bénéficiez de l'assistance de nos experts pour vos questions techniques.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Retour à l'accueil -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <a href="{{ route('homepage') }}" class="btn btn-outline-primary btn-lg">
                    <i class="fas fa-arrow-left me-2"></i>Retour à l'accueil
                </a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .contact-item {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .contact-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .contact-icon {
        flex-shrink: 0;
    }
</style>
@endpush