import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ProductBlocks } from "../components/ProductBlocks";
import { Footer } from "../components/Footer";
import { getProductBySlug, getCompanySettings } from "../lib/payload";
import { buildProductSchema } from "../lib/structuredData";

const title = "Einfach anfangen. – Die Karte für die Dinge, die heute anstehen.";

// Description reads from the live product, same pattern as der-eine/
// tasse-die-pause — see der-eine/page.tsx's own comment on why this and
// the hand-written Hero prose are allowed to differ.
export async function generateMetadata(): Promise<Metadata> {
  const product = await getProductBySlug("todo-starter");
  const description = product?.descriptionText || undefined;
  return {
    title,
    description,
    alternates: { canonical: "/einfach-anfangen" },
    openGraph: { title, description, url: "/einfach-anfangen" },
    twitter: { title, description },
  };
}

// First PDP driven entirely by Products.layout (see that field's own
// comment in Products.ts) instead of its own bespoke Hero/HowItWorks/
// Focus/Pricing components — those were deleted once this product's
// content was authored as blocks in the admin (see the PDP page-builder
// rollout). der-eine/todo-cards/tasse-die-pause are untouched and keep
// their own hand-coded components; nothing about them depends on this.
export default async function EinfachAnfangenPage() {
  const [product, seller] = await Promise.all([
    getProductBySlug("todo-starter"),
    getCompanySettings(),
  ]);
  if (!product) notFound();
  const productSchema = buildProductSchema(product, "https://einfach-produktiv.mk360.de/einfach-anfangen", seller);

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
      <main className="flex flex-col flex-1">
        <ProductBlocks product={product} />
      </main>
      <Footer />
    </>
  );
}