component PublicFooter {
    types {
        interface PublicFooterLink {
            label: string
            href: string
            ariaLabel?: string
            target?: string
            icon?: string
        }
        interface PublicFooterColumn {
            title: string
            links: PublicFooterLink[]
        }
    }
    props {
        class: string = ""
        homeHref: string = "/"
        brandName: string = "WrNexus"
        brandTagline: string = "Identity Cloud"
        brandAriaLabel: string = "WrNexus home"
        brandIcon: string = "icon-[lucide--blocks]"
        brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications."
        statusLabel: string = "All systems operational"
        statusHref: string = "/status"
        newsletterEyebrow: string = "WrNexus updates"
        newsletterTitle: string = "Identity insights delivered to your inbox"
        newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources."
        newsletterAction: string = "/api/newsletter/subscribe"
        newsletterButtonLabel: string = "Subscribe"
        newsletterPlaceholder: string = "Enter your work email"
        newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription."
        newsletterPrivacyLabel: string = "privacy policy"
        newsletterPrivacyHref: string = "/privacy"
        newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our"
        newsletterFinePrintSuffix: string = "."
        newsletterEmailLabel: string = "Work email address"
        newsletterEmailName: string = "email"
        copyrightText: string = "© 2026 WrNexus. All rights reserved."
        attributionText: string = "Built by WorkRoot Workspace."
        showNewsletter: boolean = true
        showSocialLinks: boolean = true
        showThemeToggle: boolean = true
        showStatus: boolean = true
        showCookiePreferences: boolean = true
        cookiePreferencesLabel: string = "Cookie preferences"
        themeLabel: string = "Theme"
        themeToggleLabel: string = "Toggle color theme"
        legalTitle: string = "Legal"
        socialLinks: PublicFooterLink[] = []
        navigationColumns: PublicFooterColumn[] = []
        legalLinks: PublicFooterLink[] = []
        navigationAriaLabel: string = "Footer navigation"
    }
    state email = ""
    state newsletterSubmitted = false

    view {
        <footer
            class="relative overflow-hidden border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-slate-950 {class}"
        >

            <!-- Decorative background -->
            <div
                aria-hidden="true"
                class="pointer-events-none absolute inset-x-0 top-0 h-96 overflow-hidden"
            >
                <div class="absolute -left-32 -top-48 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl dark:bg-indigo-500/10"></div>

                <div class="absolute -right-32 -top-48 h-96 w-96 rounded-full bg-violet-300/20 blur-3xl dark:bg-violet-500/10"></div>
            </div>

            <div class="relative w-full px-5 py-12 sm:px-8 lg:px-10 lg:py-16 xl:px-12">

                <!-- Newsletter and CTA -->
                <section data-show="showNewsletter"
                    aria-labelledby="footer-newsletter-title"
                    class="relative overflow-hidden rounded-3xl border border-indigo-200 bg-linear-to-br from-indigo-50 via-white to-violet-50 p-6 shadow-xl shadow-indigo-950/5 dark:border-indigo-500/20 dark:from-indigo-500/10 dark:via-slate-900 dark:to-violet-500/10 sm:p-8 lg:p-10"
                >
                    <div aria-hidden="true" class="absolute -right-24 -top-24 h-64 w-64 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10" ></div>

                    <div aria-hidden="true" class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10" ></div>

                    <div class="relative grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,0.75fr)]">
                        <div>
                            <span
                                class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/70 px-3 py-1.5 text-xs font-semibold text-indigo-700 backdrop-blur-sm dark:border-indigo-500/20 dark:bg-white/5 dark:text-indigo-300"
                            >
                                <span class="icon-[lucide--mail-plus] h-3.5 w-3.5" aria-hidden="true" ></span>

                                {newsletterEyebrow}
                            </span>

                            <h2
                                id="footer-newsletter-title"
                                class="mt-5 max-w-2xl text-2xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-3xl"
                            >
                                {newsletterTitle}
                            </h2>

                            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600 dark:text-slate-400 sm:text-base">
                                {newsletterDescription}
                            </p>
                        </div>

                        <div>
                            <form
                                method="post"
                                action="{newsletterAction}"
                                @submit="newsletterSubmitted = true"
                                class="rounded-2xl border border-slate-200 bg-white/80 p-2 shadow-lg shadow-slate-950/5 backdrop-blur-sm dark:border-white/10 dark:bg-white/5"
                            >
                                <div class="flex flex-col gap-2 sm:flex-row">
                                    <label
                                        class="sr-only"
                                        for="footer-newsletter-email"
                                    >
                                        {newsletterEmailLabel}
                                    </label>

                                    <div class="relative min-w-0 flex-1">
                                        <span class="icon-[lucide--mail] pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" ></span>

                                        <input
                                            id="footer-newsletter-email"
                                            name="{newsletterEmailName}"
                                            type="email"
                                            autocomplete="email"
                                            required
                                            bind:value="email"
                                            placeholder="{newsletterPlaceholder}"
                                            class="h-12 w-full rounded-xl border border-transparent bg-transparent pl-11 pr-4 text-sm text-slate-950 outline-none transition placeholder:text-slate-400 focus:border-indigo-300 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 dark:text-white dark:focus:border-indigo-500/30 dark:focus:bg-slate-900"
                                        />
                                    </div>

                                    <button
                                        type="submit"
                                        class="group inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 text-sm font-bold text-white shadow-lg shadow-indigo-600/20 transition hover:-translate-y-0.5 hover:bg-indigo-500 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900"
                                    >
                                        {newsletterButtonLabel}

                                        <span class="icon-[lucide--arrow-right] h-4 w-4 transition-transform group-hover:translate-x-1" aria-hidden="true" ></span>
                                    </button>
                                </div>
                            </form>

                            <p class="mt-3 flex items-start gap-2 text-xs leading-5 text-slate-500 dark:text-slate-400">
                                <span class="icon-[lucide--shield-check] mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" ></span>

                                {newsletterFinePrintPrefix}
                                <a
                                    href="{newsletterPrivacyHref}"
                                    class="font-semibold text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                                >
                                    {newsletterPrivacyLabel}
                                </a>{newsletterFinePrintSuffix}
                            </p>

                            <div
                                data-show="newsletterSubmitted"
                                role="status"
                                class="mt-3 flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
                            >
                                <span class="icon-[lucide--circle-check] h-4 w-4 shrink-0" aria-hidden="true" ></span>

                                {newsletterSuccessMessage}
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Main footer -->
                <div class="mt-12 grid gap-10 lg:grid-cols-[minmax(16rem,1.25fr)_minmax(0,3fr)] lg:gap-16">

                    <!-- Brand -->
                    <div>
                        <a
                            href="{homeHref}"
                            aria-label="{brandAriaLabel}"
                            class="group inline-flex items-center gap-3 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
                        >
                            <span
                                class="grid h-11 w-11 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20 transition group-hover:-translate-y-0.5 group-hover:bg-indigo-500"
                            >
                                <span class="{brandIcon} h-5 w-5" aria-hidden="true" ></span>
                            </span>

                            <span>
                                <span class="block text-lg font-bold tracking-tight text-slate-950 dark:text-white">
                                    {brandName}
                                </span>

                                <span
                                    class="block text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"
                                >
                                    {brandTagline}
                                </span>
                            </span>
                        </a>

                        <p class="mt-5 max-w-sm text-sm leading-6 text-slate-600 dark:text-slate-400">
                            {brandDescription}
                        </p>

                        <div data-show="showStatus" class="mt-6 flex flex-wrap items-center gap-2">
                            <a
                                href="{statusHref}"
                                class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300 dark:hover:border-emerald-500/30"
                            >
                                <span class="relative flex h-2 w-2">
                                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span>
                                    <span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                                </span>

                                {statusLabel}
                            </a>
                        </div>

                        <!-- Social links -->
                        <div data-show="showSocialLinks" class="mt-6 flex items-center gap-2">
                            {#if socialLinks.length > 0}
                            {#each socialLinks as item}
                            <a href="{item.href}" target="{item.target || '_blank'}" rel="noopener noreferrer" aria-label="{item.ariaLabel || item.label}" class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"><span class="{item.icon || 'icon-[lucide--external-link]'} h-4.5 w-4.5" aria-hidden="true"></span><span class="sr-only">{item.label}</span></a>
                            {/each}
                            {:else}
                            <a
                                href="https://github.com/wrnexus"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="WrNexus on GitHub"
                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
                            >
                                <span class="icon-[lucide--github] h-4.5 w-4.5" aria-hidden="true" ></span>
                            </a>

                            <a
                                href="https://www.linkedin.com/company/wrnexus"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="WrNexus on LinkedIn"
                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
                            >
                                <span class="icon-[lucide--linkedin] h-4.5 w-4.5" aria-hidden="true" ></span>
                            </a>

                            <a
                                href="https://x.com/wrnexus"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="WrNexus on X"
                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
                            >
                                <span class="icon-[lucide--twitter] h-4.5 w-4.5" aria-hidden="true" ></span>
                            </a>

                            <a
                                href="https://www.youtube.com/@wrnexus"
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label="WrNexus on YouTube"
                                class="grid h-10 w-10 place-items-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:border-indigo-300 hover:text-indigo-700 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:border-indigo-500/30 dark:hover:text-indigo-300"
                            >
                                <span class="icon-[lucide--youtube] h-4.5 w-4.5" aria-hidden="true" ></span>
                            </a>
                            {/if}
                        </div>
                    </div>

                    <!-- Navigation columns -->
                    <nav
                        aria-label="{navigationAriaLabel}"
                        class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 xl:grid-cols-5"
                    >
                        <slot name="navigation">
                        {#if navigationColumns.length > 0}
                        {#each navigationColumns as column}
                        <div><h3 class="text-sm font-bold text-slate-950 dark:text-white">{column.title}</h3><ul class="mt-4 space-y-3">{#each column.links as item}<li><a href="{item.href}" target="{item.target || '_self'}" aria-label="{item.ariaLabel || item.label}" class="footer-link">{item.label}</a></li>{/each}</ul></div>
                        {/each}
                        {:else}
                        <!-- Product -->
                        <div>
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
                                Product
                            </h3>

                            <ul class="mt-4 space-y-3">
                                <li>
                                    <a
                                        href="/platform"
                                        class="footer-link"
                                    >
                                        Platform
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/authentication"
                                        class="footer-link"
                                    >
                                        Authentication
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/user-management"
                                        class="footer-link"
                                    >
                                        User management
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/organizations"
                                        class="footer-link"
                                    >
                                        Organizations
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/authorization"
                                        class="footer-link"
                                    >
                                        Authorization
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/enterprise-sso"
                                        class="footer-link"
                                    >
                                        Enterprise SSO
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- Solutions -->
                        <div>
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
                                Solutions
                            </h3>

                            <ul class="mt-4 space-y-3">
                                <li>
                                    <a
                                        href="/solutions/startups"
                                        class="footer-link"
                                    >
                                        Startups
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/solutions/saas"
                                        class="footer-link"
                                    >
                                        SaaS
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/solutions/enterprise"
                                        class="footer-link"
                                    >
                                        Enterprise
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/solutions/developers"
                                        class="footer-link"
                                    >
                                        Developers
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/solutions/agencies"
                                        class="footer-link"
                                    >
                                        Agencies
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/solutions/b2b"
                                        class="footer-link"
                                    >
                                        B2B
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- Developers -->
                        <div>
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
                                Developers
                            </h3>

                            <ul class="mt-4 space-y-3">
                                <li>
                                    <a
                                        href="/docs"
                                        class="footer-link"
                                    >
                                        Documentation
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/docs/api"
                                        class="footer-link"
                                    >
                                        API reference
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/sdks"
                                        class="footer-link"
                                    >
                                        SDKs
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/examples"
                                        class="footer-link"
                                    >
                                        Examples
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/docs/webhooks"
                                        class="footer-link"
                                    >
                                        Webhooks
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/changelog"
                                        class="footer-link"
                                    >
                                        Changelog
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- Resources -->
                        <div>
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
                                Resources
                            </h3>

                            <ul class="mt-4 space-y-3">
                                <li>
                                    <a
                                        href="/blog"
                                        class="footer-link"
                                    >
                                        Blog
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/guides"
                                        class="footer-link"
                                    >
                                        Guides
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/customers"
                                        class="footer-link"
                                    >
                                        Customers
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/help"
                                        class="footer-link"
                                    >
                                        Help center
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/security"
                                        class="footer-link"
                                    >
                                        Security
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/trust"
                                        class="footer-link"
                                    >
                                        Trust center
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- Company -->
                        <div>
                            <h3 class="text-sm font-bold text-slate-950 dark:text-white">
                                Company
                            </h3>

                            <ul class="mt-4 space-y-3">
                                <li>
                                    <a
                                        href="/about"
                                        class="footer-link"
                                    >
                                        About
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/careers"
                                        class="footer-link"
                                    >
                                        Careers
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/partners"
                                        class="footer-link"
                                    >
                                        Partners
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/contact"
                                        class="footer-link"
                                    >
                                        Contact
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/pricing"
                                        class="footer-link"
                                    >
                                        Pricing
                                    </a>
                                </li>

                                <li>
                                    <a
                                        href="/status"
                                        class="footer-link"
                                    >
                                        Status
                                    </a>
                                </li>
                            </ul>
                        </div>
                        {/if}
                        </slot>
                    </nav>
                </div>

                <!-- Bottom bar -->
                <div
                    class="mt-12 flex flex-col gap-5 border-t border-slate-200 pt-6 dark:border-white/10 lg:flex-row lg:items-center lg:justify-between"
                >
                    <div
                        class="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:gap-4"
                    >
                        <p>
                            {copyrightText}
                        </p>

                        <span class="hidden h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700 sm:block"></span>

                        <p>
                            {attributionText}
                        </p>
                    </div>

                    <div class="flex flex-wrap items-center gap-x-5 gap-y-3">
                        {#if legalLinks.length > 0}
                        {#each legalLinks as item}<a href="{item.href}" target="{item.target || '_self'}" class="footer-bottom-link">{item.label}</a>{/each}
                        {:else}
                        <a
                            href="/privacy"
                            class="footer-bottom-link"
                        >
                            Privacy
                        </a>

                        <a
                            href="/terms"
                            class="footer-bottom-link"
                        >
                            Terms
                        </a>

                        <a
                            href="/cookies"
                            class="footer-bottom-link"
                        >
                            Cookies
                        </a>

                        <a
                            href="/legal"
                            class="footer-bottom-link"
                        >
                            {legalTitle}
                        </a>
                        {/if}

                        <button data-show="showCookiePreferences"
                            type="button"
                            data-open-cookie-preferences
                            class="footer-bottom-link"
                        >
                            {cookiePreferencesLabel}
                        </button>

                        <button data-show="showThemeToggle"
                            type="button"
                            data-wire-theme-toggle
                            aria-label="{themeToggleLabel}"
                            title="{themeToggleLabel}"
                            class="inline-flex items-center gap-2 rounded-lg text-xs font-semibold text-slate-500 transition hover:text-indigo-700 dark:text-slate-400 dark:hover:text-indigo-300"
                        >
                            <span class="icon-[lucide--moon] h-3.5 w-3.5 dark:hidden" aria-hidden="true" ></span>

                            <span class="icon-[lucide--sun] hidden h-3.5 w-3.5 dark:block" aria-hidden="true" ></span>

                            {themeLabel}
                        </button>
                    </div>
                </div>
            </div>
        </footer>
    }
}