{% extends "base.html" %}

{% block title %}Accueil — Groupe KobaH Ingénierie{% endblock %}
{% block meta_desc %}Groupe KobaH Ingénierie : Sécurité électronique, archivage numérique, développement informatique et protections du réseau électrique. Études, intégration, documentation, maintenance.{% endblock %}

{% block content %}

{# ===========================
   HERO BANNER / GRAND CARROUSEL (Accueil)
   Images : static/img/hero/hero_01.jpg ... hero_05.jpg
   =========================== #}
<section class="hero-banner">
  <div id="homeHeroCarousel" class="carousel slide carousel-fade shadow-sm" data-bs-ride="carousel" data-bs-interval="5000">
    <!-- Indicateurs -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#homeHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#homeHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#homeHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#homeHeroCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
      <button type="button" data-bs-target="#homeHeroCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
    </div>

    <div class="carousel-inner">

      <!-- Slide 1 -->
      <div class="carousel-item active">
        <div class="hero-slide"
             style="background-image:url('{{ url_for('static', filename='img/hero/hero_01.jpg') }}');">
          <div class="hero-overlay"></div>

          <div class="container hero-content">
            <div class="row align-items-center">
              <div class="col-lg-7">
                <div class="hero-chip">
                  <i class="bi bi-building-check"></i> Groupe KobaH Ingénierie
                </div>
                <h1 class="display-5 fw-semibold mt-3 mb-3 text-white">
                  Ingénierie & intégration pour sites critiques
                </h1>
                <p class="lead text-white-50 mb-4">
                  Sécurité électronique, archivage numérique, développement logiciel et protections du réseau électrique.
                </p>
                <div class="d-flex gap-2 flex-wrap">
                  <a href="{{ url_for('contact') }}" class="btn btn-khi btn-khi-accent d-inline-flex align-items-center gap-2">
                    <i class="bi bi-envelope-paper"></i> Demander une étude
                  </a>
                  <a href="#secteurs" class="btn btn-outline-light btn-khi d-inline-flex align-items-center gap-2">
                    <i class="bi bi-grid-3x3-gap"></i> Découvrir nos activités
                  </a>
                </div>
              </div>

              <div class="col-lg-5 d-none d-lg-block">
                <div class="hero-card">
                  <div class="hero-card-title">
                    <i class="bi bi-shield-check"></i> Approche
                  </div>
                  <div class="hero-card-text">
                    Audit → Conception → Intégration → Tests → Documentation → Maintenance
                  </div>
                  <div class="hero-card-badges">
                    <span><i class="bi bi-journal-text"></i> Dossier technique</span>
                    <span><i class="bi bi-tools"></i> MCO</span>
                    <span><i class="bi bi-lock"></i> Sécurité</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <div class="hero-slide"
             style="background-image:url('{{ url_for('static', filename='img/hero/hero_02.jpeg') }}');">
          <div class="hero-overlay"></div>

          <div class="container hero-content">
            <div class="row align-items-center">
              <div class="col-lg-7">
                <div class="hero-chip"><i class="bi bi-shield-lock"></i> Sécurité électronique</div>
                <h2 class="display-6 fw-semibold mt-3 mb-3 text-white">
                  Vidéosurveillance, contrôle d’accès, interphonie
                </h2>
                <p class="lead text-white-50 mb-4">
                  Des solutions robustes, évolutives et documentées pour administrations et entreprises.
                </p>
                <div class="d-flex gap-2 flex-wrap">
                  <a href="{{ url_for('securite_electronique') }}" class="btn btn-khi btn-khi-accent d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-right-circle"></i> Voir le secteur
                  </a>
                  <a href="{{ url_for('solution', slug='videosurveillance') }}" class="btn btn-outline-light btn-khi d-inline-flex align-items-center gap-2">
                    <i class="bi bi-camera-video"></i> Vidéosurveillance
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item">
        <div class="hero-slide"
             style="background-image:url('{{ url_for('static', filename='img/hero/hero_03.jpeg') }}');">
          <div class="hero-overlay"></div>

          <div class="container hero-content">
            <div class="row align-items-center">
              <div class="col-lg-7">
                <div class="hero-chip"><i class="bi bi-archive"></i> Archivage numérique</div>
                <h2 class="display-6 fw-semibold mt-3 mb-3 text-white">
                  Numérisation, OCR, GED, traçabilité
                </h2>
                <p class="lead text-white-50 mb-4">
                  Un accès rapide et sécurisé à vos documents, avec indexation, droits et journalisation.
                </p>
                <div class="d-flex gap-2 flex-wrap">
                  <a href="{{ url_for('secteur', slug='archivage-electronique') }}" class="btn btn-khi btn-khi-accent d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-right-circle"></i> Découvrir
                  </a>
                  <a href="{{ url_for('contact') }}" class="btn btn-outline-light btn-khi d-inline-flex align-items-center gap-2">
                    <i class="bi bi-calendar-check"></i> Planifier une démo
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Slide 4 -->
      <div class="carousel-item">
        <div class="hero-slide"
             style="background-image:url('{{ url_for('static', filename='img/hero/hero_04.jpg') }}');">
          <div class="hero-overlay"></div>

          <div class="container hero-content">
            <div class="row align-items-center">
              <div class="col-lg-7">
                <div class="hero-chip"><i class="bi bi-code-slash"></i> Développement informatique</div>
                <h2 class="display-6 fw-semibold mt-3 mb-3 text-white">
                  Applications web & mobile, automatisation, dashboards
                </h2>
                <p class="lead text-white-50 mb-4">
                  Des solutions métier sur mesure : backoffice, API, reporting, maintenance évolutive.
                </p>
                <div class="d-flex gap-2 flex-wrap">
                  <a href="{{ url_for('secteur', slug='developpement-informatique') }}" class="btn btn-khi btn-khi-accent d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-right-circle"></i> Voir le secteur
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Slide 5 -->
      <div class="carousel-item">
        <div class="hero-slide"
             style="background-image:url('{{ url_for('static', filename='img/hero/hero_05.jpg') }}');">
          <div class="hero-overlay"></div>

          <div class="container hero-content">
            <div class="row align-items-center">
              <div class="col-lg-7">
                <div class="hero-chip"><i class="bi bi-lightning-charge"></i> Protection électrique</div>
                <h2 class="display-6 fw-semibold mt-3 mb-3 text-white">
                  Filtres, onduleurs, stabilisation, parafoudres
                </h2>
                <p class="lead text-white-50 mb-4">
                  Sécurisez vos équipements : qualité d’énergie, continuité de service, supervision et MCO.
                </p>
                <div class="d-flex gap-2 flex-wrap">
                  <a href="{{ url_for('secteur', slug='protections-lignes-electriques') }}" class="btn btn-khi btn-khi-accent d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-right-circle"></i> Découvrir
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

    <!-- Contrôles -->
    <button class="carousel-control-prev" type="button" data-bs-target="#homeHeroCarousel" data-bs-slide="prev" aria-label="Précédent">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Précédent</span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#homeHeroCarousel" data-bs-slide="next" aria-label="Suivant">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Suivant</span>
    </button>

  </div>
</section>

{# ===========================
   SECTION SECTEURS (ANCRE #secteurs)
   =========================== #}
<section id="secteurs" class="py-5">
  <div class="container">
    <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-end justify-content-between gap-3 mb-4">
      <div>
        <h2 class="h3 fw-semibold mb-2">Nos secteurs d’activité</h2>
        <p class="text-muted mb-0">
          Des solutions structurées, documentées et maintenues pour administrations, entreprises et sites sensibles.
        </p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <a href="{{ url_for('contact') }}" class="btn btn-khi btn-khi-primary d-inline-flex align-items-center gap-2">
          <i class="bi bi-clipboard-check"></i> Demander un devis
        </a>
      </div>
    </div>

    <div class="row g-4">

      <!-- Sécurité électronique -->
      <div class="col-md-6 col-lg-3">
        <a href="{{ url_for('securite_electronique') }}"
           class="card h-100 shadow-sm text-decoration-none border-0"
           style="border-radius: 18px; overflow:hidden;">
          <div class="ratio ratio-4x3"
               style="background:url('{{ url_for('static', filename='img/hero/hero_06.jpg') }}') center/cover no-repeat;">
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center gap-2">
              <span class="badge text-bg-light"><i class="bi bi-shield-lock me-1"></i> Sécurité</span>
              <span class="badge text-bg-light"><i class="bi bi-camera-video me-1"></i> CCTV</span>
            </div>
            <h3 class="h5 fw-semibold mt-3 mb-2">Sécurité électronique</h3>
            <p class="text-muted mb-0">
              Vidéosurveillance, contrôle d’accès, interphonie/visiophonie, alarmes et supervision.
            </p>
          </div>
        </a>
      </div>

      <!-- Archivage numérique -->
      <div class="col-md-6 col-lg-3">
        <a href="{{ url_for('secteur', slug='archivage-electronique') }}"
           class="card h-100 shadow-sm text-decoration-none border-0"
           style="border-radius: 18px; overflow:hidden;">
          <div class="ratio ratio-4x3"
               style="background:url('{{ url_for('static', filename='img/hero/hero_07.jpg') }}') center/cover no-repeat;">
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center gap-2">
              <span class="badge text-bg-light"><i class="bi bi-archive me-1"></i> GED</span>
              <span class="badge text-bg-light"><i class="bi bi-search me-1"></i> OCR</span>
            </div>
            <h3 class="h5 fw-semibold mt-3 mb-2">Archivage numérique</h3>
            <p class="text-muted mb-0">
              Numérisation, OCR, indexation, traçabilité, accès sécurisé et continuité.
            </p>
          </div>
        </a>
      </div>

      <!-- Développement informatique -->
      <div class="col-md-6 col-lg-3">
        <a href="{{ url_for('secteur', slug='developpement-informatique') }}"
           class="card h-100 shadow-sm text-decoration-none border-0"
           style="border-radius: 18px; overflow:hidden;">
          <div class="ratio ratio-4x3"
               style="background:url('{{ url_for('static', filename='img/hero/hero_08.jpg') }}') center/cover no-repeat;">
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center gap-2">
              <span class="badge text-bg-light"><i class="bi bi-code-slash me-1"></i> Web</span>
              <span class="badge text-bg-light"><i class="bi bi-phone me-1"></i> Mobile</span>
            </div>
            <h3 class="h5 fw-semibold mt-3 mb-2">Développement informatique</h3>
            <p class="text-muted mb-0">
              Applications web & mobile, API, automatisation, tableaux de bord et maintenance.
            </p>
          </div>
        </a>
      </div>

      <!-- Protection électrique -->
      <div class="col-md-6 col-lg-3">
        <a href="{{ url_for('secteur', slug='protections-lignes-electriques') }}"
           class="card h-100 shadow-sm text-decoration-none border-0"
           style="border-radius: 18px; overflow:hidden;">
          <div class="ratio ratio-4x3"
               style="background:url('{{ url_for('static', filename='img/hero/hero_09.jpg') }}') center/cover no-repeat;">
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center gap-2">
              <span class="badge text-bg-light"><i class="bi bi-lightning-charge me-1"></i> Énergie</span>
              <span class="badge text-bg-light"><i class="bi bi-plug me-1"></i> Continuité</span>
            </div>
            <h3 class="h5 fw-semibold mt-3 mb-2">Protection électrique</h3>
            <p class="text-muted mb-0">
              Filtres, onduleurs, stabilisation, parafoudres et protections réseau.
            </p>
          </div>
        </a>
      </div>

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

{# ===========================
   SECTION "POURQUOI NOUS"
   =========================== #}
<section class="py-5 bg-light border-top">
  <div class="container">
    <div class="row g-4 align-items-stretch">

      <div class="col-lg-5">
        <div class="p-4 h-100 bg-white shadow-sm" style="border-radius: 18px;">
          <div class="d-flex align-items-center gap-2">
            <span class="badge text-bg-light"><i class="bi bi-stars me-1"></i> Méthode</span>
            <span class="badge text-bg-light"><i class="bi bi-shield-check me-1"></i> Fiabilité</span>
          </div>

          <h2 class="h4 fw-semibold mt-3">Une approche d’ingénierie, orientée résultat</h2>
          <p class="text-muted mb-4">
            Nous livrons des solutions exploitables : architecture, intégration, tests, documentation et maintenance.
            Objectif : fiabilité, traçabilité et continuité de service.
          </p>

          <ul class="list-unstyled mb-0">
            <li class="d-flex gap-2 mb-2"><i class="bi bi-check2-circle" style="color:#16a34a;"></i> Audit & dimensionnement</li>
            <li class="d-flex gap-2 mb-2"><i class="bi bi-check2-circle" style="color:#16a34a;"></i> Intégration & mise en service</li>
            <li class="d-flex gap-2 mb-2"><i class="bi bi-check2-circle" style="color:#16a34a;"></i> Dossiers techniques & procédures</li>
            <li class="d-flex gap-2"><i class="bi bi-check2-circle" style="color:#16a34a;"></i> Maintenance & suivi</li>
          </ul>
        </div>
      </div>

      <div class="col-lg-7">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="p-4 h-100 bg-white shadow-sm" style="border-radius: 18px;">
              <div class="fw-semibold d-flex align-items-center gap-2">
                <i class="bi bi-journal-text" style="color:#f97316;"></i> Documentation & traçabilité
              </div>
              <p class="text-muted mt-2 mb-0">
                Plans, schémas, dossiers techniques, procédures d’exploitation, journaux et preuves.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="p-4 h-100 bg-white shadow-sm" style="border-radius: 18px;">
              <div class="fw-semibold d-flex align-items-center gap-2">
                <i class="bi bi-lock" style="color:#2563eb;"></i> Sécurité & conformité
              </div>
              <p class="text-muted mt-2 mb-0">
                Segmentation, durcissement, droits d’accès, sauvegardes, continuité.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="p-4 h-100 bg-white shadow-sm" style="border-radius: 18px;">
              <div class="fw-semibold d-flex align-items-center gap-2">
                <i class="bi bi-tools" style="color:#0ea5e9;"></i> Maintenance & MCO
              </div>
              <p class="text-muted mt-2 mb-0">
                Préventif, correctif, pièces critiques, délais d’intervention et suivi.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="p-4 h-100 bg-white shadow-sm" style="border-radius: 18px;">
              <div class="fw-semibold d-flex align-items-center gap-2">
                <i class="bi bi-diagram-3" style="color:#a855f7;"></i> Multi-sites & supervision
              </div>
              <p class="text-muted mt-2 mb-0">
                Tableaux de bord, alertes, centralisation et gestion multi-sites.
              </p>
            </div>
          </div>
        </div>
      </div>

    </div>


  </div>
</section>




{# ===========================
   SECTION LOCALISATION / PLAN
   =========================== #}
<section class="py-5 border-top khi-loc-section">
  <div class="container">

    <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-end justify-content-between gap-3 mb-3">
      <div>
        <div class="khi-loc-chip mb-2">
          <i class="bi bi-geo-alt-fill"></i> Rendez-vous & localisation
        </div>

        <h2 class="h3 fw-semibold mb-1 d-flex align-items-center gap-2">
          <span class="khi-loc-title-icon"><i class="bi bi-map"></i></span>
          Localisation de nos bureaux
        </h2>

        <p class="text-muted mb-0">
          Passez nous voir à <strong>Abidjan</strong> ou planifiez une visite technique / démonstration.
        </p>
      </div>

      <div class="d-flex gap-2 flex-wrap">
        <a href="{{ url_for('contact') }}"
           class="btn btn-khi btn-khi-primary d-inline-flex align-items-center gap-2">
          <i class="bi bi-calendar-check"></i> Prendre rendez-vous
        </a>

        <a class="btn btn-outline-secondary d-inline-flex align-items-center gap-2"
           target="_blank" rel="noopener"
           href="https://www.google.com/maps/search/?api=1&query=Riviera%20Bonoumin%20Rond-Point%20ADO%20Abidjan">
          <i class="bi bi-box-arrow-up-right"></i> Ouvrir dans Maps
        </a>
      </div>
    </div>

    <div class="row g-4 align-items-stretch">
      <div class="col-lg-5">
        <div class="khi-location-card2 h-100">
          <div class="khi-location-head">
            <div class="khi-location-brand">
              <div class="khi-location-logo">
                <i class="bi bi-building-check"></i>
              </div>
              <div>
                <div class="fw-semibold">Groupe KobaH Ingénierie</div>
                <div class="text-muted small">Bureaux & accueil visiteurs</div>
              </div>
            </div>

            <div class="khi-location-tags">
              <span class="khi-tag"><i class="bi bi-pin-map"></i> Riviera Bonoumin</span>
              <span class="khi-tag"><i class="bi bi-signpost"></i> Rond-Point ADO</span>
            </div>
          </div>

          <div class="khi-location-list mt-3">
            <div class="khi-location-item">
              <div class="khi-ic khi-ic-orange"><i class="bi bi-geo-alt"></i></div>
              <div>
                <div class="fw-semibold">Adresse</div>
                <div class="text-muted small">Abidjan, Riviera Bonoumin, Rond-Point ADO</div>
              </div>
            </div>

            <div class="khi-location-item">
              <div class="khi-ic khi-ic-blue"><i class="bi bi-telephone"></i></div>
              <div>
                <div class="fw-semibold">Téléphone</div>
                <div class="text-muted small">+225 27 35 98 74 63</div>
              </div>
            </div>

            <div class="khi-location-item">
              <div class="khi-ic khi-ic-green"><i class="bi bi-envelope"></i></div>
              <div>
                <div class="fw-semibold">Email</div>
                <div class="text-muted small">contact@kobah-ingenierie.com</div>
              </div>
            </div>

            <div class="khi-location-item">
              <div class="khi-ic khi-ic-purple"><i class="bi bi-clock"></i></div>
              <div>
                <div class="fw-semibold">Horaires</div>
                <div class="text-muted small">Lun–Ven, 08:30–17:30</div>
              </div>
            </div>

            <div class="khi-location-item">
              <div class="khi-ic khi-ic-cyan"><i class="bi bi-truck"></i></div>
              <div>
                <div class="fw-semibold">Accès</div>
                <div class="text-muted small">Parking & accueil visiteurs</div>
              </div>
            </div>
          </div>

          <div class="khi-location-cta mt-3">
            <a href="{{ url_for('contact') }}"
               class="btn btn-khi btn-khi-accent w-100 d-inline-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-send"></i> Nous écrire
            </a>
            <div class="text-muted small mt-2">
              Réponse rapide pour étude, devis ou démonstration.
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-7">
        <div class="khi-map-wrap2">
          <div class="khi-map-topbar">
            <div class="khi-map-badge">
              <i class="bi bi-shield-check"></i> Accès & itinéraire
            </div>
            <div class="text-white-50 small d-none d-md-block">
              Localisez-nous et calculez votre trajet en un clic.
            </div>
          </div>

          <iframe
            src="YOUR_GOOGLE_MAPS_EMBED_URL"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen
            title="Plan de localisation — Groupe KobaH Ingénierie"></iframe>
        </div>
      </div>
    </div>

  </div>
</section>




{% endblock %}