import { FeatureSplit } from "@/components/invite/feature-split"
import { HeartQuote } from "@/components/invite/heart-quote"
import { SectionHeading } from "@/components/invite/section-heading"
import { WeddingContainer } from "@/components/invite/wedding-container"
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"

export function ScheduleSection({ content }: { content: InvitePageContent["schedule"] }) {
  return (
    <section id="schedule" className="bg-wedding-ivory">
      <FeatureSplit image="/images/schedule.png" alt="Wedding dinner celebration" reverse>
        <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
        <p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
      </FeatureSplit>
      <WeddingContainer className="py-wedding-section">
        <p className="wedding-section-label">{content.label}</p>
        <div className="mt-10 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-6">
          {content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-lg:border-l-0 wedding-lg:border-t wedding-lg:pt-6 wedding-lg:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-lg:-mt-8 wedding-lg:ml-0" /><p className="mt-4 wedding-section-label">{item.time}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{item.title}</h3><p className="mt-4 font-wedding-ui text-sm leading-wedding-body">{item.description}</p></article>)}
        </div>
      </WeddingContainer>
      <HeartQuote quote={content.quote} />
    </section>
  )
}