crepes-demo/app/page.tsx

"use client";

import { Renderer } from "@json-render/react";
import { registry, Provider } from "@/lib/registry";
import { recipes } from "@/lib/recipes";
import { useState, useEffect } from "react";

export default function Home() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-orange-100 via-amber-50 to-yellow-100 flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">🥞</div>
          <p className="text-gray-600 text-lg">Loading recipes...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-100 via-amber-50 to-yellow-100">
      <header className="bg-white shadow-lg sticky top-0 z-50 border-b-4 border-orange-400">
        <div className="container mx-auto px-4 py-6">
          <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-600 text-center">
            🥞 Les Crêpes de Maîtres
          </h1>
          <p className="text-center text-gray-600 mt-2 text-lg">
            Famous French Chefs&apos; Crêpe Recipes
          </p>
          <p className="text-center text-gray-500 mt-1 text-sm">
            Powered by <span className="font-mono font-semibold">json-render</span> ✨
          </p>
        </div>
      </header>

      <main className="container mx-auto px-4 py-12 max-w-6xl">
        <div className="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg shadow-md mb-12">
          <h2 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
            ℹ️ About This Demo
          </h2>
          <p className="text-gray-700 mb-2">
            This application demonstrates <strong>json-render</strong> by Vercel Labs —
            a library that enables AI-generated UIs with guardrailed components.
          </p>
          <p className="text-gray-700 mb-2">
            Below, each recipe is defined as a <strong>JSON specification</strong> and
            rendered through the <code className="bg-gray-200 px-2 py-1 rounded">Renderer</code> component
            using our type-safe component catalog.
          </p>
          <p className="text-gray-700 mb-4">
            In production, AI would generate these specs from user prompts—safely constrained
            to only use components we&apos;ve defined (RecipeHeader, ChefInfo, IngredientList, etc.).
          </p>
          <div className="bg-white p-4 rounded-lg shadow-sm mb-4">
            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
              <span className="text-green-600">✓</span> Guardrailed
            </h3>
            <p className="text-sm text-gray-600 mb-3">
              AI can only use components in your catalog
            </p>
            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
              <span className="text-green-600">✓</span> Predictable
            </h3>
            <p className="text-sm text-gray-600 mb-3">
              JSON output matches your schema, every time
            </p>
            <h3 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
              <span className="text-green-600">✓</span> Fast
            </h3>
            <p className="text-sm text-gray-600">
              Stream and render progressively as the model responds
            </p>
          </div>
          <div className="mt-4 pt-4 border-t border-blue-200">
            <p className="text-sm text-gray-600 flex items-center gap-2">
              <span>🔗</span>
              <a
                href="https://github.com/vercel-labs/json-render"
                target="_blank"
                rel="noopener noreferrer"
                className="underline hover:text-blue-700 font-semibold"
              >
                github.com/vercel-labs/json-render
              </a>
            </p>
          </div>
        </div>

        {recipes.map((recipe, index) => (
          <div key={index} className="mb-8">
            <Provider>
              <Renderer spec={recipe as any} registry={registry} />
            </Provider>
          </div>
        ))}
      </main>

      <footer className="bg-gray-900 text-white py-8 mt-20">
        <div className="container mx-auto px-4 text-center">
          <p className="text-lg font-semibold mb-2">🇫🇷 Bon Appétit!</p>
          <p className="text-gray-400 text-sm">
            Built with Next.js, Tailwind CSS, and json-render
          </p>
          <p className="text-gray-500 text-xs mt-4">
            Recipe sources linked in each chef&apos;s information card
          </p>
        </div>
      </footer>
    </div>
  );
}