import type { Metadata } from "next";
import { Hero } from "./components/Hero";
import { HowItWorks } from "./components/HowItWorks";
import { Focus } from "./components/Focus";
import { Pricing } from "./components/Pricing";
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 },
  };
}

export default async function EinfachAnfangenPage() {
  const [product, seller] = await Promise.all([
    getProductBySlug("todo-starter"),
    getCompanySettings(),
  ]);
  const productSchema = product
    ? buildProductSchema(product, "https://einfach-produktiv.mk360.de/einfach-anfangen", seller)
    : null;

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