@extends('layouts.base')

@section('content')
<!-- Hero Section -->
<section class="hero-section bg-gradient-primary text-white py-5 mb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-4 fw-bold mb-4 text-primary">
                    <i class="fas fa-balance-scale me-3"></i>Mentions Légales
                </h1>
                <p class="lead mb-0">
                    Informations légales concernant la plateforme OCTAVE
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                
                <!-- Éditeur du site -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-building me-2"></i>Éditeur du site
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="text-primary">OCTAVE</h5>
                                <p class="mb-2">
                                    <strong>Raison sociale :</strong> OCTAVE SAS<br>
                                    <strong>Siège social :</strong> [Adresse complète]<br>
                                    <strong>Téléphone :</strong> [Numéro de téléphone]<br>
                                    <strong>Email :</strong> contact@octave.fr
                                </p>
                            </div>
                            <div class="col-md-6">
                                <h5 class="text-primary">Informations légales</h5>
                                <p class="mb-2">
                                    <strong>SIRET :</strong> [Numéro SIRET]<br>
                                    <strong>RCS :</strong> [Ville] [Numéro RCS]<br>
                                    <strong>Capital social :</strong> [Montant] €<br>
                                    <strong>TVA :</strong> [Numéro TVA]
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Directeur de publication -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-user-tie me-2"></i>Directeur de publication
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">
                            Le directeur de la publication est [Nom du directeur], en qualité de [Fonction] de OCTAVE SAS.
                        </p>
                    </div>
                </div>

                <!-- Hébergement -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-server me-2"></i>Hébergement
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">
                            Le site OCTAVE est hébergé par [Nom de l'hébergeur], dont le siège social est situé [Adresse de l'hébergeur].
                        </p>
                    </div>
                </div>

                <!-- Propriété intellectuelle -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-copyright me-2"></i>Propriété intellectuelle
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            L'ensemble de ce site relève de la législation française et internationale sur le droit d'auteur et la propriété intellectuelle. Tous les droits de reproduction sont réservés, y compris pour les documents téléchargeables et les représentations iconographiques et photographiques.
                        </p>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Attention :</strong> La reproduction de tout ou partie de ce site sur un support électronique quel qu'il soit est formellement interdite sauf autorisation expresse du directeur de la publication.
                        </div>
                    </div>
                </div>

                <!-- Protection des données personnelles -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2"></i>Protection des données personnelles
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Conformément au Règlement Général sur la Protection des Données (RGPD) et à la loi « Informatique et Libertés », OCTAVE s'engage à protéger vos données personnelles.
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="text-primary">Responsable du traitement</h5>
                                <p>OCTAVE SAS est responsable du traitement de vos données personnelles.</p>
                            </div>
                            <div class="col-md-6">
                                <h5 class="text-primary">Délégué à la protection des données</h5>
                                <p>Contact : dpo@octave.fr</p>
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Vos droits :</strong> Vous disposez d'un droit d'accès, de rectification, d'effacement, de portabilité et d'opposition concernant vos données personnelles.
                        </div>
                    </div>
                </div>

                <!-- Cookies -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-cookie-bite me-2"></i>Cookies
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Ce site utilise des cookies pour améliorer votre expérience de navigation et analyser l'utilisation du site.
                        </p>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="fas fa-cog fa-2x text-primary mb-2"></i>
                                    <h6>Cookies techniques</h6>
                                    <small class="text-muted">Nécessaires au fonctionnement du site</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="fas fa-chart-bar fa-2x text-primary mb-2"></i>
                                    <h6>Cookies analytiques</h6>
                                    <small class="text-muted">Pour mesurer l'audience</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="fas fa-bullseye fa-2x text-primary mb-2"></i>
                                    <h6>Cookies marketing</h6>
                                    <small class="text-muted">Pour personnaliser votre expérience</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Limitation de responsabilité -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>Limitation de responsabilité
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Les informations contenues sur ce site sont aussi précises que possible et le site remis à jour à différentes périodes de l'année, mais peut toutefois contenir des inexactitudes ou des omissions.
                        </p>
                        <div class="alert alert-warning">
                            <i class="fas fa-warning me-2"></i>
                            <strong>Important :</strong> Si vous constatez une lacune, erreur ou ce qui parait être un dysfonctionnement, merci de bien vouloir le signaler par email à contact@octave.fr.
                        </div>
                    </div>
                </div>

                <!-- Droit applicable -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-gavel me-2"></i>Droit applicable
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">
                            Le présent site est soumis au droit français. Tout litige relatif à l'utilisation du site sera de la compétence exclusive des tribunaux français.
                        </p>
                    </div>
                </div>

                <!-- Contact -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-warning text-dark">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-envelope me-2"></i>Contact
                        </h3>
                    </div>
                    <div class="card-body">
                        <p class="mb-3">
                            Pour toute question concernant ces mentions légales ou l'utilisation du site, vous pouvez nous contacter :
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-envelope text-primary me-3"></i>
                                    <span>contact@octave.fr</span>
                                </div>
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-phone text-primary me-3"></i>
                                    <span>[Numéro de téléphone]</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                    <span>[Adresse complète]</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-clock text-primary me-3"></i>
                                    <span>Du lundi au vendredi, 9h-18h</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<!-- Back to top button -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1000;">
    <button class="btn btn-primary rounded-circle shadow" id="backToTop" style="width: 50px; height: 50px; display: none;">
        <i class="fas fa-arrow-up"></i>
    </button>
</div>
@endsection

@push('styles')
<style>
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, #5a00cc 100%);
    min-height: 30vh;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.alert {
    border: none;
    border-radius: 0.5rem;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

#backToTop {
    transition: all 0.3s ease;
}

#backToTop:hover {
    transform: translateY(-3px);
}
</style>
@endpush

@push('scripts')
<script>
// Back to top functionality
window.addEventListener('scroll', function() {
    const backToTopButton = document.getElementById('backToTop');
    if (window.pageYOffset > 300) {
        backToTopButton.style.display = 'block';
    } else {
        backToTopButton.style.display = 'none';
    }
});

document.getElementById('backToTop').addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

// Smooth scrolling for internal links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>
@endpush