import Image from "next/image"

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"

const journeyImages = [
  "/images/story_journey_1.png",
  "/images/story_journey_2.png",
  "/images/story_journey_3.png",
]

export function StorySection({ content }: { content: InvitePageContent["story"] }) {
  return (
    <section id="story" className="bg-wedding-ivory">
      <FeatureSplit image="/images/our_story.png" alt="Nicole, Raul and their dog in the countryside">
        <SectionHeading eyebrow={content.eyebrow} heading={content.heading} />
        {content.paragraphs.map((paragraph) => (
          <p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body text-wedding-ink" key={paragraph}>{paragraph}</p>
        ))}
        <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">Our journey</p>
        <div className="mt-12 grid gap-10 wedding-lg:grid-cols-3">
          {content.timeline.map((item, index) => (
            <article className="border-l border-wedding-line pl-6 wedding-lg:border-l-0 wedding-lg:pl-0" key={item.year}>
              <div className="mb-5 flex items-center gap-4 wedding-lg:flex-col wedding-lg:items-start">
                <span className="size-3 rounded-full bg-wedding-terracotta" />
                <p className="wedding-section-label">{item.year}</p>
              </div>
              <div className="relative aspect-square overflow-hidden">
                <Image src={journeyImages[index]} alt={item.title} fill className="object-cover" sizes="(min-width: 900px) 30vw, 85vw" />
              </div>
              <h3 className="mt-5 font-wedding-display text-wedding-medium text-wedding-ink">{item.title}</h3>
              {item.place ? <p className="mt-1 wedding-section-label">{item.place}</p> : null}
              <p className="mt-4 font-wedding-ui text-sm leading-wedding-body text-wedding-ink">{item.description}</p>
            </article>
          ))}
        </div>
      </WeddingContainer>
      <HeartQuote quote={content.quote} />
    </section>
  )
}