<section class="slider-container">
    <div class="slider">
        <div class="slide">
            <img fetchpriority="high" src="/exemple_images/slider-1-premium.png" alt="Motors & Transport"
                class="slide-img" width="1920" height="1080">
            <div class="slide-content">
                <h2>{{t 'common.home.hero.slide1_title'}}</h2>
                <p>{{t 'common.home.hero.slide1_text'}}</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/motors-and-transport" class="primary-btn">{{t
                    'common.home.hero.slide1_btn'}}</a>
            </div>
        </div>
        <div class="slide">
            <img loading="lazy" src="/exemple_images/slider-2-premium.png" alt="Construction & Ingénierie"
                class="slide-img" width="1920" height="1080">
            <div class="slide-content">
                <h2>{{t 'common.home.hero.slide2_title'}}</h2>
                <p>{{t 'common.home.hero.slide2_text'}}</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/construction-engineering" class="primary-btn">{{t
                    'common.home.hero.slide2_btn'}}</a>
            </div>
        </div>
        <div class="slide">
            <img loading="lazy" src="/exemple_images/slider-3-premium.png" alt="Investissement & Croissance"
                class="slide-img" width="1920" height="1080">
            <div class="slide-content">
                <h2>{{t 'common.home.hero.slide3_title'}}</h2>
                <p>{{t 'common.home.hero.slide3_text'}}</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/strategy-growth" class="primary-btn">{{t
                    'common.home.hero.slide3_btn'}}</a>
            </div>
        </div>
    </div>
    <div class="slider-nav">
        <button class="slider-prev" aria-label="Slide précédente">&lt;</button>
        <button class="slider-next" aria-label="Slide suivante">&gt;</button>
    </div>
    <div class="slider-dots"></div>
</section>

<div class="container" style="padding-top: 80px;">
    <header class="section-header reveal-up">
        <span class="overline">Excellence & Vision</span>
        <h2>{{t 'common.home.excellence.title'}}</h2>
        <p class="subtitle">{{t 'common.home.excellence.subtitle'}}</p>
    </header>

    <section class="services-grid">
        <article class="service-card bento-large reveal-up">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-motors.svg" alt="">
            </div>
            <div>
                <h3>Motors & Transport</h3>
                <p>Solutions de mobilté intelligentes, importation de véhicules et logistique de précision. Un réseau
                    panafricain pour connecter les marchés sans friction.</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/motors-and-transport" class="learn-more">En savoir plus →</a>
            </div>
        </article>

        <article class="service-card reveal-up" style="transition-delay: 0.1s;">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-consulting.svg" alt="">
            </div>
            <div>
                <h3>Consulting</h3>
                <p>Accompagnement stratégique, audit et optimisation opérationnelle.</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/consulting" class="learn-more">En savoir plus →</a>
            </div>
        </article>

        <article class="service-card reveal-up" style="transition-delay: 0.2s;">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-security.svg" alt="">
            </div>
            <div>
                <h3>Security Solutions</h3>
                <p>Systèmes de protection avancés, gardiennage expert et audits.</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/security-solutions" class="learn-more">En savoir plus →</a>
            </div>
        </article>

        <article class="service-card bento-large reveal-up">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-construction.svg" alt="">
            </div>
            <div>
                <h3>Construction & Ingénierie</h3>
                <p>Conception et réalisation d'infrastructures modernes répondant aux plus hauts standards
                    internationaux.
                    Du BTP au Génie Civil.</p>
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/construction-engineering" class="learn-more">En savoir plus
                    →</a>
            </div>
        </article>

        <article class="service-card reveal-up" style="transition-delay: 0.1s;">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-hospitality.svg" alt="">
            </div>
            <h3>Hospitality</h3>
            <p>Expériences hôtelières d'exception alliant raffinement boutique et service personnalisé haute fidélité.
            </p>
            <a href="{{#if (eq lang 'en')}}/en{{/if}}/hospitality" class="learn-more">En savoir plus</a>
        </article>

        <article class="service-card reveal-up" style="transition-delay: 0.2s;">
            <div class="icon-box">
                <img loading="lazy" src="/exemple_images/logo-ecommerce.svg" alt="">
            </div>
            <h3>E‑commerce & Goods</h3>
            <p>Marketplace innovante et fulfilment logistique de pointe pour dynamiser le commerce de demain en Afrique.
            </p>
            <a href="{{#if (eq lang 'en')}}/en{{/if}}/ecommerce-goods" class="learn-more">En savoir plus</a>
        </article>
    </section>

    <section class="split-section reveal"
        style="margin: var(--section-spacing) 0; background: var(--white); padding: 4rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-premium); border: 1px solid rgba(0,0,0,0.02);">
        <div class="split-image reveal-left">
            <img loading="lazy" src="/exemple_images/regional-presence.png" alt="Présence Régionale"
                style="border-radius: var(--radius-md);">
        </div>
        <div class="split-content reveal-right">
            <header class="section-header" style="margin-bottom: 2rem;">
                <span class="overline">Expansion & Influence</span>
                <h2>Une Présence Régionale Forte</h2>
            </header>
            <p style="font-size: 1.15rem; line-height: 1.8; color: var(--muted);">OWC Holdings s'impose comme un acteur
                majeur du
                développement économique en Afrique de l'Ouest. Grâce à nos plateformes logistiques modernes et nos
                réseaux stratégiques, nous couvrons les zones de croissance les plus dynamiques de la sous-région.</p>
            <div style="margin-top: 2.5rem;">
                <a href="{{#if (eq lang 'en')}}/en{{/if}}/contact" class="primary-btn">{{t 'about.integration_btn'}}</a>
            </div>
        </div>
    </section>
    <section class="blog-preview-section reveal-up active"
        style="padding: var(--section-spacing) 0; background: #f8fafc;">
        <div class="container">
            <header class="section-header" style="text-align: center; margin-bottom: 4rem;">
                <span class="overline" style="justify-content: center;">Veille & Stratégie</span>
                <h2>Actualités & Insights</h2>
                <p class="subtitle" style="margin: 1.5rem auto;">Découvrez les perspectives et les temps forts
                    stratégiques du Groupe OWC.</p>
            </header>

            <div class="blog-carousel">
                <div class="blog-track">
                    <article class="blog-card">
                        <div class="icon-box" role="img" aria-label="Expansion Régionale">🌍</div>
                        <div class="card-body">
                            <h4>Expansion Régionale</h4>
                            <p>OWC Holdings renforce son maillage territorial avec l'intégration d'un nouveau hub au
                                Sénégal.</p>
                        </div>
                        <a href="#" class="learn-more">Découvrir la suite →</a>
                    </article>
                    <article class="blog-card">
                        <div class="icon-box" role="img" aria-label="Innovation Durable">🌱</div>
                        <div class="card-body">
                            <h4>Innovation Durable</h4>
                            <p>Lancement de notre programme 'Green Build 2026' pour des infrastructures durables.</p>
                        </div>
                        <a href="#" class="learn-more">Découvrir la suite →</a>
                    </article>
                    <article class="blog-card">
                        <div class="icon-box" role="img" aria-label="Alliance Stratégique">🤝</div>
                        <div class="card-body">
                            <h4>Alliance Stratégique</h4>
                            <p>Partenariat majeur pour digitaliser les chaînes d'approvisionnement en Afrique.</p>
                        </div>
                        <a href="#" class="learn-more">Découvrir la suite →</a>
                    </article>
                    <article class="blog-card">
                        <div class="icon-box" role="img" aria-label="Expansion Régionale">🌍</div>
                        <div class="card-body">
                            <h4>Expansion Régionale</h4>
                            <p>OWC Holdings renforce son maillage territorial avec l'intégration d'un nouveau hub au
                                Sénégal.</p>
                        </div>
                        <a href="#" class="learn-more">Découvrir la suite →</a>
                    </article>
                </div>
            </div>
        </div>
        <section class="synergy-slider-section reveal-up">
            <div class="synergy-container">
                <div class="synergy-slide active">
                    <div class="synergy-card">
                        <div class="manager-circle">
                            <img loading="lazy" src="/exemple_images/manager-1.png" alt="Directeur Général">
                        </div>
                        <h3>Un Groupe, Des Synergies</h3>
                        <p>Ce qui fait la force d'OWC Holdings, c'est la capacité de nos pôles à travailler ensemble. La
                            Construction bâtit, le Transport achemine, l'E-commerce distribue et la Sécurité protège.
                            Cette
                            approche
                            globale réduit les coûts et maximise l'efficacité pour nos clients.</p>
                    </div>
                </div>
                <div class="synergy-slide">
                    <div class="synergy-card">
                        <div class="manager-circle">
                            <img loading="lazy" src="/exemple_images/manager-2.png" alt="Responsable Stratégie">
                        </div>
                        <h3>Vision & Intégration</h3>
                        <p>Notre modèle intégré nous permet d'anticiper les défis du marché. En mutualisant nos
                            expertises, nous
                            créons une valeur ajoutée unique qui propulse la croissance de nos partenaires à travers
                            toute la
                            sous-région.</p>
                    </div>
                </div>

                <div class="synergy-controls">
                    <div class="syn-dot active"></div>
                    <div class="syn-dot"></div>
                </div>
            </div>
        </section>

        <section class="partners-section reveal" style="margin-top: 1rem; padding-bottom: 0;">
            <div class="partners-logo-grid">
                <div class="logo-track">
                    <div class="partner-logo">TERRA<span>CORP</span></div>
                    <div class="partner-logo">AFRIQUE<span>LOG</span></div>
                    <div class="partner-logo">WEST<span>BUILD</span></div>
                    <div class="partner-logo">SAHEL<span>STRAT</span></div>
                    <div class="partner-logo">ECO<span>FIN</span></div>
                    <div class="partner-logo">OMNI<span>SERV</span></div>
                    <!-- Duplicated for seamless loop -->
                    <div class="partner-logo">TERRA<span>CORP</span></div>
                    <div class="partner-logo">AFRIQUE<span>LOG</span></div>
                    <div class="partner-logo">WEST<span>BUILD</span></div>
                    <div class="partner-logo">SAHEL<span>STRAT</span></div>
                    <div class="partner-logo">ECO<span>FIN</span></div>
                    <div class="partner-logo">OMNI<span>SERV</span></div>
                </div>
            </div>
        </section>

</div>