import Image from "next/image";
import Link from "next/link";
import { LoginButton } from "./LoginButton";

const fullBleed = "relative right-1/2 left-1/2 -mr-[50vw] -ml-[50vw] w-screen max-[501px]:mb-0!";

/** "Pay your way with Sterling." banner. */
export function PaymentBanner() {
  return (
    <div
      id="card-benefits"
      className={`${fullBleed} scroll-mt-[30px] shadow-[0_8px_25px_rgba(0,0,0,0.12)]`}
    >
      <Image
        src="/images/benefits/payment-banner.jpeg"
        alt=""
        fill
        sizes="100vw"
        className="object-cover object-center"
      />
      <div className="absolute inset-0 bg-black/45" />
      <div className="relative mx-auto max-w-[1440px] px-[53px] pt-[90px] pb-[50px] max-[769px]:px-5 max-[769px]:py-[45px]">
        <h2 className="mb-4 text-[2.5rem] leading-[1.15] font-normal tracking-[-0.5px] text-white">
          Pay your way with Sterling.
        </h2>
        <p className="mr-auto mb-7 max-w-[680px] text-[1.05rem] leading-[1.6] font-light text-white/90">
          Access eligible security services through Sterling and pay through your 30-day settlement
          window.
        </p>
        <Link
          href="#login"
          className="inline-block rounded-[4px] border-[1.5px] border-white bg-transparent px-[30px] py-[13px] text-[0.85rem] font-semibold tracking-[1px] text-white uppercase transition-all duration-[250ms] hover:bg-white hover:text-navy hover:shadow-[0_4px_16px_rgba(255,255,255,0.3)]"
        >
          VIEW PAYMENT OPTIONS
        </Link>
      </div>
    </div>
  );
}

/** "Log in to view your membership benefits" banner. */
export function LoginBanner() {
  return (
    <section
      id="login"
      className={`${fullBleed} border-t border-black/8 text-left max-[501px]:mb-0!`}
    >
      <Image
        src="/images/benefits/login-banner.jpg"
        alt=""
        fill
        sizes="100vw"
        className="object-cover object-center"
      />
      <div className="absolute inset-0 bg-black/30" />
      <div className="relative mx-auto max-w-[1440px] px-[53px] pt-20 pb-[60px] max-[1101px]:pt-[50px] max-[1101px]:pr-10 max-[1101px]:pb-[30px] max-[1101px]:pl-[55px] max-[769px]:pl-[50px]">
        <h2 className="mb-4 max-w-[550px] text-[2.5rem] font-normal text-snow">
          Log in to view your membership benefits
        </h2>
        <p className="mb-[30px] max-w-[600px] text-[1.1rem] leading-[1.6] font-light text-snow">
          Access your full range of Sterling benefits, privileges, partner services, and available
          settlement options from your account.
        </p>
        <LoginButton />
      </div>
    </section>
  );
}