/**
 * Titlebar: filled rectangle with angular edge cuts and knockout text.
 * The text is a transparent mask revealing the chrome background behind.
 * Uses SVG mask technique for true knockout effect.
 * pointer-events: none — the drag region is handled by WindowChrome's overlay.
 */
export function Titlebar() {
  return (
    <div
      class="fixed top-0 left-0 right-0 select-none"
      data-layer="titlebar"
      style={{ height: '36px', padding: '0', 'pointer-events': 'none', 'z-index': '8' }}
    >
      <svg
        width="100%"
        height="36"
        style={{
          display: 'block',
          'pointer-events': 'none',
          filter: 'drop-shadow(0 0 4px color-mix(in srgb, var(--hh-color-primary) 30%, transparent))',
        }}
      >
        <defs>
          <mask id="titlebar-text-mask">
            <rect width="100%" height="100%" fill="white" />
            <text
              x="20"
              y="24"
              fill="black"
              font-family="'Share Tech', sans-serif"
              font-size="14"
              font-weight="600"
              letter-spacing="0.08em"
            >
              HoloHue
            </text>
          </mask>
          <clipPath id="titlebar-shape">
            <polygon points="0,0 9999,0 9999,36 0,36" />
          </clipPath>
        </defs>
        {/* Filled bar with text knocked out — cyan fill matching glow perimeter */}
        <rect
          width="100%"
          height="36"
          fill="var(--hh-color-primary)"
          mask="url(#titlebar-text-mask)"
          clip-path="url(#titlebar-shape)"
          opacity="0.6"
        />
      </svg>
    </div>
  );
}