<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($this->viewData['title'] ?? 'Balorp Ventures') ?></title>
    <meta name="description" content="Balorp Ventures is a premium finishing and interior solutions company specializing in renovations, interior décor, painting, flooring, ceilings, landscaping, and complete building finishing services for residential and commercial properties.">
    <link rel="icon" type="image/png" href="<?= htmlspecialchars($baseUrl) ?>/images/favicon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <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=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0" rel="stylesheet">
    <link rel="stylesheet" href="<?= htmlspecialchars($baseUrl) ?>/css/style.css">
    <link rel="stylesheet" href="<?= htmlspecialchars($baseUrl) ?>/css/theme.css">
    <base href="<?= htmlspecialchars($baseUrl) ?>/">
</head>
<body class="bg-luxury-cream text-premium-charcoal antialiased">
<!-- Top Navigation Bar -->
<div class="topbar text-white py-2.5 border-b border-white/10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
            <?php $topbarEmail = $siteSettings['topbar_email'] ?? 'balorpv@gmail.com'; ?>
            <?php $topbarPhone = $siteSettings['topbar_phone'] ?? '+233 55 936 2818'; ?>
            <?php $topbarPhoneLink = 'tel:' . preg_replace('/[^0-9+]/', '', $topbarPhone); ?>
            <?php $topbarLocation = $siteSettings['topbar_location'] ?? 'Accra, Ghana'; ?>
            <div class="topbar-info hidden md:flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs md:text-sm">
                <a href="mailto:<?= htmlspecialchars($topbarEmail) ?>" class="topbar-link">
                    <span class="topbar-icon-wrap"><span class="material-symbols-outlined icon-filled">mail</span></span>
                    <span><?= htmlspecialchars($topbarEmail) ?></span>
                </a>
                <a href="<?= htmlspecialchars($topbarPhoneLink) ?>" class="topbar-link">
                    <span class="topbar-icon-wrap"><span class="material-symbols-outlined icon-filled">call</span></span>
                    <span><?= htmlspecialchars($topbarPhone) ?></span>
                </a>
                <span class="topbar-link topbar-link-static">
                    <span class="topbar-icon-wrap"><span class="material-symbols-outlined icon-filled">location_on</span></span>
                    <span><?= htmlspecialchars($topbarLocation) ?></span>
                </span>
            </div>
            <div class="flex items-center gap-3 mx-auto md:mx-0 md:ml-auto">
                <span class="text-xs md:text-sm font-medium text-white/80 hidden sm:inline">Follow us</span>
                <div class="social-icons-row">
                    <a href="<?= htmlspecialchars($siteSettings['facebook_url'] ?? '#') ?>" title="Facebook" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    <a href="<?= htmlspecialchars($siteSettings['instagram_url'] ?? 'https://www.instagram.com/balorp_v/') ?>" title="Instagram" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    <a href="<?= htmlspecialchars($siteSettings['linkedin_url'] ?? '#') ?>" title="LinkedIn" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 114.126 0 2.063 2.063 0 01-2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                    </a>
                    <a href="<?= htmlspecialchars($siteSettings['tiktok_url'] ?? 'https://www.tiktok.com/@balorp_v') ?>" title="TikTok" class="social-icon-link" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.59-1.01V14.5c.01 2.32-.6 4.67-2.06 6.51-1.74 2.19-4.46 3.42-7.23 3.12-2.77-.3-5.28-2.05-6.5-4.59-1.32-2.75-1-6.11.83-8.57 1.48-1.99 3.84-3.13 6.34-3.1 1.07.01 2.13.2 3.13.57V12.6c-.66-.33-1.41-.5-2.15-.49-1.48.01-2.92.74-3.8 1.93-.88 1.19-1.09 2.77-.58 4.15.51 1.38 1.72 2.45 3.16 2.75 1.44.3 2.97-.08 3.99-1.11.81-.82 1.25-1.95 1.24-3.09V.02z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Header -->
<header x-data="{open:false, scrolled:false}" @scroll.window="scrolled = window.scrollY > 20" class="site-header sticky top-0 z-50 transition-shadow duration-300" :class="scrolled ? 'header-scrolled' : ''">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between gap-4">
        <div class="flex-shrink-0">
            <a href="<?= htmlspecialchars($baseUrl) ?>/" class="inline-flex items-center">
                <img src="<?= htmlspecialchars($baseUrl) ?>/images/balorplogo1.png" alt="Balorp Ventures logo" class="site-logo header-logo">
            </a>
        </div>

        <?php $navHomeLabel = $siteSettings['nav_home_label'] ?? 'Home'; ?>
        <?php $navAboutLabel = $siteSettings['nav_about_label'] ?? 'About Us'; ?>
        <?php $navServicesLabel = $siteSettings['nav_services_label'] ?? 'Services'; ?>
        <?php $navPortfolioLabel = $siteSettings['nav_portfolio_label'] ?? 'Projects'; ?>
        <?php $navGalleryLabel = $siteSettings['nav_gallery_label'] ?? 'Gallery'; ?>
        <?php $navBlogLabel = $siteSettings['nav_blog_label'] ?? 'Blog'; ?>
        <?php $navContactLabel = $siteSettings['nav_contact_label'] ?? 'Contact Us'; ?>
        <?php $navEstimateLabel = $siteSettings['nav_estimate_label'] ?? 'Get Estimate'; ?>
        <nav class="hidden lg:flex items-center gap-1 text-sm font-medium flex-1 justify-center">
            <a href="<?= htmlspecialchars($baseUrl) ?>/" class="nav-link"><span class="material-symbols-outlined nav-link-icon">home</span><?= htmlspecialchars($navHomeLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/about" class="nav-link"><span class="material-symbols-outlined nav-link-icon">info</span><?= htmlspecialchars($navAboutLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/services" class="nav-link"><span class="material-symbols-outlined nav-link-icon">design_services</span><?= htmlspecialchars($navServicesLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/portfolio" class="nav-link"><span class="material-symbols-outlined nav-link-icon">apartment</span><?= htmlspecialchars($navPortfolioLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/gallery" class="nav-link"><span class="material-symbols-outlined nav-link-icon">photo_library</span><?= htmlspecialchars($navGalleryLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/blog" class="nav-link"><span class="material-symbols-outlined nav-link-icon">article</span><?= htmlspecialchars($navBlogLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/contact" class="nav-link"><span class="material-symbols-outlined nav-link-icon">mail</span><?= htmlspecialchars($navContactLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/estimate" class="nav-link"><span class="material-symbols-outlined nav-link-icon">request_quote</span><?= htmlspecialchars($navEstimateLabel) ?></a>
        </nav>

        <div class="hidden lg:block flex-shrink-0">
            <a href="<?= htmlspecialchars($baseUrl) ?>/login" class="inline-flex items-center gap-2 px-5 py-2.5 btn-primary rounded-full font-semibold text-white text-sm">
                <span class="material-symbols-outlined text-lg">admin_panel_settings</span>
                Admin
            </a>
        </div>

        <div class="lg:hidden">
            <button @click="open = !open" :aria-expanded="open.toString()" aria-controls="mobile-menu" aria-label="Toggle menu" class="menu-toggle inline-flex items-center justify-center p-2 rounded-xl text-premium-charcoal hover:text-balorp-magenta hover:bg-soft-beige">
                <span x-show="!open" class="material-symbols-outlined text-2xl">menu</span>
                <span x-show="open" x-cloak class="material-symbols-outlined text-2xl">close</span>
            </button>
        </div>
    </div>

    <div id="mobile-menu" x-show="open" x-cloak @keydown.escape.window="open = false" @click.away="open = false"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 -translate-y-2"
         class="lg:hidden bg-white border-t border-slate-100 shadow-lg">
        <div class="px-4 py-4 space-y-1">
            <a href="<?= htmlspecialchars($baseUrl) ?>/" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">home</span><?= htmlspecialchars($navHomeLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/about" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">info</span><?= htmlspecialchars($navAboutLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/services" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">design_services</span><?= htmlspecialchars($navServicesLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/portfolio" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">apartment</span><?= htmlspecialchars($navPortfolioLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/gallery" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">photo_library</span><?= htmlspecialchars($navGalleryLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/blog" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">article</span><?= htmlspecialchars($navBlogLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/contact" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">mail</span><?= htmlspecialchars($navContactLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/estimate" @click="open=false" class="mobile-nav-link"><span class="material-symbols-outlined">request_quote</span><?= htmlspecialchars($navEstimateLabel) ?></a>
            <a href="<?= htmlspecialchars($baseUrl) ?>/login" @click="open=false" class="mobile-nav-link mobile-nav-link-admin"><span class="material-symbols-outlined">admin_panel_settings</span>Admin</a>
        </div>
    </div>
</header>
<main class="flex-1">
    <?php if (!empty($_SESSION['flash'])): ?>
        <?php $flash = $_SESSION['flash']; unset($_SESSION['flash']); ?>
        <div class="max-w-7xl mx-auto px-4 py-6">
            <div class="rounded-2xl px-5 py-4 text-sm font-medium shadow-sm <?= $flash['type'] === 'error' ? 'alert-error' : 'alert-success' ?>">
                <?= htmlspecialchars($flash['message']) ?>
            </div>
        </div>
    <?php endif; ?>
    <?php $this->renderViewContent(); ?>
</main>

<!-- Floating WhatsApp Chat Button -->
<?php
$whatsappNumber = preg_replace('/[^0-9]/', '', $siteSettings['topbar_phone'] ?? $siteSettings['footer_contact_phone'] ?? '0559362818');
if (!str_starts_with($whatsappNumber, '233')) {
    $whatsappNumber = '233' . ltrim($whatsappNumber, '0');
}
$whatsappUrl = 'https://wa.me/' . $whatsappNumber;
?>
<a href="<?= htmlspecialchars($whatsappUrl) ?>" target="_blank" rel="noopener noreferrer" class="whatsapp-float" aria-label="Chat with us on WhatsApp">
    <svg viewBox="0 0 24 24" class="whatsapp-icon" fill="currentColor" aria-hidden="true">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
    <span class="whatsapp-tooltip">Chat with us on WhatsApp</span>
</a>

<style>
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.whatsapp-icon {
    width: 32px;
    height: 32px;
}
.whatsapp-tooltip {
    position: absolute;
    right: 72px;
    background: #1E2A44;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 640px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }
    .whatsapp-icon {
        width: 26px;
        height: 26px;
    }
    .whatsapp-tooltip {
        display: none;
    }
}
</style>
<footer class="bg-gradient-to-b from-slate-900 to-black text-slate-300 py-8 md:py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 text-left">
        <div class="flex flex-col">
            <div class="flex items-center gap-4 mb-4">
                <img src="<?= htmlspecialchars($baseUrl) ?>/images/balorplogo1.png" alt="Balorp Ventures logo" class="h-10 md:h-12 w-auto">
            </div>
            <?php $footerDescription = $siteSettings['footer_description'] ?? 'Balorp Ventures is a premium finishing and interior solutions company specializing in renovations, interior décor, painting, flooring, ceilings, landscaping, and complete building finishing services for residential and commercial properties.'; ?>
            <p class="text-xs md:text-sm leading-relaxed"><?= nl2br(htmlspecialchars($footerDescription)) ?></p>
            <div class="mt-4 md:mt-6 flex items-center gap-5">
                <a href="<?= htmlspecialchars($siteSettings['facebook_url'] ?? '#') ?>" title="Facebook" class="text-white hover:text-balorp-magenta transition" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                    <svg viewBox="0 0 24 24" class="h-5 w-5 fill-current" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                </a>
                <a href="<?= htmlspecialchars($siteSettings['instagram_url'] ?? '#') ?>" title="Instagram" class="text-white hover:text-balorp-magenta transition" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" class="h-5 w-5 fill-current" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333.986 8.741 0 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                </a>
                <a href="<?= htmlspecialchars($siteSettings['linkedin_url'] ?? '#') ?>" title="LinkedIn" class="text-white hover:text-balorp-magenta transition" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" class="h-5 w-5 fill-current" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 114.126 0 2.062 2.062 0 01-2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                </a>
                <a href="<?= htmlspecialchars($siteSettings['tiktok_url'] ?? 'https://www.tiktok.com/@balorp_v') ?>" title="TikTok" class="text-white hover:text-balorp-magenta transition" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
                    <svg viewBox="0 0 24 24" class="h-5 w-5 fill-current" aria-hidden="true"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.59-1.01V14.5c.01 2.32-.6 4.67-2.06 6.51-1.74 2.19-4.46 3.42-7.23 3.12-2.77-.3-5.28-2.05-6.5-4.59-1.32-2.75-1-6.11.83-8.57 1.48-1.99 3.84-3.13 6.34-3.1 1.07.01 2.13.2 3.13.57V12.6c-.66-.33-1.41-.5-2.15-.49-1.48.01-2.92.74-3.8 1.93-.88 1.19-1.09 2.77-.58 4.15.51 1.38 1.72 2.45 3.16 2.75 1.44.3 2.97-.08 3.99-1.11.81-.82 1.25-1.95 1.24-3.09V.02z"/></svg>
                </a>
            </div>
        </div>
        <div class="hidden md:flex md:flex-col">
            <h3 class="text-white font-semibold mb-4">Quick Links</h3>
            <ul class="space-y-2 text-sm">
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navHomeLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/about" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navAboutLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/services" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navServicesLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/portfolio" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navPortfolioLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/gallery" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navGalleryLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/blog" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navBlogLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/contact" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navContactLabel) ?></a></li>
                <li><a href="<?= htmlspecialchars($baseUrl) ?>/estimate" class="hover:text-balorp-magenta transition"><?= htmlspecialchars($navEstimateLabel) ?></a></li>
            </ul>
        </div>
        <div class="hidden md:flex md:flex-col">
            <h3 class="text-white font-semibold mb-4">Contact</h3>
            <p class="text-sm mb-1">Tel: <?= htmlspecialchars($siteSettings['footer_contact_phone'] ?? '+233 55 936 2818') ?></p>
            <p class="text-sm mb-1">Email: <?= htmlspecialchars($siteSettings['footer_contact_email'] ?? 'balorpv@gmail.com') ?></p>
            <p class="text-sm">Location: <?= htmlspecialchars($siteSettings['footer_contact_location'] ?? 'Accra, Ghana') ?></p>
        </div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 md:mt-10 border-t border-slate-700 pt-6 text-center text-slate-400 text-xs">
        Developed by Alpha Irresistible Solutions. Telephone: 0553002745 / 0549940124. Visit <a href="https://alphagrdsys.com" target="_blank" rel="noopener noreferrer" class="text-white underline hover:text-balorp-magenta transition">alphagrdsys.com</a>.
    </div>
</footer>

<script>
    // Auto-hide topbar on scroll down, show on scroll up (smooth slide)
    (function(){
        const topbar = document.querySelector('.topbar');
        if (!topbar) return;
        let lastScroll = window.pageYOffset || document.documentElement.scrollTop;
        let ticking = false;

        function onScroll(){
            const current = window.pageYOffset || document.documentElement.scrollTop;
            if (current > lastScroll && current > 100) {
                // scrolling down -> hide
                topbar.classList.add('topbar-hidden');
                topbar.setAttribute('aria-hidden', 'true');
            } else {
                // scrolling up -> show
                topbar.classList.remove('topbar-hidden');
                topbar.removeAttribute('aria-hidden');
            }
            lastScroll = current <= 0 ? 0 : current;
            ticking = false;
        }

        window.addEventListener('scroll', function(){
            if (!ticking) {
                window.requestAnimationFrame(onScroll);
                ticking = true;
            }
        });
    })();
</script>
<script>
    // Clear any hash-based redirects for non-existent anchors
    (function(){
        try {
            if (window.location.hash && window.location.hash === '#main-navigation') {
                if (window.location.pathname && window.location.pathname.indexOf('/admin') !== -1) return;
                var base = document.querySelector('base') ? document.querySelector('base').getAttribute('href') : '/';
                if (!base.endsWith('/')) base += '/';
                window.location.replace(base + 'admin/settings');
            }
        } catch (e) {
            console.error(e);
        }
    })();
</script>
<script>
    // Smooth-scroll to hash targets with offset for sticky header
    (function(){
        function scrollToHashWithOffset(hash) {
            if (!hash) return;
            var id = hash.replace('#','');
            var el = document.getElementById(id);
            if (!el) return;
            // compute offset using header height
            var header = document.querySelector('header');
            var offset = header ? header.getBoundingClientRect().height + 12 : 72;
            var top = el.getBoundingClientRect().top + window.pageYOffset - offset;
            window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
        }

        // On initial load - retry until the target element exists (useful if content renders slowly)
        document.addEventListener('DOMContentLoaded', function(){
            if (!window.location.hash) return;
            var hash = window.location.hash;
            var attempts = 0;
            var maxAttempts = 12; // ~1 second total (12 * 80ms)
            var tryScroll = function(){
                var id = hash.replace('#','');
                var el = document.getElementById(id);
                if (el) {
                    scrollToHashWithOffset(hash);
                    return;
                }
                attempts++;
                if (attempts <= maxAttempts) {
                    setTimeout(tryScroll, 80);
                }
            };
            tryScroll();
        });

        // On hash change
        window.addEventListener('hashchange', function(){
            // small defer to allow any dynamic content to render
            setTimeout(function(){ scrollToHashWithOffset(window.location.hash); }, 60);
        });

        // Intercept clicks on anchor links with hashes to apply offset
        document.addEventListener('click', function(e){
            var a = e.target.closest && e.target.closest('a[href*="#"]');
            if (!a) return;
            var href = a.getAttribute('href');
            if (!href || href.indexOf('#') === -1) return;
            var hash = href.substring(href.indexOf('#'));
            try {
                // Only treat as same-page when the target pathname exactly equals current pathname
                // This avoids substring matches like "/admin" matching "/admin/settings"
                var linkUrl = new URL(href, window.location.href);
                if (linkUrl.pathname === window.location.pathname || href.charAt(0) === '#'){
                    e.preventDefault();
                    history.pushState(null, '', hash);
                    scrollToHashWithOffset(hash);
                }
            } catch (err) {
                // fallback to original behavior for relative hashes
                if (href.charAt(0) === '#'){
                    e.preventDefault();
                    history.pushState(null, '', hash);
                    scrollToHashWithOffset(hash);
                }
            }
        }, true);
    })();
</script>
</body>
</html>
