import React, { useState, useEffect } from 'react';
import { 
  ShieldCheck, 
  Monitor, 
  Award, 
  ChevronRight, 
  Play, 
  CheckCircle2, 
  Users, 
  ClipboardCheck, 
  ArrowRight,
  Menu,
  X,
  MessageCircle,
  Mail,
  Activity,
  FileText,
  Flame,
  Globe,
  Settings,
  BookOpen,
  Scale,
  Handshake,
  HeartPulse,
  Image as ImageIcon
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const schoolCommitments = [
    "Garantizar el cumplimiento de los aspectos señalados en el Plan.",
    "Mantener un registro actualizado de todas las medidas implementadas.",
    "Fomentar la participación activa del Comité de Seguridad Escolar.",
    "Facilitar los recursos para simulacros y capacitaciones continuas.",
    "Integrar la gestión de riesgos como eje transversal en el currículo."
  ];

  const images = [
    "https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=400&q=80",
    "https://images.unsplash.com/photo-1523050853064-94604677a5a5?auto=format&fit=crop&w=400&q=80",
    "https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=400&q=80",
    "https://images.unsplash.com/photo-1573161158365-59b832b0011a?auto=format&fit=crop&w=400&q=80"
  ];

  return (
    <div className="min-h-screen bg-white font-sans text-slate-900 overflow-x-hidden">
      {/* Botón Flotante WhatsApp */}
      <a 
        href="https://wa.me/50700000000" 
        target="_blank" 
        rel="noopener noreferrer"
        className="fixed bottom-8 right-8 z-[100] bg-green-500 text-white p-4 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center justify-center border-4 border-white"
      >
        <MessageCircle className="w-8 h-8 fill-current" />
      </a>

      {/* Navegación */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-2' : 'bg-transparent py-4'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-blue-700 p-1.5 rounded-lg">
              <ShieldCheck className="text-white w-6 h-6" />
            </div>
            <div className="flex flex-col leading-none">
              <span className="font-bold text-xl tracking-tight text-blue-900 uppercase">TECS PANAMÁ</span>
              <span className="text-[10px] font-bold text-blue-500 tracking-widest uppercase">Especialistas en Prevención</span>
            </div>
          </div>

          <div className="hidden md:flex items-center space-x-8">
            <a href="#quienes-somos" className="font-medium hover:text-blue-600 transition-colors text-sm">¿Quiénes Somos?</a>
            <a href="#compromisos" className="font-medium hover:text-blue-600 transition-colors text-sm">Compromisos</a>
            <a href="#normativa" className="font-medium hover:text-blue-600 transition-colors text-sm">Ley 38</a>
            <a 
              href="https://autodiagnostico.tecspanama.net/" 
              target="_blank"
              className="bg-blue-700 text-white px-5 py-2.5 rounded-full font-bold hover:bg-blue-800 transition-all shadow-lg flex items-center gap-2 text-sm"
            >
              <Activity className="w-4 h-4" /> Auto-Diagnóstico Rápido
            </a>
          </div>

          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 bg-slate-50 overflow-hidden">
        <div className="absolute top-0 right-0 w-1/2 h-full bg-blue-600/5 -skew-x-12 transform origin-top-right"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold tracking-wider uppercase">
                <Award className="w-4 h-4" /> LÍDERES CON MÁS DE 20 AÑOS DE EXPERIENCIA
              </div>
              <h1 className="text-5xl lg:text-6xl font-black text-slate-900 leading-tight">
                Empresa Especialista en <span className="text-blue-700">Prevención de Riesgos.</span>
              </h1>
              <p className="text-xl text-slate-600 max-w-xl leading-relaxed">
                En **TECS PANAMÁ** nos especializamos en la preparación ante emergencias y gestión integral de riesgos. Transformamos la obligación legal en una cultura de resiliencia escolar.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <a 
                  href="https://autodiagnostico.tecspanama.net/"
                  target="_blank"
                  className="bg-blue-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-blue-800 transition-all flex items-center justify-center gap-2 shadow-xl shadow-blue-200"
                >
                  Auto-Diagnóstico Rápido <ChevronRight className="w-5 h-5" />
                </a>
                <a 
                  href="mailto:info@tecspanama.com"
                  className="bg-white border-2 border-slate-200 text-slate-700 px-8 py-4 rounded-xl font-bold text-lg hover:bg-slate-50 transition-all flex items-center justify-center gap-2"
                >
                  <Mail className="w-5 h-5" /> Consultar Ahora
                </a>
              </div>
            </div>
            <div className="relative grid grid-cols-2 gap-4">
              {images.map((img, i) => (
                <div key={i} className={`rounded-2xl overflow-hidden shadow-lg ${i % 2 !== 0 ? 'mt-8' : ''}`}>
                  <img src={img} alt={`Simulacro ${i}`} className="w-full h-48 object-cover hover:scale-110 transition-transform duration-500" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Seccion ¿Quiénes Somos? */}
      <section id="quienes-somos" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="space-y-6">
              <h2 className="text-3xl font-black text-slate-900 uppercase">¿Quiénes Somos?</h2>
              <p className="text-lg text-slate-600 leading-relaxed">
                **TECS PANAMÁ** es una empresa panameña con **más de 20 años de experiencia** dedicada exclusivamente a la prevención de riesgos y preparación de emergencias. 
              </p>
              <p className="text-slate-600 leading-relaxed">
                Nuestra misión es empoderar a los centros educativos mediante metodologías probadas como el **"Aprendiendo Haciendo"**, asegurando que cada miembro de la comunidad educativa sepa exactamente qué hacer cuando cada segundo cuenta.
              </p>
              <div className="flex gap-4 items-center p-6 bg-blue-50 rounded-3xl border border-blue-100">
                <HeartPulse className="w-12 h-12 text-blue-700" />
                <div>
                  <h4 className="font-bold text-blue-900">Cultura Resiliente</h4>
                  <p className="text-sm text-slate-600">No solo hacemos planes; construimos instituciones capaces de resistir y recuperarse.</p>
                </div>
              </div>
            </div>
            <div className="space-y-6">
              <div className="max-w-md mx-auto">
                 <div className="aspect-video bg-slate-900 rounded-[2rem] overflow-hidden relative shadow-xl border-4 border-slate-50 group cursor-pointer">
                    <div className="absolute inset-0 bg-blue-900/20 group-hover:bg-blue-900/10 transition-colors flex flex-col items-center justify-center text-white">
                       <Play className="fill-white w-12 h-12 mb-2" />
                       <span className="text-xs font-bold uppercase tracking-widest">Ver Experiencia Aliados</span>
                    </div>
                 </div>
                 <p className="text-center text-xs text-slate-400 mt-4 uppercase font-bold tracking-widest">Nuestra metodología en acción</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Compromisos y Por qué PEGIRD */}
      <section id="compromisos" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16">
            <div className="space-y-8">
              <h2 className="text-3xl font-black text-slate-900">¿Por qué es vital realizar el PEGIRD?</h2>
              <p className="text-lg text-slate-600">
                Más allá de la obligatoriedad, el **PEGIRD** es la herramienta que salva vidas. Una cultura preventiva reduce el impacto de desastres y garantiza la continuidad educativa.
              </p>
              <div className="grid sm:grid-cols-2 gap-6">
                 {[
                   { t: "Protección Real", d: "Salvaguarda la integridad de estudiantes y personal.", i: <ShieldCheck /> },
                   { t: "Resiliencia", d: "Capacidad de retorno a clases inmediato tras siniestros.", i: <Activity /> },
                   { t: "Cultura Preventiva", d: "Educación que trasciende de la escuela al hogar.", i: <BookOpen /> },
                   { t: "Legalidad", d: "Alineación total con MEDUCA y Ley 38.", i: <Scale /> }
                 ].map((item, i) => (
                   <div key={i} className="bg-white p-6 rounded-2xl border border-slate-200">
                      <div className="text-blue-600 mb-3">{item.i}</div>
                      <h4 className="font-bold text-slate-900 mb-1">{item.t}</h4>
                      <p className="text-xs text-slate-500">{item.d}</p>
                   </div>
                 ))}
              </div>
            </div>
            <div className="bg-white p-10 rounded-[3rem] shadow-xl border border-blue-100">
              <div className="flex items-center gap-4 mb-8">
                <Handshake className="w-10 h-10 text-blue-700" />
                <h3 className="text-2xl font-black text-slate-900 uppercase">Compromisos del Centro</h3>
              </div>
              <div className="space-y-6">
                {schoolCommitments.map((text, i) => (
                  <div key={i} className="flex gap-4 items-start">
                    <div className="mt-1 bg-green-100 p-1 rounded-full text-green-700">
                      <CheckCircle2 className="w-4 h-4" />
                    </div>
                    <p className="text-slate-700 font-medium">{text}</p>
                  </div>
                ))}
              </div>
              <div className="mt-10 p-6 bg-slate-50 rounded-2xl italic text-sm text-slate-500 border-l-4 border-blue-700">
                "Al firmar el acta me comprometo a garantizar el cumplimiento de los aspectos señalados y mantener registros actualizados de cada medida implementada."
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sistema SIGPE */}
      <section id="sigpe" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <h2 className="text-4xl font-black text-slate-900 uppercase">Sistema SIGPE</h2>
            <p className="text-lg text-slate-600">
              Nuestro **Sistema de Gestión Preventiva Escolar** no es solo un plan; es la estructura que pone en marcha la seguridad.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { t: "Estructura Operativa", d: "Protocolos claros para brigadas y comités de seguridad.", i: <Settings /> },
              { t: "Acompañamiento Técnico", d: "Consultoría experta en cada fase de implementación.", i: <ClipboardCheck /> },
              { t: "Eje Transversal", d: "Integración de la GIRD en la vida diaria de la escuela.", i: <Globe /> }
            ].map((s, i) => (
              <div key={i} className="p-8 rounded-[2rem] bg-slate-50 border border-slate-100 hover:shadow-lg transition-all group">
                <div className="mb-6 bg-blue-100 w-14 h-14 rounded-xl flex items-center justify-center text-blue-700 group-hover:bg-blue-700 group-hover:text-white transition-colors">
                  {s.i}
                </div>
                <h3 className="text-xl font-bold mb-3">{s.t}</h3>
                <p className="text-slate-500 text-sm">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer & Avales */}
      <footer className="bg-slate-950 text-slate-500 pt-24 pb-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-12 mb-20">
            <div className="col-span-1 md:col-span-2 space-y-8">
              <div className="flex items-center gap-2 text-white">
                <ShieldCheck className="w-10 h-10 text-blue-500" />
                <div className="flex flex-col leading-none">
                  <span className="font-bold text-2xl tracking-tighter">TECS PANAMÁ</span>
                  <span className="text-[10px] text-blue-400 font-bold uppercase tracking-widest">Expertos en Prevención desde hace +20 años</span>
                </div>
              </div>
              <p className="max-w-sm text-sm leading-relaxed">
                Especialistas en la Ley 38 y la Guía MEDUCA 2022. Construyendo escuelas resilientes y preparadas para el futuro.
              </p>
              <div className="space-y-4">
                 <p className="text-white font-black text-[10px] uppercase tracking-[0.3em]">Instructores avalados por:</p>
                 <div className="flex flex-wrap gap-x-6 gap-y-2 items-center">
                    <span className="font-black text-white/30 text-xs">BCBRP</span>
                    <span className="font-black text-white/30 text-xs">SINAPROC</span>
                    <span className="font-black text-white/30 text-xs">MINSA</span>
                 </div>
              </div>
              <div className="flex gap-8 pt-4">
                 <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-xl border border-white/10">
                    <span className="text-white font-black italic text-xs tracking-widest">ACES</span>
                 </div>
                 <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-xl border border-white/10">
                    <span className="text-white font-black italic text-xs tracking-widest">AIDER</span>
                 </div>
              </div>
            </div>

            <div>
              <h5 className="text-white font-bold mb-8 uppercase text-[10px] tracking-widest">Acceso Rápido</h5>
              <ul className="space-y-4 text-xs font-bold">
                <li><a href="https://autodiagnostico.tecspanama.net/" target="_blank" className="text-blue-400 uppercase tracking-widest">Auto-Diagnóstico</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Normativa Ley 38</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Guía PEGIRD 2022</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Consultoría Directa</a></li>
              </ul>
            </div>

            <div className="space-y-6">
              <h5 className="text-white font-bold mb-8 uppercase text-[10px] tracking-widest">Contacto</h5>
              <a href="mailto:info@tecspanama.com" className="w-full bg-white/5 border border-white/10 text-white py-4 px-6 rounded-2xl flex items-center gap-3 hover:bg-white/10 transition-all font-bold text-xs">
                <Mail className="w-4 h-4" /> Enviar Correo
              </a>
              <a href="https://wa.me/50700000000" className="w-full bg-green-600/20 border border-green-600/30 text-green-400 py-4 px-6 rounded-2xl flex items-center gap-3 hover:bg-green-600/30 transition-all font-bold text-xs uppercase tracking-widest">
                <MessageCircle className="w-4 h-4" /> WhatsApp
              </a>
            </div>
          </div>
          <div className="pt-12 border-t border-white/5 text-center">
            <p className="text-[9px] font-black tracking-[0.4em] uppercase text-white/30">
              © 2024 TECS PANAMÁ | ESPECIALISTAS EN PREVENCIÓN DE RIESGOS | LEY 38
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;