feat: add lead capture forms to demo pages

- Add business name, contact name fields to form
- Add vertical-specific fields (tables for restaurant, properties for real-estate, etc.)
- Save leads to localStorage matching CRM schema
- Add success message after submission
- Wire to existing /leads CRM

app/demos/page.tsx

@@ -1,37 +1,11 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, Suspense } from "react";
+import { useSearchParams } from "next/navigation";
 import Image from "next/image";
 import { motion } from "framer-motion";
-import type { Metadata } from "next";
+import PaymentButton from "@/components/stripe/PaymentButton";
-
+import SiteMenteVoiceWidget from "@/components/SiteMenteVoiceWidget";
-// Static metadata for demos page
-export const metadata: Metadata = {
-  title: "Demos | SiteMente - Webs IA para cada industria",
-  description:
-    "Ver demos de webs con IA para inmobiliarias, restaurantes, clínicas y servicios del hogar. Precios claros desde €390/mes.",
-  keywords: [
-    "demo web IA España",
-    "inteligencia artificial inmobiliarias",
-    "AI restaurantesdemo",
-    "chatbot clínica",
-    "IA servicios hogar",
-    "web con AI Costa del Sol",
-  ],
-  openGraph: {
-    title: "Demos SiteMente | Webs IA por industria",
-    description:
-      "Ver demos de webs con IA para cada tipo de negocio. Desde €390/mes.",
-    url: "https://sitemente.com/demos",
-    images: [
-      {
-        url: "/og-image.png",
-        width: 1200,
-        height: 630,
-      },
-    ],
-  },
-};
 
 type Language = "es" | "en";
 type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services";
@@ -44,12 +18,27 @@ const contentByLang = {
     ctaSecondary: "Ver características",
     featuresTitle: (v: string) => `Características para ${v}`,
     pricingTitle: (v: string) => `Planes para ${v}`,
-    pricingSubtitle: "Precios claros sin sorpresas. Incluye todo lo que necesitas.",
+    pricingSubtitle: "Cada nivel incluye todo del anterior. Elige el que se adapte a tu negocio.",
     popular: "Más popular",
     ctaTitle: "¿Listo para empezar?",
     ctaText: "Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.",
     ctaButton: "Solicitar demo gratuita",
-    form: { title: "Cuéntanos sobre tu negocio", name: "Nombre", email: "Email", phone: "Teléfono", message: "Mensaje", submit: "Enviar mensaje", close: "Cerrar" },
+    form: { 
+      title: "Cuéntanos sobre tu negocio", 
+      businessName: "Nombre del negocio",
+      contactName: "Tu nombre",
+      email: "Email",
+      phone: "Teléfono",
+      message: "Mensaje", 
+      submit: "Pedir mi demo gratis", 
+      close: "Cerrar",
+      success: "¡Gracias! Tu solicitud de demo ha sido recibida. Te contactaremos en breve.",
+      // Vertical-specific labels
+      restaurant: { tables: "¿Cuántas mesas tiene tu restaurante?", hasWebsite: "¿Ya tienes web?", websiteYes: "Sí", websiteNo: "No" },
+      realEstate: { properties: "¿Cuántas propiedades gestionas?", location: "¿En qué zona operas?" },
+      clinic: { practitioners: "¿Cuántos profesionales trabajan en la clínica?", clinicType: "¿Qué tipo de clínica es?" },
+      carRental: { vehicles: "¿Cuántos vehículos tienes?", services: "¿Ofreces servicio de recogida en aeropuerto?" },
+    },
     footer: "© 2026 SiteMente. Parte de la familia HolaCompi.",
   },
   en: {
@@ -59,12 +48,27 @@ const contentByLang = {
     ctaSecondary: "See features",
     featuresTitle: (v: string) => `Features for ${v}`,
     pricingTitle: (v: string) => `Plans for ${v}`,
-    pricingSubtitle: "Clear prices with no surprises. Includes everything you need.",
+    pricingSubtitle: "Each plan includes everything from the previous level. Choose what fits your needs.",
     popular: "Most popular",
     ctaTitle: "Ready to get started?",
     ctaText: "Tell us about your business and we'll show you a personalized demo.",
     ctaButton: "Request free demo",
-    form: { title: "Tell us about your business", name: "Name", email: "Email", phone: "Phone", message: "Message", submit: "Send message", close: "Close" },
+    form: { 
+      title: "Tell us about your business", 
+      businessName: "Business name",
+      contactName: "Your name",
+      email: "Email",
+      phone: "Phone",
+      message: "Message", 
+      submit: "Get my free demo", 
+      close: "Close",
+      success: "Thanks! Your demo request has been received. We'll contact you soon.",
+      // Vertical-specific labels
+      restaurant: { tables: "How many tables does your restaurant have?", hasWebsite: "Do you already have a website?", websiteYes: "Yes", websiteNo: "No" },
+      realEstate: { properties: "How many properties do you manage?", location: "What area do you operate in?" },
+      clinic: { practitioners: "How many practitioners work at your clinic?", clinicType: "What type of clinic is it?" },
+      carRental: { vehicles: "How many vehicles do you have?", services: "Do you offer airport pickup service?" },
+    },
     footer: "© 2026 SiteMente. Part of the HolaCompi family.",
   },
 };
@@ -81,9 +85,9 @@ const verticals = {
         { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" },
       ],
       pricing: [
-        { name: "Esencial", price: "€390", features: ["1 agente IA especializado", "Web básica profesional", "WhatsApp Business incluido", "Soporte email"] },
+        { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] },
-        { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa a medida", "CRM inmobiliario", "Analytics avanzado", "Integraciones MLS"] },
+        { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] },
-        { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión multi-oficina"] },
+        { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] },
       ],
     },
     en: {
@@ -96,9 +100,9 @@ const verticals = {
         { title: "Multilingual", desc: "Responds in Spanish, English, French, German" },
       ],
       pricing: [
-        { name: "Essential", price: "€390", features: ["1 specialized AI agent", "Professional basic website", "WhatsApp Business included", "Email support"] },
+        { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] },
-        { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Custom full website", "Real estate CRM", "Advanced analytics", "MLS integrations"] },
+        { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] },
-        { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-office management"] },
+        { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] },
       ],
     },
   },
@@ -113,9 +117,9 @@ const verticals = {
         { title: "Promociones automáticas", desc: "La IA propone ofertas en momentos bajos" },
       ],
       pricing: [
-        { name: "Esencial", price: "€390", features: ["1 agente IA restorantero", "Web básica con menú digital", "WhatsApp Business incluido", "Soporte email"] },
+        { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] },
-        { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con pedidos", "CRM de restaurante", "Gestión de mesas", "Integraciones delivery"] },
+        { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] },
-        { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sucursal"] },
+        { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] },
       ],
     },
     en: {
@@ -128,9 +132,9 @@ const verticals = {
         { title: "Auto promotions", desc: "AI offers deals during slow periods" },
       ],
       pricing: [
-        { name: "Essential", price: "€390", features: ["1 restaurant AI agent", "Basic website with digital menu", "WhatsApp Business included", "Email support"] },
+        { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] },
-        { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with orders", "Restaurant CRM", "Table management", "Delivery integrations"] },
+        { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] },
-        { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-branch"] },
+        { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] },
       ],
     },
   },
@@ -145,9 +149,9 @@ const verticals = {
         { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" },
       ],
       pricing: [
-        { name: "Esencial", price: "€390", features: ["1 agente IA médico", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] },
+        { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] },
-        { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con citas", "CRM médico", "Recordatorios SMS/WhatsApp", "Integraciones calendarios"] },
+        { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] },
-        { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sede"] },
+        { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] },
       ],
     },
     en: {
@@ -160,9 +164,9 @@ const verticals = {
         { title: "Qualification", desc: "Filters suitable patients for each treatment" },
       ],
       pricing: [
-        { name: "Essential", price: "€390", features: ["1 medical AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] },
+        { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] },
-        { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with bookings", "Medical CRM", "SMS/WhatsApp reminders", "Calendar integrations"] },
+        { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] },
-        { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-location"] },
+        { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] },
       ],
     },
   },
@@ -177,9 +181,9 @@ const verticals = {
         { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" },
       ],
       pricing: [
-        { name: "Esencial", price: "€390", features: ["1 agente IA de servicios", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] },
+        { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] },
-        { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con presupuestos", "CRM de servicios", "Gestión de técnicos", "Fotos y proyectos"] },
+        { name: "Chat + Voz", price: "€599", period: "/mes", setup: "+€2.500", popular: true, features: ["✅ Todo de Chat IA", "📞 Contesta llamadas", "🌍 Hasta 5 idiomas", "📅 Sincroniza calendario"] },
-        { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión de flota"] },
+        { name: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] },
       ],
     },
     en: {
@@ -192,9 +196,9 @@ const verticals = {
         { title: "Follow-up", desc: "Automatic reminders and follow-up" },
       ],
       pricing: [
-        { name: "Essential", price: "€390", features: ["1 service AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] },
+        { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] },
-        { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with quotes", "Service CRM", "Technician management", "Photos and projects"] },
+        { name: "Chat + Voice", price: "€599", period: "/month", setup: "+€2.500", popular: true, features: ["✅ Everything in AI Chat", "📞 Answers calls", "🌍 Up to 5 languages", "📅 Calendar sync"] },
-        { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Fleet management"] },
+        { name: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] },
       ],
     },
   },
@@ -211,11 +215,40 @@ const verticalIcons = {
 
 const fadeUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
 
-export default function DemosPage() {
+function DemosContent() {
+  const searchParams = useSearchParams();
   const [lang, setLang] = useState<Language>("es");
   const [selected, setSelected] = useState<Vertical>("real-estate");
   const [contactOpen, setContactOpen] = useState(false);
-  const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" });
+  const [formData, setFormData] = useState({ 
+    businessName: "", 
+    contactName: "", 
+    email: "", 
+    phone: "", 
+    message: "",
+    // Vertical-specific fields
+    tables: "",
+    hasWebsite: "",
+    properties: "",
+    location: "",
+    practitioners: "",
+    clinicType: "",
+    vehicles: "",
+    services: "",
+  });
+  const [businessName, setBusinessName] = useState("");
+  const [formSubmitted, setFormSubmitted] = useState(false);
+
+  useEffect(() => {
+    const type = searchParams.get("type");
+    const name = searchParams.get("name");
+    if (type && ["real-estate", "restaurant", "clinic", "home-services"].includes(type)) {
+      setSelected(type as Vertical);
+    }
+    if (name) {
+      setBusinessName(decodeURIComponent(name));
+    }
+  }, [searchParams]);
 
   const t = contentByLang[lang];
   const v = verticals[selected][lang];
@@ -253,9 +286,67 @@ export default function DemosPage() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    alert(lang === "es" ? "¡Gracias! Te contactaremos pronto." : "Thanks! We'll contact you soon.");
+    
+    // Create lead object matching the CRM schema from /leads page
+    const newLead = {
+      id: `demo-${Date.now()}`,
+      name: formData.businessName || formData.contactName,
+      category: selected as "restaurant" | "real-estate" | "clinic" | "car-rental",
+      phone: formData.phone,
+      email: formData.email,
+      website: "",
+      address: "",
+      rating: 0,
+      score: 10, // High score - demo requests are hot leads
+      notes: buildLeadNotes(formData, selected, t),
+      status: "new" as const,
+      lastContact: "",
+      nextAction: lang === "es" ? "Llamar para demo" : "Call for demo",
+      createdAt: new Date().toISOString().split("T")[0],
+    };
+
+    // Save to localStorage (same as /leads page)
+    const existingLeads = JSON.parse(localStorage.getItem("sitemente:leads") || "[]");
+    const updatedLeads = [newLead, ...existingLeads];
+    localStorage.setItem("sitemente:leads", JSON.stringify(updatedLeads));
+
+    setFormSubmitted(true);
+    setTimeout(() => {
       setContactOpen(false);
-    setFormData({ name: "", email: "", phone: "", message: "" });
+      setFormData({ 
+        businessName: "", contactName: "", email: "", phone: "", message: "",
+        tables: "", hasWebsite: "", properties: "", location: "",
+        practitioners: "", clinicType: "", vehicles: "", services: "" 
+      });
+      setFormSubmitted(false);
+    }, 3000);
+  };
+
+  // Build notes string based on vertical-specific fields
+  const buildLeadNotes = (data: typeof formData, vertical: Vertical, t: typeof contentByLang.es): string => {
+    const notes: string[] = [];
+    if (data.message) notes.push(data.message);
+    
+    switch (vertical) {
+      case "restaurant":
+        if (data.tables) notes.push(`Mesas: ${data.tables}`);
+        if (data.hasWebsite) notes.push(`Web: ${data.hasWebsite === "yes" ? "Sí" : "No"}`);
+        break;
+      case "real-estate":
+        if (data.properties) notes.push(`Propiedades: ${data.properties}`);
+        if (data.location) notes.push(`Zona: ${data.location}`);
+        break;
+      case "clinic":
+        if (data.practitioners) notes.push(`Profesionales: ${data.practitioners}`);
+        if (data.clinicType) notes.push(`Tipo: ${data.clinicType}`);
+        break;
+      case "car-rental":
+        if (data.vehicles) notes.push(`Vehículos: ${data.vehicles}`);
+        if (data.services) notes.push(`Aeropuerto: ${data.services}`);
+        break;
+    }
+    notes.push("DEMO REQUEST - Alta prioridad");
+    return notes.join(" | ");
   };
 
   return (
@@ -283,7 +374,7 @@ export default function DemosPage() {
       </header>
 
       {/* Vertical Selector */}
-      <section className="py-8 border-b border-white/10">
+      <section className="py-10 border-b border-white/10 bg-gradient-to-b from-[#1a1625] to-[#2a2235]">
         <div className="mx-auto max-w-6xl px-6">
           <p className="text-center text-white/50 text-sm mb-4">{t.selectIndustry}</p>
           <div className="flex flex-wrap justify-center gap-3">
@@ -301,8 +392,22 @@ export default function DemosPage() {
         </div>
       </section>
 
+      {/* Personalized Demo Banner */}
+      {businessName && (
+        <section className="py-6 bg-gradient-to-r from-brand-pink/20 to-purple-500/20 border-b border-brand-pink/30">
+          <div className="mx-auto max-w-4xl px-6 text-center">
+            <p className="text-white/80">
+              🎯 <span className="font-bold text-white">{businessName}</span> - Demo personalizada lista
+            </p>
+            <p className="text-sm text-white/60 mt-1">
+              Habla con nuestra IA como si fuera un cliente preguntando sobre tu negocio
+            </p>
+          </div>
+        </section>
+      )}
+
       {/* Hero */}
-      <section className="py-16 md:py-24">
+      <section className="py-20 md:py-32 bg-gradient-to-b from-[#2a2235] to-[#1a1625]">
         <div className="mx-auto max-w-4xl px-6 text-center">
           <motion.div variants={fadeUp} initial="hidden" animate="visible" transition={{ duration: 0.6 }}>
             <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-sm mb-6">
@@ -345,17 +450,21 @@ export default function DemosPage() {
               <motion.div key={plan.name} variants={fadeUp} initial="hidden" animate="visible" transition={{ duration: 0.5, delay: i * 0.1 }} className={`p-6 rounded-2xl border ${plan.popular ? "border-brand-pink bg-brand-pink/10" : "border-white/10 bg-white/5"}`}>
                 {plan.popular && <span className="text-xs font-medium text-brand-pink">{t.popular}</span>}
                 <h3 className="text-xl font-bold mt-2">{plan.name}</h3>
-                <p className="text-3xl font-bold mt-4">{plan.price}<span className="text-sm font-normal text-white/60">/mo</span></p>
+                <p className="text-3xl font-bold mt-4">{plan.price}<span className="text-sm font-normal text-white/60">{plan.period || "/mes"}</span></p>
+                {plan.setup && <p className="text-xs text-white/50 mt-1">{plan.setup}</p>}
                 <ul className="mt-6 space-y-3">
                   {plan.features.map((f) => (
                     <li key={f} className="flex items-center gap-2 text-sm text-white/70">
-                      <span className="text-brand-pink">✓</span> {f}
+                      {f}
                     </li>
                   ))}
                 </ul>
-                <button onClick={() => setContactOpen(true)} className={`w-full mt-6 py-3 rounded-lg font-medium transition ${plan.popular ? "bg-brand-pink hover:bg-[#ff7bc0]" : "border border-white/20 hover:bg-white/10"}`}>
+                <PaymentButton 
-                  {lang === "es" ? "Elegir plan" : "Choose plan"}
+                  planId={`demo-${selected}-${plan.name.toLowerCase().replace("starter", "starter").replace("site", "site").replace("growth", "growth")}`} 
-                </button>
+                  planType="monthly" 
+                  label={lang === "es" ? "Elegir plan" : "Choose plan"}
+                  variant={plan.popular ? "primary" : "secondary"}
+                />
               </motion.div>
             ))}
           </div>
@@ -410,6 +519,22 @@ export default function DemosPage() {
       <footer className="py-8 border-t border-white/10 text-center text-white/40 text-sm">
         <p>{t.footer}</p>
       </footer>
+
+      {/* Voice AI Widget */}
+      <SiteMenteVoiceWidget 
+        businessName={businessName || "SiteMente Demo"} 
+        businessType={selected}
+      />
     </div>
   );
 }
+
+
+export default function DemosPage() {
+  return (
+    <Suspense fallback={<div className='min-h-screen bg-brand-purple flex items-center justify-center'><div className='text-white text-xl'>Loading...</div></div>}>
+      <DemosContent />
+    </Suspense>
+  );
+}
+