@extends('index')
@section('title', 'Accueil')
@section('content')
    <section id="hero" class="hero-carousel">
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
            <div class="carousel-indicators">
                @foreach ($slides as $slide)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $loop->index }}"
                        class="{{ $loop->first ? 'active' : '' }}" aria-current="{{ $loop->first ? 'true' : 'false' }}"
                        aria-label="Slide {{ $loop->index + 1 }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach ($slides as $slide)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <img src="{{ asset('assets/images/slides/' . $slide->image) }}" class="d-block hero-image"
                            alt="{{ $slide->titre }}" data-aos="zoom-out" data-aos-duration="3000"
                            data-aos-easing="ease-out-cubic">
                        <div class="carousel-overlay position-absolute top-0 start-0 bg-dark opacity-50"></div>
                        <div class="carousel-caption d-flex align-items-center justify-content-center">
                            <div class="text-center">
                                <h1 class="display-4 fw-bold mb-4 text-uppercase" data-aos="fade-down"
                                    data-aos-duration="1200" data-aos-easing="linear">{{ $slide->titre }}</h1>
                                <p class="lead mb-4" data-aos="fade-up" data-aos-delay="{{ $loop->index * 200 }}"
                                    data-aos-duration="1200" data-aos-easing="ease-out-cubic" data-aos-easing="linear"
                                    data-aos-offset="0">
                                    {!! $slide->description !!}
                                </p>
                                <div class="d-flex gap-3 flex-wrap justify-content-center">
                                    <a href="#products" class="btn btn-success btn-lg bg-gradient-success rounded-pill"
                                        data-aos="fade-right" data-aos-delay="1200" data-aos-duration="1200"
                                        data-aos-easing="ease-out-cubic" data-aos-offset="0">
                                        <i class="bi bi-shop me-2"></i>Découvrir nos produits
                                    </a>
                                    <a href="#about" class="btn btn-outline-light btn-lg rounded-pill" data-aos="fade-left"
                                        data-aos-delay="1200" data-aos-duration="1200"
                                        data-aos-easing="ease-out-cubic"data-aos-offset="0">
                                        <i class="bi bi-info-circle me-2"></i>En savoir plus
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

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

    <!-- About Section -->
    <section class="py-5" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5" data-aos="fade-up">
                    <h2 class="section-heading">À propos des Sonkoiennes</h2>
                    <hr class="divider">
                </div>
            </div>
            <div class="row gx-5 align-items-center">
                <div class="col-lg-6" data-aos="fade-right" data-aos-duration="1000">
                    <img src="{{ asset('assets/images/logo.png') }}" class="img-fluid rounded-3 mb-5 mb-lg-0"
                        alt="Femmes sénégalaises">
                </div>
                <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                    <div class="about-content">
                        <h3 class="fw-bold mb-4">Notre Histoire</h3>
                        <p class="lead" style="text-align: justify;">SONKOIENNES est un mouvement de femmes engagées, né
                            en octobre 2023, d’une volonté
                            commune de devenir des actrices du développement de notre pays, le Sénégal.

                            Notre ambition est de contribuer à la promotion socio-économique et culturelle des femmes
                            sénégalaises, en mettant l’accent sur des actions favorisant l’émergence d’un leadership
                            féminin. Nous œuvrons pour l’amélioration des conditions de vie des femmes ainsi que pour
                            l’identification de leurs besoins spécifiques, soucieuses de participer activement au bon
                            fonctionnement de notre nation.

                            Conscientes des enjeux actuels du pays, nous affirmons notre engagement en tant qu’actrices du
                            développement du Sénégal.</p>

                        <h3 class="fw-bold mb-4">Notre mission</h3>
                        <p class="lead" style="text-align: justify;">Les Sonkoiennes constituent un mouvement citoyen
                            engagé pour la promotion des
                            valeurs démocratiques et la souveraineté du Sénégal.</p>
                        <p>Notre objectif est de bâtir un Sénégal souverain, où chaque citoyen peut jouer pleinement son
                            rôle dans le développement du pays. Nous croyons en un avenir où l'égalité, la justice et la
                            dignité sont au cœur de notre société.</p>
                        <div class="mt-4">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle">
                                            <i class="bi bi-heart-fill"></i>
                                        </div>
                                        <h4 class="h5 ms-3 mb-0">Solidarité</h4>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle">
                                            <i class="bi bi-shield-fill-check"></i>
                                        </div>
                                        <h4 class="h5 ms-3 mb-0">Justice</h4>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle">
                                            <i class="bi bi-hand-thumbs-up-fill"></i>
                                        </div>
                                        <h4 class="h5 ms-3 mb-0">Engagement</h4>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-circle">
                                            <i class="bi bi-people-fill"></i>
                                        </div>
                                        <h4 class="h5 ms-3 mb-0">Unité</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blogs Section -->
    <section class="py-5 bg-light" id="actions">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5" data-aos="fade-up">
                    <h2 class="section-heading">Actualités</h2>
                    <hr class="divider mx-auto my-3">
                    <p class="section-subheading text-muted lead">
                        Découvrez les initiatives que nous menons pour un <span class="fw-semibold text-success">Sénégal
                            meilleur</span>.
                    </p>
                </div>
            </div>

            <div class="row g-4">
                @foreach ($blogs as $blog)
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="card action-card h-100 shadow-sm border-0 rounded-4 overflow-hidden blog-card">
                            <div class="card-img-container position-relative">
                                <img src="{{ asset('assets/images/blogs/' . $blog->image) }}"
                                    class="card-img-top img-fluid" alt="{{ $blog->titre }}">
                                <div
                                    class="overlay position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25 opacity-0 blog-hover-opacity d-flex align-items-center justify-content-center">
                                    <a href="{{ route('blogs.view', $blog->id) }}"
                                        class="btn btn-success bg-gradient-success btn-sm">
                                        Lire l’article
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <h3 class="card-title h5 fw-semibold text-dark">{{ $blog->titre }}</h3>
                                <p class="card-text small text-muted">{!! Str::limit($blog->description, 100) !!}</p>
                            </div>
                            <div class="card-footer bg-white border-0">
                                <a href="{{ route('blogs.view', $blog->id) }}"
                                    class="btn btn-outline-dark btn-lg w-100 mb-3">
                                    En savoir plus
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row mt-5">
                <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="200">
                    <a href="{{ route('blogs') }}"
                        class="btn btn-success bg-gradient-success btn-lg rounded-pill px-5 shadow-sm">
                        Voir toutes les actualités
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- Products Section -->
    <section class="py-5" id="products">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5" data-aos="fade-up">
                    <h2 class="section-heading">Notre boutique</h2>
                    <hr class="divider">
                    <p class="section-subheading text-muted">Soutenez notre mouvement en achetant nos produits exclusifs.
                    </p>
                </div>
            </div>

            <div class="row g-5">
                @foreach ($produits as $produit)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="card product-card h-100 rounded-3 g-5">
                            {{-- @if ($produit->tags)
                                @php
                                    $colors = ['success', 'success', 'danger', 'warning', 'info', 'secondary', 'dark'];
                                    $tagsArray = array_map('trim', explode(',', $produit->tags));
                                @endphp
                                <div class="mb-2 d-flex flex-wrap gap-1">
                                    @foreach ($tagsArray as $i => $tag)
                                        <span class="product-badge bg-{{ $colors[$i % count($colors)] }} text-white px-2 py-1 rounded small">{{ $tag }}</span>
                                    @endforeach
                                </div>
                            @endif --}}
                            <img src="{{ asset('assets/images/produits/' . $produit->image) }}" class="card-img-top"
                                alt="{{ $produit->name }}">
                            <div class="card-body">
                                <a href="{{ route('produits.view', $produit->id) }}" class="card-title h5 fw-bold"
                                    style="text-decoration: none;">
                                    {{ $produit->name }}
                                </a>
                                {{-- <div class="product-rating mb-2">
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star-half-alt"></i>
                                    <span class="ms-2 text-muted">(24 avis)</span>
                                </div> --}}
                                <p class="card-text mt-3">{!! Str::limit($produit->description) !!}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>
                                        @if ($produit->reduction)
                                            <span class="price-sm text-muted text-decoration-line-through fs-7 me-2">
                                                {{ number_format($produit->prix, 0, ',', ' ') }} F
                                            </span>
                                            <span class="price fw-bold text-danger">
                                                {{ number_format($produit->prix * (1 - $produit->reduction / 100), 0, ',', ' ') }}
                                                F
                                            </span>
                                        @else
                                            <span class="price fw-bold">
                                                {{ number_format($produit->prix, 0, ',', ' ') }} F
                                            </span>
                                        @endif
                                    </span>

                                    <form action="{{ route('cart.add') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="produit_id" value="{{ $produit->id }}">
                                        <button class="btn btn-sm btn-success bg-gradient-success" type="submit">
                                            <i class="bi bi-bag-plus-fill me-1"></i>Ajouter
                                            au panier
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mt-5">
                <div class="col-12 text-center" data-aos="fade-up" data-aos-delay="200">
                    <a href="{{ route('produits') }}"
                        class="btn btn-success bg-gradient-success btn-lg rounded-pill px-5 shadow">Voir tous
                        les produits</a>
                </div>
            </div>
        </div>
    </section>
    <!-- Section Nos partenaires -->
    <section class="py-5 bg-secondary bg-opacity-25 shadow" id="partenaires">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <h2 class="section-heading">Nos Partenaires</h2>
                <hr class="divider">
                <p class="section-subheading text-muted">Nous collaborons avec des entreprises et organisations de
                    confiance.</p>
            </div>
            <!-- Carrousel de logos -->
            <div id="partners" class="carousel slide" data-bs-ride="carousel" data-aos="fade-up">
                <div class="carousel-inner text-center">
                    @foreach ($partenaires as $partenaire)
                        <div class="carousel-item @if ($loop->first) active @endif">
                            <h5>{{ $partenaire->name }}</h5>
                            <img src="{{ asset('assets/images/partenaires/' . $partenaire->image) }}"
                                class="d-inline-block mx-3" alt="{{ $partenaire->name }}">
                            <p>{{ $partenaire->description }}</p>
                        </div>
                    @endforeach
                </div>

                <!-- Indicators en bas -->
                <div class="carousel-indicators" style="top: 100%">
                    @foreach ($partenaires as $index => $partenaire)
                        <button type="button" data-bs-target="#partners" data-bs-slide-to="{{ $index }}"
                            class="@if ($loop->first) active @endif"
                            aria-current="@if ($loop->first) true @endif"
                            aria-label="Slide {{ $index + 1 }}"></button>
                    @endforeach
                </div>
            </div>

        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-5 bg-light" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5" data-aos="fade-up">
                    <h2 class="section-heading">Contactez-nous</h2>
                    <hr class="divider">
                    <p class="section-subheading text-muted">Envoyez-nous un message ou rejoignez-nous sur les réseaux
                        sociaux.</p>
                </div>
            </div>
            <div class="row gx-5">
                <div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-right" data-aos-duration="1000">
                    <div class="contact-info p-4 rounded-3 shadow-sm">
                        <h3 class="h4 mb-4">Nos coordonnées</h3>
                        <div class="d-flex mb-4">
                            <div class="contact-icon">
                                <i class="bi bi-geo-alt-fill"></i>
                            </div>
                            <div class="ms-3">
                                <h4 class="h6">Adresse</h4>
                                <p class="mb-0">{{ settings('adresse', '123 Avenue de la République, Dakar, Sénégal') }}
                                </p>
                            </div>
                        </div>
                        <div class="d-flex mb-4">
                            <div class="contact-icon">
                                <i class="bi bi-phone"></i>
                            </div>
                            <div class="ms-3">
                                <h4 class="h6">Téléphone</h4>
                                <p class="mb-0">{{ settings('telephone', '+221 78 123 45 67') }}</p>
                            </div>
                        </div>
                        <div class="d-flex mb-4">
                            <div class="contact-icon">
                                <i class="bi bi-envelope"></i>
                            </div>
                            <div class="ms-3">
                                <h4 class="h6">Email</h4>
                                <p class="mb-0">{{ settings('email', 'contact@sonkoiennes.com') }}</p>
                            </div>
                        </div>
                        <div class="d-flex mb-4">
                            <div class="contact-icon">
                                <i class="bi bi-clock"></i>
                            </div>
                            <div class="ms-3">
                                <h4 class="h6">Heures d'ouverture</h4>
                                <p class="mb-0">Lun - Ven: 9h00 - 18h00<br>Sam: 9h00 - 14h00</p>
                            </div>
                        </div>
                        <div class="d-flex social-links mt-4">
                            @foreach ($socials as $key => $label)
                                <a href="{{ settings($key) }}" target="_blank" class="social-link"
                                    aria-label="{{ $label }}">
                                    <i class="bi bi-{{ $key }}"></i>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-7" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                    @include('pages.contact.form')
                </div>
            </div>
        </div>
    </section>
@endsection