import Link from "next/link";

interface InformationSection {
  title: string;
  paragraphs?: string[];
  items?: string[];
}

export function InformationPage({
  eyebrow = "Informations",
  title,
  intro,
  sections,
  notice,
}: {
  eyebrow?: string;
  title: string;
  intro: string;
  sections: InformationSection[];
  notice?: string;
}) {
  return (
    <div className="min-h-screen bg-brand-cream/20 pt-20 lg:pt-24 pb-16">
      <div className="max-w-3xl mx-auto px-4 sm:px-6">
        <p className="text-sm uppercase tracking-[0.2em] text-brand-gold mb-3">{eyebrow}</p>
        <h1 className="font-serif text-4xl md:text-5xl text-brand-black mb-5">{title}</h1>
        <p className="text-brand-charcoal/75 leading-relaxed mb-8">{intro}</p>

        {notice && (
          <div className="rounded-lg border border-brand-gold/35 bg-brand-cream p-4 mb-8 text-sm text-brand-charcoal/80">
            {notice}
          </div>
        )}

        <div className="space-y-8">
          {sections.map((section) => (
            <section key={section.title}>
              <h2 className="font-serif text-2xl text-brand-black mb-3">{section.title}</h2>
              {section.paragraphs?.map((paragraph) => (
                <p key={paragraph} className="text-brand-charcoal/75 leading-relaxed mb-3">
                  {paragraph}
                </p>
              ))}
              {section.items && (
                <ul className="space-y-2 text-brand-charcoal/75 leading-relaxed list-disc pl-5">
                  {section.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              )}
            </section>
          ))}
        </div>

        <div className="mt-12 pt-8 border-t border-brand-sand">
          <Link
            href="/contact"
            className="inline-flex items-center justify-center rounded px-6 py-3 gold-gradient text-white font-medium hover:opacity-90 transition-opacity"
          >
            Nous contacter
          </Link>
        </div>
      </div>
    </div>
  );
}