<?php $footer_data = $footer_data ?? []; ?>

<?php

$footer_data = [
    'cta' => [
        'eyebrow' => "Let's build a healthier tomorrow together",
        'title' => 'Partner with Sanjar Pharma for reliable high-quality injectables',
        'button_text' => 'Get in Touch',
        'button_url' => $base_url . '/contact',

        'background' => [
            'desktop_light' => $base_url . '/assets/images/main/hom/ge/bott-bg.webp',
            'desktop_dark'  => $base_url . '/assets/images/main/hom/ge/bott-bg-dark.webp',
            'mobile_light'  => $base_url . '/assets/images/main/hom/ge/hom/ge/bott-m-l.webp',
            'mobile_dark'   => $base_url . '/assets/images/main/hom/ge/bott-m-d.webp'
        ]
    ],

    'brand' => [
        'description' => 'Sanjar Pharma LLP is a leading manufacturer of sterile injectables delivering reliable, safe and high-quality pharmaceutical solutions to healthcare markets worldwide.',
        'logo_light' => $base_url . '/assets/images/logo/sanjar-dark.png',
        'logo_dark'  => $base_url . '/assets/images/logo/sanjar-light.png'
    ],

    'certifications' => [
        [
            'name' => 'WHO certified',
            'image' => $base_url . '/assets/images/cer/av/who.avif'
        ],
        [
            'name' => 'GLP certified',
            'image' => $base_url . '/assets/images/cer/av/glp.avif'
        ],
        [
            'name' => 'GMP certified',
            'image' => $base_url . '/assets/images/cer/av/gmp.avif'
        ],
        [
            'name' => 'ISO certified',
            'image' => $base_url . '/assets/images/cer/av/iso.avif'
        ]
    ],

    'newsletter' => [
        'title' => 'Newsletter',
        'description' => 'Stay updated with the latest news.',
        'action' => $base_url . '/newsletter-submit'
    ],

    'social_links' => [
        [
            'name' => 'LinkedIn',
            'url' => '#'
        ],
        [
            'name' => 'Instagram',
            'url' => '#'
        ],
        [
            'name' => 'YouTube',
            'url' => '#'
        ],
        [
            'name' => 'Facebook',
            'url' => '#'
        ]
    ],

    'legal_links' => [
        [
            'name' => 'Privacy Policy',
            'url' => $base_url . '/privacy-policy'
        ],
        [
            'name' => 'Terms of Service',
            'url' => $base_url . '/terms-of-service'
        ]
    ],

    'copyright' => '© 2026 Sanjar Pharma LLP. All Rights Reserved.',
    'credit_text' => 'Design and Developed by',
    'credit_name' => 'Hind Technologies',
    'credit_url' => 'https://hindtechzone.com/'
];
?>

<section class="footer-cta-section section-sm" aria-labelledby="footerCtaTitle">
    <div class="site-container">
        <div
            class="footer-cta-card lazy-theme-bg"
            data-theme-asset="background"
            data-desktop-light="<?= htmlspecialchars($footer_data['cta']['background']['desktop_light'], ENT_QUOTES, 'UTF-8') ?>"
            data-desktop-dark="<?= htmlspecialchars($footer_data['cta']['background']['desktop_dark'], ENT_QUOTES, 'UTF-8') ?>"
            data-mobile-light="<?= htmlspecialchars($footer_data['cta']['background']['mobile_light'], ENT_QUOTES, 'UTF-8') ?>"
            data-mobile-dark="<?= htmlspecialchars($footer_data['cta']['background']['mobile_dark'], ENT_QUOTES, 'UTF-8') ?>"
        >
            <div class="footer-cta-content">
                <span class="section-eyebrow"><?= htmlspecialchars($footer_data['cta']['eyebrow'], ENT_QUOTES, 'UTF-8') ?></span>
                <h2 id="footerCtaTitle" class="footer-cta-title"><?= htmlspecialchars($footer_data['cta']['title'], ENT_QUOTES, 'UTF-8') ?></h2>
                <a href="<?= htmlspecialchars($footer_data['cta']['button_url'], ENT_QUOTES, 'UTF-8') ?>" class="primary-button">
                    <?= htmlspecialchars($footer_data['cta']['button_text'], ENT_QUOTES, 'UTF-8') ?>
                    <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>
                </a>
            </div>
            <div class="footer-cta-visual" aria-hidden="true"></div>
        </div>
    </div>
</section>

<footer class="footer-section" role="contentinfo">
    <div class="site-container">
        <div class="footer-grid">
            <div class="footer-brand">
                <a class="footer-logo" href="<?= $base_url ?>/" aria-label="Sanjar Pharma home">
                    <img src="<?= htmlspecialchars($footer_data['brand']['logo_light'], ENT_QUOTES, 'UTF-8') ?>" data-logo-light="<?= htmlspecialchars($footer_data['brand']['logo_light'], ENT_QUOTES, 'UTF-8') ?>" data-logo-dark="<?= htmlspecialchars($footer_data['brand']['logo_dark'], ENT_QUOTES, 'UTF-8') ?>" width="180" height="46" alt="Sanjar Pharma" loading="lazy" decoding="async">
                </a>
                <p><?= htmlspecialchars($footer_data['brand']['description'], ENT_QUOTES, 'UTF-8') ?></p>
            </div>

            <nav class="footer-col" aria-label="Footer quick links">
                <h2>Quick Links</h2>
                <ul>
                    <?php foreach ($fmenu as $ftem): ?>
                        <li><a href="<?= $base_url . htmlspecialchars($ftem['url'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($ftem['name'], ENT_QUOTES, 'UTF-8') ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </nav>

            <nav class="footer-col" aria-label="Footer product links">
                <h2>Products</h2>
                <ul>
                    <?php foreach ($categories as $slug => $cat): ?>
                        <li><a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>/"><?= htmlspecialchars(str_replace(' Injection', '', $cat['name']), ENT_QUOTES, 'UTF-8') ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </nav>

            <div class="footer-col">
                <h2>Our Certifications</h2>
                <div class="cert-grid" aria-label="Sanjar Pharma certifications">
                    <?php foreach ($footer_data['certifications'] as $cert): ?>
                        <img src="<?= htmlspecialchars($cert['image'], ENT_QUOTES, 'UTF-8') ?>" width="48" height="48" alt="<?= htmlspecialchars($cert['name'], ENT_QUOTES, 'UTF-8') ?>" loading="lazy" decoding="async">
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="footer-col footer-newsletter">
                <h2><?= htmlspecialchars($footer_data['newsletter']['title'], ENT_QUOTES, 'UTF-8') ?></h2>
                <p><?= htmlspecialchars($footer_data['newsletter']['description'], ENT_QUOTES, 'UTF-8') ?></p>

                <form class="newsletter-form" action="<?= htmlspecialchars($footer_data['newsletter']['action'], ENT_QUOTES, 'UTF-8') ?>" method="post">
                    <label class="sr-only" for="newsletterEmail">Email address</label>
                    <input id="newsletterEmail" type="email" name="email" placeholder="Enter your email" autocomplete="email" required>
                    <button type="submit" aria-label="Subscribe to newsletter">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>
                    </button>
                </form>

                <h2 class="follow-title">Follow Us</h2>
                <div class="footer-social" aria-label="Sanjar Pharma social links">
                    <?php foreach ($footer_data['social_links'] as $social): ?>
                        <a href="<?= htmlspecialchars($social['url'], ENT_QUOTES, 'UTF-8') ?>" rel="noopener"><?= htmlspecialchars($social['name'], ENT_QUOTES, 'UTF-8') ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <p>
                <?= htmlspecialchars($footer_data['copyright'], ENT_QUOTES, 'UTF-8') ?>
                <?= htmlspecialchars($footer_data['credit_text'], ENT_QUOTES, 'UTF-8') ?>
                <a href="<?= htmlspecialchars($footer_data['credit_url'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer"><?= htmlspecialchars($footer_data['credit_name'], ENT_QUOTES, 'UTF-8') ?></a>
            </p>

            <div class="footer-legal">
                <?php foreach ($footer_data['legal_links'] as $link): ?>
                    <a href="<?= htmlspecialchars($link['url'], ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($link['name'], ENT_QUOTES, 'UTF-8') ?></a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</footer>

</main>

<style>
.footer-cta-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(18rem,1.1fr);min-height:350px;max-height:400px;overflow:hidden;border:1px solid var(--border);border-radius:clamp(1.25rem,2vw,2rem);background-color:var(--surface);background-repeat:no-repeat;background-size:cover;background-position:center;box-shadow:var(--shadow-md)}
.footer-cta-card.is-bg-loaded{background-image:var(--active-bg)}
.footer-cta-content{min-height:350px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(1.5rem,3vw,3.25rem)}
.footer-cta-visual{min-height:350px}
.footer-cta-title{max-width:25ch;margin:0 0 1.35rem;font-size:clamp(1.45rem,2vw,2rem);font-weight:700;line-height:1.12;color:var(--heading)}

.footer-section{padding-block:clamp(2.5rem,5vw,3rem);color:var(--text);background:var(--surface);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:minmax(16rem,1.25fr) repeat(3,minmax(9rem,.8fr)) minmax(15rem,1.15fr);gap:clamp(1.5rem,3vw,3rem)}
.footer-logo{display:inline-flex;width:180px;height:46px;margin-bottom:1rem}
.footer-logo img{width:180px;height:46px;object-fit:contain}
.footer-brand p,.footer-newsletter p{margin:0;color:var(--muted)}
.footer-col h2{margin:0 0 1rem;font-size:clamp(.95rem,.3vw + .9rem,1.15rem);font-weight:700;line-height:1.25;color:var(--heading)}
.footer-col ul{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
.footer-col a{color:var(--text);text-decoration:none}
.footer-col a:hover,.footer-bottom a:hover{color:var(--primary)}
.cert-grid{display:grid;grid-template-columns:repeat(2,72px);gap:.75rem}
.cert-grid img{width:72px;height:72px;object-fit:contain;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.newsletter-form{display:flex;margin-top:1rem;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.newsletter-form input{width:100%;min-height:46px;padding:0 .9rem;border:0;outline:none;color:var(--heading);background:transparent}
.newsletter-form button{width:48px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;border:0;color:#fff;background:var(--primary)}
.newsletter-form button svg{width:1rem;height:1rem;fill:currentColor}
.follow-title{margin-top:1.5rem!important}
.footer-social{display:flex;flex-wrap:wrap;gap:.75rem}
.footer-social a{display:inline-flex;min-height:34px;align-items:center;padding:.35rem .75rem;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--heading);text-decoration:none}
.footer-social a:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
.footer-bottom{display:flex;justify-content:space-between;gap:1.5rem;margin-top:clamp(1.6rem,3vw,2rem);padding-top:1.5rem;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.footer-bottom p{margin:0}.footer-bottom a{color:var(--heading);text-decoration:none}.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap}

@media (max-width:1180px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand,.footer-newsletter{grid-column:span 2}}
@media (max-width:767px){.footer-cta-card{grid-template-columns:1fr;min-height:380px;max-height:400px;background-position:center bottom}.footer-cta-content{min-height:190px;padding:1.4rem}.footer-cta-visual{min-height:190px}.footer-grid{grid-template-columns:1fr}.footer-brand,.footer-newsletter{grid-column:auto}.footer-bottom{flex-direction:column}}
</style>

<script>
(() => {
    "use strict";

    const root = document.documentElement;
    const mobileQuery = window.matchMedia("(max-width: 991px)");
    let resizeTimer = null;

    const getTheme = () => root.getAttribute("data-theme") === "dark" ? "dark" : "light";
    const getDevice = () => mobileQuery.matches ? "mobile" : "desktop";
    const toDatasetKey = (device, theme) => device + theme.charAt(0).toUpperCase() + theme.slice(1);

    const updateLogos = () => {
        const theme = getTheme();
        document.querySelectorAll("[data-logo-light][data-logo-dark]").forEach(img => {
            const nextSrc = theme === "dark" ? img.dataset.logoDark : img.dataset.logoLight;
            if (!nextSrc || img.dataset.loadedLogo === nextSrc) return;
            img.src = nextSrc;
            img.dataset.loadedLogo = nextSrc;
        });
    };

    const updateThemeAssets = () => {
        const theme = getTheme();
        const device = getDevice();
        const key = toDatasetKey(device, theme);

        document.querySelectorAll("[data-theme-asset]").forEach(asset => {
            const type = asset.dataset.themeAsset;
            const nextSrc = asset.dataset[key];

            if (!type || !nextSrc) return;

            if (type === "background") {
                if (asset.dataset.loadedBg === nextSrc) return;
                const preload = new Image();
                preload.decoding = "async";
                preload.src = nextSrc;
                preload.onload = () => {
                    asset.style.setProperty("--active-bg", `url("${nextSrc}")`);
                    asset.classList.add("is-bg-loaded");
                    asset.dataset.loadedBg = nextSrc;
                };
                return;
            }

            if (type === "image") {
                if (asset.dataset.loadedSrc === nextSrc) return;
                asset.src = nextSrc;
                asset.dataset.loadedSrc = nextSrc;
            }
        });
    };

    const refreshAssets = () => {
        updateLogos();
        updateThemeAssets();
    };

    const initThemeToggle = () => {
        const themeToggle = document.getElementById("themeToggle");
        if (!themeToggle) return;

        const sync = () => themeToggle.setAttribute("aria-pressed", getTheme() === "dark" ? "true" : "false");
        sync();

        themeToggle.addEventListener("click", () => {
            const nextTheme = getTheme() === "dark" ? "light" : "dark";
            root.setAttribute("data-theme", nextTheme);
            localStorage.setItem("theme", nextTheme);
            sync();
            refreshAssets();
        });
    };

    const initMobileMenu = () => {
        const menuToggle = document.getElementById("menuToggle");
        const mobilePanel = document.getElementById("mobilePanel");
        if (!menuToggle || !mobilePanel) return;

        const openMenu = () => {
            mobilePanel.hidden = false;
            requestAnimationFrame(() => {
                mobilePanel.classList.add("is-open");
                menuToggle.setAttribute("aria-expanded", "true");
                document.body.classList.add("menu-open");
            });
        };

        const closeMenu = () => {
            mobilePanel.classList.remove("is-open");
            menuToggle.setAttribute("aria-expanded", "false");
            document.body.classList.remove("menu-open");
            window.setTimeout(() => { mobilePanel.hidden = true; }, 250);
        };

        menuToggle.addEventListener("click", openMenu);
        mobilePanel.querySelectorAll("[data-close-menu]").forEach(button => button.addEventListener("click", closeMenu));
        document.addEventListener("keydown", event => {
            if (event.key === "Escape" && !mobilePanel.hidden) closeMenu();
        });
    };

    const initSubmenus = () => {
        document.querySelectorAll("[data-submenu-toggle]").forEach(button => {
            button.addEventListener("click", () => {
                const submenu = button.nextElementSibling;
                const icon = button.querySelector("[data-submenu-icon]");
                if (!submenu) return;
                const isOpen = submenu.classList.toggle("is-open");
                button.setAttribute("aria-expanded", isOpen ? "true" : "false");
                if (icon) icon.textContent = isOpen ? "−" : "+";
            });
        });
    };

    const initResizeHandler = () => {
        window.addEventListener("resize", () => {
            window.clearTimeout(resizeTimer);
            resizeTimer = window.setTimeout(refreshAssets, 150);
        });
    };

    document.addEventListener("DOMContentLoaded", () => {
        refreshAssets();
        initThemeToggle();
        initMobileMenu();
        initSubmenus();
        initResizeHandler();
    });

    window.SanjarAssets = { refresh: refreshAssets };
})();
</script>

</body>
</html>