import { Button } from '@/Components/ui';
import CookieConsentBanner from '@/marketing/CookieConsentBanner';
import { useForceLightTheme } from '@/lib/theme';
import type { CmsLink, FooterConfig, HeaderConfig } from '@/marketing/cms-types';
import { PremiumKitGateModal } from '@/marketing/PremiumKitGateModal';
import { SafeCmsLink } from '@/marketing/safe-cms-link';
import type { SharedProps } from '@/types/inertia';
import { Link, usePage } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import { ArrowRight, Menu, X } from 'lucide-react';
import { type MouseEvent, type ReactNode, useState } from 'react';

/* Shared marketing-surface primitives. Imported by `/` (Welcome) and
 * `/templates` (Templates), and any future marketing page so the Anthropic
 * brand + Laravel grid architecture stay consistent across pages. */

/**
 * "Use this kit" CTA wiring. Three branches:
 *   - Anon visitor: `/register?kit=X` (marketing funnel handoff).
 *   - Logged-in free user, premium kit: opens the `PremiumKitGateModal`
 *     instead of silently sending them to /pricing — the older behavior
 *     left users confused about why the click "did nothing" beyond a URL
 *     change. The modal explains the gate + offers an explicit upgrade
 *     CTA into /pricing.
 *   - Logged-in user, otherwise: `/projects?kit=X` (auto-opens the
 *     create modal pre-populated with the kit).
 *
 * Returns `{ href, onClick, modal }` so callers can render a single
 * `<Link>` regardless of branch + drop `{modal}` in the same JSX tree.
 * The modal is `null` when no gate fires (anon visitors + Pro users).
 *
 * Shared between KitGridSection (/templates) and TemplatesTeaserSection
 * (home).
 */
export function useKitCta(
    kit: { key: string; name: string; is_premium?: boolean },
): {
    href: string;
    // Widened to `Element` so the result drops cleanly onto Inertia's
    // `<Link onClick>` which types its event as `MouseEvent<Element>`. We
    // only read `preventDefault()` off the event, which lives on the
    // base interface — no anchor-specific properties are touched.
    onClick?: (e: MouseEvent<Element>) => void;
    modal: ReactNode;
} {
    const auth = usePage<SharedProps>().props.auth;
    const [gateOpen, setGateOpen] = useState(false);

    if (!auth.user) {
        return {
            href: `/register?kit=${encodeURIComponent(kit.key)}`,
            modal: null,
        };
    }

    const isGated = !!(kit.is_premium && !auth.user.can_use_premium_kits);
    if (!isGated) {
        return {
            href: `/projects?kit=${encodeURIComponent(kit.key)}`,
            modal: null,
        };
    }

    return {
        // Fallback href points at /pricing so middle-click / right-click /
        // "copy link" still lands somewhere useful. The onClick preempts
        // the navigation for normal left-clicks and opens the gate modal
        // in-place.
        href: '/pricing',
        onClick: (e) => {
            e.preventDefault();
            setGateOpen(true);
        },
        modal: (
            <PremiumKitGateModal
                open={gateOpen}
                onClose={() => setGateOpen(false)}
                kitName={kit.name}
            />
        ),
    };
}

/* Subtle scroll-driven fade + soft upward translate. Wraps a block so it
 * eases in as the user scrolls it into view. `once: true` so the animation
 * only plays the first time the element enters — no replays on scroll-back.
 * Respects `prefers-reduced-motion`. */
export function Reveal({
    children,
    delay = 0,
    y = 16,
}: {
    children: React.ReactNode;
    delay?: number;
    y?: number;
}) {
    const reduced = useReducedMotion();
    if (reduced) {
        return <>{children}</>;
    }
    return (
        <motion.div
            initial={{ opacity: 0, y }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.15, margin: '-60px' }}
            transition={{
                duration: 0.6,
                delay,
                ease: [0.16, 1, 0.3, 1],
            }}
        >
            {children}
        </motion.div>
    );
}

/* Tiny accent-orange `+` glyph placed at major grid intersections.
 * Mirrors the architectural registration-mark detail on laravel.com.
 * `breakpoint='lg'` hides the marker below lg — used for internal grid
 * divider intersections that only exist at the wider layout. */
export function CrossMark({
    className = '',
    breakpoint = 'md',
}: {
    className?: string;
    breakpoint?: 'md' | 'lg';
}) {
    const visibility = breakpoint === 'lg' ? 'lg:block' : 'md:block';
    return (
        <svg
            aria-hidden
            viewBox="0 0 12 12"
            className={`ms-cross pointer-events-none absolute z-10 hidden h-3 w-3 -translate-x-1/2 -translate-y-1/2 text-accent ${visibility} ${className}`}
            fill="currentColor"
        >
            <rect x="5.25" y="0" width="1.5" height="12" />
            <rect x="0" y="5.25" width="12" height="1.5" />
        </svg>
    );
}

/* Inline brand glyphs — lucide dropped brand icons in v1+, and inlining
 * keeps them themable via currentColor without extra deps. Sized to sit
 * inline with display-serif heading copy. */
export function AppleMark() {
    return (
        <svg
            viewBox="0 0 384 512"
            aria-label="Apple"
            className="mx-1 inline-block h-[0.85em] w-[0.85em] translate-y-[-0.06em] align-middle"
            fill="currentColor"
        >
            <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
        </svg>
    );
}

export function PlayMark() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-label="Google Play"
            className="mx-1 inline-block h-[0.85em] w-[0.85em] translate-y-[-0.06em] align-middle"
            fill="currentColor"
        >
            <path d="M3.61 1.81L13.43 12 3.61 22.19c-.36-.27-.61-.71-.61-1.24V3.05c0-.53.25-.97.61-1.24zM14.45 13.02l2.56 2.56-9.15 5.2 6.59-7.76zM17.78 11.03l2.78 1.58c.49.28.49.73 0 1.01l-2.78 1.58-2.53-2.09 2.53-2.08zM7.86 3.22l9.15 5.2-2.56 2.56-6.59-7.76z" />
        </svg>
    );
}

/* Sticky marketing-surface nav. Logo on the left, Templates + Pricing
 * mid-nav (md+), Sign-in + CTA on the right. Below md the mid-nav links
 * collapse into a hamburger panel that slides down. Below sm the CTA in
 * the nav row also collapses into the panel so logo + hamburger don't
 * overlap on phone widths. */
export function Nav({
    siteName,
    authed,
    branding,
    nav,
}: {
    siteName: string;
    authed: boolean;
    branding: SharedProps['branding'];
    nav: HeaderConfig;
}) {
    // Marketing chrome always renders in light mode; dark theme is scoped to
    // dashboard / editor / admin surfaces. AppNav restores the user's saved
    // preference on the way back in.
    useForceLightTheme();
    const [menuOpen, setMenuOpen] = useState(false);
    const closeMenu = () => setMenuOpen(false);
    const links = nav.links.filter((l) => l.enabled);

    // Active-link detection. Strip the query string so /pricing?switch=1
    // still highlights "Pricing". Exact-match the link href to the current
    // path; external links never highlight (they're off-site).
    const page = usePage();
    const currentPath = (page.url ?? '').split('?')[0] ?? '';
    const isActive = (href: string): boolean => {
        if (! href.startsWith('/')) return false;
        const linkPath = href.split('?')[0] ?? '';
        return linkPath === currentPath;
    };
    const linkClass = (href: string, external: boolean | undefined): string => {
        const base = 'text-sm transition-colors';
        if (external) return `${base} text-muted-foreground hover:text-foreground`;
        return isActive(href)
            ? `${base} font-medium text-foreground`
            : `${base} text-muted-foreground hover:text-foreground`;
    };

    return (
        <header className="sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur">
            <nav className="ms-nav mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-0">
                <Link href="/" className="flex items-center gap-2" onClick={closeMenu}>
                    {branding?.logo_url ? (
                        <img
                            src={branding.logo_url}
                            alt={siteName}
                            className="h-7 w-auto"
                        />
                    ) : (
                        <span className="font-display text-lg font-semibold tracking-tight">
                            {siteName}
                        </span>
                    )}
                </Link>
                <div className="hidden items-center gap-8 md:flex">
                    {links.map((link) => {
                        const active = ! link.external && isActive(link.href);
                        return link.external ? (
                            <a
                                key={link.id}
                                href={link.href}
                                target="_blank"
                                rel="noopener noreferrer"
                                className={linkClass(link.href, true)}
                            >
                                {link.label}
                            </a>
                        ) : (
                            <Link
                                key={link.id}
                                href={link.href}
                                className={linkClass(link.href, false)}
                                aria-current={active ? 'page' : undefined}
                            >
                                {link.label}
                            </Link>
                        );
                    })}
                </div>
                <div className="flex items-center gap-3">
                    {authed ? (
                        <Link href="/projects" className="hidden sm:inline-flex">
                            <Button size="sm">
                                Open dashboard
                                <ArrowRight className="h-3.5 w-3.5" />
                            </Button>
                        </Link>
                    ) : (
                        <>
                            <Link
                                href="/login"
                                className="hidden text-sm text-muted-foreground transition-colors hover:text-foreground sm:inline"
                            >
                                Sign in
                            </Link>
                            <Link href="/register" className="hidden sm:inline-flex">
                                <Button size="sm">
                                    Start free
                                    <ArrowRight className="h-3.5 w-3.5" />
                                </Button>
                            </Link>
                        </>
                    )}
                    <button
                        type="button"
                        onClick={() => setMenuOpen((v) => !v)}
                        className="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-card md:hidden"
                        aria-label={menuOpen ? 'Close menu' : 'Open menu'}
                        aria-expanded={menuOpen}
                    >
                        <span className="relative inline-flex h-5 w-5 items-center justify-center">
                            <Menu
                                className={`absolute h-5 w-5 transition-all duration-200 ease-out ${
                                    menuOpen
                                        ? 'rotate-90 scale-75 opacity-0'
                                        : 'rotate-0 scale-100 opacity-100'
                                }`}
                            />
                            <X
                                className={`absolute h-5 w-5 transition-all duration-200 ease-out ${
                                    menuOpen
                                        ? 'rotate-0 scale-100 opacity-100'
                                        : '-rotate-90 scale-75 opacity-0'
                                }`}
                            />
                        </span>
                    </button>
                </div>
            </nav>
            <div
                aria-hidden={!menuOpen}
                className={`overflow-hidden transition-[max-height,opacity] duration-300 ease-out md:hidden ${
                    menuOpen
                        ? 'max-h-96 opacity-100'
                        : 'pointer-events-none max-h-0 opacity-0'
                }`}
            >
                <div className="ms-mobile-menu border-t border-border/60 bg-background">
                    <div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-3">
                        {links.map((link) => {
                            const active = ! link.external && isActive(link.href);
                            const mobileClass =
                                'ms-mobile-link rounded-md px-3 py-3 text-base transition-colors ' +
                                (active
                                    ? 'bg-accent/10 font-medium text-accent'
                                    : 'text-foreground hover:bg-card hover:text-accent');
                            return link.external ? (
                                <a
                                    key={link.id}
                                    href={link.href}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    onClick={closeMenu}
                                    className="ms-mobile-link rounded-md px-3 py-3 text-base text-foreground transition-colors hover:bg-card hover:text-accent"
                                >
                                    {link.label}
                                </a>
                            ) : (
                                <Link
                                    key={link.id}
                                    href={link.href}
                                    onClick={closeMenu}
                                    className={mobileClass}
                                    aria-current={active ? 'page' : undefined}
                                >
                                    {link.label}
                                </Link>
                            );
                        })}
                        {!authed && (
                            <Link
                                href="/login"
                                onClick={closeMenu}
                                className="ms-mobile-link rounded-md px-3 py-3 text-base text-foreground transition-colors hover:bg-card hover:text-accent sm:hidden"
                            >
                                Sign in
                            </Link>
                        )}
                        <div className="mt-2 border-t border-border/60 pt-3 sm:hidden">
                            <Link
                                href={authed ? '/projects' : '/register'}
                                onClick={closeMenu}
                                className="block"
                            >
                                <Button size="md" className="w-full">
                                    {authed ? 'Open dashboard' : 'Start free'}
                                    <ArrowRight className="h-4 w-4" />
                                </Button>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
}

/* 4-column footer with brand + Product / Resources / Legal link columns.
 * Same architectural rails + crosshair markers as the rest of the page so
 * the grid closes cleanly at the bottom. */
export function Footer({
    siteName,
    branding,
    footer,
}: {
    siteName: string;
    branding: SharedProps['branding'];
    footer: FooterConfig;
}) {
    const columns = footer.columns
        .map((col) => ({ ...col, links: col.links.filter((l) => l.enabled) }))
        .filter((col) => col.links.length > 0);

    return (
        <>
        <footer className="ms-footer overflow-hidden border-t border-border/60 bg-card/40">
            <div className="relative mx-auto max-w-6xl border-x border-border/60 px-6 pb-6 pt-12 lg:px-8 lg:pt-14">
                <CrossMark className="left-0 top-0" />
                <CrossMark className="left-full top-0" />
                <CrossMark className="left-0 top-full" />
                <CrossMark className="left-full top-full" />
                <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
                    <div>
                        {branding?.logo_url ? (
                            <>
                                <img
                                    src={branding.logo_url}
                                    alt={siteName}
                                    className="ms-footer-logo h-6 w-auto"
                                />
                                {/* Dark-footer variant — dormant (hidden) until a
                                    skin with a dark footer (Geometry) swaps it in.
                                    Only rendered when admin uploaded a distinct
                                    dark logo; otherwise the skin CSS falls back
                                    to inverting the light one. */}
                                {branding.logo_dark_url &&
                                    branding.logo_dark_url !== branding.logo_url && (
                                        <img
                                            src={branding.logo_dark_url}
                                            alt={siteName}
                                            className="ms-footer-logo-dark hidden h-6 w-auto"
                                        />
                                    )}
                            </>
                        ) : (
                            <span className="font-display text-base font-semibold tracking-tight">
                                {siteName}
                            </span>
                        )}
                        <p className="mt-5 max-w-xs text-sm leading-relaxed text-muted-foreground">
                            {footer.tagline}
                        </p>
                        <SocialLinks socials={branding?.socials} />
                    </div>
                    {columns.map((col) => (
                        <div key={col.id}>
                            <p className="text-[11px] font-semibold uppercase tracking-wider text-foreground">
                                {col.heading}
                            </p>
                            <ul className="mt-5 space-y-3">
                                {col.links.map((link) => (
                                    <FooterLink key={link.id} link={link} />
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
                <div className="mt-12 border-t border-border/60 pt-6 text-xs text-muted-foreground">
                    © {new Date().getFullYear()} {siteName}. All rights reserved.
                </div>
            </div>
        </footer>
        {/* Self-gating: renders only when the admin enabled the consent
            banner and the visitor hasn't decided. Footer is on every public
            marketing page, so this covers them all from one mount. */}
        <CookieConsentBanner />
        </>
    );
}

function FooterLink({ link }: { link: CmsLink }) {
    // Empty label = no list item. Admin's unfilled rows don't leak into
    // the rendered footer as orphan bullets.
    const label = (link.label ?? '').trim();
    if (label === '') {
        return null;
    }
    const className =
        'text-sm text-muted-foreground transition-colors hover:text-foreground';
    const href = (link.href ?? '').trim();
    // Treat protocol-prefixed + anchor + mailto as "external" so SafeCmsLink
    // skips Inertia's SPA navigation for them. Empty href → SafeCmsLink
    // renders bare children with no wrapper (no Inertia crash + no dead
    // <a href=""> that reloads the current page).
    const treatAsExternal =
        link.external ||
        href.startsWith('mailto:') ||
        href.startsWith('http://') ||
        href.startsWith('https://') ||
        href === '#';
    return (
        <li>
            <SafeCmsLink
                href={href}
                external={treatAsExternal}
                className={className}
            >
                {label}
            </SafeCmsLink>
        </li>
    );
}

/* Social row for the footer brand column. URLs come from admin Settings
 * via `branding.socials`. Icons whose URL is null/empty are filtered out
 * so partial-fill (e.g. only X + GitHub configured) renders cleanly with
 * no dead links visible to visitors. The whole row hides if zero socials
 * are configured. `flex-wrap` lets the row break to a second line if the
 * brand column ever narrows below the icons' combined width. */
function SocialLinks({
    socials,
}: {
    socials: SharedProps['branding']['socials'] | undefined;
}) {
    const entries: Array<{
        label: string;
        href: string;
        icon: () => React.ReactNode;
    }> = [
        { label: 'X (Twitter)', href: socials?.twitter ?? '', icon: XGlyph },
        { label: 'Instagram', href: socials?.instagram ?? '', icon: InstagramGlyph },
        { label: 'Facebook', href: socials?.facebook ?? '', icon: FacebookGlyph },
        { label: 'YouTube', href: socials?.youtube ?? '', icon: YoutubeGlyph },
        { label: 'LinkedIn', href: socials?.linkedin ?? '', icon: LinkedinGlyph },
        { label: 'GitHub', href: socials?.github ?? '', icon: GithubGlyph },
    ];
    const filled = entries.filter((s) => s.href.trim() !== '');

    if (filled.length === 0) {
        return null;
    }

    return (
        <ul className="mt-6 flex flex-wrap items-center gap-2">
            {filled.map(({ label, href, icon: Icon }) => (
                <li key={label}>
                    <a
                        href={href}
                        aria-label={label}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:border-accent/40 hover:bg-background hover:text-accent"
                    >
                        <Icon />
                    </a>
                </li>
            ))}
        </ul>
    );
}

function XGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-4 w-4"
            fill="currentColor"
        >
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>
    );
}

function GithubGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-[18px] w-[18px]"
            fill="currentColor"
        >
            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
        </svg>
    );
}

function LinkedinGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-[18px] w-[18px]"
            fill="currentColor"
        >
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
        </svg>
    );
}

function InstagramGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-[18px] w-[18px]"
            fill="currentColor"
        >
            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
        </svg>
    );
}

function FacebookGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-[18px] w-[18px]"
            fill="currentColor"
        >
            <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
        </svg>
    );
}

function YoutubeGlyph() {
    return (
        <svg
            viewBox="0 0 24 24"
            aria-hidden
            className="h-[18px] w-[18px]"
            fill="currentColor"
        >
            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
        </svg>
    );
}
