import type { Metadata } from "next";
import { PageShell } from "@/components/layout/PageShell";
import { PageBody } from "@/components/content/PageBody";
import { ContactForm } from "@/components/content/ContactForm";
import { StoreContactBlock } from "@/components/layout/StoreContactBlock";
import { Reveal } from "@/components/motion/Reveal";
import { getPageBySlug } from "@/lib/pages";
import { getSiteSettings } from "@/lib/settings";

export async function generateMetadata(): Promise<Metadata> {
  const page = await getPageBySlug("contact", { publishedOnly: true });
  return {
    title: page?.title ?? "Contact BhoFit",
    description: page?.excerpt || undefined,
  };
}

export default async function ContactPage() {
  const [page, settings] = await Promise.all([
    getPageBySlug("contact", { publishedOnly: true }),
    getSiteSettings(),
  ]);
  const title = page?.title ?? "Contact BhoFit";
  const excerpt =
    page?.excerpt ||
    "Questions about orders, products, or partnerships? Our team typically responds within one business day.";

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "Contact" }]}
      eyebrow="Support"
      title={title}
      description={excerpt}
      wide={false}
    >
      <div className="grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
        <Reveal>
          <div className="space-y-5 rounded-[1.35rem] border border-border bg-card/70 p-6 sm:p-7">
            <div>
              <h2 className="text-lg font-semibold tracking-tight">
                Reach BhoFit
              </h2>
              <p className="mt-1 text-sm text-muted">
                Phone, email, and our store address — editable anytime from Admin
                → Settings.
              </p>
            </div>
            <StoreContactBlock settings={settings} showAddress />
            {page?.content ? (
              <div className="border-t border-border pt-5">
                <PageBody content={page.content} />
              </div>
            ) : null}
          </div>
        </Reveal>
        <Reveal>
          <ContactForm />
        </Reveal>
      </div>
    </PageShell>
  );
}