"use client";

import { useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";

type Vertical = "real-estate" | "restaurant" | "clinic" | "home-services";

const verticals = {
  "real-estate": {
    id: "real-estate",
    name: "Real Estate",
    icon: "🏠",
    color: "#10b981",
    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: "€299", features: ["1 agente IA", "Web básica", "WhatsApp incluido"] },
      { name: "Profesional", price: "€549", popular: true, features: ["2 agentes IA", "Web completa", "CRM integrado", "Analytics"] },
      { name: "Premium", price: "€949", features: ["Agentes ilimitados", "Web a medida", "API integrations", "Soporte 24/7"] },
    ],
  },
  "restaurant": {
    id: "restaurant",
    name: "Restaurante",
    icon: "🍽️",
    color: "#f59e0b",
    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 todo el 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 предложа ofertas en momentos bajos" },
    ],
    pricing: [
      { name: "Inicio", price: "€199", features: ["1 agente IA", "Web básica", "Reservas"] },
      { name: "Negocio", price: "€399", popular: true, features: ["2 agentes IA", "Web completa", "Pedidos", " CRM"] },
      { name: "Cadena", price: "€749", features: ["Agentes ilimitados", "Multi-sucursal", "API integrations", "Soporte 24/7"] },
    ],
  },
  "clinic": {
    id: "clinic",
    name: "Clínica",
    icon: "⚕️",
    color: "#06b6d4",
    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: "Básico", price: "€249", features: ["1 agente IA", "Web básica", "Citas"] },
      { name: "Clínica", price: "€499", popular: true, features: ["2 agentes IA", "Web completa", "CRM médico", "Recordatorios"] },
      { name: "Grupo", price: "€899", features: ["Agentes ilimitados", "Multi-sede", "API integrations", "Soporte 24/7"] },
    ],
  },
  "home-services": {
    id: "home-services",
    name: "Servicios del Hogar",
    icon: "🔧",
    color: "#8b5cf6",
    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: "Profesional", price: "€249", features: ["1 agente IA", "Web básica", "Presupuestos"] },
      { name: "Empresa", price: "€449", popular: true, features: ["2 agentes IA", "Web completa", "CRM servicios", "Fotos/proyectos"] },
      { name: "Corporativo", price: "€849", features: ["Agentes ilimitados", "Flota/varios equipos", "API integrations", "Soporte 24/7"] },
    ],
  },
};

const fadeUp = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

export default function DemosPage() {
  const [selected, setSelected] = useState<Vertical>("real-estate");
  const [contactOpen, setContactOpen] = useState(false);
  const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" });

  const v = verticals[selected];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert("¡Gracias! Te contactaremos pronto.");
    setContactOpen(false);
    setFormData({ name: "", email: "", phone: "", message: "" });
  };

  return (
    <div className="min-h-screen bg-[#1a1625] text-white">
      {/* Header */}
      <header className="border-b border-white/10 bg-[#1a1625]/90 backdrop-blur sticky top-0 z-50">
        <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
          <a href="/" className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-brand-pink flex items-center justify-center">
              <span className="text-xl">🌐</span>
            </div>
            <span className="font-bold text-xl">SiteMente</span>
          </a>
          <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
            <a href="#features" className="hover:text-brand-pink transition">Características</a>
            <a href="#pricing" className="hover:text-brand-pink transition">Precios</a>
            <a href="#contact" className="hover:text-brand-pink transition">Contacto</a>
          </nav>
          <a href="#contact" onClick={() => setContactOpen(true)} className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium hover:bg-[#ff7bc0] transition">
            Pedir demo
          </a>
        </div>
      </header>

      {/* Vertical Selector */}
      <section className="py-8 border-b border-white/10">
        <div className="mx-auto max-w-6xl px-6">
          <p className="text-center text-white/50 text-sm mb-4">Selecciona tu industria:</p>
          <div className="flex flex-wrap justify-center gap-3">
            {(Object.keys(verticals) as Vertical[]).map((key) => (
              <button
                key={key}
                onClick={() => setSelected(key)}
                className={`flex items-center gap-2 px-4 py-2 rounded-full border transition ${
                  selected === key
                    ? `bg-${verticals[key].color}/20 border-${verticals[key].color} text-white`
                    : "border-white/20 text-white/70 hover:border-white/40"
                }`}
                style={{ backgroundColor: selected === key ? `${verticals[key].color}20` : undefined }}
              >
                <span>{verticals[key].icon}</span>
                <span className="font-medium">{verticals[key].name}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Hero */}
      <section className="py-16 md:py-24">
        <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">
              <span className="w-2 h-2 rounded-full bg-brand-pink" />
              {v.hero.badge}
            </span>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">{v.hero.title}</h1>
            <p className="text-lg text-white/70 mb-8">{v.hero.subtitle}</p>
            <div className="flex flex-wrap justify-center gap-4">
              <button onClick={() => setContactOpen(true)} className="px-6 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
                Ver demo en vivo
              </button>
              <a href="#features" className="px-6 py-3 border border-white/20 rounded-lg font-semibold hover:bg-white/10 transition">
                Ver características
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="py-16 border-t border-white/10">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-3xl font-bold text-center mb-12">Características para {v.name}</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {v.features.map((feature, i) => (
              <motion.div
                key={feature.title}
                variants={fadeUp}
                initial="hidden"
                animate="visible"
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="p-6 rounded-xl border border-white/10 bg-white/5 hover:border-white/20 transition"
              >
                <div className="w-12 h-12 rounded-lg bg-brand-pink/20 flex items-center justify-center text-2xl mb-4">✨</div>
                <h3 className="font-semibold mb-2">{feature.title}</h3>
                <p className="text-sm text-white/60">{feature.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-16 border-t border-white/10 bg-white/5">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="text-3xl font-bold text-center mb-4">Planes para {v.name}</h2>
          <p className="text-center text-white/60 mb-12">Precios claros sin sorpresas. Incluye todo lo que necesitas.</p>
          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {v.pricing.map((plan, i) => (
              <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">Más 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">/mes</span></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}
                    </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"}`}>
                  Elegir plan
                </button>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section id="contact" className="py-16 border-t border-white/10">
        <div className="mx-auto max-w-2xl px-6 text-center">
          <h2 className="text-3xl font-bold mb-4">¿Listo para empezar?</h2>
          <p className="text-white/60 mb-8">Cuéntanos sobre tu negocio y te mostraremos una demo personalizada.</p>
          <button onClick={() => setContactOpen(true)} className="px-8 py-3 bg-brand-pink rounded-lg font-semibold hover:bg-[#ff7bc0] transition">
            Solicitar demo gratuita
          </button>
        </div>
      </section>

      {/* Contact Modal */}
      {contactOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setContactOpen(false)} />
          <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="relative z-10 w-full max-w-lg rounded-2xl border border-white/20 bg-[#1a1625] p-8">
            <div className="flex items-start justify-between mb-6">
              <div>
                <p className="text-sm uppercase tracking-widest text-white/50">Contacto</p>
                <h3 className="text-xl font-bold mt-1">Cuéntanos sobre tu negocio</h3>
              </div>
              <button onClick={() => setContactOpen(false)} className="text-white/50 hover:text-white">✕</button>
            </div>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="text-sm text-white/70">Nombre</label>
                <input required value={formData.name} onChange={(e) => 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="Tu nombre" />
              </div>
              <div>
                <label className="text-sm text-white/70">Email</label>
                <input required type="email" value={formData.email} onChange={(e) => 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" />
              </div>
              <div>
                <label className="text-sm text-white/70">Teléfono</label>
                <input required value={formData.phone} onChange={(e) => 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" />
              </div>
              <div>
                <label className="text-sm text-white/70">Mensaje</label>
                <textarea required value={formData.message} onChange={(e) => setFormData({...formData, message: e.target.value})} rows={3} 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="¿Qué necesitas automatizar?" />
              </div>
              <button type="submit" className="w-full py-3 bg-brand-pink rounded-lg font-medium hover:bg-[#ff7bc0] transition">Enviar mensaje</button>
            </form>
          </motion.div>
        </div>
      )}

      {/* Footer */}
      <footer className="py-8 border-t border-white/10 text-center text-white/40 text-sm">
        <p>© 2026 SiteMente. Parte de la familia HolaCompi.</p>
      </footer>
    </div>
  );
}