
<?php
require_once __DIR__ . "/site_content.php";
$homeContent = loadSiteContent();

function homeText($key)
{
    global $homeContent;
    return htmlspecialchars($homeContent[$key] ?? "", ENT_QUOTES, "UTF-8");
}
?>
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- =========================================================
         BASIC META
    ========================================================== -->

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <meta name="theme-color"
          content="#1D1C1A">

    <meta name="description"
          content="<?= homeText("home_meta_description") ?>">

    <meta name="keywords"
          content="<?= homeText("home_meta_keywords") ?>">

    <meta name="author"
          content="Kwithu Furniture">

    <meta name="robots"
          content="index, follow">

    <link rel="canonical"
          href="https://kwithumw.com/">

    <!-- =========================================================
         TITLE
    ========================================================== -->

    <title><?= homeText("home_page_title") ?></title>

    <!-- =========================================================
         FAVICON
    ========================================================== -->

    <link rel="icon"
          type="image/png"
          href="<?= homeText("home_logo") ?>">

    <!-- =========================================================
         GOOGLE FONTS
    ========================================================== -->

    <link rel="preconnect"
          href="https://fonts.googleapis.com">

    <link rel="preconnect"
          href="https://fonts.gstatic.com"
          crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap"
          rel="stylesheet">

    <!-- =========================================================
         SWIPER
    ========================================================== -->

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    <!-- =========================================================
         AOS
    ========================================================== -->

    <link rel="stylesheet"
          href="https://unpkg.com/aos@2.3.1/dist/aos.css">

        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <!-- =========================================================
         MAIN CSS
    ========================================================== -->

    <link rel="stylesheet"
          href="style.css">

</head>


<body>

<!-- =========================================================
     SITE HEADER
========================================================== -->

<header class="site-header" id="siteHeader">

    <div class="header-container">

        <!-- LOGO -->

        <a href="index"
           class="brand-logo"
           aria-label="Kwithu Furniture Home">

            <img src="<?= homeText("home_logo") ?>"
                 alt="Kwithu Furniture"
                 loading="eager">

        </a>


        <!-- DESKTOP NAVIGATION -->

        <nav class="main-navigation"
             id="mainNavigation"
             aria-label="Main navigation">

            <a href="index"
               class="nav-link active">
                <?= homeText("home_nav_home") ?>
            </a>

            <a href="about"
               class="nav-link">
               <?= homeText("home_nav_story") ?>
            </a>

            <a href="collection"
               class="nav-link">
                <?= homeText("home_nav_collection") ?>
            </a>

            <a href="custom-furniture"
               class="nav-link">
                <?= homeText("home_nav_custom") ?>
            </a>

            <a href="gallery"
               class="nav-link">
                <?= homeText("home_nav_gallery") ?>
            </a>

            <a href="contact"
               class="nav-link">
                <?= homeText("home_nav_contact") ?>
            </a>

        </nav>


        <!-- HEADER CTA -->

        <a href="contact"
           class="header-cta">

            <span><?= homeText("home_header_cta") ?></span>

            <i class="fa-solid fa-arrow-up-right-from-square"></i>

        </a>


        <!-- MOBILE MENU BUTTON -->

        <button class="menu-toggle"
                id="menuToggle"
                type="button"
                aria-label="Open navigation"
                aria-expanded="false"
                aria-controls="mobileMenu">

            <span></span>
            <span></span>

        </button>

    </div>

</header>


<!-- =========================================================
     MOBILE MENU OVERLAY
========================================================== -->

<div class="mobile-menu"
     id="mobileMenu"
     aria-hidden="true">

    <div class="mobile-menu-inner">

        <div class="mobile-menu-top">

            <span><?= homeText("home_mobile_menu_title") ?></span>

            <button class="mobile-menu-close"
                    id="mobileMenuClose"
                    type="button"
                    aria-label="Close navigation">

                <i class="fa-solid fa-xmark"></i>

            </button>

        </div>


        <nav class="mobile-navigation"
             aria-label="Mobile navigation">

            <a href="index">
                <span>01</span>
                <?= homeText("home_nav_home") ?>
            </a>

            <a href="about">
                <span>02</span>
                <?= homeText("home_nav_story") ?>
            </a>

            <a href="collection">
                <span>03</span>
                <?= homeText("home_nav_collection") ?>
            </a>

            <a href="custom-furniture">
                <span>04</span>
                <?= homeText("home_nav_custom") ?>
            </a>

            <a href="gallery">
                <span>05</span>
                <?= homeText("home_nav_gallery") ?>
            </a>

            <a href="contact">
                <span>06</span>
                <?= homeText("home_nav_contact") ?>
            </a>

        </nav>


        <div class="mobile-menu-bottom">

            <p>
                <?= homeText("home_mobile_menu_copy") ?>
            </p>

            <a href="https://wa.me/<?= homeText("home_whatsapp_number") ?>"
               target="_blank"
               rel="noopener"
               class="mobile-whatsapp">

                <?= homeText("home_mobile_menu_button") ?>

                <i class="fa-brands fa-whatsapp"></i>

            </a>

        </div>

    </div>

</div>


<!-- =========================================================
     HERO SECTION
========================================================== -->

<main>

<section class="hero-section">

    <!-- HERO SLIDER -->

    <div class="swiper hero-swiper">

        <div class="swiper-wrapper">


            <!-- SLIDE 01 -->

            <div class="swiper-slide hero-slide hero-slide-one" style="background-image:url('<?= homeText("home_hero_image_one") ?>')">

                <div class="hero-overlay"></div>

                <div class="hero-content page-container">

                    <div class="hero-eyebrow"
                         data-aos="fade-up">

                        <span class="eyebrow-line"></span>

                        <?= homeText("home_hero_eyebrow_one") ?>

                    </div>


                    <h1 data-aos="fade-up"
                        data-aos-delay="100">

                        <?= homeText("home_hero_title_one") ?>
                        <em><?= homeText("home_hero_emphasis_one") ?></em>

                    </h1>


                    <p data-aos="fade-up"
                       data-aos-delay="200">

                        <?= homeText("home_hero_copy_one") ?>

                    </p>


                    <div class="hero-actions"
                         data-aos="fade-up"
                         data-aos-delay="300">

                        <a href="collection"
                           class="btn btn-primary">

                            <?= homeText("home_hero_button_one") ?>

                            <i class="fa-solid fa-arrow-right"></i>

                        </a>


                        <a href="custom-furniture"
                           class="btn btn-outline">

                            <?= homeText("home_hero_button_two") ?>

                        </a>

                    </div>

                </div>


                <div class="hero-slide-number">

                    <span>03</span>

                    <span class="slide-divider"></span>

                    <span>03</span>

                </div>

            </div>


            <!-- SLIDE 02 -->

            <div class="swiper-slide hero-slide hero-slide-two" style="background-image:url('<?= homeText("home_hero_image_two") ?>')">

                <div class="hero-overlay"></div>

                <div class="hero-content page-container">

                    <div class="hero-eyebrow">

                        <span class="eyebrow-line"></span>

                        <?= homeText("home_hero_eyebrow_two") ?>

                    </div>


                    <h1>

                        <?= homeText("home_hero_title_two") ?>
                        <em><?= homeText("home_hero_emphasis_two") ?></em>

                    </h1>


                    <p>

                        <?= homeText("home_hero_copy_two") ?>

                    </p>


                    <div class="hero-actions">

                        <a href="gallery"
                           class="btn btn-primary">

                            <?= homeText("home_hero_button_three") ?>

                            <i class="fa-solid fa-arrow-right"></i>

                        </a>

                    </div>

                </div>


                <div class="hero-slide-number">

                    <span>02</span>

                    <span class="slide-divider"></span>

                    <span>03</span>

                </div>

            </div>


            <!-- SLIDE 03 -->

            <div class="swiper-slide hero-slide hero-slide-three" style="background-image:url('<?= homeText("home_hero_image_three") ?>')">

                <div class="hero-overlay"></div>

                <div class="hero-content page-container">

                    <div class="hero-eyebrow">

                        <span class="eyebrow-line"></span>

                        <?= homeText("home_hero_eyebrow_three") ?>

                    </div>


                    <h1>

                        <?= homeText("home_hero_title_three") ?>
                        <em><?= homeText("home_hero_emphasis_three") ?></em>

                    </h1>


                    <p>

                        <?= homeText("home_hero_copy_three") ?>

                    </p>


                    <div class="hero-actions">

                        <a href="about"
                           class="btn btn-primary">

                            <?= homeText("home_hero_button_four") ?>

                            <i class="fa-solid fa-arrow-right"></i>

                        </a>

                    </div>

                </div>


                <div class="hero-slide-number">

                    <span>01</span>

                    <span class="slide-divider"></span>

                    <span>03</span>

                </div>

            </div>

        </div>


        <!-- HERO PAGINATION -->

        <div class="swiper-pagination"></div>


        <!-- HERO NAVIGATION -->

        <div class="hero-navigation">

            <button class="hero-prev"
                    type="button"
                    aria-label="Previous slide">

                <i class="fa-solid fa-arrow-left"></i>

            </button>

            <button class="hero-next"
                    type="button"
                    aria-label="Next slide">

                <i class="fa-solid fa-arrow-right"></i>

            </button>

        </div>

    </div>


    <!-- HERO BOTTOM NOTE -->

    <div class="hero-bottom">

        <div class="hero-bottom-left">

            <span class="scroll-line"></span>

            <span><?= homeText("home_scroll_note") ?></span>

        </div>


        <div class="hero-bottom-right">

            <span><?= homeText("home_location_city") ?></span>

            <span class="dot"></span>

            <span><?= homeText("home_location_country") ?></span>

        </div>

    </div>

</section>


<!-- =========================================================
     INTRO / BRAND STATEMENT
========================================================== -->

<section class="intro-section section-padding">

    <div class="page-container">

        <div class="intro-grid">

            <div class="section-label"
                 data-aos="fade-up">

                    <span>03</span>

                <span class="label-line"></span>

                <span><?= homeText("home_intro_label") ?></span>

            </div>


            <div class="intro-content"
                 data-aos="fade-up"
                 data-aos-delay="100">

                <h2>

                    <?= homeText("home_intro_title") ?>
                    <span><?= homeText("home_intro_emphasis") ?></span>

                </h2>


                <div class="intro-bottom">

                    <p>

                        <?= homeText("home_intro_copy") ?>

                    </p>


                    <a href="about"
                       class="text-link">

                        <?= homeText("home_intro_button") ?>

                        <span>
                            <i class="fa-solid fa-arrow-right"></i>
                        </span>

                    </a>

                </div>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     FEATURED COLLECTION
========================================================== -->

<section class="collection-section section-padding">

    <div class="page-container">

        <div class="section-heading-row">

            <div>

                <div class="section-label"
                     data-aos="fade-up">

                    <span>02</span>

                    <span class="label-line"></span>

                    <span><?= homeText("home_collection_label") ?></span>

                </div>


                <h2 class="section-title"
                    data-aos="fade-up"
                    data-aos-delay="100">

                    <?= homeText("home_collection_title") ?>
                    <em><?= homeText("home_collection_emphasis") ?></em>

                </h2>

            </div>


            <a href="collection"
               class="desktop-view-all"
               data-aos="fade-up">

                <?= homeText("home_collection_button") ?>

                <i class="fa-solid fa-arrow-up-right-from-square"></i>

            </a>

        </div>


        <!-- FEATURED PRODUCTS -->

        <div class="featured-grid">


            <!-- PRODUCT 01 -->

            <a href="collection.php#sofas"
               class="featured-card featured-card-large"
               data-aos="fade-up">

                <div class="featured-image">

                    <img src="<?= homeText("home_feature_image_one") ?>"
                         alt="Contemporary handcrafted sofa"
                         loading="lazy">

                </div>


                <div class="featured-info">

                    <div>

                        <span class="product-number">
                            01
                        </span>

                        <h3><?= homeText("home_feature_title_one") ?></h3>

                    </div>


                    <span class="card-arrow">

                        <i class="fa-solid fa-arrow-up-right"></i>

                    </span>

                </div>

            </a>


            <!-- PRODUCT 02 -->

            <a href="collection.php#tables"
               class="featured-card"
               data-aos="fade-up"
               data-aos-delay="100">

                <div class="featured-image">

                    <img src="<?= homeText("home_feature_image_two") ?>"
                         alt="Modern wooden coffee table"
                         loading="lazy">

                </div>


                <div class="featured-info">

                    <div>

                        <span class="product-number">
                            02
                        </span>

                        <h3><?= homeText("home_feature_title_two") ?></h3>

                    </div>


                    <span class="card-arrow">

                        <i class="fa-solid fa-arrow-up-right"></i>

                    </span>

                </div>

            </a>


            <!-- PRODUCT 03 -->

            <a href="collection.php#dining"
               class="featured-card"
               data-aos="fade-up"
               data-aos-delay="200">

                <div class="featured-image">

                    <img src="<?= homeText("home_feature_image_three") ?>"
                         alt="Contemporary dining furniture"
                         loading="lazy">

                </div>


                <div class="featured-info">

                    <div>

                        <span class="product-number">
                            03
                        </span>

                        <h3><?= homeText("home_feature_title_three") ?></h3>

                    </div>


                    <span class="card-arrow">

                        <i class="fa-solid fa-arrow-up-right"></i>

                    </span>

                </div>

            </a>


            <!-- PRODUCT 04 -->

            <a href="collection.php#tv-stands"
               class="featured-card"
               data-aos="fade-up"
               data-aos-delay="300">

                <div class="featured-image">

                    <img src="<?= homeText("home_feature_image_four") ?>"
                         alt="Modern wooden furniture"
                         loading="lazy">

                </div>


                <div class="featured-info">

                    <div>

                        <span class="product-number">
                            04
                        </span>

                        <h3><?= homeText("home_feature_title_four") ?></h3>

                    </div>


                    <span class="card-arrow">

                        <i class="fa-solid fa-arrow-up-right"></i>

                    </span>

                </div>

            </a>

        </div>


        <div class="mobile-view-all"
             data-aos="fade-up">

            <a href="collection"
               class="btn btn-dark">

                <?= homeText("home_collection_button") ?>

                <i class="fa-solid fa-arrow-right"></i>

            </a>

        </div>

    </div>

</section>


<!-- =========================================================
     CRAFTSMANSHIP FEATURE
========================================================== -->

<section class="craft-section">

    <div class="craft-image">

        <img src="<?= homeText("home_craft_image") ?>"
             alt="Furniture craftsmanship and woodworking"
             loading="lazy">

    </div>


    <div class="craft-content">

        <div class="section-label light"
             data-aos="fade-up">

            <span>03</span>

            <span class="label-line"></span>

            <span><?= homeText("home_craft_label") ?></span>

        </div>


        <h2 data-aos="fade-up"
            data-aos-delay="100">

            <?= homeText("home_craft_title") ?>
            <br>

            <em><?= homeText("home_craft_emphasis") ?></em>

        </h2>


        <p data-aos="fade-up"
           data-aos-delay="200">

            <?= homeText("home_craft_copy") ?>

        </p>


        <a href="about"
           class="light-link"
           data-aos="fade-up"
           data-aos-delay="300">

            <?= homeText("home_craft_button") ?>

            <i class="fa-solid fa-arrow-right"></i>

        </a>

    </div>

</section>


<!-- =========================================================
     VALUES / THREE PILLARS
========================================================== -->

<section class="values-section section-padding">

    <div class="page-container">

        <div class="values-header">

            <div class="section-label"
                 data-aos="fade-up">

                <span>04</span>

                <span class="label-line"></span>

                <span><?= homeText("home_values_label") ?></span>

            </div>


            <h2 class="section-title"
                data-aos="fade-up"
                data-aos-delay="100">

                <?= homeText("home_values_title") ?>
                <em><?= homeText("home_values_emphasis") ?></em>

            </h2>

        </div>


        <div class="values-grid">


            <!-- VALUE 01 -->

            <article class="value-card"
                     data-aos="fade-up">

                <span class="value-number">
                    01
                </span>


                <div class="value-icon">

                    <i class="fa-solid fa-pen-ruler"></i>

                </div>


                <h3>
                    <?= homeText("home_value_title_one") ?>
                </h3>


                <p>

                    <?= homeText("home_value_copy_one") ?>

                </p>

            </article>


            <!-- VALUE 02 -->

            <article class="value-card"
                     data-aos="fade-up"
                     data-aos-delay="100">

                <span class="value-number">
                    02
                </span>


                <div class="value-icon">

                    <i class="fa-solid fa-hammer"></i>

                </div>


                <h3>
                    <?= homeText("home_value_title_two") ?>
                </h3>


                <p>

                    <?= homeText("home_value_copy_two") ?>

                </p>

            </article>


            <!-- VALUE 03 -->

            <article class="value-card"
                     data-aos="fade-up"
                     data-aos-delay="200">

                <span class="value-number">
                    03
                </span>


                <div class="value-icon">

                    <i class="fa-solid fa-leaf"></i>

                </div>


                <h3>
                    <?= homeText("home_value_title_three") ?>
                </h3>


                <p>

                    <?= homeText("home_value_copy_three") ?>

                </p>

            </article>

        </div>

    </div>

</section>


<!-- =========================================================
     CUSTOM FURNITURE
========================================================== -->

<section class="custom-section section-padding">

    <div class="page-container">

        <div class="custom-grid">

            <div class="custom-content"
                 data-aos="fade-right">

                <div class="section-label">

                    <span>05</span>

                    <span class="label-line"></span>

                    <span><?= homeText("home_custom_label") ?></span>

                </div>


                <h2>

                    <?= homeText("home_custom_title_start") ?>
                    <em><?= homeText("home_custom_title_emphasis") ?></em>
                    <?= homeText("home_custom_title_end") ?>

                </h2>


                <p>

                    <?= homeText("home_custom_copy") ?>

                </p>


                <a href="custom-furniture"
                   class="btn btn-dark">

                    <?= homeText("home_custom_button") ?>

                    <i class="fa-solid fa-arrow-right"></i>

                </a>

            </div>


            <div class="custom-visual"
                 data-aos="fade-left">

                <div class="custom-main-image">

                    <img src="<?= homeText("home_custom_image_one") ?>"
                         alt="Premium custom furniture interior"
                         loading="lazy">

                </div>


                <div class="custom-small-image">

                    <img src="<?= homeText("home_custom_image_two") ?>"
                         alt="Custom furniture detail"
                         loading="lazy">

                </div>


                <div class="custom-number">
                    05
                </div>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     SUSTAINABILITY
========================================================== -->

<section class="sustainability-section">

    <div class="sustainability-image">

        <img src="<?= homeText("home_materials_image") ?>"
             alt="Natural wood furniture and interior"
             loading="lazy">

    </div>


    <div class="sustainability-content">

        <div class="section-label light"
             data-aos="fade-up">

            <span>06</span>

            <span class="label-line"></span>

            <span><?= homeText("home_materials_label") ?></span>

        </div>


        <h2 data-aos="fade-up"
            data-aos-delay="100">

            <?= homeText("home_materials_title") ?>
            <em><?= homeText("home_materials_emphasis") ?></em>

        </h2>


        <p data-aos="fade-up"
           data-aos-delay="200">

            <?= homeText("home_materials_copy") ?>

        </p>


        <a href="about#sustainability"
           class="light-link"
           data-aos="fade-up"
           data-aos-delay="300">

            <?= homeText("home_materials_button") ?>

            <i class="fa-solid fa-arrow-right"></i>

        </a>

    </div>

</section>


<!-- =========================================================
     GALLERY PREVIEW
========================================================== -->

<section class="gallery-section section-padding">

    <div class="page-container">

        <div class="section-heading-row">

            <div>

                <div class="section-label"
                     data-aos="fade-up">

                    <span>07</span>

                    <span class="label-line"></span>

                    <span><?= homeText("home_gallery_label") ?></span>

                </div>


                <h2 class="section-title"
                    data-aos="fade-up"
                    data-aos-delay="100">

                    <?= homeText("home_gallery_title") ?>
                    <em><?= homeText("home_gallery_emphasis") ?></em>

                </h2>

            </div>


            <a href="gallery"
               class="desktop-view-all"
               data-aos="fade-up">

                <?= homeText("home_gallery_button") ?>

                <i class="fa-solid fa-arrow-up-right-from-square"></i>

            </a>

        </div>


        <div class="gallery-grid">


            <a href="gallery"
               class="gallery-item gallery-item-one"
               data-aos="fade-up">

                <img src="<?= homeText("home_gallery_image_one") ?>"
                     alt="Elegant contemporary living room"
                     loading="lazy">

                <span class="gallery-overlay">

                    <span><?= homeText("home_gallery_caption_one") ?></span>

                    <i class="fa-solid fa-arrow-up-right"></i>

                </span>

            </a>


            <a href="gallery"
               class="gallery-item gallery-item-two"
               data-aos="fade-up"
               data-aos-delay="100">

                <img src="<?= homeText("home_gallery_image_two") ?>"
                     alt="Modern wooden furniture"
                     loading="lazy">

                <span class="gallery-overlay">

                    <span><?= homeText("home_gallery_caption_two") ?></span>

                    <i class="fa-solid fa-arrow-up-right"></i>

                </span>

            </a>


            <a href="gallery"
               class="gallery-item gallery-item-three"
               data-aos="fade-up"
               data-aos-delay="200">

                <img src="<?= homeText("home_gallery_image_three") ?>"
                     alt="Contemporary interior furniture"
                     loading="lazy">

                <span class="gallery-overlay">

                    <span><?= homeText("home_gallery_caption_three") ?></span>

                    <i class="fa-solid fa-arrow-up-right"></i>

                </span>

            </a>


            <a href="gallery"
               class="gallery-item gallery-item-four"
               data-aos="fade-up"
               data-aos-delay="300">

                <img src="<?= homeText("home_gallery_image_four") ?>"
                     alt="Modern furniture arrangement"
                     loading="lazy">

                <span class="gallery-overlay">

                    <span><?= homeText("home_gallery_caption_four") ?></span>

                    <i class="fa-solid fa-arrow-up-right"></i>

                </span>

            </a>

        </div>


        <div class="mobile-view-all"
             data-aos="fade-up">

            <a href="gallery"
               class="btn btn-dark">

                <?= homeText("home_gallery_button") ?>

                <i class="fa-solid fa-arrow-right"></i>

            </a>

        </div>

    </div>

</section>


<!-- =========================================================
     FINAL CTA
========================================================== -->

<section class="final-cta">

    <div class="final-cta-background">

        <img src="<?= homeText("home_cta_image") ?>"
             alt="Luxury contemporary furniture interior"
             loading="lazy">

    </div>


    <div class="final-cta-overlay"></div>


    <div class="final-cta-content page-container"
         data-aos="fade-up">

        <div class="section-label light">

            <span>08</span>

            <span class="label-line"></span>

            <span><?= homeText("home_cta_label") ?></span>

        </div>


        <h2>

            <?= homeText("home_cta_title") ?>
            <em><?= homeText("home_cta_emphasis") ?></em>

        </h2>


        <p>

            <?= homeText("home_cta_copy") ?>

        </p>


        <div class="final-cta-actions">

            <a href="collection"
               class="btn btn-light">

                <?= homeText("home_cta_button_one") ?>

                <i class="fa-solid fa-arrow-right"></i>

            </a>


            <a href="https://wa.me/<?= homeText("home_whatsapp_number") ?>"
               target="_blank"
               rel="noopener"
               class="btn btn-gold">

                <?= homeText("home_cta_button_two") ?>

                <i class="fa-brands fa-whatsapp"></i>

            </a>

        </div>

    </div>

</section>

</main>


<!-- =========================================================
     FOOTER
========================================================== -->

<footer class="site-footer">

    <div class="page-container">


        <!-- FOOTER TOP -->

        <div class="footer-top">


            <!-- FOOTER BRAND -->

            <div class="footer-brand">

                <a href="index"
                   class="footer-logo">

                    <img src="<?= homeText("home_logo") ?>"
                         alt="Kwithu Furniture"
                         loading="lazy">

                </a>


                <p>

                    <?= homeText("home_footer_tagline") ?>

                </p>


                <a href="https://wa.me/<?= homeText("home_whatsapp_number") ?>"
                   target="_blank"
                   rel="noopener"
                   class="footer-whatsapp">

                    <i class="fa-brands fa-whatsapp"></i>

                    <?= homeText("home_footer_phone") ?>

                </a>

            </div>


            <!-- FOOTER NAV -->

            <div class="footer-column">

                <h3><?= homeText("home_footer_explore_heading") ?></h3>

                <a href="index"><?= homeText("home_nav_home") ?></a>

                <a href="about"><?= homeText("home_nav_story") ?></a>

                <a href="collection"><?= homeText("home_nav_collection") ?></a>

                <a href="custom-furniture">
                    <?= homeText("home_nav_custom") ?>
                </a>

            </div>


            <div class="footer-column">

                <h3><?= homeText("home_footer_discover_heading") ?></h3>

                <a href="gallery"><?= homeText("home_nav_gallery") ?></a>

                <a href="contact"><?= homeText("home_nav_contact") ?></a>

                <a href="admin/login"><?= homeText("home_footer_admin") ?></a>

                <a href="collection.php#sofas"><?= homeText("home_footer_sofas") ?></a>

                <a href="collection.php#dining"><?= homeText("home_footer_dining") ?></a>

            </div>



            <!-- FOOTER CONTACT -->

            <div class="footer-column footer-contact">

                <h3><?= homeText("home_footer_visit_heading") ?></h3>

                <p>
                    <?= homeText("home_footer_address") ?>
                    <br>
                    <?= homeText("home_footer_city") ?>
                </p>


                <a href="https://www.google.com/maps/search/?api=1&amp;query=<?= rawurlencode($homeContent["home_footer_address"] . " " . $homeContent["home_footer_city"]) ?>"
                   target="_blank"
                   rel="noopener">

                    <?= homeText("home_footer_directions") ?>

                    <i class="fa-solid fa-arrow-up-right"></i>

                </a>

            </div>

        </div>


        <!-- FOOTER BOTTOM -->

        <div class="footer-bottom">

            <p>

                © <span id="currentYear"></span>
                <?= homeText("home_footer_copyright") ?>

            </p>


            <div class="footer-socials">

                <a href="#"
                   aria-label="Facebook">

                    <i class="fa-brands fa-facebook-f"></i>

                </a>

                <a href="#"
                   aria-label="Instagram">

                    <i class="fa-brands fa-instagram"></i>

                </a>

                <a href="#"
                   aria-label="LinkedIn">

                    <i class="fa-brands fa-linkedin-in"></i>

                </a>

            </div>


            <p class="footer-credit">

                Designed by
                <a href="https://innotidetech.co.tz"
                   target="_blank"
                   rel="noopener noreferrer">Innotide Tech</a>

            </p>

        </div>

    </div>

</footer>


<!-- =========================================================
     FLOATING WHATSAPP
========================================================== -->

<a href="https://wa.me/<?= homeText("home_whatsapp_number") ?>"
   class="floating-whatsapp"
   target="_blank"
   rel="noopener"
   aria-label="Chat with Kwithu Furniture on WhatsApp">

    <i class="fa-brands fa-whatsapp"></i>

    <span><?= homeText("home_floating_chat") ?></span>

</a>


<!-- =========================================================
     SWIPER JS
========================================================== -->

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


<!-- =========================================================
     AOS JS
========================================================== -->

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>


<!-- =========================================================
     MAIN JS
========================================================== -->

<script src="js/script.js"></script>

</body>

</html>
