import Link from "next/link"

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 FaqSection({ content }: { content: InvitePageContent["faq"] }) {
  return (
    <section id="faq" className="bg-wedding-ivory pt-wedding-section">
      <WeddingContainer>
        <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
        <div className="mt-14 grid gap-x-12 max-w-3xl mx-auto">
          {content.questions.map((item) => <details className="group border-b border-wedding-line py-6" key={item.question}><summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-wedding-display text-wedding-medium"><span>{item.question}</span><span className="font-wedding-ui text-wedding-label text-wedding-terracotta transition-transform group-open:rotate-45">+</span></summary><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{item.answer}</p></details>)}
        </div>
        <aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-md:flex-row wedding-md:items-center wedding-md:justify-between wedding-md:p-12">
          <div><h3 className="font-wedding-display text-wedding-medium">{content.contact.heading}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{content.contact.description}</p></div>
          <Link className="wedding-text-link" href="mailto:hello@example.com">{content.contact.action} →</Link>
        </aside>
      </WeddingContainer>
    </section>
  )
}