@page
@{
    Layout = null;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EnterpriseKit — Admin Template Showcase</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.0/dist/cdn.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: "Poppins", sans-serif; }
        [x-cloak] { display: none !important; }
        .gradient-bg { background: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, #f8fafc 45%, #ffffff 100%); }
        .nav-link { position: relative; color: #64748b; font-size: .875rem; font-weight: 500; transition: color .2s; text-decoration: none; }
        .nav-link:hover { color: #4f46e5; }
        .card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15,23,42,.25); }
        .img-zoom { transition: transform .4s ease; }
        .card-hover:hover .img-zoom { transform: scale(1.04); }
        .chip { font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
    </style>
</head>
    <body class="bg-white text-slate-800 antialiased" x-data="showcase()" x-init="initScrollSpy(); showTop = window.scrollY > 400; window.addEventListener('scroll', () => { showTop = window.scrollY > 400; })">

    <!-- NAVBAR -->
    <nav class="sticky top-0 z-50 bg-white/85 backdrop-blur border-b border-slate-100" x-data="{ mobileOpen: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-10">
                    <a class="flex items-center gap-2 font-bold text-lg text-slate-800 no-underline" href="#top">
                        <svg class="w-7 h-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                        <span>EnterpriseKit</span>
                    </a>
                    <div class="hidden md:flex items-center gap-8">
                        <a class="nav-link" x-bind:class="activeSection==='top' && '!text-indigo-600 font-semibold'" href="#top">Overview</a>
                        <a class="nav-link" x-bind:class="activeSection==='apps' && '!text-indigo-600 font-semibold'" href="#apps">Applications</a>
                        <a class="nav-link" x-bind:class="activeSection==='themes' && '!text-indigo-600 font-semibold'" href="#themes">Themes</a>
                        <a class="nav-link" x-bind:class="activeSection==='kit' && '!text-indigo-600 font-semibold'" href="#kit">The Kit</a>
                    </div>
                </div>
                <div class="hidden md:flex items-center gap-3">
                    <a class="nav-link" href="#apps">Browse Templates</a>
                    <a href="https://indotalent.com" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                        Get Source Code
                    </a>
                </div>
                <button class="md:hidden p-2 text-slate-500" @@click="mobileOpen = !mobileOpen">
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
                </button>
            </div>
            <div x-show="mobileOpen" x-cloak class="md:hidden pb-4 space-y-1">
                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#top">Overview</a>
                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#apps">Applications</a>
                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#themes">Themes</a>
                <a class="block px-3 py-2 text-sm text-slate-600 rounded-md hover:bg-slate-50" href="#kit">The Kit</a>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <section id="top" class="gradient-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-28 md:pb-32 text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-700 text-xs font-semibold mb-6">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Part of the Enterprise Development Kit · ASP.NET Core Razor Pages Edition
            </div>
            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight">Clean, Professional Admin Templates</h1>
            <p class="mt-5 max-w-2xl mx-auto text-lg text-slate-500">A modern, light, minimalist admin template built with <span class="font-semibold text-slate-700">Tailwind CSS</span> and <span class="font-semibold text-slate-700">Alpine.js</span>. Explore ten business-grade dashboards, each available in five carefully crafted color themes.</p>
            <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
                <a href="#apps" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition no-underline">
                    Explore Dashboards
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
                <a href="#themes" class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold rounded-lg text-slate-700 bg-white border border-slate-200 hover:bg-slate-50 transition no-underline">View Theme Variants</a>
            </div>
            <div class="mt-14 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">10</p><p class="text-xs text-slate-500 mt-1">Business Apps</p></div>
                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">5</p><p class="text-xs text-slate-500 mt-1">Color Themes</p></div>
                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">50</p><p class="text-xs text-slate-500 mt-1">Demo Pages</p></div>
                <div class="bg-white rounded-xl border border-slate-100 px-4 py-5 shadow-sm"><p class="text-3xl font-bold text-slate-900">100%</p><p class="text-xs text-slate-500 mt-1">Responsive</p></div>
            </div>
        </div>
    </section>

    <!-- APPLICATIONS -->
    <section id="apps" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <p class="chip text-indigo-600 font-semibold">Business Applications</p>
            <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Ten ready-to-use dashboards</h2>
            <p class="mt-3 text-slate-500">Each application ships with five theme variants. Click any thumbnail to open the live preview.</p>
        </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
            <template x-for="app in apps" x-bind:key="app.key">
                <div class="card-hover bg-white rounded-2xl border border-slate-100 overflow-hidden shadow-sm" x-data="{ open: false, slide: 0 }">
                    <div class="relative overflow-hidden bg-slate-100 aspect-[2/1] group" @@mouseenter="pause=true" @@mouseleave="pause=false" x-init="setInterval(() => { if(!pause) slide = (slide + 1) % app.shots.length }, 4000)" x-data="{ pause: false }">
                        <div class="flex h-full transition-transform duration-500 ease-out" x-bind:style="`transform: translateX(-${slide * 100}%)`">
                            <template x-for="(shot, i) in app.shots" x-bind:key="i">
                                <a x-bind:href="'/' + app.key + (i+1)" target="_blank" rel="noopener"
                                   class="relative shrink-0 w-full h-full block cursor-pointer">
                                    <img x-bind:src="shot" x-bind:alt="app.name + ' theme ' + (i+1) + ' preview'"
                                         class="img-zoom w-full h-full object-contain object-top">
                                </a>
                            </template>
                        </div>
                        <span class="chip absolute top-3 left-3 z-10 px-2 py-1 rounded-md bg-white/90 text-slate-600 shadow-sm" x-text="app.abbr"></span>
                        <span class="absolute top-3 right-3 z-10 inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/95 text-indigo-600 text-xs font-semibold shadow-sm">
                            <span x-text="(slide+1) + ' / ' + app.shots.length"></span>
                        </span>

                        <button class="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
                                @@click="slide = (slide - 1 + app.shots.length) % app.shots.length" aria-label="Previous">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                        </button>
                        <button class="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 shadow hover:bg-white text-slate-600"
                                @@click="slide = (slide + 1) % app.shots.length" aria-label="Next">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                        </button>

                        <div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
                            <template x-for="(shot, i) in app.shots" x-bind:key="i">
                                <button class="w-2 h-2 rounded-full transition-colors"
                                        x-bind:class="slide === i ? 'bg-indigo-600 w-4' : 'bg-white/70 hover:bg-white'"
                                        @@click="slide = i" x-bind:aria-label="'Go to slide ' + (i+1)"></button>
                            </template>
                        </div>
                    </div>
                    <div class="p-5">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h3 class="text-lg font-bold text-slate-900" x-text="app.name"></h3>
                                <p class="text-xs text-slate-400 font-medium" x-text="app.full"></p>
                            </div>
                            <button @@click="open = !open" class="shrink-0 text-slate-400 hover:text-indigo-600 p-1" x-bind:title="open ? 'Hide themes' : 'Show themes'">
                                <svg class="w-5 h-5 transition-transform" x-bind:class="open && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                            </button>
                        </div>
                        <p class="mt-2 text-sm text-slate-500 leading-relaxed" x-text="app.summary"></p>

                        <div x-show="open" x-cloak x-collapse class="mt-4 pt-4 border-t border-slate-100">
                            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">Choose a theme</p>
                            <div class="grid grid-cols-1 gap-2">
                                <template x-for="t in themes" x-bind:key="t.id">
                                    <a x-bind:href="'/' + app.key + t.id" target="_blank" rel="noopener"
                                       class="flex items-center gap-3 px-3 py-2 rounded-lg border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/50 transition no-underline group">
                                        <span class="w-5 h-5 rounded-full ring-2 ring-white shadow" x-bind:style="`background:${t.color}`"></span>
                                        <span class="text-sm font-medium text-slate-700 group-hover:text-indigo-700" x-text="t.name + ' Theme'"></span>
                                        <svg class="w-4 h-4 ml-auto text-slate-300 group-hover:text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                    </a>
                                </template>
                            </div>
                        </div>

                            <a x-bind:href="'/' + app.key + '1'" target="_blank" rel="noopener" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700 no-underline">
                            Open default preview
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                    </div>
                </div>
            </template>
        </div>
    </section>

    <!-- THEMES -->
    <section id="themes" class="bg-slate-50 border-y border-slate-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center max-w-2xl mx-auto mb-12">
                <p class="chip text-indigo-600 font-semibold">Theme Variants</p>
                <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">Five professional palettes</h2>
                <p class="mt-3 text-slate-500">Every dashboard is generated in five modern, light, minimalist themes so you can match your brand identity instantly.</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
                <template x-for="t in themes" x-bind:key="t.id">
                    <div class="bg-white rounded-2xl border border-slate-100 p-5 shadow-sm text-center card-hover">
                        <div class="w-14 h-14 mx-auto rounded-2xl flex items-center justify-center shadow-sm" x-bind:style="`background:${t.color}`">
                            <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h8a2 2 0 002-2v-4a2 2 0 00-2-2H7m8-12h2a2 2 0 012 2v4a2 2 0 01-2 2h-2"/></svg>
                        </div>
                        <h3 class="mt-4 font-bold text-slate-900" x-text="t.name"></h3>
                        <p class="mt-1 text-xs text-slate-400" x-text="t.desc"></p>
                        <span class="mt-3 inline-block chip px-2 py-1 rounded-md" x-bind:style="`background:${t.soft};color:${t.color}`" x-text="t.tag"></span>
                    </div>
                </template>
            </div>
        </div>
    </section>

    <!-- THE KIT -->
    <section id="kit" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="text-center max-w-2xl mx-auto mb-12">
            <p class="chip text-indigo-600 font-semibold">The Enterprise Development Kit</p>
            <h2 class="mt-2 text-3xl md:text-4xl font-bold text-slate-900">A complete front-end foundation</h2>
            <p class="mt-3 text-slate-500">The admin template is a building block of the Enterprise Development Kit — a clean, professional UI layer for line-of-business applications.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
                <h3 class="mt-4 font-bold text-slate-900">Lightweight & Fast</h3>
                <p class="mt-2 text-sm text-slate-500">Built on Tailwind CSS and Alpine.js — no heavy build step, no framework lock-in, just clean composable markup.</p>
            </div>
            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></div>
                <h3 class="mt-4 font-bold text-slate-900">Modular Components</h3>
                <p class="mt-2 text-sm text-slate-500">Reusable cards, tables, forms, auth pages and widgets crafted for consistent, professional enterprise layouts.</p>
            </div>
            <div class="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm">
                <div class="w-11 h-11 rounded-xl flex items-center justify-center bg-indigo-50"><svg class="w-6 h-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div>
                <h3 class="mt-4 font-bold text-slate-900">Fully Responsive</h3>
                <p class="mt-2 text-sm text-slate-500">Mobile-first navigation, collapsible sidebars and fluid grids that look sharp from phone to wide desktop monitors.</p>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="bg-slate-900 text-slate-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div class="flex items-center gap-2 font-bold text-white text-lg">
                    <svg class="w-7 h-7 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    EnterpriseKit
                </div>
                <p class="text-sm text-slate-400">Admin Template — ASP.NET Core Razor Pages Edition, a component of the Enterprise Development Kit.</p>
            </div>
            <div class="mt-8 pt-8 border-t border-slate-800 text-xs text-slate-500 flex flex-col sm:flex-row justify-between gap-2">
                <span>© 2026 EnterpriseKit. Built with Tailwind CSS & Alpine.js.</span>
                <span>Clean · Professional · Minimalist</span>
            </div>
        </div>
    </footer>

    <script>
        function showcase() {
            return {
                activeSection: 'top',
                showTop: false,
                themes: [
                    { id: 1, name: 'Clean Grey',            color: '#334155', soft: '#f1f5f9', tag: 'Neutral',  desc: 'Refined graphite for a calm, corporate look.' },
                    { id: 2, name: 'Soft Blue',            color: '#2563eb', soft: '#eff6ff', tag: 'Primary',  desc: 'Trusted light blue, ideal for SaaS products.' },
                    { id: 3, name: 'Full Blue',           color: '#1d4ed8', soft: '#dbeafe', tag: 'Solid',    desc: 'Full saturated blue for strong brand presence.' },
                    { id: 4, name: 'Full Blue Rounded',   color: '#1d4ed8', soft: '#dbeafe', tag: 'Rounded',  desc: 'Solid blue with fully rounded, pill-shaped controls.' },
                    { id: 5, name: 'Soft Blue Box',        color: '#2563eb', soft: '#eff6ff', tag: 'Boxed',    desc: 'Soft blue with a contained, boxed layout style.' }
                ],
                apps: [
                    { key: 'dashboard-crm', abbr: 'CRM', name: 'CRM', full: 'Customer Relationship Management', img: 'img/crm1.png',
                      shots: ['img/crm1.png','img/crm2.png','img/crm3.png','img/crm4.png','img/crm5.png'],
                      summary: 'Track leads, opportunities and pipelines. Monitor customer health, sales activities and revenue forecasts in one place.' },
                    { key: 'dashboard-eam', abbr: 'EAM', name: 'EAM', full: 'Enterprise Asset Management', img: 'img/eam1.png',
                      shots: ['img/eam1.png','img/eam2.png','img/eam3.png','img/eam4.png','img/eam5.png'],
                      summary: 'Manage the full lifecycle of physical assets, maintenance schedules and utilization across locations.' },
                    { key: 'dashboard-fms', abbr: 'FMS', name: 'FMS', full: 'Financial Management System', img: 'img/fms1.png',
                      shots: ['img/fms1.png','img/fms2.png','img/fms3.png','img/fms4.png','img/fms5.png'],
                      summary: 'Oversee budgets, cash flow, ledgers and financial reporting with clear, audit-ready dashboards.' },
                    { key: 'dashboard-hrm', abbr: 'HRM', name: 'HRM', full: 'Human Resource Management', img: 'img/hrm1.png',
                      shots: ['img/hrm1.png','img/hrm2.png','img/hrm3.png','img/hrm4.png','img/hrm5.png'],
                      summary: 'Centralize employee records, attendance, leave and payroll for a productive workforce.' },
                    { key: 'dashboard-itsm', abbr: 'ITSM', name: 'ITSM', full: 'IT Service Management', img: 'img/itsm1.png',
                      shots: ['img/itsm1.png','img/itsm2.png','img/itsm3.png','img/itsm4.png','img/itsm5.png'],
                      summary: 'Handle incidents, service requests and SLAs with a streamlined IT support operations view.' },
                    { key: 'dashboard-pos', abbr: 'POS', name: 'POS', full: 'Point of Sale', img: 'img/pos1.png',
                      shots: ['img/pos1.png','img/pos2.png','img/pos3.png','img/pos4.png','img/pos5.png'],
                      summary: 'Process transactions, manage inventory and review store performance in real time.' },
                    { key: 'dashboard-rms', abbr: 'RMS', name: 'RMS', full: 'Roster Management System', img: 'img/rms1.png',
                      shots: ['img/rms1.png','img/rms2.png','img/rms3.png','img/rms4.png','img/rms5.png'],
                      summary: 'Plan shifts, assign staff and optimize coverage with intuitive scheduling tools.' },
                    { key: 'dashboard-scm', abbr: 'SCM', name: 'SCM', full: 'Supply Chain Management', img: 'img/scm1.png',
                      shots: ['img/scm1.png','img/scm2.png','img/scm3.png','img/scm4.png','img/scm5.png'],
                      summary: 'Coordinate procurement, logistics and suppliers to keep the supply chain resilient.' },
                    { key: 'dashboard-tms', abbr: 'TMS', name: 'TMS', full: 'Talent Management System', img: 'img/tms1.png',
                      shots: ['img/tms1.png','img/tms2.png','img/tms3.png','img/tms4.png','img/tms5.png'],
                      summary: 'Attract, develop and retain talent with recruiting, goals and performance insights.' },
                    { key: 'dashboard-wms', abbr: 'WMS', name: 'WMS', full: 'Warehouse Management System', img: 'img/wms1.png',
                      shots: ['img/wms1.png','img/wms2.png','img/wms3.png','img/wms4.png','img/wms5.png'],
                      summary: 'Control receiving, storage and fulfillment to boost warehouse throughput and accuracy.' }
                ],
                initScrollSpy() {
                    const ids = ['top', 'apps', 'themes', 'kit'];
                    const obs = new IntersectionObserver((entries) => {
                        entries.forEach(e => { if (e.isIntersecting) this.activeSection = e.target.id; });
                    }, { rootMargin: '-40% 0px -55% 0px' });
                    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
                }
            }
        }
    </script>

    <!-- BACK TO TOP FAB -->
    <button x-show="showTop" x-cloak
            @@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 translate-y-4"
            class="fixed bottom-6 right-6 z-50 w-12 h-12 flex items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-700 hover:shadow-xl transition-colors"
            aria-label="Back to top">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
    </button>

</body>
</html>
