"use client";
import Image from "next/image";
import Link from "next/link";
import * as React from "react";

import { pathFor } from "@/src/domain/routes";
import IconWhite from "../assets/logo/Icon-White-Transparent.svg";
import { DecodeText } from "./bits/DecodeText";
import { ScrollBits } from "./bits/ScrollBits";
import { useContent, useLocale } from "./ContentProvider";
import { LanguageSwitch } from "./LanguageSwitch";

/** Header: the logo, the link to the freelance page, the language switch and one action. */
export const Header: React.FC = () => {
  const { nav } = useContent();
  const locale = useLocale();
  const home = pathFor("home", locale);
  const freelance = pathFor("freelance", locale);
  const [isScrolled, setIsScrolled] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header className="sticky top-0 z-[100] w-full">
      {/* Decoupled Background Layer - Prevents backdrop-filter parent context bugs */}
      <div
        className={`absolute inset-0 transition-all duration-500 -z-10 ${
          isScrolled
            ? "bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50"
            : "bg-white/80 backdrop-blur-md border-b border-slate-50"
        }`}
      />

      <div className="mx-auto w-full max-w-[1400px] px-5 md:px-12 py-4 flex items-center justify-between relative z-10">
        <Link
          href={home}
          aria-label={nav.logoLabel}
          onClick={(event) => {
            // Already on the homepage: scroll up instead of reloading the route.
            if (window.location.pathname === home) {
              event.preventDefault();
              window.scrollTo({ top: 0, behavior: "smooth" });
            }
          }}
          className="flex items-center gap-4 group"
        >
          <div className="w-10 h-10 md:w-12 md:h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0 relative overflow-hidden">
            <Image
              src={IconWhite}
              alt=""
              width={32}
              height={32}
              className="w-6 h-6 md:w-8 md:h-8 relative z-10"
            />
          </div>
        </Link>

        <ScrollBits className="hidden font-mono text-[10px] tracking-[0.3em] text-slate-400 md:block" />

        <div className="flex items-center gap-2.5 md:gap-4">
          <Link
            href={freelance}
            className="hidden font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 no-underline transition-colors duration-300 hover:text-slate-900 md:block"
          >
            {nav.freelance}
          </Link>
          <LanguageSwitch />
          <Link
            href={`${home}#contact`}
            className="bit-cta bit-cta-quiet font-sans text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full no-underline hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
            style={{
              transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
            }}
          >
            <DecodeText text={nav.contact} trigger="hover" />
          </Link>
        </div>
      </div>
    </header>
  );
};