@extends('layouts.public')
@section('title', 'Home | Kenya Diaspora Alliance')
@section('content')
    <style>
        #kdhc-countdown-section {
            background: transparent;
        }

        #kdhc-countdown-card {
            background: #0d0d0d;
            color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
        }

        #kdhc-countdown-card .label-muted {
            color: #c8c8c8;
            letter-spacing: 0.08em;
        }

        #kdhc-countdown-card .count-value {
            font-weight: 700;
        }

        #kdhc-countdown-card .count-label {
            color: #d8d8d8;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
        }

        /* Hero responsiveness */
        #hero-area {
            height: 90vh;
            min-height: 540px;
            background-position: center center;
        }

        .hero-mobile-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.55);
        }

        @media (max-width: 991.98px) {
            #hero-area {
                height: auto;
                min-height: 460px;
                background-position: center top;
            }
        }

        @media (max-width: 575.98px) {
            #hero-area {
                min-height: 380px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center top;
                padding-top: 90px;
                padding-bottom: 60px;
            }
        }
    </style>
    <div id="hero-area" class="hero-area-bg position-relative"
        style="background: url('{{ asset('assets/img/hero-2026.png') }}') no-repeat center center / cover;">
        <div class="hero-mobile-overlay d-lg-none"></div>
        <div class="container d-none">
            <div class="row justify-content-center">
                <div class="col-lg-9 col-sm-12">
                    <div class="contents text-center">
                        <div class="icon d-none">
                            <i class="lni-mic"></i>
                        </div>
                        <h2 class="head-title mt-5">Annual Kenya Diaspora Homecoming Convention</h2>
                        <p class="banner-info">Date: 9th - 11th December, 2026</p>
                        <p class="banner-desc">
                            Theme: Investments &amp; Innovation for Inclusive Growth and Sustainable Development
                        </p>
                        <div class="banner-btn d-none">
                            <a href="{{ route('events', ['year' => 2023]) }}" class="btn btn-success d-none">
                                Watch KDHC 2023 here
                            </a>
                            <a href="{{ route('register') }}" target="_blank" class="btn btn-success">Register</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="kdhc-countdown-section" class="py-4">
        <div class="container">
            <div class="mx-auto" style="max-width: 860px;">
                <div id="kdhc-countdown-card" class="p-3 p-md-4">
                    <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
                        <div class="mb-3 mb-md-0">
                            <div class="label-muted text-uppercase small mb-2">KDHC 2026 countdown</div>
                            <div id="kdhc-countdown-message" class="mb-0 h6">Starts 9th December 2026</div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-between text-center" style="gap: 12px; min-width: 260px;">
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-days" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Days</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-hours" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Hours</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-minutes" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Minutes</div>
                            </div>
                            <div class="flex-fill" style="min-width: 70px;">
                                <div id="kdhc-seconds" class="count-value h3 mb-0">--</div>
                                <div class="count-label">Seconds</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="count" class="d-none">
        <div class="container">
            <div class="row justify-content-center bg-transparent">
                <div class="col-10">
                    <div class="count-wrapper text-center bg-transparent d-none">
                        <div class="time-countdown wow fadeInUp" data-wow-delay="0.2s">
                            <div id="clock" class="time-count"></div>
                        </div>
                    </div>
                    <div class="text-center mt-4 d-none">
                        <a href="{{ route('register') }}" class="btn btn-success">Register Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="about" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="img-thumb">
                        <img class="img-fluid rounded-2 shadow" src="{{ asset('assets/img/about.jpeg') }}" alt>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="">
                            <div class="about-text">
                                <h2>About KDHC 2026</h2>
                                <p>
                                    The 13th Annual Kenya Diaspora Homecoming Convention (KDHC 2026). <br>
                                    Theme: Investments &amp; Innovation for Inclusive Growth and Sustainable Development . <br>
                                    Dates: December 9–11, 2026 . <br>
                                    Location: Jacaranda Hotel, Westlands, Nairobi (Hybrid)

                                </p>
                                <p>
                                    KDHC is the premier annual platform that connects Kenyan and African diasporas globally with government, private sector, development partners, academia, and civil society.
                                    The 2026 convention connects 500+ physical delegates and 1,000+ virtual participants across 60+ countries, with a focus on investment, innovation and inclusive growth.

                                </p>
                                <h2>Background</h2>
                                <p>
                                   Hosted by Kenya Diaspora Alliance (KDA), in partnership with African Diaspora Alliance (AfDA), the convention connects a network of 67+ diaspora organizations.
                                </p>
                               
                            </div>
                            <!-- <a class="btn btn-warning" href="{{ route('about') }}"
                                download="">
                                Read more
                            </a> -->
                            <a class="btn btn-warning" href="{{ route('about') }}">
                                Read more
                            </a>
                            <a href="{{ route('register') }}" class="btn btn-success d-none">Register</a>

                            <!-- Modal Body -->
                            <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
                            <div class="modal fade" id="aboutEvent" tabindex="-1" data-bs-backdrop="static"
                                data-bs-keyboard="false" role="dialog" aria-labelledby="aboutEventTitle"
                                aria-hidden="true">
                                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-fullscreen "
                                    role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <a href="{{ asset(config('convention.rate_card')) }}" download>Download 2026 partnership &amp; advertising rate card</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <section id="information-bar" class="bg-transparent" style="background-color: rgba(0, 0, 0, 0.5) !important;">
        <div class="container">
            <div class="row inforation-wrapper justify-content-center align-items-center shadow-none">
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center">
                    <ul>
                        <li class="d-flex align-items-center justify-content-center">
                            <i class="lni-map-marker"></i>
                        </li>
                        <li class="d-flex align-items-center text-center justify-content-center"><span
                                class="text-center"><b>Location</b> <strong>Jacaranda Hotel, Westlands</strong>,
                                Nairobi, Kenya</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center">
                    <ul>
                        <li class="d-flex align-items-center justify-content-center">
                            <i class="lni-calendar"></i>
                        </li>
                        <li class="d-flex align-items-center justify-content-center"><span class="text-center"><b>Date</b>
                                Wednesday 9th - Friday 11th Dec 2026</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 text-center d-none">
                    <ul>
                        <li class="d-flex align-items-center">
                            <i class="lni-mic"></i>
                        </li>
                        <li class="d-flex align-items-center"><span><b>Speakers</b> 20+ Professionals</span></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-3 col-md-6 col-xs-12 d-none">
                    <ul>
                        <li class="d-flex align-items-center">
                            <i class="lni-user"></i>
                        </li>
                        <li class="d-flex align-items-center"><span><b>Seats</b> 1000+ Attendees</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="intro" class="intro section-padding bg-transparent"
        style="background-color: rgba(0, 0, 0, 0.5) !important;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp text-white" data-wow-delay="0.2s">Why Attend KDHC 2026?</h2>
                        <p class="wow fadeInDown text-white" data-wow-delay="0.2s">
                        Be a part of diaspora-led cooperative models can drive <strong>inclusive economic transformation, democratize ownership,</strong> and <strong>promote shared prosperity</strong>.
                        </p>
                        <!-- <p class="text-white">
                            A commitment to ongoing and deepened collaboration and engagement among all stakeholders will be
                            emphasized.
                        </p> -->
                    </div>
                </div>
            </div>
            <div class="row intro-wrapper">
                <div class="col-lg-4 col-md-6 col-xs-12 h-100 shadow-none">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-microphone"></i>
                        <h6 class="fw-bold">🌍 Shape the Future Together</h6>
                        <p>Take part in the Government Commitment Session and the convention’s Joint Communiqué.</p>
                        <span class="count-number">01</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-users"></i>
                        <h6 class="fw-bold">💡 Be Among Visionary Leaders</h6>
                        <p>Meet investors, government officials and diaspora business leaders discussing capital, policy and opportunity.</p>
                        <span class="count-number">02</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-heart"></i>
                        <h6 class="fw-bold">🤝 Network, Collaborate, and Grow</h6>
                        <p>Build partnerships through the Investment Deal Room and structured networking.</p>
                        <span class="count-number">03</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-bullhorn"></i>
                        <h6 class="fw-bold">🧭 Discover Innovative Models</h6>
                        <p>Explore investment opportunities in banking, special economic zones, manufacturing, the blue economy and housing.</p>
                        <span class="count-number">04</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-cup"></i>
                        <h6 class="fw-bold">🔗 Leverage Technology for Change</h6>
                        <p>Discover AI, the digital economy and blockchain, alongside climate action and carbon credit opportunities.</p>
                        <span class="count-number">05</span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-xs-12 h-100">
                    <div class="single-intro-text mb-70 h-100">
                        <i class="lni-gallery"></i>
                        <h6 class="fw-bold">🌟 Empower Youth and Women</h6>
                        <p>Join the Women’s Economic Leadership Forum and Youth Innovation Track, including youth pitches and mentorship.</p>
                        <span class="count-number">06</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="counter-section section-padding d-none">
        <div class="container">
            <div class="row">

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-mic"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">20</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Speakers</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-bulb"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">1000</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Participants</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-briefcase"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">30</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Sponsors</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
                    <div class="counter">
                        <div class="icon">
                            <i class="lni-coffee-cup"></i>
                        </div>
                        <div class="counter-content">
                            <div class="d-flex">
                                <div class="counterUp">20</div>
                                <span style="font-size: 20px;" class="text-white ml-2">+</span>
                            </div>
                            <p>Sessions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if (isset($event_schedue))
        <section id="schedules" class="schedule section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="section-title-header text-center">
                            <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Schedules</h2>
                            <p class="wow fadeInDown" data-wow-delay="0.2s">
                                Explore event schedules, plan your experience, and make the most of every moment <br> during
                                our
                                enriching and dynamic
                                gathering.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 mb-5 text-center">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="monday-tab" data-toggle="tab" href="#monday"
                                    role="tab" aria-controls="monday" aria-expanded="true">
                                    <div class="item-text">
                                        <h4>Day 01</h4>
                                        <h5>09 December 2026</h5>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tuesday-tab" data-toggle="tab" href="#tuesday" role="tab"
                                    aria-controls="tuesday">
                                    <div class="item-text">
                                        <h4>Day 02</h4>
                                        <h5>10 December 2026</h5>
                                    </div>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="wednesday-tab" data-toggle="tab" href="#wednesday"
                                    role="tab" aria-controls="wednesday">
                                    <div class="item-text">
                                        <h4>Day 03</h4>
                                        <h5>11 December 2026</h5>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12">
                        <div class="schedule-area row wow fadeInDown" data-wow-delay="0.3s">
                            <div class="schedule-tab-content col-12 clearfix">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="monday" role="tabpanel"
                                        aria-labelledby="monday-tab">
                                        <div id="accordion">
                                            <div class="card">
                                                <div id="headingOne">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="false"
                                                        aria-controls="collapseOne">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo" aria-expanded="false"
                                                        aria-controls="collapseTwo">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>15 Free Productive Design Tools</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree" aria-expanded="false"
                                                        aria-controls="collapseThree">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Getting Started With SketchApp</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tuesday" role="tabpanel"
                                        aria-labelledby="tuesday-tab">
                                        <div id="accordion2">
                                            <div class="card">
                                                <div id="headingOne1">
                                                    <div class="schedule-slot-time">
                                                        <span> 1.30 - 2.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo2" aria-expanded="false"
                                                        aria-controls="collapseTwo2">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne1" class="collapse show"
                                                    aria-labelledby="headingOne1" data-parent="#accordion2">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo2">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne1" aria-expanded="false"
                                                        aria-controls="collapseOne1">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
                                                    data-parent="#accordion2">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="wednesday" role="tabpanel"
                                        aria-labelledby="wednesday-tab">
                                        <div id="accordion3">
                                            <div class="card">
                                                <div id="headingOne3">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne3" aria-expanded="false"
                                                        aria-controls="collapseOne3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne3" class="collapse show"
                                                    aria-labelledby="headingOne3" data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo3">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo3" aria-expanded="false"
                                                        aria-controls="collapseTwo3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo3" class="collapse" aria-labelledby="headingTwo3"
                                                    data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree3">
                                                    <div class="schedule-slot-time">
                                                        <span> 1.30 - 2.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree3" aria-expanded="false"
                                                        aria-controls="collapseThree3">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree3" class="collapse" aria-labelledby="headingThree3"
                                                    data-parent="#accordion3">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="friday" role="tabpanel"
                                        aria-labelledby="friday-tab">
                                        <div id="accordion">
                                            <div class="card">
                                                <div id="headingOne">
                                                    <div class="schedule-slot-time">
                                                        <span> 9.30 - 10.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseTwo" aria-expanded="false"
                                                        aria-controls="collapseTwo">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-2.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingTwo">
                                                    <div class="schedule-slot-time">
                                                        <span> 10.30 - 11.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="false"
                                                        aria-controls="collapseOne">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-1.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div id="headingThree">
                                                    <div class="schedule-slot-time">
                                                        <span> 11.30 - 12.30 AM</span>
                                                        Workshop
                                                    </div>
                                                    <div class="collapsed card-header" data-toggle="collapse"
                                                        data-target="#collapseThree" aria-expanded="false"
                                                        aria-controls="collapseThree">
                                                        <div class="images-box">
                                                            <img class="img-fluid" src="assets/img/speaker/speakers-3.jpg"
                                                                alt>
                                                        </div>
                                                        <h4>Web Design Principles and Best Practices</h4>
                                                        <h5 class="name">David Warner</h5>
                                                    </div>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                    data-parent="#accordion">
                                                    <div class="card-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
                                                            minima dolores rerum maiores qui at commodi quas, reprehenderit
                                                            eius consectetur quae magni molestias veniam, provident illum
                                                            facere iure libero asperiores! Lorem ipsum dolor sit amet,
                                                            consectetur adipisicing elit. Veniam earum nihil ex ipsa magni
                                                            eligendi fugiat assumenda suscipit, accusantium, necessitatibus
                                                            reiciendis odit sed, vero amet blanditiis?</p>
                                                        <div class="location">
                                                            <span>Location:</span> Hall 1 , Building A, Golden Street,
                                                            Southafrica
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section id="schedules" class="schedule section-padding" style="z-index: 999999 !important;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Convention Speakers</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Unearth a world of wisdom and insight. Discover our speakers and embrace every <br> instant
                            at
                            our
                            vibrant speaker showcase. Join us for an enlightening journey.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <div class="section-title-header text-start text-md-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Convention Speakers</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Unearth a world of wisdom and insight. Discover our speakers and embrace every <br> instant
                            at
                            our
                            vibrant speaker showcase. Join us for an enlightening journey.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 text-md-end text-start">
                    <form method="get" action="{{ route('welcome') }}" class="d-inline-flex align-items-center">
                        <label class="me-2 mb-0 fw-semibold">Year:</label>
                        <select name="speaker_year" class="form-select form-control" onchange="this.form.submit()"
                            style="max-width: 160px;">
                            @foreach (($speakerYears ?? []) as $year)
                                <option value="{{ $year }}" {{ (string) $year === (string) ($speakerYear ?? '') ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </div>
            <div class="row g-3 mb-3">
                @if (isset($speakers) && count($speakers) > 0)
                    @foreach ($speakers as $speaker)
                        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 text-center">
                            <div class=" position-relative text-center ">
                                <a href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"
                                    class="rounded-2 ">
                                    <div class="rounded-2 overflow-hidden ">
                                        <img src="{{ asset('storage/speakers/' . $speaker->avatar) }}" alt=""
                                            class="img-fluid rounded-2">
                                    </div>
                                </a>
                                <div class="position-absolute bottom-0 bg-transparent "></div>
                            </div>
                            <div class="mt-2 ">
                                <div class="">
                                    <a class="text-decoration-none text-dark"
                                        href="{{ route('view.event.speakers', ['slug' => $speaker->speaker_slug]) }}"><strong>{{ $speaker->name }}</strong></a>
                                </div>
                            </div>
                            <div class="">
                                {{ $speaker->title }}
                            </div>
                            <div class="">
                                {{ $speaker->organization }}
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center">
                        <p>Coming Soon...</p>
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                @endif
            </div>

            <div class="text-center">
                <a href="{{ route('event.speakers') }}" class="btn btn-info text-center rounded-1">View More</a>
            </div>
        </div>
    </section>

    <section id="gallery" class="section-padding d-none">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Event Gallery</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Revisit memorable moments through our event gallery, capturing the essence and
                            <br>highlights of our extraordinary
                            gathering, ensuring lasting memories.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="{{ asset('assets/img/gallery/img-1.jpg') }}" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="{{ asset('assets/img/gallery/img-1.jpg') }}">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="{{ asset('assets/img/gallery/img-2.jpg') }}" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="{{ asset('assets/img/gallery/img-2.jpg') }}">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-3.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-3.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-4.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-4.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-5.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-5.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-6.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-6.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-7.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-7.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="ccol-md-6 col-sm-6 col-lg-3">
                    <div class="gallery-box">
                        <div class="img-thumb">
                            <img class="img-fluid" src="assets/img/gallery/img-8.jpg" alt>
                        </div>
                        <div class="overlay-box text-center">
                            <a class="lightbox" href="assets/img/gallery/img-8.jpg">
                                <i class="lni-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-xs-12">
                    <a href="#" class="btn btn-common">Browse All</a>
                </div>
            </div>
        </div>
    </section>

    <section id="packages">
        {{-- @include('pages.packages') --}}
    </section>

    <section id="pricing" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
                            Advert & Partnership Opportunities
                        </h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Stand out from the crowd with our budget friendly advertising and <br>sponsorship
                            opportunities.
                            sponsorship and advertising
                            opportunities are available to help<br> increase visibility for your brand and drive more
                            traffic to your booth/website or
                            office.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12 mb-3">
                    <div class="row wow fadeInLeft bg-warning align-items-center p-3" data-wow-delay="0.5s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>{{ config('convention.tiers.0.name') }} PARTNERS</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.tiers.0.three_day')) }}</h2><p>3 days · USD {{ number_format(config('convention.tiers.0.one_day')) }} / day</p><span>{{ config('convention.tiers.0.slots') }} published slots · Exclusive of VAT</span></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul class="">@foreach(config('convention.tiers.0.benefits') as $benefit)<li class="d-flex align-items-start"><i class="lni-check-mark-circle mr-3 mt-2"></i><span>{{ $benefit }}</span></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-primary">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInUp bg-info p-3 align-items-center"
                        data-wow-delay="0.3s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>{{ config('convention.tiers.1.name') }} PARTNERS</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.tiers.1.three_day')) }}</h2><p>3 days · USD {{ number_format(config('convention.tiers.1.one_day')) }} / day</p><span>{{ config('convention.tiers.1.slots') }} published slots · Exclusive of VAT</span></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>@foreach(config('convention.tiers.1.benefits') as $benefit)<li class="d-flex align-items-start"><i class="lni-check-mark-circle mr-3 mt-2"></i><span>{{ $benefit }}</span></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-common">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>{{ config('convention.tiers.2.name') }} PARTNERS</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.tiers.2.three_day')) }}</h2><p>3 days · USD {{ number_format(config('convention.tiers.2.one_day')) }} / day</p><span>{{ config('convention.tiers.2.slots') }} published slots · Exclusive of VAT</span></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>@foreach(config('convention.tiers.2.benefits') as $benefit)<li class="d-flex align-items-start"><i class="lni-check-mark-circle mr-3 mt-2"></i><span>{{ $benefit }}</span></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInRight bg-success p-3 align-items-center"
                        data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5>{{ config('convention.tiers.3.name') }} PARTNERS</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.tiers.3.three_day')) }}</h2><p>3 days · USD {{ number_format(config('convention.tiers.3.one_day')) }} / day</p><span>{{ config('convention.tiers.3.slots') }} published slots · Exclusive of VAT</span></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul class="text-white">@foreach(config('convention.tiers.3.benefits') as $benefit)<li class="d-flex align-items-start"><i class="lni-check-mark-circle mr-3 mt-2"></i><span>{{ $benefit }}</span></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">{{ config('convention.tiers.4.name') }} PARTNERS</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.tiers.4.three_day')) }}</h2><p>3 days · USD {{ number_format(config('convention.tiers.4.one_day')) }} / day</p><span>{{ config('convention.tiers.4.slots') }} published slots · Exclusive of VAT</span></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul>@foreach(config('convention.tiers.4.benefits') as $benefit)<li class="d-flex align-items-start"><i class="lni-check-mark-circle mr-3 mt-2"></i><span>{{ $benefit }}</span></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow flex-md-row-reverse fadeInRight bg-success p-3 align-items-center"
                        data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">{{ config('convention.exhibitions.1.name') }}</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.exhibitions.1.three_day')) }}</h2><p>3 days · Exclusive of VAT</p></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul><li>USD {{ number_format(config('convention.exhibitions.1.one_day')) }} / day</li><li>9–11 December 2026 · Jacaranda Hotel, Westlands, Nairobi</li><li><a href="{{ route('registrations', ['type' => 'exhibitor']) }}">Register exhibition interest</a></li></ul>
                        </div>
                        {{-- <a href="#" class="btn btn-info">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">{{ config('convention.exhibitions.0.name') }}</h5>
                            </div>
                            <div class="price"><h2>USD {{ number_format(config('convention.exhibitions.0.three_day')) }}</h2><p>3 days · Exclusive of VAT</p></div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul><li>USD {{ number_format(config('convention.exhibitions.0.one_day')) }} / day</li><li>9–11 December 2026 · Jacaranda Hotel, Westlands, Nairobi</li><li><a href="{{ route('registrations', ['type' => 'exhibitor']) }}">Register exhibition interest</a></li></ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <div class="row p-0 wow fadeInRight bg-dark p-3 align-items-center text-white" data-wow-delay="0.4s">
                        <div class="col-md-3 text-center text-md-start">
                            <div class="column-title">
                                <h5 class="text-white">ONE DAY PACKAGE</h5>
                            </div>
                            <div class="price">
                            </div>
                        </div>
                        <div class="pricing-list col-md-9">
                            <ul><li>One-day exhibition rates, exclusive of VAT</li>@foreach(config('convention.exhibitions') as $slot)<li class="d-flex justify-content-between"><span>{{ $slot['name'] }}</span><strong>USD {{ number_format($slot['one_day']) }} / day</strong></li>@endforeach</ul>
                        </div>
                        {{-- <a href="#" class="btn btn-warning">Subscribe</a> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="blog" class="section-padding @if (isset($posts) && count($posts) > 0) @else d-none @endif">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">Latest News</h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">//</p>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($posts as $item)
                    <div class="col-lg-4 col-md-6 col-xs-12">
                        <div class="blog-item">
                            <div class="blog-image">
                                <a href="{{ route('view.post', $item->post_slug) }}">
                                    <img class="img-fluid" src="{{ asset('storage/posts/' . $item->post_image) }}" alt>
                                </a>
                            </div>
                            <div class="descr">
                                <div class="icon">
                                    <i class="lni-image"></i>
                                </div>
                                <h3 class="title">
                                    <a href="{{ route('view.post', $item->post_slug) }}">
                                        {{ Str::words($item->title, 5) }}
                                    </a>
                                </h3>
                                <p>{!! Str::words($item->post, 20) !!}</p>
                            </div>
                            <div class="meta-tags">
                                <span class="date"><i class="lni-calendar"></i>
                                    {{ date('jS M Y', strtotime($item->created_at)) }}</span>
                                <span class="comments"><i class="lni-comment-alt"></i> <a href="#"> 0
                                        Comment</a></span>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="col-12 text-center">
                    <a href="#" class="btn btn-common">View all Blogs</a>
                </div>
            </div>
        </div>
    </section>

    <section id="sponsors" class="section-padding position-relative" style="background-color: whitesmoke">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp text-black" data-wow-delay="0.2s">Our Partners</h2>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">
                            {{-- // --}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="row mb-30 text-center wow fadeInUp" data-wow-delay="0.3s">
                <!-- <div class="col-lg-12">
                    @include('pages.sponsors')
                </div> -->
                <div class="text-center">
                    <img src="{{ asset('assets/img/sponsors.jpg') }}" alt="Our Partners"
                        class="img-fluid rounded-2 shadow-sm" style="max-height: 420px; width: 100%; object-fit: contain;">
                </div>
                   
            </div>
        </div>
    </section>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg d-none" data-bs-toggle="modal" id="launchModalButton"
        data-bs-target="#changeOfVenue">
        CHange of venue
    </button>

    <!-- Modal -->
    <!-- <div class="modal fade" id="changeOfVenue" tabindex="-1" role="dialog" aria-labelledby="changeOfVenue"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 p-2 d-none">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <img src="{{ asset('assets/img/thank-you.jpg') }}" alt="" class="img-fluid rounded-2">
                </div>
            </div>
        </div>
    </div> -->

    <script>
        (function() {
            var daysEl = document.getElementById('kdhc-days');
            var hoursEl = document.getElementById('kdhc-hours');
            var minutesEl = document.getElementById('kdhc-minutes');
            var secondsEl = document.getElementById('kdhc-seconds');
            var messageEl = document.getElementById('kdhc-countdown-message');

            if (!daysEl || !hoursEl || !minutesEl || !secondsEl || !messageEl) {
                return;
            }

            var eventStart = new Date(@json(config('convention.starts_at'))).getTime();

            function pad(value) {
                return value.toString().padStart(2, '0');
            }

            function updateCountdown() {
                var now = Date.now();
                var diff = eventStart - now;

                if (diff <= 0) {
                    daysEl.textContent = '0';
                    hoursEl.textContent = '00';
                    minutesEl.textContent = '00';
                    secondsEl.textContent = '00';
                    messageEl.textContent = now >= new Date(@json(config('convention.ends_at'))).getTime() ? 'KDHC 2026 has concluded' : 'Event is live';
                    return;
                }

                var totalSeconds = Math.floor(diff / 1000);
                var days = Math.floor(totalSeconds / 86400);
                var hours = Math.floor((totalSeconds % 86400) / 3600);
                var minutes = Math.floor((totalSeconds % 3600) / 60);
                var seconds = totalSeconds % 60;

                daysEl.textContent = days;
                hoursEl.textContent = pad(hours);
                minutesEl.textContent = pad(minutes);
                secondsEl.textContent = pad(seconds);
                messageEl.textContent = days === 1 ? '1 day to go' : days + ' days to go';
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        })();
    </script>

    <script>
        var changeOfVenueButton = document.getElementById('launchModalButton');
        window.onload = function() {
            changeOfVenueButton.click();
        }
    </script>

@endsection