import PageHero from "@/components/PageHero";
import ContactForm from "@/components/ContactForm";
import { getContent } from "@/lib/content/service";
import { createContentMetadata } from "../seo";

export const dynamic = "force-dynamic";

export async function generateMetadata() {
  const content = await getContent("contact");
  return createContentMetadata(content.seo);
}

export default async function ContactPage() {
  const content = await getContent("contact");
  const contactDetails = [
    content.phone && `Telefon: ${content.phone}`,
    content.email && `E-Mail: ${content.email}`,
    content.address && `Adresse: ${content.address}`,
    content.openingHours && `Öffnungszeiten: ${content.openingHours}`,
  ].filter(Boolean);

  return (
    <>
      <PageHero eyebrow={content.eyebrow} title={content.title}>
        {content.subtitle}
      </PageHero>
      <section className="section">
        <div className="container split">
          <div>
            <h2>{content.cta.text}</h2>
            <p className="lead">{content.heroText}</p>
            {contactDetails.length > 0 && (
              <ul className="list">
                {contactDetails.map((detail) => <li key={detail}>{detail}</li>)}
              </ul>
            )}
            {content.googleMapsLink && <p><a className="button light" href={content.googleMapsLink}>Karte öffnen</a></p>}
          </div>
          <div className="panel">
            <ContactForm />
          </div>
        </div>
      </section>
    </>
  );
}