// pages/demo.jsx
import React from "react";
import FontCard from "@/components/ui/FontCard";       // Default‑Import
import { fonts } from "@/lib/fonts";

export default function Demo() {
  // Absicherung gegen undefined beim SSR
  const robotoClass = fonts.roboto?.className || "";

  return (
    <section className="space-y-8 p-8">
      {/* 1. next/font (voll integriert) */}
      <h2 className={`${robotoClass} text-4xl`}>
        Roboto aus next/font
      </h2>

      {/* 2. Tailwind‑Utility aus Map */}
      <p className="font-montserrat text-xl">
        Dieselbe Font via <code>font-montserrat</code>
      </p>

      {/* 3. Deine Preview‑Komponente */}
      <FontCard
        fontName="Pacifico"
        transformedText="Hallo Instagram!"
        category="handwriting"
        isPopular
        index={0}
      />
    </section>
  );
}