"use client"; import { useState, useEffect, useMemo, Suspense } from "react"; import { useSearchParams, useRouter, usePathname } from "next/navigation"; import Image from "next/image"; import { motion } from "framer-motion"; import PaymentButton from "@/components/stripe/PaymentButton"; import SiteMenteVoiceWidget from "@/components/SiteMenteVoiceWidget"; type Language = "es" | "en"; type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services"; const contentByLang = { es: { nav: { features: "Características", pricing: "Precios", contact: "Contacto", cta: "Pedir demo" }, selectIndustry: "Selecciona tu industria:", ctaPrimary: "Ver demo en vivo", ctaSecondary: "Ver características", featuresTitle: (v: string) => `Características para ${v}`, pricingTitle: (v: string) => `Planes para ${v}`, 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", 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: { nav: { features: "Features", pricing: "Pricing", contact: "Contact", cta: "Get demo" }, selectIndustry: "Select your industry:", ctaPrimary: "See live demo", ctaSecondary: "See features", featuresTitle: (v: string) => `Features for ${v}`, pricingTitle: (v: string) => `Plans for ${v}`, 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", 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.", }, }; const verticals = { "real-estate": { es: { name: "Inmobiliaria", hero: { badge: "✓ Agentes inmobiliarios en España", title: "Tu web inmobiliario con IA que vende 24/7", subtitle: "La IA responde preguntas sobre propiedades, agenda visitas y cualifica leads mientras tú cierras ventas. Especialistas en agencias inmobiliarias en la Costa del Sol." }, features: [ { title: "Búsqueda inteligente", desc: "Los clientes encuentran propiedades con preguntas naturales" }, { title: "Visitas automáticas", desc: "Agenda visitas sin intervención humana" }, { title: "Cualificación de leads", desc: "La IA filtra compradores serios de mirones" }, { title: "Multidioma", desc: "Responde en español, inglés, francés, alemán" }, ], pricing: [ { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, { 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: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { name: "Real Estate", hero: { badge: "✓ Real estate agents in Spain", title: "Your AI real estate website that sells 24/7", subtitle: "AI answers property questions, schedules viewings, and qualifies leads while you close sales. Specialists in Costa del Sol agencies." }, features: [ { title: "Smart search", desc: "Clients find properties with natural questions" }, { title: "Auto viewings", desc: "Schedule visits without human intervention" }, { title: "Lead qualification", desc: "AI filters serious buyers from browsers" }, { title: "Multilingual", desc: "Responds in Spanish, English, French, German" }, ], pricing: [ { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, { 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: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, "restaurant": { es: { name: "Restaurante", hero: { badge: "✓ Restaurantes en España", title: "Tu restaurante abierto 24 horas", subtitle: "Toma reservas a las 3 AM, responde sobre alérgenos y sugiere platos. La IA maneja toda la atención al cliente mientras tú disfrutas de tu negocio." }, features: [ { title: "Reservas 24/7", desc: "Reservas automáticas sin llamar" }, { title: "Menú interactivo", desc: "Clientes preguntan sobre platos y alérgenos" }, { title: "Pedidos online", desc: "Carrito de pedidos integrado" }, { title: "Promociones automáticas", desc: "La IA propone ofertas en momentos bajos" }, ], pricing: [ { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, { 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: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { name: "Restaurant", hero: { badge: "✓ Restaurants in Spain", title: "Your restaurant open 24 hours", subtitle: "Take reservations at 3 AM, answer about allergens and suggest dishes. AI handles all customer service while you enjoy your business." }, features: [ { title: "24/7 Reservations", desc: "Automated bookings without calling" }, { title: "Interactive menu", desc: "Clients ask about dishes and allergens" }, { title: "Online orders", desc: "Integrated ordering cart" }, { title: "Auto promotions", desc: "AI offers deals during slow periods" }, ], pricing: [ { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, { 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: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, "clinic": { es: { name: "Clínica", hero: { badge: "✓ Clínicas estéticas y médicas", title: "Tu clínica siempre disponible", subtitle: "La IA agenda citas, responde sobre tratamientos y recuerda citas. Libera a tu equipo para lo que importa: cuidar pacientes." }, features: [ { title: "Citas automáticas", desc: "Agenda 24/7 sin receptionist" }, { title: "Info de tratamientos", desc: "Responde sobre procedimientos y precios" }, { title: "Recordatorios", desc: "La IA recuerda citas y seguimiento" }, { title: "Cualificación", desc: "Filtra pacientes adecuados para cada tratamiento" }, ], pricing: [ { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, { 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: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { name: "Clinic", hero: { badge: "✓ Aesthetic and medical clinics", title: "Your clinic always available", subtitle: "AI schedules appointments, answers about treatments and remembers appointments. Free your team for what matters: patient care." }, features: [ { title: "Auto appointments", desc: "Schedule 24/7 without receptionist" }, { title: "Treatment info", desc: "Answers about procedures and prices" }, { title: "Reminders", desc: "AI remembers appointments and follow-ups" }, { title: "Qualification", desc: "Filters suitable patients for each treatment" }, ], pricing: [ { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, { 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: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, "home-services": { es: { name: "Servicios del Hogar", hero: { badge: "✓ Fontaneros, electricistas, piscinas", title: "Tu empresa de servicios siempre operativa", subtitle: "La IA responde emergencias, agenda servicios y quotea presupuestos. Nunca pierdas un cliente por no estar disponible." }, features: [ { title: "Emergencias 24/7", desc: "Responde siempre, incluso a las 2 AM" }, { title: "Presupuestos rápidos", desc: "La IA genera presupuestos preliminares" }, { title: "Agenda inteligente", desc: "Coordina citas con disponibilidad real" }, { title: "Seguimiento", desc: "Recordatorios y seguimiento automático" }, ], pricing: [ { name: "Chat IA", price: "€299", period: "/mes", setup: "+€900", features: ["🤖 Empleado IA 24/7", "🌍 Hasta 3 idiomas", "📅 Reservas automáticas", "📊 Dashboard de clientes"] }, { 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: "Empresa IA", price: "€1.499", period: "/mes", setup: "+€5.000", features: ["✅ Todo de Chat + Voz", "🏢 Múltiples ubicaciones", "🔗 CRM completo", "📈 Analytics avanzado"] }, ], }, en: { name: "Home Services", hero: { badge: "✓ Plumbers, electricians, pools", title: "Your service company always operational", subtitle: "AI answers emergencies, schedules services and quotes jobs. Never lose a customer due to unavailability." }, features: [ { title: "24/7 Emergencies", desc: "Always responds, even at 2 AM" }, { title: "Fast quotes", desc: "AI generates preliminary quotes" }, { title: "Smart scheduling", desc: "Coordinates appointments with real availability" }, { title: "Follow-up", desc: "Automatic reminders and follow-up" }, ], pricing: [ { name: "AI Chat", price: "€299", period: "/month", setup: "+€900", features: ["🤖 AI Employee 24/7", "🌍 2 languages (ES+EN)", "📅 Automated bookings", "📊 Customer dashboard"] }, { 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: "AI Company", price: "€1,499", period: "/month", setup: "+€5,000", features: ["✅ Everything in Chat + Voice", "🏢 Multiple locations", "🔗 Full CRM", "📈 Advanced analytics"] }, ], }, }, }; const verticalNames = { es: { "real-estate": "Inmobiliaria", restaurant: "Restaurante", clinic: "Clínica", "home-services": "Servicios del Hogar" }, en: { "real-estate": "Real Estate", restaurant: "Restaurant", clinic: "Clinic", "home-services": "Home Services" }, }; const verticalIcons = { "real-estate": "🏠", restaurant: "🍽️", clinic: "⚕️", "home-services": "🔧" }; const fadeUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }; function DemosContent() { const searchParams = useSearchParams(); const router = useRouter(); const pathname = usePathname(); const [lang, setLang] = useState("es"); const [selected, setSelected] = useState("real-estate"); const [contactOpen, setContactOpen] = useState(false); 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(() => { if (typeof window === "undefined") return; // Read directly from URL const params = new URLSearchParams(window.location.search); const urlVertical = params.get("vertical"); const urlType = params.get("type"); const urlName = params.get("name"); if (urlVertical && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlVertical)) { setSelected(urlVertical as Vertical); } else if (urlType && ["real-estate", "restaurant", "clinic", "home-services"].includes(urlType)) { setSelected(urlType as Vertical); } if (urlName) { setBusinessName(decodeURIComponent(urlName)); } }, []); const t = contentByLang[lang]; const v = verticals[selected][lang]; const vName = verticalNames[lang][selected]; useEffect(() => { if (typeof window === "undefined") return; // Check URL param first const params = new URLSearchParams(window.location.search); const urlLang = params.get("lang"); if (urlLang === "es" || urlLang === "en") { setLang(urlLang); localStorage.setItem("sitemente:lang", urlLang); return; } // Then check localStorage const saved = localStorage.getItem("sitemente:lang"); if (saved === "es" || saved === "en") { setLang(saved); return; } // Finally check browser language const browserLang = navigator.language.toLowerCase(); setLang(browserLang.startsWith("en") ? "en" : "es"); }, []); useEffect(() => { if (typeof window === "undefined") return; localStorage.setItem("sitemente:lang", lang); // Update URL without reload const url = new URL(window.location.href); url.searchParams.set("lang", lang); window.history.replaceState({}, "", url.toString()); }, [lang]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // 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({ 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 (
{/* Header */}
SiteMente SiteMente
setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">{t.nav.cta}
{/* Vertical Selector */}

{t.selectIndustry}

{(["real-estate", "restaurant", "clinic", "home-services"] as Vertical[]).map((key) => ( ))}
{/* Personalized Demo Banner */} {businessName && (

🎯 {businessName} - Demo personalizada lista

Habla con nuestra IA como si fuera un cliente preguntando sobre tu negocio

)} {/* Hero */}
{v.hero.badge}

{v.hero.title}

{v.hero.subtitle}

{t.ctaSecondary}
{/* Features */}

{t.featuresTitle(vName)}

{v.features.map((feature, i) => (
✨

{feature.title}

{feature.desc}

 ))}
{/* Pricing */}

{t.pricingTitle(vName)}

{t.pricingSubtitle}

{v.pricing.map((plan, i) => ( {plan.popular && {t.popular}}

{plan.name}

{plan.price}{plan.period || "/mes"}

{plan.setup &&

{plan.setup}

}
    {plan.features.map((f) => (
  • {f}
    • ))}
))}
{/* CTA */}

{t.ctaTitle}

{t.ctaText}

{/* Contact Modal */} {contactOpen && (
setContactOpen(false)} />

{lang === "es" ? "Contacto" : "Contact"}

{t.form.title}

setFormData({...formData, name: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder={lang === "es" ? "Tu nombre" : "Your name"} />
setFormData({...formData, email: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="tu@email.com" />
setFormData({...formData, phone: e.target.value})} className="w-full mt-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-brand-pink" placeholder="+34 600 000 000" />