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";

/** Insurance / partner strip — scrolls away with the page (sits under top ads). */
export function TvonePromoStrip() {
  return (
    <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>
  );
}