<?php
require_once("config/function.php");
$main_site_data = main_site_data();
$site_data = site_data();

$headerTitle = !empty($site_data['title']) ? (string)$site_data['title'] : 'A2Z Digital Tools';
$headerBrand = !empty($site_data['brand']) ? (string)$site_data['brand'] : 'A2Z Digital Tools';
$headerLogo = !empty($site_data['logo']) ? (string)$site_data['logo'] : '';
$headerInitial = strtoupper(substr($headerBrand, 0, 1));

$requestPath = parse_url($_SERVER['REQUEST_URI'] ?? 'index', PHP_URL_PATH);
$requestPath = trim((string)$requestPath, '/');
if ($requestPath === '') {
    $requestPage = 'index';
} else {
    $requestPage = pathinfo(basename($requestPath), PATHINFO_FILENAME);
}

$headerNavItems = array(
    array('route' => 'index', 'label' => 'Home'),
    array('route' => 'about', 'label' => 'About Us'),
    array('route' => 'services', 'label' => 'All Tools'),
    array('route' => 'partner', 'label' => 'For Business'),
    array('route' => 'contact', 'label' => 'Contact')
);
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="color-scheme" content="light">
    <title><?=htmlspecialchars($headerTitle, ENT_QUOTES, 'UTF-8')?></title>
    <meta name="author" content="New WEB">
    <meta name="theme-color" content="#f7f3ea">

    <?php if ($headerLogo !== ''): ?>
        <link rel="icon" href="<?=htmlspecialchars($headerLogo, ENT_QUOTES, 'UTF-8')?>" type="image/*">
    <?php endif; ?>

    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="layouts/home/css/aos.css">
    <link rel="stylesheet" href="layouts/home/css/theme.min.css" data-skin="default">
    <link rel="stylesheet" href="layouts/home/css/custom.css">

    <style>
        :root {
            --ref-navy: #142844;
            --ref-navy-hover: #203b61;
            --ref-navy-soft: #e9eef5;
            --ref-gold: #ad8749;
            --ref-ivory: #f7f3ea;
            --ref-canvas: #edf0f4;
            --ref-white: #ffffff;
            --ref-ink: #182230;
            --ref-muted: #5f6b7a;
            --ref-line: #d9dee7;
            --ref-line-dark: #bdc5d1;
            --ref-powder: #c5d8f6;
            --ref-serif: Georgia, Cambria, "Times New Roman", serif;
            --ref-sans: "Fira Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --ref-shadow: 0 18px 48px rgba(20, 40, 68, 0.12);

            /* Compatibility tokens for existing shared pages. */
            --classic-navy: var(--ref-navy);
            --classic-navy-hover: var(--ref-navy-hover);
            --classic-gold: var(--ref-gold);
            --classic-ivory: var(--ref-ivory);
            --classic-canvas: var(--ref-canvas);
            --classic-white: var(--ref-white);
            --classic-ink: var(--ref-ink);
            --classic-muted: var(--ref-muted);
            --classic-line: var(--ref-line);
            --classic-serif: var(--ref-serif);
            --classic-sans: var(--ref-sans);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            min-width: 320px;
            min-height: 100%;
            scroll-behavior: smooth;
        }

        body {
            min-width: 320px;
            min-height: 100vh;
            margin: 0;
            color: var(--ref-ink);
            background: var(--ref-canvas);
            font-family: var(--ref-sans);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body.menu-open {
            overflow: hidden;
        }

        .app-site {
            min-height: 100vh;
            overflow: clip;
            background: var(--ref-canvas);
        }

        .a2z-header {
            position: sticky;
            top: 12px;
            z-index: 1050;
            width: min(1320px, calc(100% - 32px));
            margin: 12px auto 0;
            border: 1px solid rgba(20, 40, 68, 0.11);
            border-radius: 999px;
            background: linear-gradient(104deg, rgba(255, 255, 255, 0.84), rgba(247, 243, 234, 0.8));
            box-shadow: 0 12px 34px rgba(20, 40, 68, 0.11);
            transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
        }

        @supports ((-webkit-backdrop-filter: blur(18px)) or (backdrop-filter: blur(18px))) {
            .a2z-header {
                -webkit-backdrop-filter: blur(18px);
                backdrop-filter: blur(18px);
            }
        }

        .a2z-header.is-scrolled {
            border-color: rgba(20, 40, 68, 0.17);
            box-shadow: 0 16px 42px rgba(20, 40, 68, 0.16);
        }

        .a2z-header .a2z-nav {
            display: block;
            min-height: 68px;
            padding: 0;
            background: transparent;
        }

        .a2z-header .a2z-navbar-inner {
            position: relative;
            width: 100%;
            max-width: none;
            min-height: 68px;
            display: grid;
            grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
            align-items: center;
            gap: 24px;
            margin: 0;
            padding: 8px 12px 8px 22px;
        }

        .a2z-brand {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 11px;
            grid-column: 1;
            justify-self: start;
            color: var(--ref-navy) !important;
            text-decoration: none !important;
        }

        .a2z-brand-mark {
            position: relative;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border: 1px solid rgba(173, 135, 73, 0.75);
            border-radius: 50%;
            color: var(--ref-navy);
            background: var(--ref-white);
            box-shadow: 0 8px 20px rgba(20, 40, 68, 0.08);
        }

        .a2z-brand-mark::after {
            content: "";
            position: absolute;
            inset: 4px;
            border: 1px solid rgba(173, 135, 73, 0.2);
            border-radius: inherit;
            pointer-events: none;
        }

        .a2z-brand-mark img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 5px;
        }

        .a2z-brand-fallback {
            position: relative;
            z-index: 1;
            font-family: var(--ref-serif);
            font-size: 21px;
            font-weight: 700;
        }

        .a2z-brand-copy {
            min-width: 0;
            display: grid;
            line-height: 1.05;
        }

        .a2z-brand-name {
            overflow: hidden;
            color: var(--ref-navy);
            font-family: var(--ref-serif);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.015em;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .a2z-brand-tagline {
            margin-top: 5px;
            color: var(--ref-gold);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .a2z-navigation {
            display: contents;
        }

        .a2z-nav-list {
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            grid-column: 2;
            justify-self: center;
            gap: 7px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .a2z-nav-link {
            position: relative;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            border-radius: 999px;
            color: var(--ref-ink) !important;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.075em;
            text-decoration: none !important;
            text-transform: uppercase;
            transition: color 160ms ease, background-color 160ms ease;
        }

        .a2z-nav-link::after {
            content: "";
            position: absolute;
            right: 50%;
            bottom: 5px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--ref-gold);
            opacity: 0;
            transform: translateX(50%) scale(0.5);
            transition: opacity 160ms ease, transform 160ms ease;
        }

        .a2z-nav-link:hover,
        .a2z-nav-link.active {
            color: var(--ref-navy) !important;
            background: var(--ref-navy-soft);
        }

        .a2z-nav-link.active::after {
            opacity: 1;
            transform: translateX(50%) scale(1);
        }

        .a2z-member-link {
            min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 23px;
            border: 1px solid var(--ref-navy);
            border-radius: 999px;
            color: var(--ref-white) !important;
            background: var(--ref-navy);
            box-shadow: 0 9px 22px rgba(20, 40, 68, 0.15);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.025em;
            text-decoration: none !important;
            white-space: nowrap;
            grid-column: 3;
            justify-self: end;
            transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
        }

        .a2z-member-link:hover {
            border-color: var(--ref-navy-hover);
            color: var(--ref-white) !important;
            background: var(--ref-navy-hover);
            transform: translateY(-1px);
        }

        .a2z-nav-toggle {
            width: 46px;
            height: 46px;
            display: none;
            place-items: center;
            padding: 0;
            border: 1px solid rgba(20, 40, 68, 0.13);
            border-radius: 50%;
            color: var(--ref-navy);
            background: var(--ref-navy-soft);
            font-size: 17px;
            cursor: pointer;
        }

        .a2z-header a:focus-visible,
        .a2z-header button:focus-visible {
            outline: 3px solid rgba(173, 135, 73, 0.38);
            outline-offset: 3px;
        }

        /* Strong alignment reset for Bootstrap/theme conflicts. */
        .a2z-header,
        .a2z-header .navbar,
        .a2z-header .container-fluid,
        .a2z-header ul,
        .a2z-header li,
        .a2z-header a,
        .a2z-header button {
            margin-top: 0;
            margin-bottom: 0;
        }

        .a2z-header .a2z-navbar-inner {
            max-width: 100% !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .a2z-nav-list > li {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .a2z-brand,
        .a2z-nav-link,
        .a2z-member-link,
        .a2z-nav-toggle {
            line-height: 1;
        }

        @media (max-width: 1120px) and (min-width: 992px) {
            .a2z-header .a2z-navbar-inner {
                grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
                gap: 12px;
                padding-left: 15px;
            }

            .a2z-nav-list {
                gap: 2px;
            }

            .a2z-nav-link {
                padding-right: 10px;
                padding-left: 10px;
                font-size: 10px;
            }

            .a2z-member-link {
                padding-right: 17px;
                padding-left: 17px;
            }
        }

        @media (max-width: 991.98px) {
            body.menu-open::after {
                content: "";
                position: fixed;
                inset: 0;
                z-index: 1020;
                background: rgba(20, 40, 68, 0.18);
                pointer-events: auto;
            }

            .a2z-header {
                top: 10px;
                width: calc(100% - 20px);
                margin-top: 10px;
            }

            .a2z-header .a2z-nav,
            .a2z-header .a2z-navbar-inner {
                min-height: 62px;
            }

            .a2z-header .a2z-navbar-inner {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 46px;
                align-items: center;
                gap: 12px;
                padding: 8px 9px 8px 12px;
            }

            .a2z-brand {
                width: 100%;
                min-width: 0;
                grid-column: 1;
            }

            .a2z-brand-mark {
                width: 42px;
                height: 42px;
                flex-basis: 42px;
            }

            .a2z-nav-toggle {
                position: relative;
                z-index: 2;
                display: grid;
                grid-column: 2;
                justify-self: end;
            }

            .a2z-navigation {
                position: absolute;
                top: calc(100% + 11px);
                right: 0;
                left: 0;
                z-index: 3;
                display: none;
                grid-template-columns: 1fr;
                gap: 16px;
                max-height: calc(100vh - 94px);
                max-height: calc(100svh - 94px);
                padding: 17px;
                overflow-y: auto;
                overscroll-behavior: contain;
                border: 1px solid rgba(20, 40, 68, 0.12);
                border-radius: 24px;
                background: linear-gradient(150deg, var(--ref-white), var(--ref-ivory));
                box-shadow: var(--ref-shadow);
            }

            .a2z-navigation.is-open {
                display: grid;
            }

            .a2z-nav-list {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-column: auto;
                justify-self: stretch;
                gap: 7px;
            }

            .a2z-member-link {
                grid-column: auto;
                justify-self: stretch;
            }

            .a2z-nav-link {
                min-height: 44px;
                width: 100%;
                justify-content: flex-start;
                padding: 0 15px;
                font-size: 10px;
            }

            .a2z-nav-link::after {
                right: 13px;
                bottom: 50%;
                transform: translateY(50%) scale(0.5);
            }

            .a2z-nav-link.active::after {
                transform: translateY(50%) scale(1);
            }

            .a2z-member-link {
                width: 100%;
            }
        }

        @media (max-width: 520px) {
            .a2z-brand-copy {
                max-width: calc(100vw - 120px);
            }

            .a2z-brand-name {
                max-width: 100%;
                font-size: 16px;
            }

            .a2z-brand-tagline {
                display: none;
            }

            .a2z-nav-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .a2z-nav-list {
                grid-template-columns: 1fr;
            }

            .a2z-nav-link {
                min-height: 50px;
            }
        }

        @media (max-width: 380px) {
            .a2z-header {
                width: calc(100% - 14px);
            }

            .a2z-header .a2z-navbar-inner {
                gap: 8px;
                padding-left: 9px;
            }

            .a2z-brand-mark {
                width: 38px;
                height: 38px;
                flex-basis: 38px;
            }

            .a2z-brand-copy {
                max-width: calc(100vw - 108px);
            }

            .a2z-brand-name {
                font-size: 15px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .a2z-header *,
            .a2z-header *::before,
            .a2z-header *::after {
                scroll-behavior: auto !important;
                transition: none !important;
            }
        }
    </style>
</head>
<body>
    <main class="app app-site">
        <header id="siteHeader" class="a2z-header">
            <nav class="navbar a2z-nav" aria-label="Primary navigation">
                <div class="container-fluid a2z-navbar-inner">
                    <a class="a2z-brand" href="index" aria-label="<?=htmlspecialchars($headerBrand, ENT_QUOTES, 'UTF-8')?> home">
                        <span class="a2z-brand-mark" aria-hidden="true">
                            <?php if ($headerLogo !== ''): ?>
                                <img
                                    id="siteBrandLogo"
                                    src="<?=htmlspecialchars($headerLogo, ENT_QUOTES, 'UTF-8')?>"
                                    alt=""
                                >
                            <?php endif; ?>
                            <span id="siteBrandFallback" class="a2z-brand-fallback" <?= $headerLogo !== '' ? 'hidden' : '' ?>>
                                <?=htmlspecialchars($headerInitial, ENT_QUOTES, 'UTF-8')?>
                            </span>
                        </span>
                        <span class="a2z-brand-copy">
                            <span class="a2z-brand-name"><?=htmlspecialchars($headerBrand, ENT_QUOTES, 'UTF-8')?></span>
                            <span class="a2z-brand-tagline">PDF &middot; ID &middot; Mobile Utilities</span>
                        </span>
                    </a>

                    <button
                        id="siteNavToggle"
                        class="a2z-nav-toggle"
                        type="button"
                        aria-controls="navbarNav"
                        aria-expanded="false"
                        aria-label="Open navigation menu"
                    >
                        <i class="fa-solid fa-bars" aria-hidden="true"></i>
                    </button>

                    <div id="navbarNav" class="a2z-navigation">
                        <ul class="a2z-nav-list">
                            <?php foreach ($headerNavItems as $navItem): ?>
                                <?php $isActive = $requestPage === $navItem['route']; ?>
                                <li>
                                    <a
                                        class="a2z-nav-link<?= $isActive ? ' active' : '' ?>"
                                        href="<?=htmlspecialchars($navItem['route'], ENT_QUOTES, 'UTF-8')?>"
                                        <?= $isActive ? 'aria-current="page"' : '' ?>
                                    >
                                        <?=htmlspecialchars($navItem['label'], ENT_QUOTES, 'UTF-8')?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>

                        <a class="a2z-member-link"
   href="https://<?= htmlspecialchars($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8') ?>/members/login">
                            <span>Member Login</span>
                            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </nav>
        </header>

        <script>
            (function () {
                const header = document.getElementById('siteHeader');
                const toggle = document.getElementById('siteNavToggle');
                const navigation = document.getElementById('navbarNav');
                const toggleIcon = toggle ? toggle.querySelector('i') : null;
                const logo = document.getElementById('siteBrandLogo');
                const logoFallback = document.getElementById('siteBrandFallback');
                const mobileQuery = window.matchMedia('(max-width: 991.98px)');

                function showLogoFallback() {
                    if (logo) {
                        logo.hidden = true;
                    }
                    if (logoFallback) {
                        logoFallback.hidden = false;
                    }
                }

                function setMenu(open, returnFocus) {
                    if (!toggle || !navigation) {
                        return;
                    }

                    const shouldOpen = Boolean(open) && mobileQuery.matches;
                    navigation.classList.toggle('is-open', shouldOpen);
                    toggle.setAttribute('aria-expanded', shouldOpen ? 'true' : 'false');
                    toggle.setAttribute('aria-label', shouldOpen ? 'Close navigation menu' : 'Open navigation menu');
                    document.body.classList.toggle('menu-open', shouldOpen);

                    if (toggleIcon) {
                        toggleIcon.classList.toggle('fa-bars', !shouldOpen);
                        toggleIcon.classList.toggle('fa-xmark', shouldOpen);
                    }

                    if (!shouldOpen && returnFocus) {
                        toggle.focus();
                    }
                }

                function updateScrollState() {
                    if (header) {
                        header.classList.toggle('is-scrolled', window.scrollY > 20);
                    }
                }

                if (logo) {
                    logo.addEventListener('error', showLogoFallback, { once: true });
                    if (logo.complete && logo.naturalWidth === 0) {
                        showLogoFallback();
                    }
                }

                if (toggle && navigation) {
                    toggle.addEventListener('click', function () {
                        setMenu(!navigation.classList.contains('is-open'), false);
                    });

                    navigation.querySelectorAll('a').forEach(function (link) {
                        link.addEventListener('click', function () {
                            setMenu(false, false);
                        });
                    });

                    document.addEventListener('click', function (event) {
                        if (mobileQuery.matches && header && !header.contains(event.target)) {
                            setMenu(false, false);
                        }
                    });

                    document.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape' && navigation.classList.contains('is-open')) {
                            setMenu(false, true);
                        }
                    });

                    window.addEventListener('resize', function () {
                        if (!mobileQuery.matches) {
                            setMenu(false, false);
                        }
                    });
                }

                updateScrollState();
                window.addEventListener('scroll', updateScrollState, { passive: true });
            })();
        </script>