import Image from "next/image";
import Link from "next/link";

const PROMO_IMG_LEFT =
  "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=80&auto=format&fit=crop";
const PROMO_IMG_RIGHT =
  "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&q=80&auto=format&fit=crop";

const appleNav = [
  "Loja",
  "Mac",
  "iPad",
  "iPhone",
  "Watch",
  "AirPods",
  "TV e Casa",
  "Entretenimento",
  "Acessórios",
  "Suporte",
];

function AppleLogo({ className }: { className?: string }) {
  return (
    <svg aria-hidden className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
    </svg>
  );
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 15 15" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="6.5" cy="6.5" r="5" />
      <path d="M10 10l3.5 3.5" strokeLinecap="round" />
    </svg>
  );
}

function BagIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" strokeLinejoin="round" />
    </svg>
  );
}

export function TvoneHeader() {
  return (
    <header className="w-full">
      <nav
        className="flex h-11 items-center justify-center gap-1 bg-[#1d1d1f] px-4 text-[12px] font-normal text-[#f5f5f7] md:gap-2 md:text-[13px]"
        aria-label="Navegação principal"
      >
        <div className="flex w-full max-w-[980px] items-center justify-between gap-2">
          <Link href="/" className="opacity-90 hover:opacity-100" aria-label="Apple">
            <AppleLogo className="h-5 w-5 text-white md:h-[22px] md:w-[22px]" />
          </Link>
          <ul className="hidden flex-1 items-center justify-center gap-4 lg:flex xl:gap-6">
            {appleNav.map((item) => (
              <li key={item}>
                <Link href="#" className="whitespace-nowrap opacity-90 hover:opacity-100">
                  {item}
                </Link>
              </li>
            ))}
          </ul>
          <div className="flex items-center gap-5">
            <button type="button" className="opacity-90 hover:opacity-100" aria-label="Pesquisar">
              <SearchIcon className="text-white" />
            </button>
            <button type="button" className="opacity-90 hover:opacity-100" aria-label="Sacola">
              <BagIcon className="text-white" />
            </button>
          </div>
        </div>
      </nav>

      <div className="relative flex min-h-[148px] w-full overflow-hidden bg-[#9d1f55] text-white sm:min-h-[180px] md:min-h-[204px] lg:min-h-[228px]">
        <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
          <Image
            src={PROMO_IMG_LEFT}
            alt="Mulher em atividade ao ar livre"
            fill
            className="object-cover object-[center_28%]"
            sizes="(max-width: 640px) 28vw, 300px"
            priority
          />
          <div
            className="absolute inset-0 bg-gradient-to-r from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
            aria-hidden
          />
        </div>

        <div className="relative z-[1] flex min-w-0 flex-1 flex-col justify-center gap-3 bg-gradient-to-r from-[#b8326a] via-[#d9468f] to-[#b8326a] px-4 py-6 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-7 sm:py-7 md:gap-10 md:px-9 md:py-8 lg:px-10">
          <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:gap-5 md:gap-9">
            <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/95 sm:text-xs">
              Nossa Seguros
            </span>
            <p className="text-pretty text-sm font-medium leading-relaxed text-white sm:text-base md:text-lg lg:max-w-[40rem] lg:leading-relaxed">
              Seguro Saúde Mulher — cuidado que acompanha o seu ritmo.
            </p>
          </div>
          <div className="flex shrink-0 items-center gap-4 text-white/95 sm:pl-2">
            <span className="sr-only">Redes sociais</span>
            <Link href="#" className="text-sm hover:opacity-80" aria-label="Facebook">
              f
            </Link>
            <Link href="#" className="text-sm hover:opacity-80" aria-label="LinkedIn">
              in
            </Link>
            <Link href="#" className="text-sm hover:opacity-80" aria-label="Instagram">
              ◎
            </Link>
          </div>
        </div>

        <div className="relative w-[22%] min-w-[80px] max-w-[300px] shrink-0 sm:w-[24%] md:w-[26%]">
          <Image
            src={PROMO_IMG_RIGHT}
            alt="Bem-estar e cuidados de saúde"
            fill
            className="object-cover object-[center_38%]"
            sizes="(max-width: 640px) 28vw, 300px"
            priority
          />
          <div
            className="absolute inset-0 bg-gradient-to-l from-black/35 from-[8%] via-[#b8326a]/88 via-[55%] to-[#b8326a]"
            aria-hidden
          />
        </div>
      </div>

      <div className="border-b border-[#0066cc]/20 bg-[#0066cc] py-2">
        <div className="mx-auto flex max-w-[1200px] items-center gap-3 px-4">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white text-sm font-bold tracking-tight text-[#0066cc]">
            tv
          </div>
          <span className="text-lg font-semibold tracking-tight text-white">tvone</span>
        </div>
      </div>
    </header>
  );
}