import Image from "next/image"

import { SectionHeading } from "@/components/invite/section-heading"
import { WeddingContainer } from "@/components/invite/wedding-container"
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"

const expectationImages = ["/images/details_ceremony.png", "/images/details_dinner.png"]

export function DetailsSection({ content }: { content: InvitePageContent["details"] }) {
  return (
    <section id="details" className="bg-wedding-ivory">
      <WeddingContainer className="py-wedding-section">
        <div className="grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
          <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
          <div className="relative aspect-video overflow-hidden"><Image src="/images/details_main.png" alt="Luttelforster Muhle venue" fill className="object-cover" sizes="(min-width: 900px) 55vw, 90vw" /></div>
        </div>
        <div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:divide-x wedding-md:divide-y-0 wedding-md:border-y-0">
          {content.facts.map((fact, index) => <article className="py-7 wedding-md:px-6 wedding-md:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
        </div>
        <div className="mt-16 grid gap-8 wedding-md:grid-cols-2">
          {content.expectations.map((item, index) => <article key={item.label}><div className="relative aspect-video overflow-hidden"><Image src={expectationImages[index]} alt={item.label} fill className="object-cover" sizes="(min-width: 600px) 45vw, 90vw" /></div><h3 className="mt-5 font-wedding-display text-wedding-medium">{item.label}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{item.value}</p><p className="mt-1 font-wedding-ui text-sm">{item.description}</p></article>)}
        </div>
        <div className="mt-16 bg-wedding-cream p-8 wedding-md:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
        <div className="mt-16 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-5">
          {content.policies.map((policy) => <article className="border-l border-wedding-line pl-5" key={policy.title}><h3 className="font-wedding-display text-wedding-medium">{policy.title}</h3><p className="mt-3 font-wedding-ui text-sm leading-wedding-body">{policy.description}</p></article>)}
        </div>
      </WeddingContainer>
    </section>
  )
}