import Link from 'next/link'

type Dict = {
  header: { tagline: string }
  langSwitch: { current: string; other: string; otherHref: string }
}

export default function Header({ dict }: { dict: Dict }) {
  return (
    <header
      className="fixed top-0 left-0 right-0 z-40"
      style={{ height: 'var(--header-h)' }}
    >
      {/* Background with mesh gradient */}
      <div
        className="absolute inset-0"
        style={{
          background:
            'linear-gradient(160deg, #1F140A 0%, #2E1C10 50%, #3D2B1F 100%)',
        }}
      />

      {/* Subtle noise texture on header */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />

      {/* Animated gradient accent line at bottom */}
      <div className="header-line absolute bottom-0 left-0 right-0 h-[1.5px]" />

      <div className="relative flex items-center justify-between h-full px-5">
        {/* Logo block */}
        <div className="flex flex-col leading-none gap-0.5">
          {/* KOZMOS with shimmer */}
          <span
            className="logo-shimmer font-display font-semibold tracking-[0.2em] uppercase"
            style={{ fontSize: '1.25rem' }}
          >
            KOZMOS
          </span>

          {/* Tagline with gradient */}
          <div className="flex items-center gap-1.5">
            <span
              className="font-body font-medium tracking-[0.28em] uppercase"
              style={{
                fontSize: '0.55rem',
                background: 'linear-gradient(90deg, #4AAFA8, #C8A850, #5C8A5C)',
                backgroundClip: 'text',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
              }}
            >
              ✦ {dict.header.tagline} ✦
            </span>
          </div>
        </div>

        {/* Language switcher pill */}
        <Link
          href={dict.langSwitch.otherHref}
          className="group relative flex items-center gap-1 px-3 py-1.5 rounded-full overflow-hidden"
          style={{
            background: 'rgba(74,175,168,0.10)',
            border: '1px solid rgba(74,175,168,0.22)',
          }}
          aria-label={`Switch to ${dict.langSwitch.other}`}
        >
          {/* Hover glow */}
          <span
            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            style={{ background: 'rgba(74,175,168,0.15)' }}
          />
          <span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-white/35">
            {dict.langSwitch.current}
          </span>
          <span className="relative font-body text-[0.55rem] text-white/20">·</span>
          <span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-teal group-hover:text-white transition-colors duration-200">
            {dict.langSwitch.other}
          </span>
        </Link>
      </div>
    </header>
  )
}