import React, { useState } from 'react';
import { 
  Cpu, 
  Code2, 
  Settings, 
  Users, 
  Mail, 
  Phone, 
  MapPin, 
  ChevronRight, 
  Server, 
  Monitor, 
  Database, 
  ShieldCheck,
  Menu,
  X,
  ArrowRight,
  Smartphone,
  Zap,
  Droplets
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

// --- Components ---

const Logo = ({ className = "" }: { className?: string }) => (
  <svg 
    viewBox="0 0 400 220" 
    className={className}
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    {/* TECNO Text */}
    <text 
      x="40" 
      y="45" 
      fill="black" 
      style={{ font: 'bold 32px Arial, sans-serif', letterSpacing: '12px' }}
    >
      TECNO
    </text>
    
    {/* Squares Row */}
    <rect x="0" y="65" width="35" height="35" fill="#F0F0F0" />
    <rect x="45" y="65" width="35" height="35" fill="#D0D0D0" />
    <rect x="90" y="65" width="35" height="35" fill="#A0A0A0" />
    <rect x="135" y="65" width="35" height="35" fill="#707070" />
    <rect x="180" y="65" width="35" height="35" fill="#000000" />
    
    {/* Quarter Circle Shape */}
    <path 
      d="M225 100 V30 C225 30 270 30 270 100 H225Z" 
      fill="#A0A0A0" 
    />
    <rect x="240" y="55" width="15" height="15" fill="white" />
    
    {/* silf Text */}
    <text 
      x="145" 
      y="190" 
      fill="black" 
      style={{ font: '900 110px Arial, sans-serif', letterSpacing: '-2px' }}
    >
      silf
    </text>
  </svg>
);

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  const navLinks = [
    { name: 'Sistemas', href: '#sistemas' },
    { name: 'Servicios', href: '#servicios' },
    { name: 'Hardware', href: '#hardware' },
    { name: 'Software', href: '#software' },
    { name: 'Contacto', href: '#contacto' },
  ];

  return (
    <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
      <div className="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Logo className="h-16 w-auto" />
        </div>

        {/* Desktop Nav */}
        <div className="hidden md:flex items-center gap-8">
          {navLinks.map((link) => (
            <a 
              key={link.name} 
              href={link.href} 
              className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"
            >
              {link.name}
            </a>
          ))}
          <button className="bg-zinc-900 text-white px-6 py-2.5 rounded-full text-sm font-bold hover:bg-zinc-800 transition-all active:scale-95">
            Cotizar Proyecto
          </button>
        </div>

        {/* Mobile Toggle */}
        <button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile Nav */}
      <AnimatePresence>
        {isOpen && (
          <motion.div 
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-white border-b border-zinc-100 overflow-hidden"
          >
            <div className="px-6 py-8 flex flex-col gap-6">
              {navLinks.map((link) => (
                <a 
                  key={link.name} 
                  href={link.href} 
                  onClick={() => setIsOpen(false)}
                  className="text-lg font-bold text-zinc-900"
                >
                  {link.name}
                </a>
              ))}
              <button className="w-full bg-zinc-900 text-white py-4 rounded-2xl font-bold">
                Cotizar Proyecto
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

const Hero = () => (
  <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
      <motion.div
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.6 }}
      >
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-100 text-zinc-600 text-xs font-bold uppercase tracking-widest mb-6">
          <span className="w-2 h-2 rounded-full bg-zinc-900 animate-pulse" />
          Innovación Tecnológica Integral
        </div>
        <h1 className="text-6xl lg:text-8xl font-black tracking-tighter leading-[0.9] mb-8">
          Sistemas que <br />
          <span className="text-zinc-400">Impulsan tu</span> <br />
          Industria.
        </h1>
        <p className="text-xl text-zinc-600 max-w-lg mb-10 leading-relaxed">
          En Tecnosilf diseñamos y ejecutamos soluciones de hardware y software a medida, optimizando procesos críticos con tecnología de vanguardia.
        </p>
        <div className="flex flex-col sm:flex-row gap-4">
          <button className="bg-zinc-900 text-white px-8 py-4 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-zinc-800 transition-all group">
            Ver Soluciones
            <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
          </button>
          <button className="border border-zinc-200 px-8 py-4 rounded-2xl font-bold hover:bg-zinc-50 transition-all">
            Nuestros Servicios
          </button>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8, delay: 0.2 }}
        className="relative"
      >
        <div className="aspect-square bg-zinc-100 rounded-[40px] overflow-hidden relative group">
          <img 
            src="https://picsum.photos/seed/power-substation/1200/1200" 
            alt="Infraestructura Eléctrica" 
            className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700"
            referrerPolicy="no-referrer"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-zinc-900/40 to-transparent" />
          <div className="absolute bottom-8 left-8 right-8 p-6 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl text-white">
            <div className="text-xs font-bold uppercase tracking-widest opacity-70 mb-1">Presencia Regional</div>
            <div className="text-xl font-bold">Soluciones para Cooperativas Eléctricas</div>
          </div>
        </div>
        {/* Decorative elements */}
        <div className="absolute -top-6 -right-6 w-32 h-32 bg-zinc-900 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob" />
        <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-zinc-400 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob animation-delay-2000" />
      </motion.div>
    </div>
  </section>
);

const FeatureGrid = ({ title, subtitle, items, id }: { title: string, subtitle: string, items: any[], id: string }) => (
  <section id={id} className="py-24 bg-white">
    <div className="max-w-7xl mx-auto px-6">
      <div className="mb-16">
        <h2 className="text-4xl font-black tracking-tighter mb-4">{title}</h2>
        <p className="text-zinc-500 max-w-2xl">{subtitle}</p>
      </div>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {items.map((item, index) => (
          <motion.div
            key={index}
            whileHover={{ y: -5 }}
            className="p-8 border border-zinc-100 rounded-3xl hover:border-zinc-900 transition-all group"
          >
            <div className="w-14 h-14 bg-zinc-50 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-zinc-900 transition-colors">
              <item.icon className="text-zinc-900 group-hover:text-white transition-colors" size={28} />
            </div>
            <h3 className="text-xl font-bold mb-3">{item.title}</h3>
            <p className="text-zinc-600 text-sm leading-relaxed mb-6">
              {item.description}
            </p>
            <div className="flex flex-wrap gap-2">
              {item.tags.map((tag: string) => (
                <span key={tag} className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-zinc-100 rounded-md text-zinc-500">
                  {tag}
                </span>
              ))}
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

const ContactSection = () => (
  <section id="contacto" className="py-24 bg-zinc-900 text-white overflow-hidden relative">
    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center relative z-10">
      <div>
        <h2 className="text-5xl font-black tracking-tighter mb-8">Hablemos de tu <br />próximo desafío.</h2>
        <div className="space-y-8">
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0">
              <Mail size={24} />
            </div>
            <div>
              <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Email</div>
              <div className="text-xl font-medium">contacto@tecnosilf.com</div>
            </div>
          </div>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0">
              <Phone size={24} />
            </div>
            <div>
              <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Teléfono</div>
              <div className="text-xl font-medium">+54 (2954) 456-789</div>
            </div>
          </div>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0">
              <MapPin size={24} />
            </div>
            <div>
              <div className="text-xs font-bold uppercase tracking-widest opacity-50 mb-1">Ubicación</div>
              <div className="text-xl font-medium">Santa Rosa, La Pampa, Argentina</div>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-white p-10 rounded-[40px] text-zinc-900">
        <form className="space-y-6">
          <div className="grid sm:grid-cols-2 gap-6">
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Nombre</label>
              <input type="text" className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all" />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Email</label>
              <input type="email" className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all" />
            </div>
          </div>
          <div>
            <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Asunto</label>
            <select className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all appearance-none">
              <option>Desarrollo de Software</option>
              <option>Infraestructura de Hardware</option>
              <option>Sistemas de Gestión</option>
              <option>Soporte Técnico</option>
            </select>
          </div>
          <div>
            <label className="block text-xs font-bold uppercase tracking-widest text-zinc-400 mb-2">Mensaje</label>
            <textarea className="w-full bg-zinc-50 border border-zinc-100 rounded-2xl py-4 px-6 focus:outline-none focus:border-zinc-900 transition-all min-h-[120px]" />
          </div>
          <button className="w-full bg-zinc-900 text-white py-5 rounded-2xl font-bold hover:bg-zinc-800 transition-all">
            Enviar Mensaje
          </button>
        </form>
      </div>
    </div>
    
    {/* Background Pattern */}
    <div className="absolute top-0 right-0 w-1/2 h-full bg-white/5 skew-x-12 translate-x-1/2" />
  </section>
);

const Footer = () => (
  <footer className="py-12 bg-white border-t border-zinc-100">
    <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
      <div className="flex items-center gap-2">
        <Logo className="h-10 w-auto" />
      </div>
      <p className="text-sm text-zinc-400">
        © 2026 Tecnosilf Soluciones Tecnológicas. Todos los derechos reservados.
      </p>
      <div className="flex gap-6">
        <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Monitor size={20} /></a>
        <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Code2 size={20} /></a>
        <a href="#" className="text-zinc-400 hover:text-zinc-900 transition-colors"><Database size={20} /></a>
      </div>
    </div>
  </footer>
);

export default function App() {
  const sistemas = [
    {
      title: "Monitoreo de Subestaciones",
      description: "Monitoreo activo de subestaciones subterráneas y a nivel en distribuidoras eléctricas con alertas en tiempo real.",
      icon: Zap,
      tags: ["Eléctricas", "Monitoreo", "Subestaciones"]
    },
    {
      title: "Sistema GIS Agua y Energía",
      description: "Sistema de información geográfica especializado para redes de agua corriente y energía eléctrica en distribuidoras.",
      icon: MapPin,
      tags: ["GIS", "Agua", "Energía"]
    },
    {
      title: "Toma de Estados Mobile",
      description: "Captura de estados y lecturas mediante dispositivos móviles para optimizar la gestión de distribuidoras.",
      icon: Smartphone,
      tags: ["Mobile", "Distribuidoras", "Eficiencia"]
    },
    {
      title: "Sistemas a Medida",
      description: "Diseño y desarrollo de soluciones de software personalizadas adaptadas a los requerimientos específicos de su empresa.",
      icon: Code2,
      tags: ["Custom", "Software", "Industria"]
    }
  ];

  const servicios = [
    {
      title: "Desarrollo a Medida",
      description: "Creamos aplicaciones web y móviles escalables utilizando las últimas tecnologías del mercado.",
      icon: Code2,
      tags: ["Web", "Mobile", "API"]
    },
    {
      title: "Infraestructura IT",
      description: "Diseño y despliegue de redes, servidores y centros de datos con estándares internacionales.",
      icon: Server,
      tags: ["Redes", "Servidores", "Capa 3"]
    },
    {
      title: "Soporte Especializado",
      description: "Mantenimiento preventivo y correctivo de sistemas críticos con respuesta inmediata 24/7.",
      icon: Users,
      tags: ["Soporte", "Mantenimiento", "SLA"]
    }
  ];

  const hardwareItems = [
    {
      title: "Sistemas Embebidos",
      description: "Diseño de placas de circuito impreso (PCB) y firmware optimizado para aplicaciones industriales específicas.",
      icon: Cpu,
      tags: ["PCB Design", "Firmware", "C/C++"]
    },
    {
      title: "Sensores Industriales",
      description: "Desarrollo de sensores de precisión para medición de variables críticas en entornos de alta exigencia.",
      icon: Settings,
      tags: ["Precisión", "IoT", "RS485"]
    },
    {
      title: "Infraestructura de Red",
      description: "Implementación de redes industriales robustas y seguras para la interconexión de dispositivos en planta.",
      icon: Server,
      tags: ["Networking", "Seguridad", "Fibra"]
    }
  ];

  const softwareItems = [
    {
      title: "Aplicaciones Web & Cloud",
      description: "Plataformas escalables para la gestión de datos y visualización de procesos en tiempo real desde cualquier lugar.",
      icon: Monitor,
      tags: ["React", "Node.js", "AWS"]
    },
    {
      title: "Desarrollo Mobile",
      description: "Apps nativas y multiplataforma para la toma de datos en campo y control remoto de dispositivos.",
      icon: ArrowRight, // Using ArrowRight as a placeholder for Mobile icon if not available
      tags: ["React Native", "Offline-first", "UX"]
    },
    {
      title: "Bases de Datos & Big Data",
      description: "Arquitecturas de datos optimizadas para el almacenamiento y análisis de grandes volúmenes de información industrial.",
      icon: Database,
      tags: ["SQL", "NoSQL", "Analytics"]
    }
  ];

  return (
    <div className="min-h-screen bg-white text-zinc-900 selection:bg-zinc-900 selection:text-white">
      <Navbar />
      <Hero />
      
      <FeatureGrid 
        id="sistemas"
        title="Sistemas Propios" 
        subtitle="Soluciones robustas desarrolladas internamente para resolver problemáticas específicas de la industria moderna."
        items={sistemas}
      />

      <div className="bg-zinc-50 py-24">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center">
          <div className="order-2 lg:order-1">
            <div className="grid grid-cols-2 gap-4">
              <div className="aspect-square bg-white rounded-3xl border border-zinc-100 p-8 flex flex-col justify-center items-center text-center">
                <div className="text-4xl font-black mb-2">10+</div>
                <div className="text-xs font-bold uppercase tracking-widest text-zinc-400">Años de Exp.</div>
              </div>
              <div className="aspect-square bg-zinc-900 text-white rounded-3xl p-8 flex flex-col justify-center items-center text-center">
                <div className="text-4xl font-black mb-2">15+</div>
                <div className="text-xs font-bold uppercase tracking-widest opacity-50">Clientes</div>
              </div>
              <div className="aspect-square bg-zinc-900 text-white rounded-3xl p-8 flex flex-col justify-center items-center text-center">
                <div className="text-4xl font-black mb-2">50+</div>
                <div className="text-xs font-bold uppercase tracking-widest opacity-50">Proyectos</div>
              </div>
              <div className="aspect-square bg-white rounded-3xl border border-zinc-100 p-8 flex flex-col justify-center items-center text-center">
                <div className="text-4xl font-black mb-2">24/7</div>
                <div className="text-xs font-bold uppercase tracking-widest text-zinc-400">Soporte</div>
              </div>
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <h2 className="text-5xl font-black tracking-tighter mb-8">Confianza en el Sector Cooperativo.</h2>
            <p className="text-xl text-zinc-600 leading-relaxed mb-8">
              Contamos con una sólida trayectoria brindando soluciones tecnológicas a más de 10 cooperativas de energía eléctrica distribuidas entre la Provincia de Buenos Aires y La Pampa.
            </p>
            <ul className="space-y-4">
              {['Monitoreo de Redes Eléctricas', 'Gestión de Recursos Hídricos', 'Soporte Técnico Especializado'].map((item) => (
                <li key={item} className="flex items-center gap-3 font-bold">
                  <div className="w-6 h-6 bg-zinc-900 rounded-full flex items-center justify-center">
                    <ChevronRight size={14} className="text-white" />
                  </div>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <FeatureGrid 
        id="servicios"
        title="Servicios Profesionales" 
        subtitle="Acompañamos a su empresa en cada etapa de su transformación digital con consultoría y ejecución experta."
        items={servicios}
      />

      <div id="hardware" className="bg-zinc-900 py-24 text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-5xl font-black tracking-tighter mb-6">Hardware de <br />Grado Industrial.</h2>
              <p className="text-zinc-400 text-lg mb-10 leading-relaxed">
                Diseñamos dispositivos capaces de operar en las condiciones más extremas, garantizando durabilidad y precisión milimétrica en cada componente.
              </p>
              <div className="space-y-6">
                {hardwareItems.map((item, idx) => (
                  <div key={idx} className="flex gap-4 p-6 bg-white/5 rounded-2xl border border-white/10">
                    <div className="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center shrink-0">
                      <item.icon size={24} />
                    </div>
                    <div>
                      <h3 className="font-bold text-lg mb-1">{item.title}</h3>
                      <p className="text-sm text-zinc-400">{item.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <div className="aspect-[4/5] bg-zinc-800 rounded-[40px] overflow-hidden">
                <img 
                  src="https://picsum.photos/seed/industrial-server/800/1000" 
                  alt="Control Industrial" 
                  className="w-full h-full object-cover opacity-50 grayscale"
                  referrerPolicy="no-referrer"
                />
              </div>
              <div className="absolute -bottom-10 -left-10 p-8 bg-white text-zinc-900 rounded-3xl shadow-2xl max-w-xs">
                <div className="text-3xl font-black mb-2">10+</div>
                <p className="text-sm font-medium text-zinc-500">Cooperativas eléctricas confían en nuestra tecnología en BA y La Pampa.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <section id="software" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col lg:flex-row justify-between items-end mb-16 gap-8">
            <div>
              <h2 className="text-5xl font-black tracking-tighter mb-4">Software que <br />Simplifica lo Complejo.</h2>
              <p className="text-zinc-500 max-w-xl">Interfaces intuitivas y motores de procesamiento potentes para que el control de su empresa esté siempre a un clic de distancia.</p>
            </div>
            <div className="flex gap-4">
              <div className="px-6 py-3 bg-zinc-100 rounded-full text-sm font-bold">Cloud Native</div>
              <div className="px-6 py-3 bg-zinc-100 rounded-full text-sm font-bold">Real-time Data</div>
            </div>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {softwareItems.map((item, idx) => (
              <div key={idx} className="p-10 bg-zinc-50 rounded-[40px] border border-transparent hover:border-zinc-200 transition-all">
                <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-8 shadow-sm">
                  <item.icon size={32} className="text-zinc-900" />
                </div>
                <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
                <p className="text-zinc-600 mb-8 leading-relaxed">{item.description}</p>
                <div className="flex flex-wrap gap-2">
                  {item.tags.map(tag => (
                    <span key={tag} className="px-3 py-1 bg-white border border-zinc-100 rounded-lg text-[10px] font-bold uppercase tracking-widest text-zinc-400">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ContactSection />
      <Footer />
    </div>
  );
}