import Image from "next/image";
import Link from "next/link";
import { siteConfig } from "@/lib/site-config";

interface GuideHeaderProps {
  /** "home" links the logo to the top of this page; "page" links back to the guide. */
  variant?: "home" | "page";
}

export function GuideHeader({ variant = "home" }: GuideHeaderProps) {
  const brand = (
    <>
      <Image
        src="/images/app-icon.png"
        alt={`${siteConfig.operator} icon`}
        width={34}
        height={34}
        className="rounded-[10px] shadow-[0_4px_12px_-4px_rgba(10,132,255,0.6)] transition-shadow duration-300 group-hover:shadow-[0_6px_20px_-4px_rgba(10,132,255,0.8)]"
      />
      <span className="leading-tight">
        <span className="block text-[1.02rem] font-extrabold">{siteConfig.guideName}</span>
        <small className="block text-[0.66rem] font-semibold text-muted">
          operated by {siteConfig.operator}
        </small>
      </span>
    </>
  );

  return (
    <header className="sticky top-0 z-50 border-b border-border/60 bg-white/80 shadow-[0_1px_3px_rgba(0,0,0,0.04)] backdrop-blur-2xl">
      <div className="mx-auto w-full max-w-[1080px] px-5 md:px-7">
        <nav className="flex h-16 items-center justify-between gap-4">
          {variant === "home" ? (
            <a href="#top" className="group flex items-center gap-2.5">
              {brand}
            </a>
          ) : (
            <Link href="/" className="group flex items-center gap-2.5">
              {brand}
            </Link>
          )}

          {variant === "home" ? (
            <a
              href="#picks"
              className="rounded-[11px] bg-brand px-4 py-2.5 text-[0.88rem] font-extrabold text-white shadow-[0_8px_22px_-10px_rgba(10,132,255,0.7)] outline-none transition-all duration-200 hover:-translate-y-0.5 hover:bg-brand-hover focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2"
            >
              See picks
            </a>
          ) : (
            <Link
              href="/"
              className="text-[0.88rem] font-semibold text-brand transition-colors hover:underline"
            >
              &larr; Back to the guide
            </Link>
          )}
        </nav>
      </div>
    </header>
  );
}