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 } from "../lib/payload";

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 testimonials = await getTestimonials("todo-cards");
  const { isEnabled: isPreview } = await draftMode();

  return (
    <>
      <main className="flex flex-col flex-1">
        <TodoKartenHero />
        <HowItWorks />
        <Focus />
        {isPreview ? (
          <LiveTestimonialsGrid testimonials={testimonials} />
        ) : (
          <TestimonialsGrid testimonials={testimonials} />
        )}
        <Pricing />
      </main>
      <Footer />
    </>
  );
}