Quick Jump Dock

---
/**
 * QuickJumpDock — Floating desktop navigation dock bar with hover magnification and tooltips.
 * 
 * @param {Array<{label: string, icon: string, href: string}>} items - List of dock actions.
 */
interface Props {
  items?: Array<{ label: string; icon: string; href: string }>;
}

const {
  items = [
    {
      label: 'Home',
      href: '/',
      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
    },
    {
      label: 'Components',
      href: '/docs/glass-button',
      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>`,
    },
    {
      label: 'Sections',
      href: '/sections',
      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>`,
    },
    {
      label: 'Search',
      href: '#search',
      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
    },
    {
      label: 'GitHub',
      href: 'https://github.com/konstantinWDK/astro-components',
      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/></svg>`,
    },
  ],
} = Astro.props;
---

<nav class="quick-dock" aria-label="Quick dock navigation" data-dock>
  {items.map((item) => (
    <a href={item.href} class="quick-dock__item" aria-label={item.label}>
      <span class="quick-dock__tooltip" aria-hidden="true">{item.label}</span>
      <span class="quick-dock__icon" set:html={item.icon} />
    </a>
  ))}
</nav>

<style>
  .quick-dock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(14, 14, 18, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-full, 9999px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .quick-dock__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--c-text-2, #a3a3a3);
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease;
  }

  .quick-dock__item:hover {
    transform: translateY(-8px) scale(1.15);
    background: rgba(184, 134, 11, 0.2);
    border-color: rgba(184, 134, 11, 0.4);
    color: var(--c-primary-light, #d4a017);
  }

  .quick-dock__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-dock__tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    padding: 4px 10px;
    background: #000000;
    color: #ffffff;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .quick-dock__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
  }

  .quick-dock__item:hover .quick-dock__tooltip {
    opacity: 1;
    transform: translateY(0);
  }
</style>