import type { Metadata } from "next";
import { PageShell } from "@/components/layout/PageShell";
import { PageBody } from "@/components/content/PageBody";
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("about", { publishedOnly: true });
  return {
    title: page?.title ?? "About BhoFit",
    description: page?.excerpt || undefined,
  };
}

export default async function AboutPage() {
  const [page, settings] = await Promise.all([
    getPageBySlug("about", { publishedOnly: true }),
    getSiteSettings(),
  ]);
  const title = page?.title ?? "About BhoFit";
  const excerpt =
    page?.excerpt ||
    "Everyday clothes designed to improve daily life — women, men, kids, and baby.";
  const content =
    page?.content ||
    "BhoFit makes simple, well-made clothes: barrel jeans, cotton tees, linens, knits, and kidswear with honest prices.";

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "About" }]}
      eyebrow="Brand"
      title={title}
      description={excerpt}
      wide={false}
    >
      <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
        <Reveal>
          <article className="rounded-[1.35rem] border border-border bg-card/60 p-6 sm:p-8">
            <PageBody content={content} />
          </article>
        </Reveal>
        <Reveal>
          <aside className="rounded-[1.35rem] border border-border bg-card/70 p-6">
            <h2 className="text-lg font-semibold tracking-tight">Visit us</h2>
            <p className="mt-1 text-sm text-muted">
              Contact details managed from the admin panel.
            </p>
            <div className="mt-5">
              <StoreContactBlock settings={settings} showAddress />
            </div>
          </aside>
        </Reveal>
      </div>
    </PageShell>
  );
}