import { useState } from 'react'
import { motion } from 'framer-motion'

export default function MultiSmartLanding() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <div className="min-h-screen bg-black text-white font-sans overflow-x-hidden">
      {/* NAVBAR */}
      <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-black/60 border-b border-blue-500/10">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-xl">
              M
            </div>
            <div>
              <h1 className="font-black text-xl">MULTISMART</h1>
              <p className="text-xs text-slate-400">Infraestructura TI</p>
            </div>
          </div>

          <div className="hidden md:flex items-center gap-8 text-sm text-slate-300">
            <a href="#inicio" className="hover:text-blue-400 transition">Inicio</a>
            <a href="#servicios" className="hover:text-blue-400 transition">Servicios</a>
            <a href="#nosotros" className="hover:text-blue-400 transition">Nosotros</a>
            <a href="#contacto" className="hover:text-blue-400 transition">Contacto</a>
          </div>

          <div className="hidden md:block">
            <a
              href="https://wa.me/525532340974"
              target="_blank"
              className="bg-blue-600 hover:bg-blue-500 transition px-6 py-3 rounded-xl font-semibold"
            >
              WhatsApp
            </a>
          </div>

          <button
            className="md:hidden text-3xl"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            ☰
          </button>
        </div>

        {menuOpen && (
          <div className="md:hidden px-6 pb-6 flex flex-col gap-4 bg-black border-t border-blue-500/10">
            <a href="#inicio">Inicio</a>
            <a href="#servicios">Servicios</a>
            <a href="#nosotros">Nosotros</a>
            <a href="#contacto">Contacto</a>
          </div>
        )}
      </nav>
      {/* HERO */}
      <section id="inicio" className="relative overflow-hidden bg-gradient-to-br from-black via-slate-900 to-blue-950 px-8 pt-40 pb-24">
        <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_right,#2563eb,transparent_40%)]"></div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10"
        >
          <div>
            <div className="inline-block border border-blue-500 text-blue-400 px-4 py-2 rounded-full mb-6 text-sm tracking-wide">
              Ingeniería • Seguridad • Infraestructura TI
            </div>

            <h1 className="text-5xl lg:text-7xl font-black leading-tight mb-6">
              Soluciones Inteligentes para Empresas Modernas
            </h1>

            <p className="text-slate-300 text-lg leading-relaxed mb-8 max-w-xl">
              MULTISMART ofrece soluciones profesionales en CCTV, redes, cableado estructurado, seguridad informática e infraestructura tecnológica para negocios y empresas.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="bg-blue-600 hover:bg-blue-500 transition px-8 py-4 rounded-2xl font-semibold shadow-2xl shadow-blue-500/30">
                Solicitar Cotización
              </button>

              <button className="border border-blue-500 hover:bg-blue-500/10 transition px-8 py-4 rounded-2xl font-semibold">
                Ver Servicios
              </button>
            </div>

            <div className="grid grid-cols-3 gap-6 mt-14">
              <div>
                <h2 className="text-4xl font-bold text-blue-400">24/7</h2>
                <p className="text-slate-400 text-sm">Soporte Técnico</p>
              </div>

              <div>
                <h2 className="text-4xl font-bold text-blue-400">100%</h2>
                <p className="text-slate-400 text-sm">Seguridad Empresarial</p>
              </div>

              <div>
                <h2 className="text-4xl font-bold text-blue-400">PRO</h2>
                <p className="text-slate-400 text-sm">Infraestructura TI</p>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="bg-gradient-to-br from-slate-900 to-blue-950 border border-blue-500/30 rounded-[40px] p-10 shadow-2xl shadow-blue-500/20">
              <img
                src="/mnt/data/firma blanca .png"
                alt="MULTISMART"
                className="w-full rounded-2xl"
              />
            </div>
          </div>
        </motion.div>
      </section>

      {/* SERVICES */}
      <section id="servicios" className="py-24 px-8 bg-slate-950">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-5xl font-black mb-4">Nuestros Servicios</h2>
            <p className="text-slate-400 text-lg">
              Tecnología empresarial diseñada para proteger y optimizar tu negocio.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: 'CCTV y Videovigilancia',
                desc: 'Instalación profesional de cámaras Hikvision, Dahua, Hilook y sistemas ColorVu.'
              },
              {
                title: 'Redes y Cableado',
                desc: 'Infraestructura de red, racks, fibra óptica y cableado estructurado.'
              },
              {
                title: 'Seguridad Informática',
                desc: 'Protección de sistemas, firewalls, antivirus y respaldo empresarial.'
              },
              {
                title: 'Soporte TI',
                desc: 'Mantenimiento preventivo y correctivo para empresas y oficinas.'
              },
              {
                title: 'Control de Acceso',
                desc: 'Biométricos, accesos inteligentes y automatización empresarial.'
              },
              {
                title: 'Infraestructura Tecnológica',
                desc: 'Servidores, virtualización y soluciones corporativas avanzadas.'
              }
            ].map((service, index) => (
              <div
                key={index}
                className="bg-gradient-to-br from-slate-900 to-black border border-blue-500/20 rounded-3xl p-8 hover:border-blue-500 transition duration-300 hover:-translate-y-2"
              >
                <div className="w-16 h-16 rounded-2xl bg-blue-600/20 border border-blue-500 flex items-center justify-center mb-6 text-3xl">
                  ⚡
                </div>

                <h3 className="text-2xl font-bold mb-4">{service.title}</h3>

                <p className="text-slate-400 leading-relaxed">
                  {service.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BRANDS */}
      <section className="py-20 px-8 border-y border-blue-500/10 bg-black">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-4xl font-black mb-10">Marcas que Trabajamos</h2>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 text-slate-300 text-xl font-semibold">
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">Hikvision</div>
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">Dahua</div>
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">Hilook</div>
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">Cisco</div>
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">Ubiquiti</div>
            <div className="bg-slate-900 rounded-2xl py-6 border border-blue-500/10">TP-Link</div>
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section id="nosotros" className="py-24 px-8 bg-gradient-to-b from-black to-slate-950">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <h2 className="text-5xl font-black mb-8">
              ¿Por qué elegir MULTISMART?
            </h2>

            <div className="space-y-6">
              {[
                'Atención profesional y personalizada',
                'Infraestructura tecnológica moderna',
                'Equipos y marcas reconocidas',
                'Seguridad y monitoreo empresarial',
                'Soporte técnico rápido y eficiente'
              ].map((item, index) => (
                <div
                  key={index}
                  className="flex items-center gap-4 bg-slate-900 border border-blue-500/10 rounded-2xl p-5"
                >
                  <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center font-bold">
                    ✓
                  </div>

                  <p className="text-lg text-slate-200">{item}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-gradient-to-br from-blue-950 to-black border border-blue-500/20 rounded-[40px] p-10 h-full flex items-center justify-center">
            <div className="text-center">
              <div className="text-7xl mb-6">🌐</div>
              <h3 className="text-4xl font-black mb-4">Tecnología que Protege</h3>
              <p className="text-slate-400 text-lg leading-relaxed">
                Diseñamos soluciones inteligentes enfocadas en seguridad, conectividad y crecimiento empresarial.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contacto" className="py-24 px-8 bg-black">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-5xl font-black mb-6">
            Hablemos de tu Proyecto
          </h2>

          <p className="text-slate-400 text-lg mb-12">
            Cotizaciones, soporte y soluciones empresariales.
          </p>

          <div className="bg-gradient-to-br from-slate-900 to-black border border-blue-500/20 rounded-[40px] p-10 grid md:grid-cols-2 gap-8 text-left">
            <div>
              <label className="block text-slate-300 mb-2">Nombre</label>
              <input
                className="w-full bg-black border border-blue-500/20 rounded-xl px-5 py-4 outline-none focus:border-blue-500"
                placeholder="Tu nombre"
              />
            </div>

            <div>
              <label className="block text-slate-300 mb-2">Teléfono</label>
              <input
                className="w-full bg-black border border-blue-500/20 rounded-xl px-5 py-4 outline-none focus:border-blue-500"
                placeholder="Tu teléfono"
              />
            </div>

            <div className="md:col-span-2">
              <label className="block text-slate-300 mb-2">Mensaje</label>
              <textarea
                rows="5"
                className="w-full bg-black border border-blue-500/20 rounded-xl px-5 py-4 outline-none focus:border-blue-500"
                placeholder="Cuéntanos qué necesitas"
              ></textarea>
            </div>

            <div className="md:col-span-2 text-center mt-4">
              <a
                href="https://wa.me/525532340974?text=Hola%20MULTISMART,%20me%20interesa%20una%20cotización"
                target="_blank"
                className="inline-block bg-blue-600 hover:bg-blue-500 transition px-10 py-5 rounded-2xl text-lg font-bold shadow-2xl shadow-blue-500/30"
              >
                Enviar Solicitud
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      {/* FLOATING WHATSAPP */}
      <a
        href="https://wa.me/525532340974"
        target="_blank"
        className="fixed bottom-6 right-6 z-50 bg-green-500 hover:scale-110 transition w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl"
      >
        💬
      </a>

      <footer className="border-t border-blue-500/10 py-10 px-8 bg-slate-950 text-center text-slate-500">
        <p>
          © 2026 MULTISMART • Informática, Seguridad e Infraestructura
        </p>
      </footer>
    </div>
  )
}