<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Contact - ATARA</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #8B5CF6;
            --secondary-color: #D946EF;
            --accent-color: #F59E0B;
            --dark-color: #14233c;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            background: #fff;
            color: #111827;
        }

        h1, h2, h3 {
            font-family: 'Playfair Display', serif;
            line-height: 1.2;
        }

        .header-section {
            background: #fff;
            padding: 1rem 0;
            width: 100%;
        }

        .site-logo {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 800;
            color: #111827;
            text-decoration: none;
            white-space: nowrap;
        }

        .site-logo i {
            color: var(--accent-color);
        }

        .navbar {
            flex-wrap: wrap;
            padding: 0 !important;
        }

        .navbar-collapse {
            flex-grow: 1;
            min-width: 0;
        }

        .nav-shell {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
            gap: 28px;
            align-items: center;
        }

        .navbar-nav {
            gap: 26px;
            flex-wrap: nowrap;
            flex: 1 1 auto;
            min-width: 0;
        }

        .navbar-nav a {
            color: #111827 !important;
            padding: 0 !important;
            border-radius: 0;
            transition: color 0.2s ease;
            font-size: clamp(0.9rem, 1.8vw, 1rem);
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.35px;
            font-weight: 700;
            background: transparent;
        }

        .navbar-nav a:hover,
        .navbar-nav a.active {
            color: #111827 !important;
            text-decoration: underline;
        }

        .navbar-toggler {
            border-color: rgba(17,17,17,0.2);
            margin-left: auto;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17, 17, 17, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        .btn--base {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            padding: 10px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            white-space: nowrap;
            display: inline-block;
            transition: all 0.3s;
        }

        .btn--base:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
        }

        .action-card {
            display: flex;
            align-items: stretch;
            gap: 22px;
            flex-wrap: nowrap;
            background: transparent;
            border: none;
            padding: 0;
            box-shadow: none;
            flex: 0 0 auto;
            min-width: 0;
        }

        .action-section {
            flex: 1 1 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 16px 18px;
            border: 2px solid #111827;
            border-radius: 16px;
            background: transparent;
        }

        .action-header {
            font-size: 0.9rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: #111827;
            text-transform: uppercase;
            text-align: center;
            white-space: nowrap;
        }

        .action-buttons {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .btn-action {
            border-radius: 999px;
            padding: 10px 20px;
            font-weight: 800;
            border: 2px solid #111827;
            background: transparent;
            color: #111827;
            text-decoration: underline;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.95rem;
            transition: background-color 0.2s ease;
            white-space: nowrap;
        }

        .btn-action:hover {
            background: #f5f5f5;
            color: #111827;
        }

        @media (max-width: 992px) {
            .nav-shell {
                gap: 18px;
            }

            .navbar-nav {
                flex-wrap: wrap;
                justify-content: center;
            }

            .action-card {
                width: 100%;
                flex-wrap: wrap;
                min-width: 0;
                gap: 12px;
                justify-content: center;
            }

            .action-section {
                flex: 1 1 100%;
            }
        }

        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: clamp(40px, 15vw, 100px) 1rem;
            color: #fff;
            text-align: center;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            top: -150px;
            right: -150px;
        }

        .page-header h1 {
            font-size: clamp(1.8rem, 8vw, 3rem);
            font-weight: 800;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }

        .page-header p {
            font-size: clamp(1rem, 3vw, 1.2rem);
            position: relative;
            z-index: 2;
        }

        .contact-section {
            padding: clamp(40px, 10vw, 80px) 0;
        }

        .contact-card {
            background: #fff;
            padding: clamp(25px, 5vw, 40px);
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.3s;
            border: 1px solid rgba(139, 92, 246, 0.1);
        }

        .contact-card:hover {
            box-shadow: 0 15px 50px rgba(139, 92, 246, 0.15);
            transform: translateY(-5px);
        }

        .contact-card h2 {
            font-size: clamp(1.5rem, 5vw, 2rem);
            margin-bottom: 30px;
            color: #333;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .contact-info-card {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            padding: clamp(25px, 5vw, 40px);
            border-radius: 20px;
            height: 100%;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .contact-info-card::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            top: -100px;
            right: -100px;
        }

        .contact-info-card::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            bottom: -50px;
            left: -50px;
        }

        .contact-info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
        }

        .contact-info-card h3 {
            margin-bottom: 30px;
            font-size: clamp(1.3rem, 4vw, 1.5rem);
            position: relative;
            z-index: 2;
        }

        .contact-info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }

        .contact-info-item .icon {
            width: clamp(50px, 10vw, 60px);
            height: clamp(50px, 10vw, 60px);
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            backdrop-filter: blur(10px);
        }

        .contact-info-item h5 {
            font-size: clamp(1rem, 2vw, 1.1rem);
            margin-bottom: 8px;
            font-weight: 600;
        }

        .contact-info-item p {
            font-size: clamp(0.9rem, 2vw, 1rem);
            opacity: 0.95;
            margin-bottom: 0;
            line-height: 1.5;
        }

        .form-control, .form-select {
            border-radius: 12px;
            padding: clamp(10px, 2vw, 15px);
            border: 2px solid #e5e7eb;
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: all 0.3s;
            background: #f9fafb;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
            outline: none;
            background: #fff;
        }

        .form-label {
            font-weight: 600;
            font-size: clamp(0.9rem, 2vw, 1rem);
            color: #333;
            margin-bottom: 10px;
        }

        .btn-submit {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            padding: clamp(12px, 2vw, 15px) clamp(30px, 5vw, 50px);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            font-size: clamp(0.95rem, 2vw, 1rem);
            cursor: pointer;
            width: 100%;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
        }

        @media (min-width: 576px) {
            .btn-submit {
                width: auto;
            }
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
        }

        .faq-section {
            padding: clamp(40px, 10vw, 80px) 0;
            background: #f9fafb;
        }

        .faq-section h2 {
            font-size: clamp(1.8rem, 6vw, 2.5rem);
            color: #333;
            margin-bottom: 20px;
        }

        .faq-section p {
            font-size: clamp(1rem, 3vw, 1.1rem);
            color: #666;
        }

        .accordion-item {
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            margin-bottom: 15px !important;
            overflow: hidden;
            background: #fff;
        }

        .accordion-button {
            background: #fff;
            color: #333;
            font-weight: 600;
            padding: clamp(15px, 3vw, 20px);
            font-size: clamp(0.95rem, 2vw, 1.05rem);
            transition: all 0.3s;
        }

        .accordion-button:not(.collapsed) {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: none;
            border-color: var(--primary-color);
        }

        .accordion-body {
            padding: clamp(15px, 3vw, 20px);
            font-size: clamp(0.9rem, 2vw, 1rem);
            color: #666;
            line-height: 1.7;
        }

        .social-links {
            position: relative;
            z-index: 2;
        }

        .social-links a {
            display: inline-block;
            width: clamp(45px, 8vw, 60px);
            height: clamp(45px, 8vw, 60px);
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            margin-bottom: 10px;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
        }

        .social-links a:hover {
            background: rgba(255,255,255,0.4);
            transform: translateY(-3px);
        }

        .footer-section {
            background: linear-gradient(135deg, #14233c, #1e3a5f);
            color: #fff;
            padding: clamp(30px, 5vw, 40px) 1rem;
            width: 100%;
        }

        .footer-section p {
            font-size: clamp(0.9rem, 2vw, 1rem);
            margin-bottom: 0;
        }

        .footer-section a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: var(--accent-color);
        }

        .alert {
            border: none;
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
            font-size: clamp(0.9rem, 2vw, 1rem);
        }

        @media (max-width: 576px) {
            .contact-section {
                padding: 30px 0;
            }

            .social-links a {
                margin-right: 10px;
            }
        }

        @media (max-width: 768px) {
            .navbar-collapse {
                margin-top: 1rem;
            }

            .page-header {
                padding: 50px 1rem;
            }
        }
    </style>
</head>

<body>
    <header class="header-section">
        <div class="container">
            <nav class="navbar navbar-expand-lg">
                <a class="site-logo" href="{{ route('home') }}">
                    <i class="fas fa-gem"></i> <span class="d-none d-sm-inline">ATARA</span><span class="d-sm-none">B.E</span>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="nav-shell d-flex flex-column flex-lg-row align-items-center w-100">
                        <ul class="navbar-nav ms-lg-auto me-lg-auto">
                            <li class="nav-item"><a href="{{ route('home') }}" class="nav-link">Accueil</a></li>
                            <li class="nav-item"><a href="{{ route('about') }}" class="nav-link">À Propos</a></li>
                            <li class="nav-item"><a href="{{ route('shop.index') }}" class="nav-link">Boutique</a></li>
                            <li class="nav-item"><a href="{{ route('public.blog') }}" class="nav-link">Blog</a></li>
                            <li class="nav-item"><a href="{{ route('public.newsletter') }}" class="nav-link">Newsletter</a></li>
                            <li class="nav-item"><a href="{{ route('plan') }}" class="nav-link">Plan d'investissement</a></li>
                            <li class="nav-item"><a href="{{ route('contact') }}" class="nav-link active">Contact</a></li>
                        </ul>
                        <div class="action-card ms-lg-3">
                            <div class="action-section">
                                <div class="action-header">ESPACE MEMBRE</div>
                                <div class="action-buttons">
                                    <a href="{{ route('member.login') }}" class="btn-action">LOGIN</a>
                                    <a href="{{ route('member.register') }}" class="btn-action">REGISTER</a>
                                </div>
                            </div>
                            <div class="action-section">
                                <div class="action-header">ESPACE VENDEUR</div>
                                <div class="action-buttons">
                                    <a href="{{ route('seller.login') }}" class="btn-action">LOGIN</a>
                                    <a href="{{ route('seller.register') }}" class="btn-action">REGISTER</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <section class="page-header">
        <div class="container">
            <h1>Contactez-Nous</h1>
            <p class="lead mt-3">Nous sommes là pour répondre à toutes vos questions</p>
        </div>
    </section>

    <section class="contact-section">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-lg-7">
                    <div class="contact-card">
                        <h2><i class="fas fa-paper-plane me-2"></i>Envoyez-nous un Message</h2>
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif
                        <form action="{{ route('contact.store') }}" method="POST">
                            @csrf
                            <div class="row gy-3">
                                <div class="col-12 col-md-6">
                                    <label class="form-label"><i class="fas fa-user me-2"></i>Nom Complet</label>
                                    <input type="text" class="form-control" name="name" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label"><i class="fas fa-envelope me-2"></i>Email</label>
                                    <input type="email" class="form-control" name="email" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label"><i class="fas fa-phone me-2"></i>Téléphone</label>
                                    <input type="tel" class="form-control" name="phone">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label"><i class="fas fa-tag me-2"></i>Sujet</label>
                                    <select class="form-select" name="subject" required>
                                        <option value="">Sélectionner...</option>
                                        <option value="information">Demande d'information</option>
                                        <option value="support">Support technique</option>
                                        <option value="partenariat">Partenariat</option>
                                        <option value="autre">Autre</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label"><i class="fas fa-comment me-2"></i>Message</label>
                                    <textarea class="form-control" name="message" rows="6" placeholder="Écrivez votre message ici..." required></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-submit">
                                        <i class="fas fa-paper-plane me-2"></i> Envoyer le Message
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="contact-info-card">
                        <h3><i class="fas fa-info-circle me-2"></i>Informations de Contact</h3>
                        
                        <div class="contact-info-item">
                            <div class="icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h5>Adresse</h5>
                                <p>Abidjan, Cocody Riviera<br>Côte d'Ivoire</p>
                            </div>
                        </div>

                        <div class="contact-info-item">
                            <div class="icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h5>Téléphone</h5>
                                <p>+225 27 XX XX XX XX<br>+225 07 XX XX XX XX</p>
                            </div>
                        </div>

                        <div class="contact-info-item">
                            <div class="icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h5>Email</h5>
                                <p>contact@atara.com<br>support@atara.com</p>
                            </div>
                        </div>

                        <div class="contact-info-item">
                            <div class="icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <h5>Horaires</h5>
                                <p>Lun-Ven: 8h - 18h<br>Sam: 9h - 14h</p>
                            </div>
                        </div>

                        <div class="mt-5 social-links">
                            <h5 class="mb-3"><i class="fas fa-share-alt me-2"></i>Suivez-nous</h5>
                            <a href="#" title="Facebook"><i class="fab fa-facebook-f fa-lg"></i></a>
                            <a href="#" title="Instagram"><i class="fab fa-instagram fa-lg"></i></a>
                            <a href="#" title="Twitter"><i class="fab fa-twitter fa-lg"></i></a>
                            <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in fa-lg"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="faq-section">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-12 col-lg-8 text-center">
                    <h2><i class="fas fa-question-circle me-3"></i>Questions Fréquentes</h2>
                    <p class="lead mt-3">Trouvez rapidement des réponses à vos questions</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    <i class="fas fa-check-circle me-2 text-success"></i>Comment devenir membre de ATARA ?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Pour devenir membre, il suffit de vous inscrire avec un code parrain valide et de souscrire à l'AMM de 25,000 XOF. Vous aurez immédiatement accès à votre dashboard et pourrez commencer à vendre des bijoux et gagner des commissions.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    <i class="fas fa-percentage me-2 text-success"></i>Quel est le montant des commissions ?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Notre structure MLM offre 10% de commission sur les ventes de vos filleuls directs (Niveau 1) et 5% sur les ventes des filleuls de vos filleuls (Niveau 2). Des bonus Quick Start sont également disponibles.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    <i class="fas fa-money-bill-wave me-2 text-success"></i>Comment sont payées les commissions ?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Les commissions sont versées via Flutterwave de manière sécurisée. Vous pouvez suivre vos gains en temps réel dans votre dashboard et demander un retrait dès que le montant minimum est atteint.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    <i class="fas fa-gem me-2 text-success"></i>Quelle est la qualité des bijoux ?
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Tous nos bijoux sont de haute qualité, certifiés et authentiques. Nous travaillons uniquement avec des fournisseurs réputés pour garantir l'excellence de nos produits et la satisfaction de vos clients.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                    <i class="fas fa-graduation-cap me-2 text-success"></i>Y a-t-il une formation pour les nouveaux membres ?
                                </button>
                            </h2>
                            <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Oui ! Tous les nouveaux membres bénéficient d'une formation complète sur l'utilisation de la plateforme, les techniques de vente et le développement de réseau. Notre équipe support est également disponible 24/7.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer-section">
        <div class="container">
            <div class="row gy-3">
                <div class="col-12 col-sm-6 text-center text-sm-start">
                    <p>&copy; 2025 ATARA. Tous droits réservés.</p>
                </div>
                <div class="col-12 col-sm-6 text-center text-sm-end">
                    <a href="{{ route('home') }}" class="me-3">Accueil</a>
                    <a href="{{ route('about') }}" class="me-3">À Propos</a>
                    <a href="{{ route('plan') }}">Plan Investissement</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
