<?php
$about_content = $about_content ?? [];
$team_members = $team_members ?? [];
$milestones = $milestones ?? [];

$about_heros = $about_contents['hero'] ?? [
    'eyebrow' => 'WHO-GMP Certified',
    'title' => 'Driven by Quality.',
    'highlight' => 'Committed to Life.',
    'description' => 'Sanjar Pharma LLP is a leading manufacturer of sterile injectables delivering reliable, safe and high-quality pharmaceutical solutions to healthcare markets worldwide.',
    'primary_button_text' => 'Our Products',
    'primary_button_url' => $base_url . '/products',
    'secondary_button_text' => 'Download Brochure',
    'secondary_button_url' => $base_url . '/assets/pdf/sanjar-pharma-company-profile.pdf',
    'background' => [
        'desktop_light' => $base_url . '/assets/images/main/about/ab-l.webp',
        'desktop_dark'  => $base_url . '/assets/images/main/about/ab-d.webp',
        'mobile_light'  => $base_url . '/assets/images/main/about/ab-mob-l.webp',
        'mobile_dark'   => $base_url . '/assets/images/main/about/ab-mob-d.webp'
    ]
];

$story_stats = [
    ['value' => 150, 'suffix' => '+', 'label' => 'Skilled Professionals', 'sub' => 'Dedicated team members'],
    ['value' => 50, 'suffix' => 'M+', 'label' => 'Annual Capacity', 'sub' => 'Units manufactured'],
    ['value' => 98, 'suffix' => '%', 'label' => 'Global Export', 'sub' => 'Reaching 30+ countries'],
    ['value' => 100, 'suffix' => '%', 'label' => 'Quality Commitment', 'sub' => 'Safety in every product']
];


?>

<link rel="preload" as="image" href="<?= htmlspecialchars($about_content['background']['desktop_light'], ENT_QUOTES, 'UTF-8') ?>" media="(min-width: 992px)" fetchpriority="high">
<link rel="preload" as="image" href="<?= htmlspecialchars($about_content['background']['mobile_light'], ENT_QUOTES, 'UTF-8') ?>" media="(max-width: 991px)" fetchpriority="high">

<section
    class="about-hero lazy-theme-bg"
    aria-labelledby="aboutHeroTitle"
    data-theme-asset="background"
    data-desktop-light="<?= htmlspecialchars($about_content['background']['desktop_light'], ENT_QUOTES, 'UTF-8') ?>"
    data-desktop-dark="<?= htmlspecialchars($about_content['background']['desktop_dark'], ENT_QUOTES, 'UTF-8') ?>"
    data-mobile-light="<?= htmlspecialchars($about_content['background']['mobile_light'], ENT_QUOTES, 'UTF-8') ?>"
    data-mobile-dark="<?= htmlspecialchars($about_content['background']['mobile_dark'], ENT_QUOTES, 'UTF-8') ?>"
>
    <div class="site-container about-hero-inner">
        <div class="about-hero-content">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
                <a href="<?= $base_url ?>/">Home</a>
                <span class="separator">/</span>
                <span>About Us</span>
            </nav>

            <span class="pill badge-brand"><?= htmlspecialchars($about_content['eyebrow'], ENT_QUOTES, 'UTF-8') ?></span>

            <h1 id="aboutHeroTitle">
                <?= htmlspecialchars($about_content['title'], ENT_QUOTES, 'UTF-8') ?><br>
                <span><?= htmlspecialchars($about_content['highlight'], ENT_QUOTES, 'UTF-8') ?></span>
            </h1>

            <p><?= htmlspecialchars($about_content['description'], ENT_QUOTES, 'UTF-8') ?></p>

            <div class="about-hero-actions">
                <a href="<?= htmlspecialchars($about_content['primary_button_url'], ENT_QUOTES, 'UTF-8') ?>" class="primary-button">
                    <?= htmlspecialchars($about_content['primary_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>

                <a href="<?= htmlspecialchars($about_content['secondary_button_url'], ENT_QUOTES, 'UTF-8') ?>" class="secondary-button">
                    <?= htmlspecialchars($about_content['secondary_button_text'], ENT_QUOTES, 'UTF-8') ?>
                    <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 4h2v8.2l3.3-3.3 1.4 1.4L12 16l-5.7-5.7 1.4-1.4 3.3 3.3V4ZM5 18h14v2H5v-2Z"/></svg>
                </a>
            </div>

            <div class="hero-cert-row" aria-label="Sanjar Pharma certifications">
                <?php foreach ($certifications as $cert): ?>
                    <div class="hero-cert">
                        <img
                            src="<?= htmlspecialchars($cert['image'], ENT_QUOTES, 'UTF-8') ?>"
                            width="48"
                            height="48"
                            alt="<?= htmlspecialchars($cert['name'], ENT_QUOTES, 'UTF-8') ?>"
                            loading="eager"
                            decoding="async"
                        >
                        <span><?= htmlspecialchars($cert['label'], ENT_QUOTES, 'UTF-8') ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<section class="about-story-section section" aria-labelledby="storyTitle">
    <div class="site-container about-story-grid">
        <div class="section-copy">
            <span class="section-eyebrow">Our Story</span>
            <h2 id="storyTitle">A Commitment to Quality, Safety and Global Health.</h2>

            <div class="brand-dash" aria-hidden="true"></div>

            <p>Since starting our journey in 2016 in Himatnagar, Gujarat, we have focused on quality, reliability and safety through every vial and syringe.</p>
            <p>Our facility is strategically engineered to meet national and international pharmaceutical demands both qualitatively and quantitatively.</p>
            <p>Today, Sanjar Pharma is recognized for sterile injectable manufacturing excellence, serving global markets with care and consistency.</p>

            <div class="signature-box">
                <img src="<?= $base_url ?>/assets/images/signature.png" width="150" height="70" alt="Management signature" loading="lazy" decoding="async">
                <h3>Management Team</h3>
                <p>Sanjar Pharma LLP</p>
            </div>
        </div>

        <div class="story-stats-grid">
            <?php foreach ($story_stats as $stat): ?>
                <article class="story-stat-card card card-pad card-hover">
                    <strong>
                        <span class="counter-number" data-counter="<?= (int) $stat['value'] ?>">0</span><?= htmlspecialchars($stat['suffix'], ENT_QUOTES, 'UTF-8') ?>
                    </strong>
                    <h3><?= htmlspecialchars($stat['label'], ENT_QUOTES, 'UTF-8') ?></h3>
                    <p><?= htmlspecialchars($stat['sub'], ENT_QUOTES, 'UTF-8') ?></p>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php if (!empty($milestones)): ?>
<section class="timeline-section section-sm section-surface" aria-labelledby="timelineTitle">
    <div class="site-container">
        <div class="section-head">
            <div>
                <span class="section-eyebrow">Our Journey</span>
                <h2 id="timelineTitle" class="section-title">Milestones That Define<br>Our Excellence</h2>
            </div>

            <div class="timeline-head-right">
                <p class="section-side-note">From our beginning to becoming a trusted global partner.</p>

                <div class="timeline-controls">
                    <button class="control-btn" type="button" id="timePrev" aria-label="Previous milestone">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.4 5.4 8.8 12l6.6 6.6-1.4 1.4L6 12l8-8 1.4 1.4Z"/></svg>
                    </button>
                    <button class="control-btn" type="button" id="timeNext" aria-label="Next milestone">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.6 18.6 6.6-6.6-6.6-6.6L10 4l8 8-8 8-1.4-1.4Z"/></svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="timeline-slider-wrapper">
            <div class="timeline-connecting-line" aria-hidden="true"></div>

            <div class="timeline-track" id="timelineTrack">
                <?php foreach ($milestones as $index => $m): ?>
                    <article class="milestone-node <?= $index === 0 ? 'active' : '' ?>" data-timeline-index="<?= (int) $index ?>">
                        <button class="node-interactive-zone" type="button" aria-label="View milestone <?= htmlspecialchars($m['year'], ENT_QUOTES, 'UTF-8') ?>">
                            <span class="node-circle"><?= htmlspecialchars($m['year'], ENT_QUOTES, 'UTF-8') ?></span>
                            <span class="node-content">
                                <strong><?= htmlspecialchars($m['title'], ENT_QUOTES, 'UTF-8') ?></strong>
                                <small><?= htmlspecialchars($m['desc'], ENT_QUOTES, 'UTF-8') ?></small>
                            </span>
                        </button>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>

        <div id="timeline-popup-box" class="timeline-popup card">
            <div class="timeline-popup-img">
                <img src="" id="pop-img" width="320" height="190" alt="Milestone graphic" loading="lazy" decoding="async">
            </div>

            <div class="timeline-popup-copy">
                <div class="popup-year-row">
                    <span class="dot" aria-hidden="true"></span>
                    <span id="pop-year"></span>
                </div>
                <h3 id="pop-title"></h3>
                <p id="pop-desc"></p>
            </div>
        </div>
    </div>
</section>

<script type="application/json" id="timelineData">
<?= json_encode($milestones, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>
</script>
<?php endif; ?>

<?php if (!empty($about_content['vision_mission'])): ?>
<section class="vm-section section" aria-labelledby="vmTitle">
    <div class="site-container vm-grid">
        <div class="vm-visual">
            <img src="<?= $base_url . htmlspecialchars($about_content['vision_mission']['hero_image'], ENT_QUOTES, 'UTF-8') ?>" width="720" height="560" alt="Sanjar Pharma vision and mission" loading="lazy" decoding="async">
        </div>

        <div class="section-copy">
            <span class="section-eyebrow">Vision and Mission</span>
            <h2 id="vmTitle"><?= htmlspecialchars($about_content['vision_mission']['title'], ENT_QUOTES, 'UTF-8') ?></h2>
            <p><?= htmlspecialchars($about_content['vision_mission']['subtitle'], ENT_QUOTES, 'UTF-8') ?></p>

            <div class="vm-card-list">
                <?php foreach ($about_content['vision_mission']['cards'] as $card): ?>
                    <article class="card card-pad card-hover">
                        <h3><?= htmlspecialchars($card['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                        <p><?= htmlspecialchars($card['desc'], ENT_QUOTES, 'UTF-8') ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($team_members)): ?>
<section class="team-section section-sm" aria-labelledby="teamTitle">
    <div class="site-container">
        <div class="team-carousel-grid">
            <div class="team-heading-card card">
                <div class="brand-dots" aria-hidden="true"><span></span><span></span></div>
                <span class="section-eyebrow">Leadership</span>
                <h2 id="teamTitle">Our Team</h2>
                <p>Driving strategic growth and pharmaceutical excellence across global markets.</p>

                <div class="team-controls">
                    <button class="control-btn" type="button" id="teamPrev" aria-label="Previous team members">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.4 5.4 8.8 12l6.6 6.6-1.4 1.4L6 12l8-8 1.4 1.4Z"/></svg>
                    </button>
                    <button class="control-btn" type="button" id="teamNext" aria-label="Next team members">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.6 18.6 6.6-6.6-6.6-6.6L10 4l8 8-8 8-1.4-1.4Z"/></svg>
                    </button>
                </div>
            </div>

            <div class="team-carousel-window" id="teamCarouselWindow">
                <div class="team-carousel-track" id="teamCarouselTrack">
                    <?php foreach ($team_members as $member): ?>
                        <article class="team-card card">
                            <div class="team-img-wrap">
                                <img src="<?= $base_url . htmlspecialchars($member['image'], ENT_QUOTES, 'UTF-8') ?>" width="360" height="260" alt="<?= htmlspecialchars($member['name'], ENT_QUOTES, 'UTF-8') ?>" loading="lazy" decoding="async">
                                <?php if (!empty($member['linkedin'])): ?>
                                    <a class="social-pill" href="<?= htmlspecialchars($member['linkedin'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer">LinkedIn</a>
                                <?php endif; ?>
                            </div>

                            <div class="team-body">
                                <div class="member-name-row">
                                    <h3><?= htmlspecialchars($member['name'], ENT_QUOTES, 'UTF-8') ?></h3>
                                    <div class="brand-dots" aria-hidden="true"><span></span><span></span></div>
                                </div>
                                <strong><?= htmlspecialchars($member['role'], ENT_QUOTES, 'UTF-8') ?></strong>
                                <p><?= htmlspecialchars($member['bio'], ENT_QUOTES, 'UTF-8') ?></p>
                            </div>

                            <div class="team-footer">
                                <?php if (!empty($member['whatsapp'])): ?>
                                    <a href="https://wa.me/<?= htmlspecialchars(str_replace(' ', '', $member['whatsapp']), ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer">WhatsApp</a>
                                <?php endif; ?>
                                <?php if (!empty($member['email'])): ?>
                                    <a href="mailto:<?= htmlspecialchars($member['email'], ENT_QUOTES, 'UTF-8') ?>">Email</a>
                                <?php endif; ?>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($about_content['values_list'])): ?>
<section class="values-section section section-surface" aria-labelledby="valuesTitle">
    <div class="site-container values-grid">
        <div class="section-copy">
            <span class="section-eyebrow">Our Values</span>
            <h2 id="valuesTitle">The Principles Guiding Our Pharmaceutical Journey</h2>
            <p>Our identity is defined by care, quality, compliance and responsible growth.</p>

            <div class="values-list">
                <?php foreach ($about_content['values_list'] as $val): ?>
                    <article class="value-card card card-pad card-hover">
                        <span class="feature-icon" aria-hidden="true"></span>
                        <div>
                            <h3><?= htmlspecialchars($val['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                            <p><?= htmlspecialchars($val['desc'], ENT_QUOTES, 'UTF-8') ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="values-visual">
            <img src="<?= $base_url ?>/assets/images/main/about/abts2.webp" width="720" height="560" alt="Sanjar Pharma values and quality culture" loading="lazy" decoding="async">
            <div class="testimonial-overlay">
                <p>Our identity is defined by "CARE IS GROWTH."</p>
                <strong>Executive Team</strong>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($about_content['partners_logos'])): ?>
<section class="partners-section section-sm" aria-labelledby="partnersTitle">
    <div class="site-container">
        <div class="section-head">
            <div>
                <span class="section-eyebrow">Partners</span>
                <h2 id="partnersTitle" class="section-title">Our Trusted Partners</h2>
            </div>
        </div>

        <div class="marquee partners-marquee">
            <div class="marquee-track duration-slow">
                <?php foreach ($about_content['partners_logos'] as $group): ?>
                    <?php foreach ($group as $logo_path): ?>
                        <div class="partner-logo-card">
                            <img src="<?= $base_url . htmlspecialchars($logo_path, ENT_QUOTES, 'UTF-8') ?>" width="180" height="90" alt="Partner logo" loading="lazy" decoding="async">
                        </div>
                    <?php endforeach; ?>
                <?php endforeach; ?>
                <?php foreach ($about_content['partners_logos'] as $group): ?>
                    <?php foreach ($group as $logo_path): ?>
                        <div class="partner-logo-card" aria-hidden="true">
                            <img src="<?= $base_url . htmlspecialchars($logo_path, ENT_QUOTES, 'UTF-8') ?>" width="180" height="90" alt="" loading="lazy" decoding="async">
                        </div>
                    <?php endforeach; ?>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($about_content['why_choose_us'])): ?>
<section class="about-wcu-section section section-surface" aria-labelledby="aboutWcuTitle">
    <div class="site-container about-wcu-grid">
        <div class="section-copy">
            <span class="section-eyebrow">Why Choose Us</span>
            <h2 id="aboutWcuTitle"><?= htmlspecialchars($about_content['why_choose_us']['title'], ENT_QUOTES, 'UTF-8') ?></h2>
            <p><?= htmlspecialchars($about_content['why_choose_us']['body'], ENT_QUOTES, 'UTF-8') ?></p>

            <div class="wcu-list">
                <?php foreach ($about_content['why_choose_us']['wld'] as $wlead): ?>
                    <article class="value-card card card-pad card-hover">
                        <span class="feature-icon" aria-hidden="true"></span>
                        <div>
                            <h3><?= htmlspecialchars($wlead['title'], ENT_QUOTES, 'UTF-8') ?></h3>
                            <p><?= htmlspecialchars($wlead['desc'], ENT_QUOTES, 'UTF-8') ?></p>
                        </div>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="wcu-visual">
            <img src="<?= $base_url . htmlspecialchars($about_content['why_choose_us']['image'], ENT_QUOTES, 'UTF-8') ?>" width="640" height="760" alt="Sanjar Pharma team and manufacturing excellence" loading="lazy" decoding="async">
        </div>
    </div>
</section>
<?php endif; ?>

<style>
.about-hero{position:relative;min-height:clamp(500px,68vh,740px);display:grid;align-items:center;overflow:hidden;isolation:isolate;background-position:center}
.about-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,var(--body-bg) 0%,var(--overlay-soft) 36%,transparent 78%)}
.about-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);align-items:center;min-height:inherit;padding-block:clamp(4rem,8vw,7rem)}
.about-hero-content{max-width:720px}
.about-hero h1{margin:1rem 0}
.about-hero h1 span{color:var(--primary)}
.about-hero p{max-width:62ch}
.about-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.about-cert-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.75rem,3vw,3rem)}
.about-cert{display:inline-flex;align-items:center;gap:.55rem;min-height:58px;padding:.45rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px)}
.about-cert img{width:42px;height:42px;object-fit:contain}
.about-cert span{font-size:.85rem;font-weight:700;color:var(--heading)}

.about-story-grid,.vm-grid,.values-grid,.about-wcu-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.brand-dash{width:60px;height:3px;margin:1rem 0 1.5rem;border-radius:999px;background:var(--primary)}
.signature-box{margin-top:1.5rem}
.signature-box img{width:150px;height:auto;object-fit:contain;filter:grayscale(100%)}
[data-theme="dark"] .signature-box img{filter:invert(1) grayscale(100%)}
.signature-box h3{margin:0;font-size:1rem}
.signature-box p{margin:0;color:var(--muted)}
.story-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.story-stat-card{text-align:center}
.story-stat-card strong{display:block;font-size:clamp(2rem,3vw,3.5rem);line-height:1;color:var(--primary)}
.story-stat-card h3{margin:.55rem 0 .25rem;font-size:1rem}
.story-stat-card p{margin:0;color:var(--muted)}

.timeline-head-right{display:flex;align-items:center;gap:1rem}
.section-side-note{max-width:320px;margin:0;color:var(--muted)}
.timeline-controls,.team-controls{display:flex;gap:.5rem}
.control-btn{width:45px;height:45px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;color:var(--heading);background:var(--surface);box-shadow:var(--shadow-sm)}
.control-btn:hover{color:#111315;background:var(--primary);border-color:var(--primary)}
.control-btn svg{width:1rem;height:1rem;fill:currentColor}
.timeline-slider-wrapper{position:relative;padding:30px 0}
.timeline-connecting-line{position:absolute;top:60px;left:0;width:100%;height:2px;background:var(--border);z-index:0}
.timeline-track{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:1rem;overflow-x:auto;scroll-snap-type:inline mandatory;scroll-behavior:smooth;padding-bottom:1rem}
.milestone-node{scroll-snap-align:start;text-align:center}
.node-interactive-zone{width:100%;display:grid;justify-items:center;gap:.8rem;border:0;color:inherit;background:transparent;text-align:center}
.node-circle{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:50%;color:var(--muted);background:var(--surface);font-size:14px;font-weight:700;letter-spacing:-.5px;transition:var(--transition-normal)}
.milestone-node.active .node-circle,.milestone-node:hover .node-circle{color:#111315;background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 18%,transparent)}
.node-content strong{display:block;margin-bottom:.35rem;color:var(--primary);font-size:.9rem}
.node-content small{display:-webkit-box;max-width:220px;margin-inline:auto;overflow:hidden;color:var(--muted);font-size:.82rem;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.timeline-popup{max-width:950px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:1.5rem;align-items:center;margin:1.5rem auto 0;padding:1.25rem;opacity:1;transition:opacity var(--transition-fast)}
.timeline-popup-img{height:160px;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-2)}
.timeline-popup-img img{width:100%;height:100%;object-fit:cover}
.popup-year-row{display:flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:700;font-size:.85rem}
.timeline-popup h3{margin:.5rem 0;font-size:clamp(1.1rem,1vw,1.5rem)}
.timeline-popup p{margin:0;font-size:.92rem}

.vm-visual img,.values-visual img,.wcu-visual img{width:100%;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.vm-visual img,.values-visual img{aspect-ratio:4/3}
.wcu-visual img{aspect-ratio:3/3}
.vm-card-list,.values-list,.wcu-list{display:grid;gap:1rem;margin-top:1.5rem}

.team-carousel-grid{display:grid;grid-template-columns:minmax(280px,.38fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2rem);align-items:stretch}
.team-heading-card{position:relative;min-height:400px;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.25rem,3vw,2.5rem)}
.team-heading-card h2{margin-bottom:.75rem}
.team-heading-card p{margin-bottom:1.5rem}
.team-carousel-window{overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:inline mandatory}
.team-carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 1rem)/2);gap:1rem;min-height:100%}
.team-card{scroll-snap-align:start;overflow:hidden}
.team-img-wrap{position:relative;margin:.65rem;overflow:hidden;border-radius:var(--radius-sm)}
.team-img-wrap img{width:100%;height:240px;object-fit:cover}
.social-pill{position:absolute;right:.75rem;bottom:.75rem;padding:.45rem .9rem;border-radius:999px;color:var(--heading);background:var(--surface);font-size:.78rem;font-weight:700;text-decoration:none}
.team-body{padding:.35rem 1rem 1rem}
.member-name-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}
.member-name-row h3{margin:0;font-size:1rem}
.brand-dots{display:flex;gap:.35rem}
.brand-dots span{width:30px;height:2px;border-radius:999px;background:var(--primary)}
.team-body strong{display:block;margin-bottom:.75rem;color:var(--primary);font-size:.85rem}
.team-body p{margin:0;font-size:.9rem}
.team-footer{display:flex;gap:.5rem;padding:.85rem 1rem 1rem;border-top:1px solid var(--border)}
.team-footer a{padding:.4rem .75rem;border:1px solid var(--border);border-radius:999px;color:var(--heading);font-size:.78rem;font-weight:700;text-decoration:none}
.team-footer a:hover{color:#fff;background:var(--primary);border-color:var(--primary)}

.value-card{display:flex;align-items:flex-start;gap:1rem}
.feature-icon{width:42px;height:42px;flex:0 0 auto;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--primary) 22%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border))}
.value-card h3{margin-bottom:.4rem;font-size:1rem}
.value-card p{margin:0;font-size:.92rem}
.values-visual{position:relative}
.testimonial-overlay{position:absolute;left:-1rem;bottom:2rem;max-width:350px;padding:1rem 1.25rem;border-left:5px solid var(--primary);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-md)}
.testimonial-overlay p{margin-bottom:.4rem;font-size:.9rem}
.testimonial-overlay strong{color:var(--heading)}
.partner-logo-card{display:inline-flex;width:190px;height:104px;align-items:center;justify-content:center;padding:1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.partner-logo-card img{max-width:150px;max-height:74px;object-fit:contain;filter:grayscale(100%);opacity:.82}
.partner-logo-card:hover img{filter:grayscale(0);opacity:1}

@media (max-width:991px){
  .about-hero{min-height:680px;align-items:start}
  .about-hero::after{background:linear-gradient(180deg,var(--body-bg) 0%,var(--overlay-soft) 48%,transparent 100%)}
  .about-hero-inner,.about-story-grid,.vm-grid,.values-grid,.about-wcu-grid,.team-carousel-grid{grid-template-columns:1fr}
  .about-hero-inner{align-items:start;padding-block:4rem 2rem}
  .timeline-head-right{align-items:flex-start;flex-direction:column}
  .team-heading-card{min-height:auto}
  .team-carousel-track{grid-auto-columns:minmax(280px,70vw)}
}
@media (max-width:575px){
  .about-hero{min-height:660px}
  .about-hero-actions{flex-direction:column;align-items:flex-start}
  .about-cert-row,.story-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .timeline-track{grid-auto-columns:minmax(230px,78vw)}
  .timeline-popup{grid-template-columns:1fr}
  .timeline-popup-img{height:190px}
  .team-carousel-track{grid-auto-columns:minmax(260px,82vw)}
  .testimonial-overlay{position:static;margin-top:1rem}
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const counters = document.querySelectorAll("[data-counter]");

    if (counters.length) {
        const runCounter = counter => {
            if (counter.dataset.counted === "true") return;
            counter.dataset.counted = "true";

            const target = Number(counter.dataset.counter || 0);
            const duration = 1200;
            const startTime = performance.now();

            const update = currentTime => {
                const progress = Math.min((currentTime - startTime) / duration, 1);
                const eased = 1 - Math.pow(1 - progress, 3);
                const value = Math.floor(eased * target);

                counter.textContent = value.toLocaleString("en-IN");

                if (progress < 1) {
                    requestAnimationFrame(update);
                } else {
                    counter.textContent = target.toLocaleString("en-IN");
                }
            };

            requestAnimationFrame(update);
        };

        if (!("IntersectionObserver" in window)) {
            counters.forEach(runCounter);
        } else {
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (!entry.isIntersecting) return;
                    runCounter(entry.target);
                    observer.unobserve(entry.target);
                });
            }, { threshold: 0.35 });

            counters.forEach(counter => observer.observe(counter));
        }
    }

    const timelineDataEl = document.getElementById("timelineData");
    const timelineTrack = document.getElementById("timelineTrack");
    const popupFrame = document.getElementById("timeline-popup-box");
    const pImg = document.getElementById("pop-img");
    const pYear = document.getElementById("pop-year");
    const pTitle = document.getElementById("pop-title");
    const pDesc = document.getElementById("pop-desc");
    const nodes = document.querySelectorAll(".milestone-node");
    const timePrev = document.getElementById("timePrev");
    const timeNext = document.getElementById("timeNext");

    let currentIndex = 0;
    let timelineData = [];

    if (timelineDataEl) {
        try {
            timelineData = JSON.parse(timelineDataEl.textContent || "[]");
        } catch (error) {
            timelineData = [];
        }
    }

    const syncTimelineState = index => {
        if (!timelineData.length || index < 0 || index >= timelineData.length) return;

        currentIndex = index;

        nodes.forEach((node, idx) => {
            node.classList.toggle("active", idx === currentIndex);
        });

        const item = timelineData[currentIndex];

        if (!popupFrame || !pImg || !pYear || !pTitle || !pDesc) return;

        popupFrame.style.opacity = "0.35";

        window.setTimeout(() => {
            pImg.src = "<?= $base_url ?>" + item.image;
            pYear.textContent = item.year;
            pTitle.textContent = item.title;
            pDesc.textContent = item.desc;
            popupFrame.style.opacity = "1";
        }, 100);

        const activeNode = nodes[currentIndex];

        if (activeNode && timelineTrack) {
            activeNode.scrollIntoView({
                behavior: "smooth",
                inline: "center",
                block: "nearest"
            });
        }
    };

    nodes.forEach((node, idx) => {
        const zone = node.querySelector(".node-interactive-zone");
        if (!zone) return;

        zone.addEventListener("mouseenter", () => syncTimelineState(idx));
        zone.addEventListener("focus", () => syncTimelineState(idx));
        zone.addEventListener("click", () => syncTimelineState(idx));
    });

    if (timeNext) {
        timeNext.addEventListener("click", () => {
            if (currentIndex < timelineData.length - 1) syncTimelineState(currentIndex + 1);
        });
    }

    if (timePrev) {
        timePrev.addEventListener("click", () => {
            if (currentIndex > 0) syncTimelineState(currentIndex - 1);
        });
    }

    if (timelineData.length) syncTimelineState(0);

    const teamWindow = document.getElementById("teamCarouselWindow");
    const teamPrev = document.getElementById("teamPrev");
    const teamNext = document.getElementById("teamNext");

    const scrollTeam = direction => {
        if (!teamWindow) return;

        teamWindow.scrollBy({
            left: direction * teamWindow.clientWidth * 0.85,
            behavior: "smooth"
        });
    };

    if (teamPrev) teamPrev.addEventListener("click", () => scrollTeam(-1));
    if (teamNext) teamNext.addEventListener("click", () => scrollTeam(1));
});
</script>