<?php
if (!isset($product) || empty($product)) {
    include 'pages/404.php';
    exit;
}

$display_title = !empty($product['heading']) ? $product['heading'] : $product['title'];
$category_slug = $product['category'] ?? '';
$category_name = isset($categories[$category_slug]['name'])
    ? $categories[$category_slug]['name']
    : ucwords(str_replace('-', ' ', $category_slug ?: 'Sterile Injectable'));

$related_products = getCategoryProductsSummary($product['file_prefix'] ?? '');
$related_products = array_values(array_filter($related_products ?? [], function ($p) use ($product) {
    return ($p['slug'] ?? '') !== ($product['slug'] ?? '');
}));

$therapeutic_related = array_slice($related_products, 0, 4);
$category_related = array_slice($related_products, 4, 4);

$product_image = $base_url . (!empty($product['image']) ? $product['image'] : '/assets/images/products/no-product.webp');
$whatsapp_msg = urlencode('Hello, I would like to inquire about: ' . ($product['title'] ?? ''));

function ps_icon($type) {
    $icons = [
        'arrow' => '<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>',
        'mail' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z"/></svg>',
        'whatsapp' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.1 2a9.8 9.8 0 0 0-8.5 14.7L2.3 22l5.4-1.4A9.8 9.8 0 1 0 12.1 2Zm0 2a7.8 7.8 0 0 1 0 15.6 7.7 7.7 0 0 1-3.9-1l-.4-.2-2.7.7.7-2.6-.3-.4A7.8 7.8 0 0 1 12.1 4Zm-3 4.2c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3 1 2.5c.1.2 1.7 2.7 4.2 3.6 2 .8 2.4.5 2.8.5.4-.1 1.3-.6 1.5-1.1.2-.5.2-1 .1-1.1l-.5-.3-1.5-.7c-.2-.1-.4-.1-.6.2l-.7.9c-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2-1.2-.8-.7-1.3-1.6-1.5-1.9-.2-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.6c-.2-.4-.4-.4-.6-.4h-.2Z"/></svg>',
        'check' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9.2 16.2-4.2-4.2-1.4 1.4 5.6 5.6L21 7.2l-1.4-1.4L9.2 16.2Z"/></svg>',
        'plus' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z"/></svg>',
        'capsule' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.1 14.9 14.9 7a4.2 4.2 0 0 1 6 6L13 20.9a4.2 4.2 0 0 1-6-6Zm1.4 1.4a2.2 2.2 0 0 0 3.1 3.1l3.2-3.2-3.1-3.1-3.2 3.2Zm4.6-4.6 3.1 3.1 3.2-3.2a2.2 2.2 0 0 0-3.1-3.1l-3.2 3.2Z"/></svg>',
        'building' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 21V3h10v4h8v14H3Zm2-2h2v-2H5v2Zm0-4h2v-2H5v2Zm0-4h2V9H5v2Zm0-4h2V5H5v2Zm4 12h2v-2H9v2Zm0-4h2v-2H9v2Zm0-4h2V9H9v2Zm0-4h2V5H9v2Zm4 12h6V9h-6v10Zm2-7h2v2h-2v-2Zm0 4h2v2h-2v-2Z"/></svg>',
        'star' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 2 2.9 6 6.6.9-4.8 4.7 1.2 6.6L12 17.1l-5.9 3.1 1.2-6.6-4.8-4.7 6.6-.9L12 2Z"/></svg>',
        'globe' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 9h-3.1a15.5 15.5 0 0 0-1.2-5A8 8 0 0 1 18.9 11ZM12 4.1c.8 1.1 1.5 2.8 1.8 4.9h-3.6c.3-2.1 1-3.8 1.8-4.9ZM4.1 13h3.1c.2 1.8.6 3.5 1.2 5A8 8 0 0 1 4.1 13Zm3.1-2H4.1A8 8 0 0 1 8.4 6a15.5 15.5 0 0 0-1.2 5ZM12 19.9c-.8-1.1-1.5-2.8-1.8-4.9h3.6c-.3 2.1-1 3.8-1.8 4.9Zm2.2-6.9H9.8a13 13 0 0 1 0-2h4.4a13 13 0 0 1 0 2Zm1.4 5c.6-1.5 1-3.2 1.2-5h3.1a8 8 0 0 1-4.3 5Z"/></svg>',
        'close' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6.4 5 12.6 12.6-1.4 1.4L5 6.4 6.4 5Zm11.2 0L19 6.4 6.4 19 5 17.6 17.6 5Z"/></svg>'
    ];

    return $icons[$type] ?? $icons['arrow'];
}

$cert_items = [
    ['img' => $base_url . '/assets/images/cer/who.webp', 'alt' => 'WHO certified', 'label' => 'WHO-GMP', 'strong' => 'Certified'],
    ['img' => $base_url . '/assets/images/cer/gmp.webp', 'alt' => 'GMP certified', 'label' => 'GMP', 'strong' => 'Certified'],
    ['img' => $base_url . '/assets/images/cer/iso.webp', 'alt' => 'ISO certified', 'label' => 'ISO 9001:2015', 'strong' => 'Certified'],
    ['img' => $base_url . '/assets/images/cer/glp.webp', 'alt' => 'GLP certified', 'label' => 'GLP', 'strong' => 'Certified']
];

$flags = [
    ['in.svg', 'India'], ['us.svg', 'USA'], ['uk.svg', 'UK'], ['ca.svg', 'Canada'], ['de.svg', 'Germany'],
    ['au.svg', 'Australia'], ['ae.svg', 'UAE'], ['br.svg', 'Brazil'], ['za.svg', 'South Africa'], ['my.svg', 'Malaysia']
];

$has_first_tab = false;
?>

<section class="product-single-hero section-sm" aria-labelledby="productTitle">
    <div class="site-container product-single-hero-grid">
        <div class="product-showcase-img">
            <img
                src="<?= htmlspecialchars($product_image, ENT_QUOTES, 'UTF-8') ?>"
                width="560"
                height="520"
                alt="<?= htmlspecialchars($display_title, ENT_QUOTES, 'UTF-8') ?>"
                fetchpriority="high"
                loading="eager"
                decoding="async"
            >
        </div>

        <div class="product-intro">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
                <a href="<?= $base_url ?>/">Home</a>
                <span class="separator">/</span>
                <a href="<?= $base_url ?>/products">Products</a>

                <?php if ($category_slug && isset($categories[$category_slug])): ?>
                    <span class="separator">/</span>
                    <a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($category_slug, ENT_QUOTES, 'UTF-8') ?>">
                        <?= htmlspecialchars($categories[$category_slug]['name'], ENT_QUOTES, 'UTF-8') ?>
                    </a>
                <?php endif; ?>

                <span class="separator">/</span>
                <span><?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?></span>
            </nav>

            <h1 id="productTitle"><?= htmlspecialchars($display_title, ENT_QUOTES, 'UTF-8') ?></h1>

            <div class="product-badges">
                <?php if (!empty($product['brand_name'])): ?>
                    <span class="badge badge-brand">Brand: <?= htmlspecialchars($product['brand_name'], ENT_QUOTES, 'UTF-8') ?></span>
                <?php endif; ?>

                <span class="badge"><?= htmlspecialchars($category_name, ENT_QUOTES, 'UTF-8') ?></span>
            </div>

            <?php if (!empty($product['therapeutic_class']) && is_array($product['therapeutic_class'])): ?>
                <div class="therapeutic-line">
                    <?= ps_icon('globe') ?>
                    <strong>Therapeutic Category:</strong>
                    <span><?= implode(', ', array_map(fn($t) => htmlspecialchars($t, ENT_QUOTES, 'UTF-8'), $product['therapeutic_class'])) ?></span>
                </div>
            <?php endif; ?>

            <div class="certification-marquee-section">
                <h2>Our Certifications</h2>

                <div class="marquee cert-marquee">
                    <div class="marquee-track duration-slow">
                        <?php for ($i = 0; $i < 2; $i++): ?>
                            <?php foreach ($cert_items as $cert): ?>
                                <div class="cert-item">
                                    <img src="<?= htmlspecialchars($cert['img'], ENT_QUOTES, 'UTF-8') ?>" width="32" height="32" alt="<?= htmlspecialchars($cert['alt'], ENT_QUOTES, 'UTF-8') ?>" loading="lazy" decoding="async">
                                    <span><?= htmlspecialchars($cert['label'], ENT_QUOTES, 'UTF-8') ?><br><strong><?= htmlspecialchars($cert['strong'], ENT_QUOTES, 'UTF-8') ?></strong></span>
                                </div>
                            <?php endforeach; ?>
                        <?php endfor; ?>
                    </div>
                </div>
            </div>

            <div class="desktop-product-actions">
                <a href="#desktop-enquiry-section" class="primary-button">
                    <?= ps_icon('mail') ?> Enquire Now
                </a>

                <a href="https://wa.me/916352986603?text=<?= $whatsapp_msg ?>" target="_blank" rel="noopener noreferrer" class="whatsapp-button">
                    <?= ps_icon('whatsapp') ?> Enquire on WhatsApp
                </a>
            </div>
        </div>
    </div>
</section>

<section class="global-strip section-sm" aria-labelledby="globalStripTitle">
    <div class="site-container global-strip-head">
        <div>
            <h2 id="globalStripTitle">Global Presence</h2>
            <p>Our products are trusted and supplied across 40+ countries worldwide.</p>
        </div>

        <a href="<?= $base_url ?>/global-presence" class="secondary-button">
            View All Countries
            <?= ps_icon('arrow') ?>
        </a>
    </div>

    <div class="marquee flag-marquee-row">
        <div class="marquee-track direction-reverse duration-fast">
            <?php for ($i = 0; $i < 2; $i++): ?>
                <?php foreach ($flags as $flag): ?>
                    <span class="flag-item">
                        <img src="<?= $base_url ?>/assets/images/flags/<?= htmlspecialchars($flag[0], ENT_QUOTES, 'UTF-8') ?>" width="20" height="14" alt="<?= htmlspecialchars($flag[1], ENT_QUOTES, 'UTF-8') ?>" loading="lazy" decoding="async">
                        <?= htmlspecialchars($flag[1], ENT_QUOTES, 'UTF-8') ?>
                    </span>
                <?php endforeach; ?>
            <?php endfor; ?>
        </div>
    </div>
</section>

<section class="product-detail-content section section-surface">
    <div class="site-container product-detail-layout">
        <div class="product-main-content">
            <?php if (!empty($product['intro']) && is_array($product['intro'])): ?>
                <article class="product-overview-card card card-pad">
                    <h2>Product Overview</h2>

                    <?php foreach ($product['intro'] as $index => $paragraph): ?>
                        <p class="<?= $index === 0 ? 'intro-lead' : '' ?>">
                            <?= htmlspecialchars($paragraph, ENT_QUOTES, 'UTF-8') ?>
                        </p>
                    <?php endforeach; ?>
                </article>
            <?php endif; ?>

            <div class="tabs product-tabs" role="tablist" aria-label="Product details tabs">
                <?php if (!empty($product['details'])): $has_first_tab = true; ?>
                    <button class="tab-button is-active" type="button" data-tab-target="panel-medical" aria-selected="true">
                        Medical Details
                    </button>
                <?php endif; ?>

                <?php if (!empty($product['product_details'])): ?>
                    <button class="tab-button <?= !$has_first_tab ? 'is-active' : '' ?>" type="button" data-tab-target="panel-specs" aria-selected="<?= !$has_first_tab ? 'true' : 'false' ?>">
                        Specifications
                    </button>
                    <?php $has_first_tab = true; ?>
                <?php endif; ?>

                <?php if (!empty($product['manufacturing_support'])): ?>
                    <button class="tab-button <?= !$has_first_tab ? 'is-active' : '' ?>" type="button" data-tab-target="panel-mfg" aria-selected="<?= !$has_first_tab ? 'true' : 'false' ?>">
                        Manufacturing
                    </button>
                    <?php $has_first_tab = true; ?>
                <?php endif; ?>

                <?php if (!empty($product['why_choose'])): ?>
                    <button class="tab-button <?= !$has_first_tab ? 'is-active' : '' ?>" type="button" data-tab-target="panel-why-choose" aria-selected="<?= !$has_first_tab ? 'true' : 'false' ?>">
                        Why Choose Us
                    </button>
                    <?php $has_first_tab = true; ?>
                <?php endif; ?>

                <?php if (!empty($product['industries'])): ?>
                    <button class="tab-button <?= !$has_first_tab ? 'is-active' : '' ?>" type="button" data-tab-target="panel-industries" aria-selected="<?= !$has_first_tab ? 'true' : 'false' ?>">
                        Industries We Serve
                    </button>
                <?php endif; ?>
            </div>

            <?php $first_panel_done = false; ?>

            <?php if (!empty($product['details'])): ?>
                <div class="tab-panel is-active" id="panel-medical">
                    <div class="medical-panel-grid">
                        <?php
                        $medical_items = [
                            'Uses' => ['Uses & Indications', 'plus'],
                            'Dosages' => ['Dosages & Administration', 'capsule'],
                            'Precautions' => ['Precautions', 'check'],
                            'Side effects' => ['Side Effects', 'star'],
                            'Storage' => ['Storage Instructions', 'check'],
                            'Packing details' => ['Packing Details', 'building']
                        ];
                        ?>

                        <?php foreach ($medical_items as $key => $item): ?>
                            <?php if (!empty($product['details'][$key])): ?>
                                <article class="medical-data-card card card-pad">
                                    <h2><?= ps_icon($item[1]) ?> <?= htmlspecialchars($item[0], ENT_QUOTES, 'UTF-8') ?></h2>
                                    <p><?= nl2br(htmlspecialchars($product['details'][$key], ENT_QUOTES, 'UTF-8')) ?></p>
                                </article>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php $first_panel_done = true; ?>
            <?php endif; ?>

            <?php if (!empty($product['product_details'])): ?>
                <div class="tab-panel <?= !$first_panel_done ? 'is-active' : '' ?>" id="panel-specs">
                    <div class="spec-panel card card-pad">
                        <h2>Technical Specifications</h2>

                        <div class="spec-grid">
                            <?php foreach ($product['product_details'] as $key => $val): ?>
                                <div class="spec-row">
                                    <div class="spec-label"><?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?></div>
                                    <div class="spec-value"><?= htmlspecialchars($val, ENT_QUOTES, 'UTF-8') ?></div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <?php $first_panel_done = true; ?>
            <?php endif; ?>

            <?php if (!empty($product['manufacturing_support'])): ?>
                <div class="tab-panel <?= !$first_panel_done ? 'is-active' : '' ?>" id="panel-mfg">
                    <div class="support-panel card card-pad">
                        <h2><?= htmlspecialchars($product['manufacturing_heading'] ?? 'Manufacturing Excellence', ENT_QUOTES, 'UTF-8') ?></h2>

                        <?php if (!empty($product['manufacturing_desc'])): ?>
                            <p><?= htmlspecialchars($product['manufacturing_desc'], ENT_QUOTES, 'UTF-8') ?></p>
                        <?php endif; ?>

                        <div class="feature-list-grid">
                            <?php foreach ($product['manufacturing_support'] as $support_item): ?>
                                <div class="feature-list-item">
                                    <?= ps_icon('check') ?>
                                    <span><?= htmlspecialchars($support_item, ENT_QUOTES, 'UTF-8') ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <?php $first_panel_done = true; ?>
            <?php endif; ?>

            <?php if (!empty($product['why_choose'])): ?>
                <div class="tab-panel <?= !$first_panel_done ? 'is-active' : '' ?>" id="panel-why-choose">
                    <div class="support-panel card card-pad">
                        <h2><?= htmlspecialchars($product['why_choose_heading'] ?? 'Why Choose Sanjar Pharma?', ENT_QUOTES, 'UTF-8') ?></h2>

                        <div class="feature-list-grid">
                            <?php foreach ($product['why_choose'] as $reason): ?>
                                <div class="feature-list-item">
                                    <?= ps_icon('star') ?>
                                    <span><?= htmlspecialchars($reason, ENT_QUOTES, 'UTF-8') ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <?php $first_panel_done = true; ?>
            <?php endif; ?>

            <?php if (!empty($product['industries'])): ?>
                <div class="tab-panel <?= !$first_panel_done ? 'is-active' : '' ?>" id="panel-industries">
                    <div class="support-panel card card-pad">
                        <h2><?= htmlspecialchars($product['industries_heading'] ?? 'Industries Served', ENT_QUOTES, 'UTF-8') ?></h2>

                        <div class="industry-chip-list">
                            <?php foreach ($product['industries'] as $industry): ?>
                                <span class="badge"><?= htmlspecialchars($industry, ENT_QUOTES, 'UTF-8') ?></span>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <aside class="product-enquiry-sidebar" id="desktop-enquiry-section" aria-label="Product enquiry form">
            <div class="enquiry-card card card-pad">
                <h2>Enquire About This Product</h2>
                <p>Submit your requirement parameters below for rapid commercial export handling.</p>

                <form action="<?= $base_url ?>/actions/send-inquiry" method="POST" class="enquiry-form">
                    <input type="hidden" name="product_title" value="<?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?>">

                    <label class="sr-only" for="productName">Full Name</label>
                    <input id="productName" type="text" name="name" placeholder="Full Name*" autocomplete="name" required>

                    <label class="sr-only" for="productEmail">Email Address</label>
                    <input id="productEmail" type="email" name="email" placeholder="Email Address*" autocomplete="email" required>

                    <label class="sr-only" for="productPhone">Phone Number</label>
                    <input id="productPhone" type="tel" name="phone" placeholder="Phone Number*" autocomplete="tel" required>

                    <label class="sr-only" for="productMessage">Your Requirement</label>
                    <textarea id="productMessage" name="message" rows="4" placeholder="Your Requirement*" required></textarea>

                    <button type="submit" class="primary-button">
                        Send Enquiry
                        <?= ps_icon('arrow') ?>
                    </button>
                </form>
            </div>
        </aside>
    </div>
</section>

<?php if (!empty($therapeutic_related)): ?>
<section class="related-products-section section-sm" aria-labelledby="therapeuticRelatedTitle">
    <div class="site-container">
        <div class="section-head">
            <div>
                <span class="section-eyebrow">Related Products</span>
                <h2 id="therapeuticRelatedTitle" class="section-title">Therapeutic Related Products</h2>
            </div>
        </div>

        <div class="related-product-grid">
            <?php foreach ($therapeutic_related as $rel): ?>
                <article class="related-product-card card card-hover">
                    <a href="<?= $base_url ?>/product/<?= htmlspecialchars($rel['slug'], ENT_QUOTES, 'UTF-8') ?>">
                        <div class="related-product-media">
                            <img
                                src="<?= $base_url . (!empty($rel['image']) ? $rel['image'] : '/assets/images/products/no-product.webp') ?>"
                                width="260"
                                height="190"
                                alt="<?= htmlspecialchars($rel['title'], ENT_QUOTES, 'UTF-8') ?>"
                                loading="lazy"
                                decoding="async"
                            >
                        </div>

                        <h3><?= htmlspecialchars($rel['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                        <span class="product-link">
                            View
                            <?= ps_icon('arrow') ?>
                        </span>
                    </a>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($category_related)): ?>
<section class="related-products-section section-sm section-surface" aria-labelledby="categoryRelatedTitle">
    <div class="site-container">
        <div class="section-head">
            <div>
                <span class="section-eyebrow">More From Category</span>
                <h2 id="categoryRelatedTitle" class="section-title">Related <?= htmlspecialchars($category_name, ENT_QUOTES, 'UTF-8') ?></h2>
            </div>

            <?php if (!empty($category_slug)): ?>
                <a href="<?= $base_url ?>/product-category/<?= htmlspecialchars($category_slug, ENT_QUOTES, 'UTF-8') ?>" class="section-link">
                    View Category
                </a>
            <?php endif; ?>
        </div>

        <div class="related-product-grid">
            <?php foreach ($category_related as $rel): ?>
                <article class="related-product-card card card-hover">
                    <a href="<?= $base_url ?>/product/<?= htmlspecialchars($rel['slug'], ENT_QUOTES, 'UTF-8') ?>">
                        <div class="related-product-media">
                            <img
                                src="<?= $base_url . (!empty($rel['image']) ? $rel['image'] : '/assets/images/products/no-product.webp') ?>"
                                width="260"
                                height="190"
                                alt="<?= htmlspecialchars($rel['title'], ENT_QUOTES, 'UTF-8') ?>"
                                loading="lazy"
                                decoding="async"
                            >
                        </div>

                        <h3><?= htmlspecialchars($rel['title'], ENT_QUOTES, 'UTF-8') ?></h3>

                        <span class="product-link">
                            View
                            <?= ps_icon('arrow') ?>
                        </span>
                    </a>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<div class="mobile-sticky-product-bar">
    <button class="mobile-product-action" type="button" id="openProductEnquiry">
        <?= ps_icon('mail') ?> Enquire
    </button>

    <a href="https://wa.me/916352986603?text=<?= $whatsapp_msg ?>" target="_blank" rel="noopener noreferrer" class="mobile-product-action whatsapp-action">
        <?= ps_icon('whatsapp') ?> WhatsApp
    </a>
</div>

<div class="product-enquiry-panel" id="productEnquiryPanel" hidden>
    <div class="product-enquiry-backdrop" data-close-product-enquiry></div>

    <aside class="product-enquiry-drawer" aria-labelledby="mobileEnquiryTitle">
        <div class="product-enquiry-head">
            <h2 id="mobileEnquiryTitle">Enquire About This Product</h2>
            <button type="button" data-close-product-enquiry aria-label="Close enquiry form">
                <?= ps_icon('close') ?>
            </button>
        </div>

        <div class="product-enquiry-body">
            <form action="<?= $base_url ?>/actions/send-inquiry" method="POST" class="enquiry-form">
                <input type="hidden" name="product_title" value="<?= htmlspecialchars($product['title'], ENT_QUOTES, 'UTF-8') ?>">

                <label class="sr-only" for="mobileProductName">Full Name</label>
                <input id="mobileProductName" type="text" name="name" placeholder="Full Name*" autocomplete="name" required>

                <label class="sr-only" for="mobileProductEmail">Email Address</label>
                <input id="mobileProductEmail" type="email" name="email" placeholder="Email Address*" autocomplete="email" required>

                <label class="sr-only" for="mobileProductPhone">Phone Number</label>
                <input id="mobileProductPhone" type="tel" name="phone" placeholder="Phone Number*" autocomplete="tel" required>

                <label class="sr-only" for="mobileProductMessage">Your Requirement</label>
                <textarea id="mobileProductMessage" name="message" rows="4" placeholder="Your Requirement*" required></textarea>

                <button type="submit" class="primary-button">
                    Send Enquiry
                    <?= ps_icon('arrow') ?>
                </button>
            </form>
        </div>
    </aside>
</div>

<style>
.product-single-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.product-single-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.product-showcase-img {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.product-showcase-img img {
  width: 100%;
  max-width: 480px;
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

.product-intro h1 {
  margin: 1rem 0;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.therapeutic-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.therapeutic-line svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--primary);
  fill: currentColor;
}

.therapeutic-line strong {
  color: var(--heading);
}

.therapeutic-line span {
  color: var(--primary);
  font-weight: 700;
}

.certification-marquee-section {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.certification-marquee-section h2 {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert-marquee {
  max-width: 100%;
}

.cert-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.cert-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cert-item span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.cert-item strong {
  color: var(--heading);
}

.desktop-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.whatsapp-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: #25d366;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.whatsapp-button svg,
.primary-button svg,
.secondary-button svg,
.product-link svg,
.feature-list-item svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.global-strip {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.global-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.global-strip-head h2 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.global-strip-head p {
  margin: 0;
  font-size: 0.9rem;
}

.flag-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 700;
}

.flag-item img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.product-overview-card {
  margin-bottom: 1.5rem;
}

.product-overview-card h2,
.support-panel h2,
.spec-panel h2,
.enquiry-card h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.8rem);
}

.intro-lead {
  color: var(--heading);
  font-weight: 600;
}

.product-tabs {
  margin-bottom: 1rem;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.medical-panel-grid {
  display: grid;
  gap: 1rem;
}

.medical-data-card {
  background: var(--surface-2);
}

.medical-data-card h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.medical-data-card h2 svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--primary);
  fill: currentColor;
}

.medical-data-card p {
  margin: 0;
  font-size: 0.92rem;
}

.support-panel,
.spec-panel {
  margin-top: 1rem;
}

.feature-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.feature-list-item svg {
  flex: 0 0 auto;
  color: var(--primary);
}

.feature-list-item span {
  color: var(--heading);
  font-size: 0.9rem;
  font-weight: 600;
}

.industry-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.product-enquiry-sidebar {
  position: sticky;
  top: 100px;
}

.enquiry-card p {
  font-size: 0.9rem;
}

.enquiry-form {
  display: grid;
  gap: 0.85rem;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--heading);
  background: var(--input-bg);
}

.enquiry-form textarea {
  min-height: 120px;
  padding-block: 0.85rem;
  resize: vertical;
}

.enquiry-form .primary-button {
  border: 0;
}

.related-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.related-product-card {
  overflow: hidden;
}

.related-product-card a {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.related-product-media {
  display: grid;
  place-items: center;
  height: 150px;
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.related-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.related-product-card h3 {
  min-height: 44px;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 700;
}

.mobile-sticky-product-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  display: none;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
}

.mobile-product-action {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: #111315;
  background: var(--primary);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-product-action svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.whatsapp-action {
  color: #fff;
  background: #25d366;
}

.product-enquiry-panel[hidden] {
  display: none;
}

.product-enquiry-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.product-enquiry-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.product-enquiry-drawer {
  position: absolute;
  inset: auto 0 0;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.product-enquiry-panel.is-open .product-enquiry-drawer {
  transform: translateY(0);
}

.product-enquiry-head {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.product-enquiry-head h2 {
  margin: 0;
  font-size: 1rem;
}

.product-enquiry-head button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--heading);
  background: var(--surface-2);
}

.product-enquiry-head button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.product-enquiry-body {
  padding: 1rem;
}

@media (max-width: 1180px) {
  .related-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 991px) {
  .product-single-hero-grid,
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-showcase-img {
    min-height: 320px;
  }

  .product-showcase-img img {
    max-height: 280px;
  }

  .desktop-product-actions,
  .product-enquiry-sidebar {
    display: none;
  }

  .mobile-sticky-product-bar {
    display: flex;
  }

  .product-detail-content {
    padding-bottom: 5rem;
  }

  .global-strip-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .product-showcase-img {
    min-height: 260px;
    padding: 1rem;
  }

  .product-showcase-img img {
    max-height: 220px;
  }

  .related-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .related-product-card a {
    padding: 0.5rem;
  }

  .related-product-media {
    height: 110px;
    padding: 0.5rem;
  }

  .related-product-card h3 {
    font-size: 0.76rem;
  }

  .cert-item {
    padding: 0.5rem 0.8rem;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("[data-tab-target]").forEach(button => {
        button.addEventListener("click", () => {
            const targetId = button.dataset.tabTarget;

            document.querySelectorAll("[data-tab-target]").forEach(tab => {
                tab.classList.remove("is-active");
                tab.setAttribute("aria-selected", "false");
            });

            document.querySelectorAll(".tab-panel").forEach(panel => {
                panel.classList.remove("is-active");
            });

            button.classList.add("is-active");
            button.setAttribute("aria-selected", "true");

            const targetPanel = document.getElementById(targetId);
            if (targetPanel) {
                targetPanel.classList.add("is-active");
            }
        });
    });

    const enquiryPanel = document.getElementById("productEnquiryPanel");
    const openEnquiry = document.getElementById("openProductEnquiry");

    const closeEnquiryPanel = () => {
        if (!enquiryPanel) return;

        enquiryPanel.classList.remove("is-open");
        document.body.classList.remove("menu-open");

        window.setTimeout(() => {
            enquiryPanel.hidden = true;
        }, 220);
    };

    if (openEnquiry && enquiryPanel) {
        openEnquiry.addEventListener("click", () => {
            enquiryPanel.hidden = false;

            requestAnimationFrame(() => {
                enquiryPanel.classList.add("is-open");
                document.body.classList.add("menu-open");
            });
        });

        enquiryPanel.querySelectorAll("[data-close-product-enquiry]").forEach(button => {
            button.addEventListener("click", closeEnquiryPanel);
        });

        document.addEventListener("keydown", event => {
            if (event.key === "Escape" && !enquiryPanel.hidden) {
                closeEnquiryPanel();
            }
        });
    }
});
</script>