---
import { lensesData } from '../../data/about/lenses';
import { translations } from '../../data/about/translations';
---
<!-- CHAPTER 2: HOW DO I APPROACH PROBLEMS? (CAPABILITIES / 4 LENSES) -->
<section id="expertise" 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">
        <!-- Main Content Area -->
        <div class="md:col-span-12 space-y-10">
            <div>
                <h2 class="font-serif text-3xl md:text-4xl text-ink font-bold tracking-tight" data-i18n="cap-title">
                    Mình tiếp cận vấn đề qua bốn lăng kính.
                </h2>
                <p class="text-ink-secondary text-sm sm:text-base mt-2 max-w-2xl" data-i18n="cap-desc">
                    Khung tri thức đa ngành kết nối tầm nhìn chiến lược của ban lãnh đạo với khả năng vận hành thực tế.
                </p>
            </div>

            <!-- Mobile view: Redesigned Capabilities Accordion (Borderless Vertical List) -->
            <div class="block md:hidden border-t border-border-light divide-y divide-border-light pt-2">
                {lensesData.map((lens, idx) => {
                    const lensNum = idx + 1;
                    return (
                        <div onclick={`toggleAccordion('lens-${lensNum}')`} class="py-6 cursor-pointer group" role="button" tabindex="0" aria-expanded="false" onkeydown={`if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleAccordion('lens-${lensNum}');}`}>
                            <div class="flex items-center justify-between">
                                <div class="space-y-1">
                                    <span class="font-serif text-sm font-bold text-terracotta">{lens.id}</span>
                                    <div class="w-4 h-px bg-terracotta"></div>
                                    <h3 class="font-serif text-xl font-bold text-ink group-hover:text-terracotta transition-colors pt-1" data-i18n={lens.titleKey}>{translations.vi[lens.titleKey]}</h3>
                                </div>
                                <span class="text-2xl text-ink-secondary transition-transform duration-300 select-none" id={`lens-${lensNum}-icon`}>+</span>
                            </div>
                            <!-- Expanded list -->
                            <div id={`lens-${lensNum}-content`} class="text-sm text-ink-secondary mt-4 space-y-2 hidden pl-6 border-l border-border-light">
                                {lens.items.map((item) => (
                                    <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 data-i18n={item.i18nKey}>{translations.vi[item.i18nKey]}</span>
                                    </p>
                                ))}
                            </div>
                        </div>
                    );
                })}
            </div>

            <!-- Desktop view: 1 Row, 4 Columns with simple expand/arrow indicators + Shared Details box -->
            <div class="hidden md:block space-y-8">
                <!-- 4-Column Grid -->
                <div class="grid grid-cols-4 border border-border-light rounded-2xl overflow-hidden bg-paper-alt/10 divide-x divide-border-light">
                    {lensesData.map((lens, idx) => {
                        const lensNum = idx + 1;
                        return (
                            <button id={`lens-tab-${lensNum}`} onclick={`selectLens(${lensNum})`} class="p-6 flex flex-col justify-between h-40 text-left hover:bg-paper-alt/30 transition-all duration-300 cursor-pointer outline-none group w-full">
                                <div class="space-y-1 w-full">
                                    <span class="font-serif text-sm font-bold text-terracotta">{lens.id}</span>
                                    <div class="w-4 h-px bg-terracotta"></div>
                                    <h3 class="font-serif text-lg font-bold text-ink group-hover:text-terracotta transition-colors pt-1" data-i18n={lens.titleKey}>{translations.vi[lens.titleKey]}</h3>
                                </div>
                                <div class="flex justify-end w-full">
                                    <span id={`lens-arrow-${lensNum}`} class="text-xl text-ink-secondary transition-all duration-300 font-serif font-bold select-none">→</span>
                                </div>
                            </button>
                        );
                    })}
                </div>

                <!-- Shared Details Box -->
                <div class="border border-border-light rounded-2xl p-8 bg-paper-alt/15 backdrop-blur-sm min-h-[160px] flex items-center transition-all duration-300">
                    <div class="w-full">
                        {lensesData.map((lens, idx) => {
                            const lensNum = idx + 1;
                            return (
                                <div id={`lens-pane-${lensNum}`} class={`space-y-4 ${idx > 0 ? 'hidden' : ''}`}>
                                    {lens.items.map((item) => (
                                        <p class="flex items-start text-sm text-ink-secondary leading-relaxed">
                                            <span class="w-1.5 h-1.5 bg-terracotta mt-[8px] shrink-0 select-none mr-3" aria-hidden="true"></span>
                                            <span data-i18n={item.i18nKey}>{translations.vi[item.i18nKey]}</span>
                                        </p>
                                    ))}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>