"use client"; import { useState, useEffect, useMemo } from "react"; import Image from "next/image"; import { motion } from "framer-motion"; 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: "Precios claros sin sorpresas. Incluye todo lo que necesitas.", 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" }, 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: "Clear prices with no surprises. Includes everything you need.", 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" }, 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: "Esencial", price: "€390", features: ["1 agente IA especializado", "Web básica profesional", "WhatsApp Business incluido", "Soporte email"] }, { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa a medida", "CRM inmobiliario", "Analytics avanzado", "Integraciones MLS"] }, { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión multi-oficina"] }, ], }, 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: "Essential", price: "€390", features: ["1 specialized AI agent", "Professional basic website", "WhatsApp Business included", "Email support"] }, { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Custom full website", "Real estate CRM", "Advanced analytics", "MLS integrations"] }, { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-office management"] }, ], }, }, "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: "Esencial", price: "€390", features: ["1 agente IA restorantero", "Web básica con menú digital", "WhatsApp Business incluido", "Soporte email"] }, { 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: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sucursal"] }, ], }, 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: "Essential", price: "€390", features: ["1 restaurant AI agent", "Basic website with digital menu", "WhatsApp Business included", "Email support"] }, { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with orders", "Restaurant CRM", "Table management", "Delivery integrations"] }, { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-branch"] }, ], }, }, "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: "Esencial", price: "€390", features: ["1 agente IA médico", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] }, { name: "Profesional", price: "€790", popular: true, features: ["2 agentes IA especializados", "Web completa con citas", "CRM médico", "Recordatorios SMS/WhatsApp", "Integraciones calendarios"] }, { name: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Multi-sede"] }, ], }, 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: "Essential", price: "€390", features: ["1 medical AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] }, { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with bookings", "Medical CRM", "SMS/WhatsApp reminders", "Calendar integrations"] }, { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Multi-location"] }, ], }, }, "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: "Esencial", price: "€390", features: ["1 agente IA de servicios", "Web básica con servicios", "WhatsApp Business incluido", "Soporte email"] }, { 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: "Premium", price: "€1390", features: ["Agentes ilimitados", "Web a medida premium", "API integrations", "Soporte 24/7 prioritario", "Gestión de flota"] }, ], }, 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: "Essential", price: "€390", features: ["1 service AI agent", "Basic website with services", "WhatsApp Business included", "Email support"] }, { name: "Professional", price: "€790", popular: true, features: ["2 specialized AI agents", "Full website with quotes", "Service CRM", "Technician management", "Photos and projects"] }, { name: "Premium", price: "€1390", features: ["Unlimited AI agents", "Premium custom website", "API integrations", "Priority 24/7 support", "Fleet management"] }, ], }, }, }; 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 } }; export default function DemosPage() { const [lang, setLang] = useState("es"); const [selected, setSelected] = useState("real-estate"); const [contactOpen, setContactOpen] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" }); 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(); alert(lang === "es" ? "¡Gracias! Te contactaremos pronto." : "Thanks! We'll contact you soon."); setContactOpen(false); setFormData({ name: "", email: "", phone: "", message: "" }); }; 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) => ( ))}
{/* 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}/mo

    {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" />