import type { Metadata } from "next";
import { draftMode } from "next/headers";
import { TodoKartenHero } from "./components/TodoKartenHero";
import { HowItWorks } from "./components/HowItWorks";
import { Focus } from "./components/Focus";
import { Pricing } from "./components/Pricing";
import { Footer } from "../components/Footer";
import { TestimonialsGrid } from "../components/TestimonialsGrid";
import { LiveTestimonialsGrid } from "../components/LiveTestimonialsGrid";
import { getTestimonials, getProductBySlug, getCompanySettings } from "../lib/payload";
import { buildProductSchema } from "../lib/structuredData";

const title = "ToDo-Karten – Kleine Karten. Große Wirkung.";
const description =
  "Ein einfaches Werkzeug, das dir hilft, deinen Kopf frei zu bekommen und das Wesentliche zu sehen. 50 hochwertige ToDo-Karten für mehr Fokus im Alltag.";

export const metadata: Metadata = {
  title,
  description,
  alternates: {
    canonical: "/todo-cards",
  },
  openGraph: {
    title,
    description,
    url: "/todo-cards",
    images: ["/hero-todo-karten.png"],
  },
  twitter: {
    title,
    description,
    images: ["/hero-todo-karten.png"],
  },
};

export default async function TodoCardsPage() {
  const { isEnabled: isPreview } = await draftMode();
  const [testimonials, product, seller] = await Promise.all([
    getTestimonials("todo-cards", { draft: isPreview }),
    getProductBySlug("todo-karten"),
    getCompanySettings(),
  ]);
  const productSchema = product ? buildProductSchema(product, "https://einfach-produktiv.mk360.de/todo-cards", seller) : null;

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