<?php
$currentPath = trim(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '/');
$currentUrl = rtrim($base_url, '/') . '/' . $currentPath;
$currentUrl = rtrim($currentUrl, '/') . '/';

$page_title = $page_title ?? 'Sanjar Pharma - Pharmaceutical Company in India';
$page_description = $page_description ?? 'Sanjar Pharma is a trusted pharmaceutical company in Gujarat, India, offering quality healthcare products with WHO, GLP, GMP and ISO standards.';
$page_keywords = $page_keywords ?? 'Sanjar Pharma, pharmaceutical company India, pharma manufacturer Gujarat, injectable products India';
$page_canonical = $page_canonical ?? $currentUrl;
$page_og_image = $page_og_image ?? rtrim($base_url, '/') . '/assets/images/og/sanjar-pharma-og.jpg';
$page_robots = $page_robots ?? 'index, follow, max-image-preview:large';
$page_type = $page_type ?? 'website';
$schema_file = $schema_file ?? null;

function sp_active_url($currentPath, $url) {
    return trim($currentPath, '/') === trim($url, '/');
}
?>
<!doctype html>
<html lang="en" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?= htmlspecialchars($page_title, ENT_QUOTES, 'UTF-8') ?></title>
    <meta name="description" content="<?= htmlspecialchars($page_description, ENT_QUOTES, 'UTF-8') ?>">
    <meta name="keywords" content="<?= htmlspecialchars($page_keywords, ENT_QUOTES, 'UTF-8') ?>">
    <meta name="robots" content="<?= htmlspecialchars($page_robots, ENT_QUOTES, 'UTF-8') ?>">
    <link rel="canonical" href="<?= htmlspecialchars($page_canonical, ENT_QUOTES, 'UTF-8') ?>">

    <link rel="icon" type="image/png" href="<?= $base_url ?>/fav/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/svg+xml" href="<?= $base_url ?>/fav/favicon.svg">
    <link rel="shortcut icon" href="<?= $base_url ?>/fav/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="<?= $base_url ?>/fav/apple-touch-icon.png">
    <link rel="manifest" href="<?= $base_url ?>/fav/site.webmanifest">

    <meta name="theme-color" content="#afba42">
    <meta name="color-scheme" content="light dark">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <meta name="format-detection" content="telephone=no">

    <meta property="og:locale" content="en_IN">
    <meta property="og:type" content="<?= htmlspecialchars($page_type, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:title" content="<?= htmlspecialchars($page_title, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:description" content="<?= htmlspecialchars($page_description, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:url" content="<?= htmlspecialchars($page_canonical, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:site_name" content="Sanjar Pharma">
    <meta property="og:image" content="<?= htmlspecialchars($page_og_image, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:image:alt" content="Sanjar Pharma pharmaceutical products and manufacturing">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?= htmlspecialchars($page_title, ENT_QUOTES, 'UTF-8') ?>">
    <meta name="twitter:description" content="<?= htmlspecialchars($page_description, ENT_QUOTES, 'UTF-8') ?>">
    <meta name="twitter:image" content="<?= htmlspecialchars($page_og_image, ENT_QUOTES, 'UTF-8') ?>">

    <link rel="preload" href="<?= $base_url ?>/assets/fonts/Exo2-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="<?= $base_url ?>/assets/images/logo/sanjar-dark.png" as="image" fetchpriority="high">

    <script>
    (() => {
        const saved = localStorage.getItem("theme");
        const system = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
        document.documentElement.setAttribute("data-theme", saved || system);
    })();
    </script>


<?php if (!empty($is_map_page)): ?>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"></noscript>
<script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<?php endif; ?>

    <style>
        @font-face{font-family:"Exo 2";src:url("<?= $base_url ?>/assets/fonts/Exo2-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
        @font-face{font-family:"Exo 2";src:url("<?= $base_url ?>/assets/fonts/Exo2-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
        @font-face{font-family:"Exo 2";src:url("<?= $base_url ?>/assets/fonts/Exo2-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

        .site-header{position:sticky;top:0;z-index:1000}
        .topbar{min-height:38px;display:flex;align-items:center;color:var(--heading);background:var(--surface-2);border-bottom:1px solid var(--border)}
        .topbar-inner{width:var(--container);margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;font-size:12px}
        .topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:.7rem}
        .topbar-center{justify-content:center;font-weight:700;text-transform:uppercase}
        .topbar-right{justify-content:flex-end}
        .topbar a{text-decoration:none;color:var(--heading)}
        .topbar a:hover{color:var(--primary)}
        .divider{width:1px;height:16px;background:var(--border)}
        .dot{width:5px;height:5px;border-radius:999px;background:var(--primary)}

        .main-nav{min-height:72px;background:var(--header-bg);border-bottom:1px solid var(--header-border);backdrop-filter:blur(18px)}
        .nav-inner{width:var(--container);min-height:90px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
        .site-logo{width:180px;height:85px;display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
        .site-logo img{width:180px;height:75px;object-fit:contain}

        .desktop-nav{display:flex;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
        .nav-item{position:relative}
        .nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:1.35rem .8rem;font-size:14px;font-weight:700;color:var(--heading);text-decoration:none}
        .nav-link:hover,.nav-link.active{color:var(--primary)}
        .nav-link.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.8rem;height:2px;background:var(--primary);border-radius:999px}
        .nav-caret{font-size:.75rem}
        .dropdown{position:absolute;top:100%;left:0;min-width:250px;padding:.65rem;margin:0;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
        .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
        .dropdown a{display:block;padding:.72rem .8rem;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
        .dropdown a:hover{color:var(--heading);background:var(--surface-2)}
        .dropdown-line{height:1px;margin:.45rem 0;background:var(--border)}

        .header-actions{display:flex;align-items:center;gap:.85rem}
        .whatsapp{display:flex;align-items:center;gap:.65rem;color:var(--heading);text-decoration:none;padding-left:1rem;border-left:1px solid var(--border)}
        .whatsapp img{width:24px;height:24px;flex:0 0 auto}
        .whatsapp small{display:block;font-size:12px;color:var(--muted);line-height:1.2}
        .whatsapp strong{display:block;font-size:13px;line-height:1.2}
        .icon{width:1em;height:1em;fill:currentColor;flex:0 0 auto}
        .icon-lg{width:1.5rem;height:1.5rem}
        .brand-color{color:var(--primary)}

        .icon-btn,.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--heading)}
        .icon-btn{width:42px;height:42px;border-radius:999px}
        .icon-btn:hover,.menu-toggle:hover{background:var(--surface-2)}
        .theme-toggle{min-height:36px;padding:.35rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);gap:.45rem}
        .theme-toggle:hover{color:#fff;background:var(--primary)}
        [data-theme="light"] .moon-icon,[data-theme="dark"] .sun-icon{display:none}
        .menu-toggle{display:none;width:44px;height:44px;border-radius:999px}

        .mobile-panel[hidden]{display:none}
        .mobile-panel{position:fixed;inset:0;z-index:1200;pointer-events:none}
        .mobile-panel.is-open{pointer-events:auto}
        .mobile-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease}
        .mobile-panel.is-open .mobile-backdrop{opacity:1}
        .mobile-drawer{position:absolute;top:0;left:0;width:min(88vw,380px);height:100%;background:var(--surface);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto}
        .mobile-panel.is-open .mobile-drawer{transform:translateX(0)}
        .mobile-head{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}
        .mobile-close{width:42px;height:42px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--heading);font-size:28px;line-height:1}
        .mobile-nav{margin:0;padding:0;list-style:none}
        .mobile-nav a,.mobile-submenu-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border:0;border-bottom:1px solid var(--border);font-size:15px;font-weight:700;color:var(--heading);background:transparent;text-decoration:none}
        .mobile-nav a:hover,.mobile-nav a.active,.mobile-submenu-toggle:hover{color:var(--primary)}
        .mobile-submenu{display:none;margin:0;padding:0;list-style:none;background:var(--surface-2)}
        .mobile-submenu.is-open{display:block}
        .mobile-submenu a{padding-left:2rem;font-size:14px;font-weight:600;color:var(--text)}
        .mobile-contact{padding:1.2rem}
        .mobile-contact a{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--heading)}

        @media (max-width:1180px){.desktop-nav{gap:0}.nav-link{padding-inline:.55rem}.whatsapp span{display:none}}
        @media (max-width:991px){.topbar-left,.topbar-center,.header-actions .whatsapp,.header-actions .icon-btn{display:none}.topbar-inner{grid-template-columns:1fr;justify-items:center}.topbar-right{justify-content:center}.desktop-nav{display:none}.menu-toggle{display:inline-flex}.site-logo{width:150px;height:55px}.site-logo img{width:150px;height:55px}}
        @media (max-width:575px){body{font-size:13px}.topbar{min-height:34px}.topbar-inner{font-size:11px}.social-text{display:none}.theme-toggle span{display:none}}
    </style>


    <link rel="stylesheet" href="<?= $base_url ?>/assets/css/base.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="<?= $base_url ?>/assets/css/base.css"></noscript>

    <?php
    if (!empty($schema_file) && file_exists(__DIR__ . '/../schema/' . $schema_file)) {
        include __DIR__ . '/../schema/' . $schema_file;
    }
    ?>
</head>

<body>
<header class="site-header" role="banner">
    <div class="topbar">
        <div class="topbar-inner">
            <div class="topbar-left">
                <span>Himatnagar, Gujarat, India</span>
                <span class="divider" aria-hidden="true"></span>
                <a href="mailto:info@sanjarpharma.com">info@sanjarpharma.com</a>
            </div>

            <div class="topbar-center">
                <span>WHO</span><span class="dot" aria-hidden="true"></span>
                <span>GLP</span><span class="dot" aria-hidden="true"></span>
                <span>GMP</span><span class="dot" aria-hidden="true"></span>
                <span>ISO Certified</span>
            </div>

            <div class="topbar-right">
                <a href="<?= $base_url ?>/assets/pdf/sanjar-pharma-company-profile.pdf">Company Profile</a>
                <span class="divider" aria-hidden="true"></span>
                <a href="#" class="social-text">LinkedIn</a>
                <a href="#" class="social-text">Instagram</a>
                <a href="#" class="social-text">YouTube</a>

                <button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle light and dark mode" aria-pressed="false">
                    <svg class="icon sun-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/></svg>
                    <svg class="icon moon-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 .3a.8.8 0 0 1 .9.9A6.2 6.2 0 0 0 14.8 9a.8.8 0 0 1 .9.9A8 8 0 1 1 6 .3Z"/></svg>
                    <span>Theme</span>
                </button>
            </div>
        </div>
    </div>

    <nav class="main-nav" aria-label="Primary navigation">
        <div class="nav-inner">
            <a class="site-logo" href="<?= $base_url ?>/" aria-label="Sanjar Pharma home">
                <img src="<?= $base_url ?>/assets/images/logo/sanjar-dark.png" data-logo-light="<?= $base_url ?>/assets/images/logo/sanjar-dark.png" data-logo-dark="<?= $base_url ?>/assets/images/logo/sanjar-light.png" width="180" height="46" alt="Sanjar Pharma" fetchpriority="high" loading="eager" decoding="async">
            </a>

            <ul class="desktop-nav">
                <?php foreach ($menu as $item): ?>
                    <?php if (!empty($item['has_dropdown'])): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="<?= $base_url ?>/products/">
                                <?= htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8') ?>
                                <span class="nav-caret" aria-hidden="true">▾</span>
                            </a>
                            <ul class="dropdown">
                                <li><a href="<?= $base_url ?>/products/">All Products</a></li>
                                <li class="dropdown-line" aria-hidden="true"></li>
                                <?php foreach ($categories as $slug => $cat): ?>
                                    <li><a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>/"><?= htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8') ?></a></li>
                                <?php endforeach; ?>
                            </ul>
                        </li>
                    <?php else: ?>
                        <?php $isActive = sp_active_url($currentPath, trim($item['url'], '/')) ? ' active' : ''; ?>
                        <li class="nav-item">
                            <a class="nav-link<?= $isActive ?>" href="<?= $base_url . $item['url'] ?>" <?= $isActive ? 'aria-current="page"' : '' ?>>
                                <?= htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8') ?>
                            </a>
                        </li>
                    <?php endif; ?>
                <?php endforeach; ?>
            </ul>

            <div class="header-actions">
                <a class="whatsapp" href="https://wa.me/916352986603" target="_blank" rel="noopener noreferrer" aria-label="Chat with Sanjar Pharma on WhatsApp">
                    <img src="<?= $base_url ?>/assets/images/logo/whatsapp.svg" width="24" height="24" alt="" aria-hidden="true" loading="eager" decoding="async">
                    <span><small>WhatsApp</small><strong>+91 63529 86603</strong></span>
                </a>

                <button class="icon-btn" type="button" aria-label="Open site search">
                    <svg class="icon brand-color" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.8 4a6.8 6.8 0 1 0 0 13.6 6.8 6.8 0 0 0 0-13.6Zm0 2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm5.6 10 4.1 4.1-1.4 1.4-4.1-4.1 1.4-1.4Z"/></svg>
                </button>

                <button class="menu-toggle" id="menuToggle" type="button" aria-label="Open navigation menu" aria-controls="mobilePanel" aria-expanded="false">
                    <svg class="icon-lg brand-color" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z"/></svg>
                </button>
            </div>
        </div>
    </nav>
</header>

<div class="mobile-panel" id="mobilePanel" hidden>
    <div class="mobile-backdrop" data-close-menu></div>
    <aside class="mobile-drawer" aria-label="Mobile navigation">
        <div class="mobile-head">
            <a class="site-logo" href="<?= $base_url ?>/" aria-label="Sanjar Pharma home">
                <img src="<?= $base_url ?>/assets/images/logo/sanjar-dark.png" data-logo-light="<?= $base_url ?>/assets/images/logo/sanjar-dark.png" data-logo-dark="<?= $base_url ?>/assets/images/logo/sanjar-light.png" width="150" height="38" alt="Sanjar Pharma" loading="lazy" decoding="async">
            </a>
            <button class="mobile-close" type="button" data-close-menu aria-label="Close navigation menu">×</button>
        </div>

        <ul class="mobile-nav">
            <?php foreach ($menu as $item): ?>
                <?php if (!empty($item['has_dropdown'])): ?>
                    <li>
                        <button class="mobile-submenu-toggle" type="button" data-submenu-toggle aria-expanded="false">
                            <span><?= htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8') ?></span>
                            <span data-submenu-icon aria-hidden="true">+</span>
                        </button>
                        <ul class="mobile-submenu">
                            <li><a href="<?= $base_url ?>/products/">All Products</a></li>
                            <?php foreach ($categories as $slug => $cat): ?>
                                <li><a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>/"><?= htmlspecialchars($cat['name'], ENT_QUOTES, 'UTF-8') ?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                <?php else: ?>
                    <?php $isActive = sp_active_url($currentPath, trim($item['url'], '/')) ? ' active' : ''; ?>
                    <li><a class="<?= $isActive ?>" href="<?= $base_url . $item['url'] ?>" <?= $isActive ? 'aria-current="page"' : '' ?>><?= htmlspecialchars($item['name'], ENT_QUOTES, 'UTF-8') ?></a></li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </aside>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    const mapElement = document.getElementById("map");
    if (!mapElement || typeof L === "undefined") return;

    const highlightedCountries = [
        "Uganda", "Yemen", "Namibia", "Uzbekistan", "Turkmenistan", "Georgia", "Kyrgyzstan",
        "Panama", "Venezuela", "Iraq", "Myanmar", "Cambodia", "Oman", "Kenya", "Maldives",
        "Tanzania", "United Kingdom", "Nepal", "Russia", "Bolivia", "Ecuador", "Thailand",
        "Philippines", "Cameroon", "Mozambique", "Peru", "Mauritius", "Congo", "Angola",
        "Madagascar", "Honduras", "Mali"
    ];

    const map = L.map("map", {
        zoomControl: false,
        attributionControl: false,
        dragging: false,
        touchZoom: false,
        scrollWheelZoom: false,
        doubleClickZoom: false,
        boxZoom: false,
        keyboard: false,
        tap: false,
        zoomSnap: 0.05,
        zoomDelta: 0.25,
        minZoom: -2,
        maxZoom: 5
    });

    function applyResponsiveMapView() {
        const width = window.innerWidth;

        map.invalidateSize();

        if (width <= 767) {
            map.fitBounds(L.latLngBounds([-45, -95], [75, 145]), {
                paddingTopLeft: [0, 5],
                paddingBottomRight: [0, 5],
                animate: false
            });
            map.panBy([90, -5], { animate: false });
            return;
        }

        if (width <= 991) {
            map.fitBounds(L.latLngBounds([-45, -100], [75, 150]), {
                padding: [10, 10],
                animate: false
            });
            map.panBy([60, 0], { animate: false });
            return;
        }

        map.fitBounds(L.latLngBounds([-50, -120], [78, 155]), {
            padding: [20, 20],
            animate: false
        });
    }

    fetch("<?= $base_url ?>/assets/js/countries.geo.json")
        .then(response => response.json())
        .then(data => {
            L.geoJSON(data, {
                style: feature => {
                    const countryName = feature.properties.name;
                    const isIndia = countryName === "India";
                    const isTarget = highlightedCountries.includes(countryName);

                    return {
                        fillColor: isIndia
                            ? getComputedStyle(document.documentElement).getPropertyValue("--primary").trim()
                            : isTarget
                                ? getComputedStyle(document.documentElement).getPropertyValue("--heading").trim()
                                : getComputedStyle(document.documentElement).getPropertyValue("--surface-3").trim(),
                        fillOpacity: 1,
                        color: getComputedStyle(document.documentElement).getPropertyValue("--body-bg").trim(),
                        weight: 1
                    };
                },
                onEachFeature: (feature, layer) => {
                    const countryName = feature.properties.name;
                    const isIndia = countryName === "India";
                    const isTarget = highlightedCountries.includes(countryName);

                    if (isIndia || isTarget) {
                        layer.bindTooltip(countryName, {
                            className: "map-tooltip",
                            sticky: true
                        });
                    }
                }
            }).addTo(map);

            window.setTimeout(applyResponsiveMapView, 250);
        });

    window.addEventListener("resize", () => {
        window.clearTimeout(window.__globalMapResizeTimer);
        window.__globalMapResizeTimer = window.setTimeout(applyResponsiveMapView, 180);
    });
});
</script>
<main id="main-content">