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

import { SiteHeader } from "@/components/invite/site-header"
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"

export function HeroSection({ content }: { content: InvitePageContent["hero"] }) {
  return (
    <section id="top" className="relative isolate flex min-h-screen items-end overflow-hidden bg-wedding-ink text-wedding-white">
      <Image className="object-cover wedding-layout:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
      <Image className="hidden object-cover wedding-layout:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
      <div className="absolute inset-0 bg-gradient-to-r from-wedding-ink/75 via-wedding-ink/30 to-transparent" />
      <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-wedding-ink/65 to-transparent" />
      <SiteHeader />
      <div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop wedding-layout:pb-24">
        <p className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label">{content.eyebrow}</p>
        <h1 className="wedding-display-heading mt-6 max-w-5xl text-wedding-hero leading-none text-wedding-white">
          {content.title}
        </h1>
        <p className="mt-5 font-wedding-display text-wedding-medium italic">{content.subtitle}</p>
        <Link className="mt-14 inline-flex flex-col items-center gap-2 font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label" href="#introduction">
          Scroll <span aria-hidden="true">↓</span>
        </Link>
      </div>
    </section>
  )
}