@php
    $appLoginUrl = 'https://app.uzapoint.com/';
    $appRegisterUrl = 'https://app.uzapoint.com/register';

    $uzapointModules = config('modules.items');

    $playStoreUpDukaUrl = 'https://play.google.com/store/apps/details?id=com.uzapoint.upduka&hl=en';

    $uzapointApps = [
        [
            'name' => 'UP Android',
            'tag' => 'POS in your pocket',
            'stat_value' => '9,290',
            'stat_icon' => 'download',
            'stat_label' => 'downloads',
            'logo' => 'upduka.png',
            'tone' => 'emerald',
            'href' => $playStoreUpDukaUrl,
        ],
        [
            'name' => 'UP Printer',
            'tag' => 'Receipts on demand',
            'stat_value' => '649',
            'stat_icon' => 'users',
            'stat_label' => 'users',
            'logo' => 'upprinter.png',
            'tone' => 'sky',
            'href' => '#',
        ],
        [
            'name' => 'SMS Forwarder',
            'tag' => 'Payments to books',
            'stat_value' => '304',
            'stat_icon' => 'users',
            'stat_label' => 'users',
            'logo' => 'sms-forwarder.png',
            'tone' => 'violet',
            'href' => '#',
        ],
        [
            'name' => 'UP Hotellia',
            'tag' => 'Hospitality made simple',
            'stat_value' => '129',
            'stat_icon' => 'users',
            'stat_label' => 'users',
            'logo' => 'hotellia.png',
            'tone' => 'coral',
            'href' => '#',
        ],
    ];

    $menus = [
        [
            'label' => 'Company',
            'href' => route('about'),
            'variant' => 'compact',
            'items' => [
                ['label' => 'About us', 'href' => route('about') . '#about-us'],
                ['label' => 'Our Vision', 'href' => route('about') . '#vision'],
                ['label' => 'Our Mission', 'href' => route('about') . '#mission'],
                ['label' => 'Our Values', 'href' => route('about') . '#values'],
                ['label' => 'Our Team', 'href' => route('about') . '#team'],
            ],
        ],
        [
            'label' => 'Products',
            'href' => route('products'),
            'variant' => 'mega',
            'image' => 'https://images.unsplash.com/photo-1556740758-90de374c12ad?w=520&q=80&auto=format&fit=crop',
            'image_alt' => 'Retail business owner using point of sale technology',
            'items' => [
                ['label' => 'Software', 'href' => route('products.category', 'software')],
                ['label' => 'Hardware', 'href' => route('products.category', 'hardware')],
                ['label' => 'Integration', 'href' => route('products.category', 'integration')],
                ['label' => 'Finance', 'href' => route('products.category', 'finance')],
                ['label' => 'VAS - Value Added Services', 'href' => route('products.category', 'vas')],
            ],
        ],
        [
            'label' => 'Impact',
            'href' => route('impact'),
            'variant' => 'mega',
            'image' => 'https://images.unsplash.com/photo-1556761175-b413da4baf72?w=520&q=80&auto=format&fit=crop',
            'image_alt' => 'Entrepreneurs collaborating in a business workshop',
            'items' => [
                ['label' => 'SME Empowerment Fund', 'href' => route('impact.program', 'sme-empowerment-fund')],
                ['label' => 'Uzapoint Academy', 'href' => route('impact.program', 'uzapoint-academy')],
                ['label' => 'Partnerships', 'href' => route('impact.program', 'partnerships')],
                ['label' => 'Metrics', 'href' => route('impact.program', 'metrics')],
                ['label' => 'Testimonials', 'href' => route('impact.program', 'testimonials')],
                ['label' => 'CSR', 'href' => route('impact.program', 'csr')],
            ],
        ],
        [
            'label' => 'Resources',
            'href' => route('resources'),
            'variant' => 'mega',
            'image' => 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=520&q=80&auto=format&fit=crop',
            'image_alt' => 'Business resources and digital learning workspace',
            'items' => [
                ['label' => 'Press Releases', 'href' => route('resources.section', 'press-releases')],
                ['label' => 'Stories', 'href' => route('resources.section', 'stories')],
                ['label' => 'Blogs', 'href' => route('resources.section', 'blogs')],
                ['label' => 'Events', 'href' => route('resources.section', 'events')],
                ['label' => 'Gallery', 'href' => route('resources.section', 'gallery')],
                ['label' => 'Careers', 'href' => route('resources.section', 'careers')],
            ],
        ],
        [
            'label' => 'Contact Us',
            'href' => route('contact'),
            'variant' => 'link',
        ],
    ];
@endphp
 
<nav class="site-nav" aria-label="Main navigation">
    <a class="skip-link" href="#main-content">Skip to content</a>
 
    <a class="nav-logo" href="{{ route('home') }}" aria-label="Uzapoint home">
        <img class="nav-logo-mark" src="{{ asset('img/logo-avatar.png') }}" alt="" aria-hidden="true">
        <span>Uzapoint</span>
    </a>
 
    <ul class="nav-links">
        @foreach ($menus as $menu)
            <li class="nav-item nav-item-{{ $menu['variant'] }}">
                @if ($menu['variant'] === 'link')
                    <a class="nav-trigger" href="{{ $menu['href'] }}">
                        <span>{{ $menu['label'] }}</span>
                    </a>
                @else
                    <button
                        type="button"
                        class="nav-trigger"
                        aria-haspopup="true"
                        aria-expanded="false"
                        aria-controls="nav-dropdown-{{ $loop->index }}"
                    >
                        <span>{{ $menu['label'] }}</span>
                        <span class="nav-trigger-caret" aria-hidden="true"></span>
                    </button>

                    <div
                        class="nav-dropdown"
                        id="nav-dropdown-{{ $loop->index }}"
                        role="menu"
                        aria-label="{{ $menu['label'] }} menu"
                        hidden
                    >
                        @if ($menu['variant'] === 'mega')
                            <a class="nav-dropdown-feature" href="{{ $menu['href'] }}" role="menuitem">
                                <img src="{{ $menu['image'] }}" alt="" aria-hidden="true">
                                <span class="nav-dropdown-feature-label">
                                    <span class="nav-dropdown-feature-title">{{ $menu['label'] }}</span>
                                    <span class="nav-dropdown-feature-cta" aria-hidden="true">
                                        <x-icon name="chevron-right" />
                                    </span>
                                </span>
                            </a>
                        @endif

                        <div class="nav-dropdown-grid">
                            @foreach ($menu['items'] as $item)
                                <a class="nav-dropdown-link" href="{{ $item['href'] }}" role="menuitem">
                                    <span class="nav-dropdown-title">{{ $item['label'] }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </li>
        @endforeach
    </ul>
 
    <div class="nav-ctas">
        <div class="nav-apps">
            <button
                type="button"
                class="nav-apps-trigger"
                aria-label="Uzapoint apps"
                aria-haspopup="dialog"
                aria-expanded="false"
                aria-controls="nav-apps-offcanvas"
            >
                <x-icon name="layout-grid" class="nav-apps-trigger-icon" />
            </button>

            <div class="nav-apps-offcanvas" id="nav-apps-offcanvas" hidden>
                <button
                    type="button"
                    class="nav-apps-backdrop"
                    data-nav-apps-close
                    aria-label="Close apps menu"
                    tabindex="-1"
                ></button>

                <aside
                    class="nav-apps-panel"
                    id="nav-apps-panel"
                    role="dialog"
                    aria-modal="true"
                    aria-label="Uzapoint apps"
                >
                    <div class="nav-apps-panel-head">
                        <button type="button" class="nav-apps-panel-close" data-nav-apps-close aria-label="Close apps menu">
                            <x-icon name="close" />
                        </button>
                    </div>

                    <div class="nav-apps-panel-body">
                    <div class="nav-apps-group nav-apps-group--modules">
                        <div class="nav-apps-modules-stage" data-nav-apps-modules>
                            <div class="nav-apps-modules-grid-view">
                                <div class="nav-apps-heading">
                                    <span class="nav-apps-heading-label">Modules</span>
                                    <span class="nav-apps-heading-chip">11 tools</span>
                                </div>
                                <div class="nav-apps-module-grid">
                                    @foreach ($uzapointModules as $module)
                                        <button
                                            type="button"
                                            class="nav-apps-module-card nav-apps-module-card--{{ $module['tone'] }}"
                                            data-module-name="{{ $module['name'] }}"
                                            data-module-icon="{{ $module['icon'] }}"
                                            data-module-tone="{{ $module['tone'] }}"
                                            data-module-href="{{ $module['href'] }}"
                                            data-module-kicker="{{ $module['kicker'] }}"
                                            data-module-highlight="{{ $module['highlight'] }}"
                                            data-module-pitch="{{ $module['pitch'] }}"
                                            data-module-points="{{ e(json_encode($module['points'])) }}"
                                        >
                                            <span class="nav-apps-module-card-glow" aria-hidden="true"></span>
                                            <span class="nav-apps-module-card-icon nav-apps-module-icon nav-apps-module-icon--{{ $module['tone'] }}">
                                                <x-icon :name="$module['icon']" />
                                            </span>
                                            <span class="nav-apps-module-card-name">{{ $module['name'] }}</span>
                                        </button>
                                    @endforeach
                                </div>
                            </div>

                            <div class="nav-apps-module-detail-view" data-nav-apps-module-detail hidden>
                                <div class="nav-apps-module-detail-toolbar">
                                    <button type="button" class="nav-apps-module-back" data-nav-apps-module-back>
                                        <x-icon name="chevron-down" />
                                        <span>All modules</span>
                                    </button>
                                    <div class="nav-apps-module-detail-nav" aria-label="Browse modules">
                                        <button
                                            type="button"
                                            class="nav-apps-module-detail-nav-btn"
                                            data-nav-apps-module-prev
                                            aria-label="Previous module"
                                        >
                                            <x-icon name="chevron-down" class="nav-apps-module-detail-nav-icon nav-apps-module-detail-nav-icon--prev" />
                                        </button>
                                        <button
                                            type="button"
                                            class="nav-apps-module-detail-nav-btn"
                                            data-nav-apps-module-next
                                            aria-label="Next module"
                                        >
                                            <x-icon name="chevron-down" class="nav-apps-module-detail-nav-icon nav-apps-module-detail-nav-icon--next" />
                                        </button>
                                    </div>
                                </div>

                                <div class="nav-apps-module-detail-hero" data-nav-apps-detail-hero>
                                    <span class="nav-apps-module-detail-sweep" aria-hidden="true"></span>
                                    <span class="nav-apps-module-detail-glow" data-nav-apps-detail-glow aria-hidden="true"></span>
                                    <div class="nav-apps-module-detail-hero-copy">
                                        <span class="nav-apps-module-detail-kicker" data-nav-apps-detail-kicker></span>
                                        <h3 class="nav-apps-module-detail-title" data-nav-apps-detail-title></h3>
                                        <p class="nav-apps-module-detail-highlight" data-nav-apps-detail-highlight></p>
                                    </div>
                                    <span class="nav-apps-module-detail-icon" data-nav-apps-detail-icon aria-hidden="true"></span>
                                </div>

                                <p class="nav-apps-module-detail-pitch" data-nav-apps-detail-pitch></p>
                                <ul class="nav-apps-module-detail-points" data-nav-apps-detail-points></ul>
                            </div>
                        </div>
                    </div>

                    <div class="nav-apps-group nav-apps-group--apps">
                        <div class="nav-apps-heading">
                            <span class="nav-apps-heading-label">Apps</span>
                        </div>
                        <div class="nav-apps-grid">
                            @foreach ($uzapointApps as $app)
                                <a
                                    class="nav-apps-app-card nav-apps-app-card--{{ $app['tone'] }}"
                                    href="{{ $app['href'] }}"
                                    role="menuitem"
                                    @if (str_starts_with($app['href'], 'http')) target="_blank" rel="noopener noreferrer" @endif
                                >
                                    <span class="nav-apps-app-card-surface" aria-hidden="true"></span>
                                    <span class="nav-apps-app-card-logo">
                                        <img src="{{ asset('img/apps/' . $app['logo']) }}" alt="" aria-hidden="true">
                                    </span>
                                    <span class="nav-apps-app-card-meta">
                                        <span class="nav-apps-app-card-name">{{ $app['name'] }}</span>
                                        <span class="nav-apps-app-card-tag">{{ $app['tag'] }}</span>
                                        <span class="nav-apps-app-card-stat">
                                            <x-icon :name="$app['stat_icon']" class="nav-apps-app-card-stat-icon" />
                                            <span class="nav-apps-app-card-stat-value">{{ $app['stat_value'] }}</span>
                                            <span class="sr-only">{{ $app['stat_label'] }}</span>
                                        </span>
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                </aside>
            </div>
        </div>

        <a class="btn-ghost" href="{{ $appLoginUrl }}">Log in</a>
        <a class="btn-primary" href="{{ $appRegisterUrl }}">Start Free Trial</a>
    </div>
 
    <details class="mobile-nav">
        <summary class="mobile-nav-toggle" aria-label="Open navigation menu">
            <span></span>
            <span></span>
            <span></span>
        </summary>
 
        <div class="mobile-nav-panel">
            <div class="mobile-nav-menus">
                @foreach ($menus as $menu)
                    @if ($menu['variant'] === 'link')
                        <a class="mobile-nav-link-direct" href="{{ $menu['href'] }}">{{ $menu['label'] }}</a>
                    @else
                        <details class="mobile-nav-group">
                            <summary>{{ $menu['label'] }}</summary>
                            <div class="mobile-nav-links">
                                @foreach ($menu['items'] as $item)
                                    <a class="mobile-nav-link" href="{{ $item['href'] }}">
                                        <span class="mobile-nav-link-title">{{ $item['label'] }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </details>
                    @endif
                @endforeach
            </div>

            <div class="mobile-nav-apps">
                <details class="mobile-nav-group mobile-nav-apps-group" data-mobile-nav-apps-modules-group>
                    <summary>
                        <span class="mobile-nav-apps-summary-label">
                            <span>Modules</span>
                            <span class="mobile-nav-apps-chip">11 tools</span>
                        </span>
                    </summary>

                    <div class="nav-apps-modules-stage mobile-nav-apps-stage" data-mobile-nav-apps-modules>
                        <div class="mobile-nav-apps-grid-view">
                            <div class="nav-apps-module-grid mobile-nav-apps-module-grid">
                                @foreach ($uzapointModules as $module)
                                    <button
                                        type="button"
                                        class="nav-apps-module-card nav-apps-module-card--{{ $module['tone'] }}"
                                        data-module-name="{{ $module['name'] }}"
                                        data-module-icon="{{ $module['icon'] }}"
                                        data-module-tone="{{ $module['tone'] }}"
                                        data-module-href="{{ $module['href'] }}"
                                        data-module-kicker="{{ $module['kicker'] }}"
                                        data-module-highlight="{{ $module['highlight'] }}"
                                        data-module-pitch="{{ $module['pitch'] }}"
                                        data-module-points="{{ e(json_encode($module['points'])) }}"
                                    >
                                        <span class="nav-apps-module-card-glow" aria-hidden="true"></span>
                                        <span class="nav-apps-module-card-icon nav-apps-module-icon nav-apps-module-icon--{{ $module['tone'] }}">
                                            <x-icon :name="$module['icon']" />
                                        </span>
                                        <span class="nav-apps-module-card-name">{{ $module['name'] }}</span>
                                    </button>
                                @endforeach
                            </div>
                        </div>

                        <div class="nav-apps-module-detail-view mobile-nav-apps-detail" data-mobile-nav-apps-module-detail hidden>
                            <div class="nav-apps-module-detail-toolbar">
                                <button type="button" class="nav-apps-module-back" data-nav-apps-module-back>
                                    <x-icon name="chevron-down" />
                                    <span>All modules</span>
                                </button>
                                <div class="nav-apps-module-detail-nav" aria-label="Browse modules">
                                    <button
                                        type="button"
                                        class="nav-apps-module-detail-nav-btn"
                                        data-nav-apps-module-prev
                                        aria-label="Previous module"
                                    >
                                        <x-icon name="chevron-down" class="nav-apps-module-detail-nav-icon nav-apps-module-detail-nav-icon--prev" />
                                    </button>
                                    <button
                                        type="button"
                                        class="nav-apps-module-detail-nav-btn"
                                        data-nav-apps-module-next
                                        aria-label="Next module"
                                    >
                                        <x-icon name="chevron-down" class="nav-apps-module-detail-nav-icon nav-apps-module-detail-nav-icon--next" />
                                    </button>
                                </div>
                            </div>

                            <div class="nav-apps-module-detail-hero" data-mobile-nav-apps-detail-hero>
                                <span class="nav-apps-module-detail-sweep" aria-hidden="true"></span>
                                <span class="nav-apps-module-detail-glow" data-mobile-nav-apps-detail-glow aria-hidden="true"></span>
                                <div class="nav-apps-module-detail-hero-copy">
                                    <span class="nav-apps-module-detail-kicker" data-mobile-nav-apps-detail-kicker></span>
                                    <h3 class="nav-apps-module-detail-title" data-mobile-nav-apps-detail-title></h3>
                                    <p class="nav-apps-module-detail-highlight" data-mobile-nav-apps-detail-highlight></p>
                                </div>
                                <span class="nav-apps-module-detail-icon" data-mobile-nav-apps-detail-icon aria-hidden="true"></span>
                            </div>

                            <p class="nav-apps-module-detail-pitch" data-mobile-nav-apps-detail-pitch></p>
                            <ul class="nav-apps-module-detail-points" data-mobile-nav-apps-detail-points></ul>
                        </div>
                    </div>
                </details>

                <details class="mobile-nav-group mobile-nav-apps-group">
                    <summary>Apps</summary>
                    <div class="mobile-nav-apps-list">
                        @foreach ($uzapointApps as $app)
                            <a
                                class="nav-apps-app-card nav-apps-app-card--{{ $app['tone'] }} mobile-nav-apps-app-card"
                                href="{{ $app['href'] }}"
                                @if (str_starts_with($app['href'], 'http')) target="_blank" rel="noopener noreferrer" @endif
                            >
                                <span class="nav-apps-app-card-surface" aria-hidden="true"></span>
                                <span class="nav-apps-app-card-logo">
                                    <img src="{{ asset('img/apps/' . $app['logo']) }}" alt="" aria-hidden="true">
                                </span>
                                <span class="nav-apps-app-card-meta">
                                    <span class="nav-apps-app-card-name">{{ $app['name'] }}</span>
                                    <span class="nav-apps-app-card-tag">{{ $app['tag'] }}</span>
                                    <span class="nav-apps-app-card-stat">
                                        <x-icon :name="$app['stat_icon']" class="nav-apps-app-card-stat-icon" />
                                        <span class="nav-apps-app-card-stat-value">{{ $app['stat_value'] }}</span>
                                        <span class="sr-only">{{ $app['stat_label'] }}</span>
                                    </span>
                                </span>
                            </a>
                        @endforeach
                    </div>
                </details>
            </div>

            <div class="mobile-nav-actions">
                <a class="btn-ghost" href="{{ $appLoginUrl }}">Log in</a>
                <a class="btn-primary" href="{{ $appRegisterUrl }}">Start Free Trial</a>
            </div>
        </div>
    </details>
</nav>