---
// Standalone Redesigned Homepage for Nhi Vo
// Composed from modular about-specific components and testimonials.
import { siteConfig } from '@/config';
import AboutLayout from '../layouts/about/AboutLayout.astro';
import AboutHeader from '../components/about/AboutHeader.astro';
import AboutLogoBar from '../components/about/AboutLogoBar.astro';
import AboutGallery from '../components/about/AboutGallery.astro';
import AboutLightbox from '../components/about/AboutLightbox.astro';
import AboutFooter from '../components/about/AboutFooter.astro';
import LensesSection from '../components/about/LensesSection.astro';
import { brandLogos, academicLogos } from '../data/about/logos';
import { translations } from '../data/about/translations';
import { speakingData } from '../data/about/speaking';
import { certificationsData } from '../data/about/certifications';
import { galleryItems } from '../data/about/gallery';
import { experienceData } from '../data/about/experience';
import { testimonialsData } from '../data/about/testimonials';

// Structured data for the website
const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'Blog',
  name: siteConfig.title,
  description: siteConfig.description,
  url: siteConfig.site,
  author: {
    '@type': 'Person',
    name: siteConfig.author
  },
  publisher: {
    '@type': 'Organization',
    name: siteConfig.title,
    url: siteConfig.site
  }
};
---

<AboutLayout>

    <!-- Structured Data -->
    <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

    <AboutHeader />

    <!-- MAIN PUBLICATION CONTAINER -->
    <main class="max-w-7xl mx-auto px-6 py-12 md:py-20">

        <!-- CHAPTER 1: WHY DO I CARE? (PURPOSE / HERO) -->
        <section id="story" class="mb-24 md:mb-32 scroll-mt-28">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
                <div class="md:col-span-12">

                    <!-- Consolidated Hero Layout (Mobile absolute background + Desktop grid side column) -->
                    <div class="relative grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 items-center min-h-max overflow-hidden sm:overflow-visible">
                        <!-- Mobile Watermark Image (hidden on desktop/tablet) -->
                        <div class="sm:hidden absolute -right-16 -top-8 w-[125%] max-w-[440px] select-none pointer-events-none z-0 opacity-15">
                            <img src="/nhi-nhi-vo-profile-3-modified.webp" alt="Nhi Võ" class="w-full h-auto object-contain translate-x-2 translate-y-2 mix-blend-multiply">
                        </div>

                        <!-- Consolidated Text Content -->
                        <div class="lg:col-span-7 space-y-6 pt-2 sm:pt-0 relative z-10">
                            <!-- Eyebrow -->
                            <p class="text-xs sm:text-sm font-bold tracking-[0.25em] uppercase text-terracotta mb-2.5 sm:mb-4 leading-relaxed sm:leading-none animate-fade-in" data-i18n="hero-eyebrow">
                                A Consultant. A Partner. A Story Teller.
                            </p>

                            <!-- Main Title -->
                            <h1 class="font-serif text-3xl sm:text-4xl lg:text-6xl text-ink font-bold tracking-tight leading-snug sm:leading-[1.2]" data-i18n="hero-title">
                                Xin chào,<br>mình là<br>Nhi Võ
                            </h1>

                            <!-- Subtitle (Responsive translation target) -->
                            <p class="text-xs sm:text-sm font-bold tracking-widest uppercase text-ink-secondary leading-normal sm:leading-none sm:mt-4" data-i18n="hero-subtitle">
                                MÌNH Ở ĐÂY ĐỂ KỂ CÂU CHUYỆN <span class="text-terracotta font-semibold">"MADE BY VIETNAM"</span>.
                            </p>

                            <!-- Divider line on mobile only -->
                            <div class="w-12 h-px bg-border-light sm:hidden"></div>

                            <!-- Bio Quote Paragraphs (Unified container) -->
                            <div class="text-sm sm:text-base lg:text-lg text-ink/90 space-y-4 sm:space-y-5 font-normal pt-0 sm:pt-4" id="hero-quote-content">
                                {translations.vi.heroQuote.split('\n\n').map(p => (
                                    <p class="leading-relaxed" set:html={p.trim().replace(/\n/g, '<br>')}></p>
                                ))}
                            </div>

                            <!-- Signature -->
                            <div class="pt-1.5 sm:pt-2 text-left">
                                <span class="font-signature text-2xl sm:text-3xl text-terracotta select-none">Nhi Võ</span>
                            </div>
                        </div>

                        <!-- Desktop Side Column Image (hidden on mobile) -->
                        <div class="hidden sm:flex lg:col-span-5 justify-end relative z-0 select-none pointer-events-auto opacity-20 blur-[0.5px] transition-all duration-700 ease-out hover:opacity-90 hover:blur-none hover:scale-[1.03]">
                            <div class="relative w-full max-w-[420px]">
                                <div class="absolute -inset-4 bg-gradient-to-tr from-terracotta/15 to-transparent rounded-full blur-3xl -z-10"></div>
                                <img src="/nhi-nhi-vo-profile-3-modified.webp" alt="Nhi Võ — Strategic Marketing & Brand Leader" class="w-full h-auto object-contain rounded-2xl scale-[2.0] origin-right transition-transform duration-300 mix-blend-multiply">
                            </div>
                        </div>
                    </div>

                    <!-- Bottom 4 Core Metrics Card -->
                    <div class="mt-20 border border-border-light rounded-2xl p-6 sm:p-8 bg-paper-alt/25 backdrop-blur-sm grid grid-cols-2 lg:grid-cols-4 gap-y-8 gap-x-4 lg:gap-0 lg:divide-x lg:divide-border-light">
                        <div class="flex flex-col items-center text-center py-2">
                            <svg class="w-8 h-8 text-terracotta mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3.75-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /></svg>
                            <span class="font-serif text-xl sm:text-2xl font-bold text-ink" data-i18n="metric-1-num">9+ NĂM</span>
                            <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-ink-secondary mt-2 max-w-[150px] leading-snug" data-i18n="metric-1-label">KINH NGHIỆM HOSPITALITY</span>
                        </div>
                        <div class="flex flex-col items-center text-center py-2">
                            <svg class="w-8 h-8 text-terracotta mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
                            <span class="font-serif text-xl sm:text-2xl font-bold text-ink" data-i18n="metric-2-num">5+ NĂM</span>
                            <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-ink-secondary mt-2 max-w-[150px] leading-snug" data-i18n="metric-2-label">KINH NGHIỆM QUẢN LÝ</span>
                        </div>
                        <div class="flex flex-col items-center text-center py-2">
                            <svg class="w-8 h-8 text-terracotta mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.281m5.94 2.28l-2.28 5.941" /></svg>
                            <span class="font-serif text-xl sm:text-2xl font-bold text-ink" data-i18n="metric-3-num">15 TỶ+ VND</span>
                            <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-ink-secondary mt-2 max-w-[150px] leading-snug" data-i18n="metric-3-label">QUY MÔ NGÂN SÁCH SỰ KIỆN</span>
                        </div>
                        <div class="flex flex-col items-center text-center py-2">
                            <svg class="w-8 h-8 text-terracotta mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-.778.099-1.533.284-2.253" /></svg>
                            <span class="font-serif text-xl sm:text-2xl font-bold text-ink" data-i18n="metric-4-num">TẦM NHÌN TOÀN CẦU</span>
                            <span class="text-[10px] sm:text-xs font-bold tracking-widest uppercase text-ink-secondary mt-2 max-w-[150px] leading-snug" data-i18n="metric-4-label">TÁC ĐỘNG ĐỊA PHƯƠNG</span>
                        </div>
                    </div>

                    <!-- Brand Trust Bar -->
                    <div class="mt-16 pt-10 space-y-8">
                        <div class="flex items-center space-x-4">
                            <div class="h-[1px] bg-border-light/80 flex-grow"></div>
                            <h3 class="font-serif text-xs font-bold tracking-[0.25em] uppercase text-terracotta text-center shrink-0 select-none" data-i18n="brands-title">Đối tác & Thương hiệu</h3>
                            <div class="h-[1px] bg-border-light/80 flex-grow"></div>
                        </div>
                        <AboutLogoBar
                            logos={brandLogos}
                            desktopImgClass="brightness-0 opacity-40 hover:opacity-85"
                            mobileImgClass="brightness-0 opacity-45"
                        />
                    </div>

                </div>
            </div>
        </section>


        <!-- CHAPTER 2: HOW DO I APPROACH PROBLEMS? (CAPABILITIES / 4 LENSES) -->
        <LensesSection />


        <!-- CHAPTER 3: MY SELECTED JOURNEY (EVIDENCE / EXPERIENCE) -->
        <section id="journey" class="mb-24 md:mb-32 scroll-mt-28">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
                <div class="md:col-span-12 space-y-8">
                    <h2 class="font-serif text-3xl md:text-4xl text-ink font-bold tracking-tight" data-i18n="journey-title">
                        Hành Trình Sự Nghiệp
                    </h2>
                    <!-- Vertical Timeline populated dynamically via Javascript -->
                    <div class="relative border-l border-border-light ml-3 md:ml-6 pl-6 md:pl-10 space-y-10 pt-4" id="experience-timeline">
                        {experienceData.vi.map((exp, idx) => (
                            <div class="relative timeline-item py-6 md:py-8 pl-2 transition-all duration-300 hover:translate-x-1 cursor-pointer group" onclick={`toggleTimelineItem(${idx})`} role="button" tabindex="0" aria-expanded="false" id={`timeline-trigger-${idx}`} onkeydown={`if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleTimelineItem(${idx});}`}>
                                <div class="absolute -left-8 md:-left-12 top-8 md:top-10 w-4 h-4 rounded-full bg-paper border-2 border-terracotta group-hover:bg-terracotta group-hover:border-terracotta transition-all duration-300" id={`node-${idx}`}></div>
                                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
                                    <div>
                                        <h3 class="font-serif text-xl md:text-2xl font-bold text-ink group-hover:text-terracotta transition-colors leading-tight">{exp.role}</h3>
                                        <div class="text-sm sm:text-base text-terracotta font-semibold mt-1.5">{exp.company}</div>
                                    </div>
                                    <span class="text-xs font-semibold uppercase tracking-widest text-ink-secondary bg-paper-alt px-3 py-1 rounded-full w-fit mt-1 sm:mt-0">{exp.duration}</span>
                                </div>
                                <div class="space-y-4">
                                    <p class="text-sm sm:text-base text-ink-secondary leading-relaxed">{exp.summary}</p>
                                    <div class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-terracotta group-hover:text-ink transition-colors mt-3 select-none">
                                        <span class="material-symbols-outlined text-[16px] inline-block transition-transform duration-300" id={`icon-${idx}`}>add</span>
                                        <span id={`hint-${idx}`}>Nhấn để xem chi tiết</span>
                                    </div>
                                    <div id={`details-${idx}`} class="hidden mt-6 pl-5 border-l-2 border-border-light space-y-4 text-sm text-ink-secondary leading-relaxed font-normal">
                                        {exp.details.map(bullet => (
                                            <p class="flex items-start">
                                                <span class="w-1.5 h-1.5 bg-terracotta mt-[7px] shrink-0 select-none mr-2.5" aria-hidden="true"></span>
                                                <span set:html={bullet}></span>
                                            </p>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>


        <!-- CHAPTER 4 & 5: ACADEMIC & COMMUNITY ENGAGEMENTS -->
        <section id="impact" class="mb-24 md:mb-32 scroll-mt-28 border-t border-border-light pt-16 md:pt-20">
            <!-- Header Grid: Title Left, Description Right -->
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-12 items-end px-6 max-w-7xl mx-auto">
                <div class="md:col-span-8 space-y-3">
                    <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink font-bold leading-tight" data-i18n="academic-title">
                        Hoạt Động Học Thuật & Đóng Góp Phi Lợi Nhuận
                    </h2>
                </div>
                <div class="md:col-span-4">
                    <p class="text-sm sm:text-base text-ink-secondary leading-relaxed font-light" data-i18n="academic-desc">
                        Kết hợp tri thức học thuật với các dự án cộng đồng nhằm thúc đẩy những tác động địa phương bền vững.
                    </p>
                </div>
            </div>

            <!-- Academic Affiliations Logos -->
            <div class="max-w-7xl mx-auto px-6 mb-16">
                <AboutLogoBar
                    logos={academicLogos}
                    desktopContainerClass="hidden md:flex w-full items-center justify-between gap-6 py-6 border-b border-border-light/60 flex-wrap lg:flex-nowrap"
                    mobileContainerClass="md:hidden w-full overflow-hidden py-4 border-b border-border-light/60 relative"
                    desktopImgClass="grayscale opacity-40 hover:grayscale-0 hover:opacity-90"
                    mobileImgClass="grayscale opacity-60"
                />
            </div>

            <!-- Details Grid: 2-Column Split -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-start px-6 max-w-7xl mx-auto">

                <!-- Column 1: Chapter 4 — Beyond Execution -->
                <div class="space-y-6">
                    <h3 class="font-serif text-2xl md:text-3xl text-ink font-bold tracking-tight" data-i18n="ch4-title">
                        Chia sẻ Tri thức & Tác động Cộng đồng
                    </h3>
                    <div class="text-sm sm:text-base text-ink-secondary space-y-6 pt-2" id="speaking-engagements-list">
                        {speakingData.vi.map(section => (
                            <div class="space-y-2">
                                <h5 class="font-serif font-semibold text-ink text-base mb-2">{section.title}</h5>
                                <div class="space-y-3">
                                    {section.items.map(item => (
                                        <div class="flex items-start space-x-2.5">
                                            <span class="w-1.5 h-1.5 bg-terracotta mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                                            {item.subItems ? (
                                                <div class="space-y-2 w-full">
                                                    <div>
                                                        <span class="font-serif text-ink font-semibold">{item.institution}:</span>
                                                    </div>
                                                    <div class="space-y-1.5 pl-4">
                                                        {item.subItems.map(subItem => (
                                                            <div class="flex items-start space-x-2">
                                                                <span class="w-1 h-1 bg-ink-secondary mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                                                                <div set:html={subItem}></div>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            ) : (
                                                <div>
                                                    <span class="font-serif text-ink font-semibold">{item.institution}:</span> <span set:html={item.description}></span>
                                                </div>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <!-- Column 2: Chapter 5 — Continuous Learning -->
                <div id="learning" class="space-y-6 scroll-mt-28">
                    <h3 class="font-serif text-2xl md:text-3xl text-ink font-bold tracking-tight" data-i18n="ch5-title">
                        Học tập không ngừng.
                    </h3>
                    <div class="text-sm sm:text-base text-ink-secondary space-y-6 pt-2">
                        <!-- Education -->
                        <div class="space-y-2 pb-6 mb-6 border-b border-border-light/40">
                            <span class="text-xs font-bold uppercase tracking-widest text-terracotta block mb-1">2014 – 2019</span>
                            <h4 class="font-serif font-semibold text-ink text-lg" data-i18n="edu-title">Đại học Quốc tế (ĐHQG TP.HCM - IU)</h4>
                            <p class="text-sm sm:text-base mt-1 text-ink-secondary leading-relaxed" data-i18n="edu-desc">Cử nhân Quản trị Kinh doanh (BBA) — Chuyên ngành Quản trị Khách sạn.</p>
                        </div>
                        <!-- Certifications -->
                        <div class="space-y-4 pt-2">
                            <h4 class="font-serif text-lg font-semibold text-ink pb-2" data-i18n="cert-subtitle">Chứng chỉ & Đào tạo</h4>
                            <div class="space-y-4" id="certifications-list">
                                {certificationsData.vi.map(section => (
                                    <div class="space-y-2">
                                        <h5 class="font-serif font-semibold text-ink text-base mb-2">{section.category}</h5>
                                        <div class="space-y-3">
                                            {section.items.map(item => (
                                                <div class="flex items-start space-x-2.5">
                                                    <span class="w-1.5 h-1.5 bg-terracotta mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                                                    <div>
                                                        <span class="font-serif text-ink font-semibold">{item.title}</span> {item.description}
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>


        <!-- EVENT GALLERY SECTION -->
        <AboutGallery />


        <!-- SECTION B: CHAPTER 6 & EDITORIAL QUOTE BLOCK -->
        <section id="values" class="mb-24 md:mb-32 scroll-mt-28 border-t border-border-light pt-16 md:pt-20">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">

                <!-- Left: Chapter 6 — My Core Value -->
                <div class="md:col-span-6 space-y-6">
                    <h2 class="font-serif text-3xl md:text-4xl text-ink font-bold tracking-tight" data-i18n="ch6-title">
                        Giá trị Cốt lõi
                    </h2>
                    <p class="text-sm text-ink-secondary" data-i18n="ch6-desc">
                        Những nguyên tắc cá nhân bền vững, định hướng mọi chiến lược mình xây dựng và mọi mối quan hệ mình vun đắp:
                    </p>
                    <div class="space-y-4 pt-2" id="values-list">
                        {translations.vi.traits.map(trait => (
                            <div class="flex items-center space-x-3">
                                <span class="w-1.5 h-1.5 rounded-full bg-terracotta"></span>
                                <span class="font-serif text-base sm:text-lg italic text-ink font-medium">{trait}</span>
                            </div>
                        ))}
                    </div>
                </div>

                <!-- Right: Editorial Quote Block -->
                <div class="md:col-span-6 relative py-4">
                    <span class="font-serif text-8xl text-terracotta/25 absolute -top-4 -left-2 leading-none select-none">"</span>
                    <blockquote class="relative z-10 font-serif text-2xl sm:text-3xl text-ink italic leading-relaxed pl-8 text-left" data-i18n="quote-text">
                        Văn hóa Việt, được hun đúc bởi con người trên mảnh đất Việt và đắp xây bởi những thăng trầm của thời gian. Văn hóa không đứng yên, văn hóa vẫn đang tiếp biến.
                    </blockquote>
                    <div class="mt-6 pl-8 flex items-center border-t border-border-light pt-4">
                        <span class="text-xs font-bold tracking-widest uppercase text-terracotta">NHI VÕ</span>
                    </div>
                </div>

            </div>
        </section>


        <!-- CHAPTER 7: LET'S TALK (FOOTER & CONTACT) -->
        
        <!-- CHAPTER 6.5: TESTIMONIALS (THROUGH THEIR EYES) -->
        <section id="testimonials" class="mb-16 md:mb-20 border-t border-border-light/60 pt-12 md:pt-16 scroll-mt-28">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-12 items-end px-6 max-w-7xl mx-auto">
                <div class="md:col-span-8 space-y-3">
                    <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-ink font-bold leading-tight" data-i18n="testimonials-title">
                        Qua Những Góc Nhìn
                    </h2>
                </div>
                <div class="md:col-span-4">
                    <p class="text-sm sm:text-base text-ink-secondary leading-relaxed font-light italic" data-i18n="testimonials-subtitle">
                        Góc nhìn từ những người đã cùng làm việc, dẫn dắt và chứng kiến hành trình của mình trong các lĩnh vực kinh doanh, lãnh đạo, văn hóa và giáo dục.
                    </p>
                </div>
            </div>

            <!-- Slider Wrapper -->
            <div class="max-w-5xl mx-auto px-6 relative">
                <!-- Manual Navigation Chevrons (Desktop Only) -->
                <button onclick="prevTestimonial()" class="hidden md:flex absolute -left-12 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full border border-border-light/60 bg-paper/80 backdrop-blur-sm items-center justify-center text-ink hover:text-terracotta hover:border-terracotta transition-all duration-300 z-10 focus:outline-none" aria-label="Previous Testimonial">
                    <span class="material-symbols-outlined select-none">chevron_left</span>
                </button>
                <button onclick="nextTestimonial()" class="hidden md:flex absolute -right-12 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full border border-border-light/60 bg-paper/80 backdrop-blur-sm items-center justify-center text-ink hover:text-terracotta hover:border-terracotta transition-all duration-300 z-10 focus:outline-none" aria-label="Next Testimonial">
                    <span class="material-symbols-outlined select-none">chevron_right</span>
                </button>

                <!-- Centered Testimonial Card Container -->
                <div id="testimonial-card-container" class="transition-opacity duration-300 ease-in-out opacity-100">
                    <!-- Pre-render first testimonial (vi) on build for SEO -->
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 py-8 items-stretch">
                        <!-- Left Side: Referee Info -->
                        <div class="md:col-span-4 flex flex-col items-center md:items-start text-center md:text-left justify-center md:border-r border-border-light/60 md:pr-12">
                            <div class="w-16 h-16 rounded-full bg-terracotta/10 border border-terracotta/20 flex items-center justify-center text-terracotta font-serif font-bold text-xl tracking-wider uppercase select-none mb-4 md:mb-6 shadow-sm">
                                {testimonialsData[0].initials}
                            </div>
                            <h4 class="font-serif text-xl md:text-2xl font-bold text-ink leading-tight">{testimonialsData[0].author}</h4>
                            <p class="text-xs md:text-sm font-medium text-ink-secondary mt-3 whitespace-pre-line leading-relaxed">{testimonialsData[0].title.vi}</p>
                        </div>

                        <!-- Right Side: Quote Content -->
                        <div class="md:col-span-8 flex flex-col justify-center relative pl-0 md:pl-6 min-h-[300px]">
                            <span class="font-serif text-8xl md:text-9xl text-terracotta/10 absolute -top-6 md:-top-10 -left-2 select-none pointer-events-none">"</span>
                            <div class="relative z-10 text-sm sm:text-base md:text-lg text-ink/90 font-serif italic leading-relaxed space-y-4">
                                {testimonialsData[0].quote.map((p) => (
                                    p === "[...]" ? (
                                        <p class="text-center text-ink-secondary/40 font-semibold my-4 tracking-widest select-none font-sans">{p}</p>
                                    ) : (
                                        <p>{p}</p>
                                    )
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dot Indicators -->
                <div class="flex items-center justify-center space-x-2.5 mt-8" id="testimonial-dots">
                    {testimonialsData.map((_, idx) => (
                        <button onclick={`goToTestimonial(${idx})`} class={`w-2.5 h-2.5 rounded-full transition-all duration-300 focus:outline-none ${idx === 0 ? 'bg-terracotta w-6' : 'bg-border-light hover:bg-terracotta/55'}`} aria-label={`Go to testimonial ${idx + 1}`}></button>
                    ))}
                </div>
            </div>
        </section>

        <AboutFooter />

    </main>

    <!-- Full-screen Lightbox Modal -->
    <AboutLightbox />

    <!-- CLIENT-SIDE SCRIPTS: BILINGUAL TOGGLE & ACCORDIONS -->
    <script is:inline define:vars={{ translations, speakingData, certificationsData, galleryItems, experienceData, testimonialsData }}>
        // Bind gallery data dynamically to translations
        galleryItems.forEach(item => {
            translations.en[`gallery-loc-${item.id}`] = item.locEN;
            translations.vi[`gallery-loc-${item.id}`] = item.locVI;
            translations.en[`gallery-year-${item.id}`] = item.year;
            translations.vi[`gallery-year-${item.id}`] = item.year;
            translations.en[`gallery-memory-${item.id}`] = item.memoryEN;
            translations.vi[`gallery-memory-${item.id}`] = item.memoryVI;
        });

        let currentLang = 'vi';

        let currentTestimonialIndex = 0;
        let testimonialInterval = null;
        let testimonialResumeTimeout = null;
        let isTestimonialHovered = false;
        let isTestimonialPressed = false;

        function updateTestimonialAutoplay() {
            if (isTestimonialHovered || isTestimonialPressed) {
                pauseTestimonialAutoplay();
            } else {
                startTestimonialAutoplay();
            }
        }

        function renderTestimonialCard(index, lang) {
            const t = testimonialsData[index];
            const titleStr = t.title[lang] || t.title['en'];
            const quoteParagraphs = t.quote.map(p => {
                if (p === '[...]') {
                    return `<p class="text-center text-ink-secondary/40 font-semibold my-4 tracking-widest select-none font-sans">${p}</p>`;
                }
                return `<p>${p}</p>`;
            }).join('');

            return `
                <div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 py-8 items-stretch animate-fade-in">
                    <!-- Left Side: Referee Info -->
                    <div class="md:col-span-4 flex flex-col items-center md:items-start text-center md:text-left justify-center md:border-r border-border-light/60 md:pr-12">
                        <div class="w-16 h-16 rounded-full bg-terracotta/10 border border-terracotta/20 flex items-center justify-center text-terracotta font-serif font-bold text-xl tracking-wider uppercase select-none mb-4 md:mb-6 shadow-sm">
                            ${t.initials}
                        </div>
                        <h4 class="font-serif text-xl md:text-2xl font-bold text-ink leading-tight">${t.author}</h4>
                        <p class="text-xs md:text-sm font-medium text-ink-secondary mt-3 whitespace-pre-line leading-relaxed">${titleStr}</p>
                    </div>

                    <!-- Right Side: Quote Content -->
                    <div class="md:col-span-8 flex flex-col justify-center relative pl-0 md:pl-6 min-h-[300px]">
                        <span class="font-serif text-8xl md:text-9xl text-terracotta/10 absolute -top-6 md:-top-10 -left-2 select-none pointer-events-none">"</span>
                        <div class="relative z-10 text-sm sm:text-base md:text-lg text-ink/90 font-serif italic leading-relaxed space-y-4">
                            ${quoteParagraphs}
                        </div>
                    </div>
                </div>
            `;
        }

        function updateTestimonialDots(activeIndex) {
            const dotsContainer = document.getElementById('testimonial-dots');
            if (dotsContainer) {
                const dots = Array.from(dotsContainer.children);
                dots.forEach((dot, idx) => {
                    if (idx === activeIndex) {
                        dot.className = 'w-2.5 h-2.5 rounded-full transition-all duration-300 focus:outline-none bg-terracotta w-6';
                    } else {
                        dot.className = 'w-2.5 h-2.5 rounded-full transition-all duration-300 focus:outline-none bg-border-light hover:bg-terracotta/55';
                    }
                });
            }
        }

        function switchTestimonial(index) {
            const container = document.getElementById('testimonial-card-container');
            if (!container) return;
            container.classList.remove('opacity-100');
            container.classList.add('opacity-0');
            setTimeout(() => {
                currentTestimonialIndex = index;
                container.innerHTML = renderTestimonialCard(index, currentLang);
                updateTestimonialDots(index);
                container.classList.remove('opacity-0');
                container.classList.add('opacity-100');
            }, 300);
        }

        function nextTestimonial() {
            const nextIdx = (currentTestimonialIndex + 1) % testimonialsData.length;
            switchTestimonial(nextIdx);
            resetTestimonialAutoplayTimer();
        }

        function prevTestimonial() {
            const prevIdx = (currentTestimonialIndex - 1 + testimonialsData.length) % testimonialsData.length;
            switchTestimonial(prevIdx);
            resetTestimonialAutoplayTimer();
        }

        function goToTestimonial(index) {
            if (index === currentTestimonialIndex) return;
            switchTestimonial(index);
            resetTestimonialAutoplayTimer();
        }

        function startTestimonialAutoplay() {
            if (testimonialInterval) clearInterval(testimonialInterval);
            // Changed to 15 seconds for a slower, more readable cycle
            testimonialInterval = setInterval(() => {
                const nextIdx = (currentTestimonialIndex + 1) % testimonialsData.length;
                switchTestimonial(nextIdx);
            }, 15000);
        }

        function pauseTestimonialAutoplay() {
            if (testimonialInterval) {
                clearInterval(testimonialInterval);
                testimonialInterval = null;
            }
        }

        function resetTestimonialAutoplayTimer() {
            pauseTestimonialAutoplay();
            if (testimonialResumeTimeout) clearTimeout(testimonialResumeTimeout);
            testimonialResumeTimeout = setTimeout(() => {
                // Resume autoplay if not currently hovered or pressed
                if (!isTestimonialHovered && !isTestimonialPressed) {
                    startTestimonialAutoplay();
                }
            }, 15000); // 15 seconds delay after manual navigation
        }

        // Helper generators to keep HTML templates unique
        function generateSpeakingHtml(sections) {
            return `<div class="space-y-5 text-ink-secondary leading-relaxed">
                ${sections.map(section => `
                <div class="space-y-2">
                    <h5 class="font-serif font-semibold text-ink text-base mb-2">${section.title}</h5>
                    <div class="space-y-3">
                        ${section.items.map(item => `
                        <div class="flex items-start space-x-2.5">
                            <span class="w-1.5 h-1.5 bg-terracotta mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                            ${item.subItems ? `
                            <div class="space-y-2 w-full">
                                <div>
                                    <span class="font-serif text-ink font-semibold">${item.institution}:</span>
                                </div>
                                <div class="space-y-1.5 pl-4">
                                    ${item.subItems.map(subItem => `
                                    <div class="flex items-start space-x-2">
                                        <span class="w-1 h-1 bg-ink-secondary mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                                        <div>${subItem}</div>
                                    </div>
                                    `).join('')}
                                </div>
                            </div>
                            ` : `
                            <div>
                                <span class="font-serif text-ink font-semibold">${item.institution}:</span> ${item.description}
                            </div>
                            `}
                        </div>
                        `).join('')}
                    </div>
                </div>
                `).join('')}
            </div>`;
        }

        function generateCertsHtml(sections) {
            return `<div class="space-y-5 text-ink-secondary leading-relaxed">
                ${sections.map(section => `
                <div class="space-y-2">
                    <h5 class="font-serif font-semibold text-ink text-base mb-2">${section.category}</h5>
                    <div class="space-y-3">
                        ${section.items.map(item => `
                        <div class="flex items-start space-x-2.5">
                            <span class="w-1.5 h-1.5 bg-terracotta mt-[8px] shrink-0 select-none mr-1" aria-hidden="true"></span>
                            <div>
                                <span class="font-serif text-ink font-semibold">${item.title}</span> ${item.description}
                            </div>
                        </div>
                        `).join('')}
                    </div>
                </div>
                `).join('')}
            </div>`;
        }

        // Render Page Content dynamically based on selected language
        function render(lang) {
            const data = translations[lang] || translations['en'];

            // Update all [data-i18n] elements
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (data[key]) {
                    el.style.opacity = '0';
                    setTimeout(() => {
                        el.innerHTML = data[key];
                        el.style.opacity = '1';
                    }, 100);
                }
            });

            // Hero narrative loading
            const quoteContent = document.getElementById('hero-quote-content');
            const formatParagraphs = (text) => {
                return text.split('\n\n').map(p => `<p class="leading-relaxed">${p.trim().replace(/\n/g, '<br>')}</p>`).join('');
            };
            if (quoteContent) quoteContent.innerHTML = formatParagraphs(data.heroQuote);

            // Journey Timeline accordion generation
            const timelineContainer = document.getElementById('experience-timeline');
            if (timelineContainer) {
                timelineContainer.innerHTML = experienceData[lang].map((exp, idx) => `
                    <div class="relative timeline-item py-6 md:py-8 pl-2 transition-all duration-300 hover:translate-x-1 cursor-pointer group" onclick="toggleTimelineItem(${idx})" role="button" tabindex="0" aria-expanded="false" id="timeline-trigger-${idx}" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleTimelineItem(${idx});}">
                        <div class="absolute -left-8 md:-left-12 top-8 md:top-10 w-4 h-4 rounded-full bg-paper border-2 border-terracotta group-hover:bg-terracotta group-hover:border-terracotta transition-all duration-300" id="node-${idx}"></div>
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
                            <div>
                                <h3 class="font-serif text-xl md:text-2xl font-bold text-ink group-hover:text-terracotta transition-colors leading-tight">${exp.role}</h3>
                                <div class="text-sm sm:text-base text-terracotta font-semibold mt-1.5">${exp.company}</div>
                            </div>
                            <span class="text-xs font-semibold uppercase tracking-widest text-ink-secondary bg-paper-alt px-3 py-1 rounded-full w-fit mt-1 sm:mt-0">${exp.duration}</span>
                        </div>
                        <div class="space-y-4">
                            <p class="text-sm sm:text-base text-ink-secondary leading-relaxed">${exp.summary}</p>
                            <div class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-terracotta group-hover:text-ink transition-colors mt-3 select-none">
                                <span class="material-symbols-outlined text-[16px] inline-block transition-transform duration-300" id="icon-${idx}">add</span>
                                <span id="hint-${idx}">${data.expandHint}</span>
                            </div>
                            <div id="details-${idx}" class="hidden mt-6 pl-5 border-l-2 border-border-light space-y-4 text-sm text-ink-secondary leading-relaxed font-normal">
                                ${exp.details.map(bullet => `<p class="flex items-start"><span class="w-1.5 h-1.5 bg-terracotta mt-[7px] shrink-0 select-none mr-2.5" aria-hidden="true"></span><span>${bullet}</span></p>`).join('')}
                            </div>
                        </div>
                    </div>
                `).join('');
            }

            // Speaking Engagements
            const speakingList = document.getElementById('speaking-engagements-list');
            if (speakingList) speakingList.innerHTML = generateSpeakingHtml(speakingData[lang] || speakingData['en']);

            // Certifications
            const certList = document.getElementById('certifications-list');
            if (certList) certList.innerHTML = generateCertsHtml(certificationsData[lang] || certificationsData['en']);

            // Values
            const valuesList = document.getElementById('values-list');
            if (valuesList) {
                valuesList.innerHTML = data.traits.map(trait => `
                    <div class="flex items-center space-x-3">
                        <span class="w-1.5 h-1.5 rounded-full bg-terracotta"></span>
                        <span class="font-serif text-base sm:text-lg italic text-ink font-medium">${trait}</span>
                    </div>
                `).join('');
            }

            // Testimonials
            const cardContainer = document.getElementById('testimonial-card-container');
            if (cardContainer) {
                cardContainer.innerHTML = renderTestimonialCard(currentTestimonialIndex, lang);
                updateTestimonialDots(currentTestimonialIndex);
            }
        }

        // Timeline Accordion Toggle Logic
        function toggleTimelineItem(idx) {
            const details = document.getElementById(`details-${idx}`);
            const icon = document.getElementById(`icon-${idx}`);
            const node = document.getElementById(`node-${idx}`);
            const trigger = document.getElementById(`timeline-trigger-${idx}`);
            if (details) {
                const isHidden = details.classList.contains('hidden');
                if (isHidden) {
                    details.classList.remove('hidden');
                    if (icon) icon.innerHTML = 'remove';
                    if (node) { node.classList.remove('bg-paper'); node.classList.add('bg-terracotta'); }
                    if (trigger) trigger.setAttribute('aria-expanded', 'true');
                } else {
                    details.classList.add('hidden');
                    if (icon) icon.innerHTML = 'add';
                    if (node) { node.classList.add('bg-paper'); node.classList.remove('bg-terracotta'); }
                    if (trigger) trigger.setAttribute('aria-expanded', 'false');
                }
            }
        }

        // Language Switcher Logic
        function setLanguage(lang) {
            currentLang = lang;
            try {
                localStorage.setItem('preferred-lang', lang);
            } catch (e) {
                console.warn('localStorage not accessible:', e);
            }
            // Update URL dynamically to reflect the language path
            try {
                const newPath = lang === 'en' ? '/en' : '/';
                if (window.location.pathname !== newPath) {
                    window.history.pushState(null, '', newPath);
                }
            } catch (e) {
                console.error('Failed to update URL:', e);
            }
            document.getElementById('lang-en').className = lang === 'en'
                ? 'px-3 py-1 text-xs font-bold rounded-full bg-terracotta text-paper transition-all'
                : 'px-3 py-1 text-xs font-bold rounded-full text-ink-secondary hover:text-ink transition-all';
            document.getElementById('lang-vi').className = lang === 'vi'
                ? 'px-3 py-1 text-xs font-bold rounded-full bg-terracotta text-paper transition-all'
                : 'px-3 py-1 text-xs font-bold rounded-full text-ink-secondary hover:text-ink transition-all';
            render(lang);
        }

        // Tab Selection for Chapter 2 Lenses (Desktop Grid)
        function selectLens(lensIndex) {
            for (let i = 1; i <= 4; i++) {
                const tab = document.getElementById(`lens-tab-${i}`);
                const pane = document.getElementById(`lens-pane-${i}`);
                const arrow = document.getElementById(`lens-arrow-${i}`);
                if (tab && pane) {
                    if (i === lensIndex) {
                        tab.classList.add('bg-paper-alt/55', 'border-b-2', 'border-b-terracotta');
                        pane.classList.remove('hidden');
                        if (arrow) arrow.classList.add('translate-x-1', 'text-terracotta');
                    } else {
                        tab.classList.remove('bg-paper-alt/55', 'border-b-2', 'border-b-terracotta');
                        pane.classList.add('hidden');
                        if (arrow) arrow.classList.remove('translate-x-1', 'text-terracotta');
                    }
                }
            }
        }

        // Accordion Toggle for Chapter 2 Lenses
        function toggleAccordion(id) {
            const content = document.getElementById(`${id}-content`);
            const icon = document.getElementById(`${id}-icon`);
            const trigger = document.querySelector(`[onclick="toggleAccordion('${id}')"]`);
            if (content) {
                const isHidden = content.classList.contains('hidden');
                if (isHidden) {
                    content.classList.remove('hidden');
                    if (icon) icon.innerHTML = '−';
                    if (trigger) trigger.setAttribute('aria-expanded', 'true');
                } else {
                    content.classList.add('hidden');
                    if (icon) icon.innerHTML = '+';
                    if (trigger) trigger.setAttribute('aria-expanded', 'false');
                }
            }
        }

        // Mobile Menu Drawer Toggle
        const menuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        if (menuBtn && mobileMenu) {
            menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); });
        }

        // Gallery Looping Carousel Dimensions & State
        let originOffset = 0;
        let coreWidth = 0;
        let startThreshold = 0;
        let endThreshold = 0;
        let isRelocating = false;

        function updateGalleryDimensions() {
            const carousel = document.getElementById('gallery-carousel');
            if (!carousel) return;
            const cards = Array.from(carousel.children);
            if (cards.length < 10) return;

            // Prepend slice has 5 items; first real item is index 5
            const firstRealCard = cards[5];
            const firstAppendedClone = cards[cards.length - 5];

            originOffset = firstRealCard.offsetLeft - carousel.offsetLeft;
            coreWidth = firstAppendedClone.offsetLeft - firstRealCard.offsetLeft;

            startThreshold = originOffset - 24; // buffer
            endThreshold = firstAppendedClone.offsetLeft - carousel.offsetLeft - 24;
        }

        // Gallery Snap Scrolling
        function scrollGallery(direction) {
            const carousel = document.getElementById('gallery-carousel');
            if (carousel) {
                const card = carousel.firstElementChild;
                if (card) {
                    const cardWidth = card.offsetWidth + 24;
                    if (direction === 'left') {
                        carousel.scrollBy({ left: -cardWidth, behavior: 'smooth' });
                    } else {
                        carousel.scrollBy({ left: cardWidth, behavior: 'smooth' });
                    }
                    resetAutoplayTimer();
                }
            }
        }

        // Autoplay carousel logic
        let autoplayInterval = null;
        let autoplayResumeTimeout = null;

        function startAutoplay() {
            if (autoplayInterval) clearInterval(autoplayInterval);
            autoplayInterval = setInterval(() => {
                const carousel = document.getElementById('gallery-carousel');
                if (carousel) {
                    const card = carousel.firstElementChild;
                    if (card) {
                        const cardWidth = card.offsetWidth + 24;
                        carousel.scrollBy({ left: cardWidth, behavior: 'smooth' });
                    }
                }
            }, 4000);
        }

        function resetAutoplayTimer() {
            if (autoplayInterval) { clearInterval(autoplayInterval); autoplayInterval = null; }
            if (autoplayResumeTimeout) clearTimeout(autoplayResumeTimeout);
            autoplayResumeTimeout = setTimeout(() => { startAutoplay(); }, 6000);
        }

        // Lightbox Modal Logic
        const galleryImagesList = Array.from({ length: galleryItems.length }).map((_, i) => `/images/gallery/gallery-${i+1}.webp`);
        let currentLightboxIndex = 0;

        function openLightbox(index) {
            if (autoplayInterval) { clearInterval(autoplayInterval); autoplayInterval = null; }
            currentLightboxIndex = index;
            const modal = document.getElementById('lightbox-modal');
            const img = document.getElementById('lightbox-image');
            const idxLabel = document.getElementById('lightbox-current-idx');
            if (modal && img) {
                img.src = galleryImagesList[index];
                idxLabel.innerText = index + 1;
                modal.classList.remove('hidden');
                void modal.offsetWidth;
                modal.classList.remove('opacity-0');
                img.classList.remove('scale-95');
                img.classList.add('scale-100');
            }
        }

        function closeLightbox() {
            const modal = document.getElementById('lightbox-modal');
            const img = document.getElementById('lightbox-image');
            if (modal && img) {
                modal.classList.add('opacity-0');
                img.classList.remove('scale-100');
                img.classList.add('scale-95');
                setTimeout(() => { modal.classList.add('hidden'); startAutoplay(); }, 300);
            }
        }

        function prevLightboxImage() {
            currentLightboxIndex = (currentLightboxIndex - 1 + galleryImagesList.length) % galleryImagesList.length;
            const img = document.getElementById('lightbox-image');
            const idxLabel = document.getElementById('lightbox-current-idx');
            if (img && idxLabel) { img.src = galleryImagesList[currentLightboxIndex]; idxLabel.innerText = currentLightboxIndex + 1; }
        }

        window.prevTestimonial = prevTestimonial;
        window.nextTestimonial = nextTestimonial;
        window.goToTestimonial = goToTestimonial;
        window.toggleTimelineItem = toggleTimelineItem;
        window.setLanguage = setLanguage;
        window.selectLens = selectLens;
        window.toggleAccordion = toggleAccordion;
        window.scrollGallery = scrollGallery;
        window.openLightbox = openLightbox;
        window.closeLightbox = closeLightbox;
        window.prevLightboxImage = prevLightboxImage;
        window.nextLightboxImage = () => {
            currentLightboxIndex = (currentLightboxIndex + 1) % galleryImagesList.length;
            const img = document.getElementById('lightbox-image');
            const idxLabel = document.getElementById('lightbox-current-idx');
            if (img && idxLabel) { img.src = galleryImagesList[currentLightboxIndex]; idxLabel.innerText = currentLightboxIndex + 1; }
        };

        // Initial setup
        document.addEventListener('DOMContentLoaded', () => {
            const params = new URLSearchParams(window.location.search);
            const langParam = params.get('lang');
            let initialLang = 'vi';
            
            // Check if URL pathname starts with /en
            if (window.location.pathname.startsWith('/en')) {
                initialLang = 'en';
            } else {
                try {
                    const storedLang = localStorage.getItem('preferred-lang');
                    if (storedLang === 'en' || storedLang === 'vi') {
                        initialLang = storedLang;
                    }
                } catch (e) {}
                if (langParam === 'en' || langParam === 'vi') {
                    initialLang = langParam;
                }
            }
            
            try { setLanguage(initialLang); } catch(e) { console.error('setLanguage() failed:', e); }
            try { selectLens(1); } catch(e) { console.error('selectLens() failed:', e); }
            
            const carousel = document.getElementById('gallery-carousel');
            if (carousel) {
                // Initialize infinite scroll parameters
                updateGalleryDimensions();
                
                // Immediately scroll to the first real card without animation
                carousel.scrollLeft = originOffset;
                
                // Reactive scroll listener to wrap boundaries seamlessly
                carousel.addEventListener('scroll', () => {
                    if (isRelocating) return;
                    
                    const currentScroll = carousel.scrollLeft;
                    if (currentScroll < startThreshold) {
                        isRelocating = true;
                        carousel.scrollLeft += coreWidth;
                        requestAnimationFrame(() => { isRelocating = false; });
                    } else if (currentScroll >= endThreshold) {
                        isRelocating = true;
                        carousel.scrollLeft -= coreWidth;
                        requestAnimationFrame(() => { isRelocating = false; });
                    }
                });

                carousel.addEventListener('touchstart', resetAutoplayTimer, { passive: true });
                carousel.addEventListener('mousedown', resetAutoplayTimer);
            }
            // Initialize testimonials autoplay and hover pause
            const testimonialCardWrapper = document.getElementById('testimonial-card-container');
            if (testimonialCardWrapper) {
                testimonialCardWrapper.addEventListener('mouseenter', () => {
                    isTestimonialHovered = true;
                    updateTestimonialAutoplay();
                });
                testimonialCardWrapper.addEventListener('mouseleave', () => {
                    isTestimonialHovered = false;
                    updateTestimonialAutoplay();
                });

                // Press and Hold (Mouse)
                testimonialCardWrapper.addEventListener('mousedown', () => {
                    isTestimonialPressed = true;
                    updateTestimonialAutoplay();
                    if (testimonialResumeTimeout) clearTimeout(testimonialResumeTimeout);
                });
                window.addEventListener('mouseup', () => {
                    if (isTestimonialPressed) {
                        isTestimonialPressed = false;
                        updateTestimonialAutoplay();
                    }
                });

                // Press and Hold (Touch)
                testimonialCardWrapper.addEventListener('touchstart', () => {
                    isTestimonialPressed = true;
                    updateTestimonialAutoplay();
                    if (testimonialResumeTimeout) clearTimeout(testimonialResumeTimeout);
                }, { passive: true });
                window.addEventListener('touchend', () => {
                    if (isTestimonialPressed) {
                        isTestimonialPressed = false;
                        updateTestimonialAutoplay();
                    }
                });
                window.addEventListener('touchcancel', () => {
                    if (isTestimonialPressed) {
                        isTestimonialPressed = false;
                        updateTestimonialAutoplay();
                    }
                });
            }
            startTestimonialAutoplay();

            startAutoplay();
        });

        // Handle resize layout changes gracefully
        window.addEventListener('resize', () => {
            const carousel = document.getElementById('gallery-carousel');
            if (carousel && carousel.firstElementChild) {
                const currentIdx = Math.round((carousel.scrollLeft - originOffset) / (carousel.firstElementChild.offsetWidth + 24));
                updateGalleryDimensions();
                carousel.scrollLeft = originOffset + currentIdx * (carousel.firstElementChild.offsetWidth + 24);
            }
        });

        // Extra guard: recalculate and position scroll on full page load
        window.addEventListener('load', () => {
            updateGalleryDimensions();
            const carousel = document.getElementById('gallery-carousel');
            if (carousel) {
                carousel.scrollLeft = originOffset;
            }
        });
    </script>
</AboutLayout>