/* global React, ReactDOM */

const { useState, useEffect } = React;

/* SVG Icons Helper */
const Icons = {
  Phone: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Mail: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
      <polyline points="22,6 12,13 2,6"/>
    </svg>
  ),
  Clock: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
  MapPin: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  ),
  Globe: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="2" y1="12" x2="22" y2="12"/>
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  ),
  ChevronRight: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="9 18 15 12 9 6"/>
    </svg>
  ),
  ChevronDown: () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  ),
  Check: () => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  Shield: () => (
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    </svg>
  ),
  Server: () => (
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
      <rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
      <line x1="6" y1="6" x2="6.01" y2="6"/>
      <line x1="6" y1="18" x2="6.01" y2="18"/>
    </svg>
  ),
  Code: () => (
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="16 18 22 12 16 6"/>
      <polyline points="8 6 2 12 8 18"/>
    </svg>
  ),
  BookOpen: () => (
    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
      <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
    </svg>
  ),
  TerminalIcon: () => (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="4 17 10 11 4 5"/>
      <line x1="12" y1="19" x2="20" y2="19"/>
    </svg>
  )
};

/* Topbar */
function Topbar() {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-info">
          <div className="topbar-item">
            <Icons.Clock />
            <span>Lun - Vie : 8:00 - 18:00</span>
          </div>
          <div className="topbar-item">
            <Icons.Mail />
            <a href="mailto:ventas@ticglobal.com.mx">ventas@ticglobal.com.mx</a>
          </div>
          <div className="topbar-item">
            <Icons.Globe />
            <span>LATAM: México 🇲🇽 · Colombia 🇨🇴 · Panamá 🇵🇦</span>
          </div>
        </div>
        <div className="topbar-social">
          <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">Facebook</a>
          <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">LinkedIn</a>
        </div>
      </div>
    </div>
  );
}

/* Header Component with Floating Glass Navbar */
function Header() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 40);
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header className="header-wrapper">
      <Topbar />
      <nav className={`navbar ${scrolled ? "scrolled" : ""}`}>
        <div className="container navbar-inner">
          <a href="#" className="nav-brand">
            <img src="assets/live/logotic.png" alt="Tic Global" className="nav-logo-img" />
          </a>
          <ul className="nav-menu">
            <li><a href="#" className="active">Inicio</a></li>
            <li><a href="#acerca">Acerca de</a></li>
            <li><a href="#opensource">Software Libre</a></li>
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#capacitacion">Capacitación</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contacto">Contacto</a></li>
          </ul>
          <div className="nav-cta">
            <div className="phone-badge">
              <div className="phone-badge-icon">
                <Icons.Phone />
              </div>
              <div className="phone-badge-text">
                <span className="phone-badge-label">¿Cómo podemos ayudarte?</span>
                <a href="tel:+5213313513417" className="phone-badge-number">+52 1 33 1351 3417</a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>
  );
}

/* Hero Slider */
function HeroSlider() {
  const slides = [
    {
      tag: "Blindaje con Software Libre // Linux Debian",
      title: "Ciberseguridad de Código Abierto",
      desc: "Auditorías, pentesting y hardening construidos sobre Linux Debian y herramientas Open Source auditadas por una comunidad global.",
      bg: "assets/live/h1-slider01.jpg"
    },
    {
      tag: "Infraestructura hecha a la medida",
      title: "Análisis de Infraestructura Crítica",
      desc: "Tecnología sólida, escalable y lista para evolucionar contigo en México, Colombia y Panamá.",
      bg: "assets/live/h1-slider02.jpg"
    },
    {
      tag: "Pentesting Black, White & Grey Box",
      title: "Auditorías & Hardening de Seguridad",
      desc: "Evaluación proactiva de brechas, políticas de gobernanza de seguridad y respuesta inmediata a vulnerabilidades.",
      bg: "assets/live/h1-slider03.jpg"
    }
  ];

  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length]);

  return (
    <div className="hero-slider">
      {slides.map((s, idx) => (
        <div key={idx} className={`slide ${idx === current ? "active" : ""}`}>
          <div className="slide-bg" style={{ backgroundImage: `url(${s.bg})` }} />
          <div className="slide-overlay" />
          <div className="container">
            <div className="slide-content">
              <span className="slide-tag">{s.tag}</span>
              <h1 className="slide-title">{s.title}</h1>
              <p className="slide-desc">{s.desc}</p>
              <div className="slide-cta-wrap">
                <a href="#opensource" className="btn btn-primary">
                  Conoce más <Icons.ChevronRight />
                </a>
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className="slider-nav-container">
        <div className="slider-dots">
          {slides.map((_, i) => (
            <div
              key={i}
              className={`slider-dot ${i === current ? "active" : ""}`}
              onClick={() => setCurrent(i)}
            />
          ))}
        </div>
        <button className="slider-btn" aria-label="Anterior" onClick={() => setCurrent((current - 1 + slides.length) % slides.length)}>
          ❮
        </button>
        <button className="slider-btn" aria-label="Siguiente" onClick={() => setCurrent((current + 1) % slides.length)}>
          ❯
        </button>
      </div>
    </div>
  );
}

/* Feature Cards (5 Pilares de Servicio) */
function FeatureCards() {
  const cards = [
    {
      icon: "assets/live/icon-sv2-1.svg",
      tag: "Ciberseguridad",
      title: "Pentesting & Ciberseguridad",
      desc: "Auditorías Black, White & Grey Box, hardening sobre Linux Debian, monitoreo constante y respuesta ágil ante vulnerabilidades (CVE)."
    },
    {
      icon: "assets/live/icon-sv6-1.svg",
      tag: "Infraestructura",
      title: "Infraestructura & Redes Seguras",
      desc: "Firewalls libres, IDS/IPS, redes LAN/WAN/VPN con comunicaciones cifradas, virtualización KVM/XEN y continuidad de negocio."
    },
    {
      icon: "assets/live/icon-opensource.svg",
      tag: "Software Libre",
      title: "Ciberseguridad Open Source",
      desc: "Blindaje sobre Linux Debian. Código 100% auditable por la comunidad global, cero vendor lock-in y menor costo total (TCO)."
    },
    {
      icon: "assets/live/icon-sv7-1.svg",
      tag: "Desarrollo SSDLC",
      title: "Desarrollo Seguro (SSDLC)",
      desc: "Ciclo de Vida de Desarrollo Seguro (SSDLC). Creamos ERP, CRM, CMS y LMS adaptados exactamente a tu operación diaria."
    },
    {
      icon: "assets/live/icon-sv9-1.svg",
      tag: "Formación",
      title: "Capacitación & Anti-Phishing",
      desc: "Formación en administración Linux, hardening de servidores, concientización ante ingeniería social y phishing."
    }
  ];

  return (
    <section className="feature-cards-section">
      <div className="container">
        <div className="cards-grid">
          {cards.map((c, i) => (
            <div key={i} className="feature-card">
              <div className="feature-icon-wrap">
                <img src={c.icon} alt={c.title} style={{ width: "36px", height: "36px" }} />
              </div>
              <span className="latam-tag" style={{ marginBottom: "12px", width: "fit-content" }}>{c.tag}</span>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Terminal CLI Component */
function TerminalCLI() {
  return (
    <div className="terminal-box">
      <div className="terminal-header">
        <div className="terminal-dots">
          <div className="dot-red" />
          <div className="dot-yellow" />
          <div className="dot-green" />
        </div>
        <div className="terminal-title">bash — tic_global (Debian 12 Bookworm)</div>
        <div style={{ width: "40px" }} />
      </div>
      <div className="terminal-body">
        <div>
          <span className="t-prompt">$ whoami</span>
        </div>
        <div className="t-output">> aliado en ciberseguridad e infraestructura crítica</div>
        
        <div style={{ marginTop: "12px" }}>
          <span className="t-prompt">$ cat ventaja.txt</span>
        </div>
        <div className="t-output">> código abierto. transparencia total. cero vendor lock-in.</div>
        
        <div style={{ marginTop: "12px" }}>
          <span className="t-prompt">$ ls mercados/</span>
        </div>
        <div className="t-output">> mexico &nbsp;&nbsp; colombia &nbsp;&nbsp; panama</div>

        <div style={{ marginTop: "12px" }}>
          <span className="t-prompt">$ ./pentesting_audit.sh --target=infraestructura</span>
        </div>
        <div className="t-sub">> [OK] Auditoría Black/White/Grey Box completada</div>
        <div className="t-sub">> [OK] Hardening de kernel Debian aplicado</div>
        <div className="t-sub">> [OK] Firewall & IDS/IPS perimetral activo</div>

        <div style={{ marginTop: "12px" }}>
          <span className="t-prompt">$ _</span>
        </div>
      </div>
    </div>
  );
}

/* About Section */
function About() {
  return (
    <section id="acerca" className="about-section">
      <div className="container">
        <div className="about-grid">
          <div className="about-images">
            <img src="assets/live/h1-banner9-1.jpg" alt="TIC Global Ciberseguridad" className="about-img-main" />
            <img src="assets/live/h1-banner10-1.jpg" alt="Equipos TIC Global" className="about-img-secondary" />
          </div>
          <div>
            <span className="section-subtitle">¿Quienes Somos? TICGLOBAL // MÉXICO · COLOMBIA · PANAMÁ</span>
            <h2 className="section-title">Un socio tecnológico construido sobre Software Libre</h2>
            <p style={{ marginBottom: "20px", color: "var(--text-muted)", fontSize: "15.5px" }}>
              Desde 2020, <strong>Seguridad y Desarrollos de TIC Global</strong> acompaña a organizaciones de México, Colombia y Panamá en su transformación digital. Nos especializamos en infraestructura crítica, ciberseguridad y desarrollo seguro, apoyados en sistemas GNU/Linux —Debian y sus derivados— y en el ecosistema open source: el mismo software que auditan miles de ojos alrededor del mundo.
            </p>
            <ul className="about-bullets">
              <li className="about-bullet-item"><span className="bullet-icon"><Icons.Check /></span> Auditorías & Pentesting</li>
              <li className="about-bullet-item"><span className="bullet-icon"><Icons.Check /></span> Hardening Linux Debian</li>
              <li className="about-bullet-item"><span className="bullet-icon"><Icons.Check /></span> Desarrollo Seguro (SSDLC)</li>
              <li className="about-bullet-item"><span className="bullet-icon"><Icons.Check /></span> Formación Anti-Phishing</li>
            </ul>
            <div className="about-highlight-box">
              El valor de TIC Global está en la precisión: soluciones claras, seguras y útiles, sin exceso ni complejidad. Blindamos tu empresa con la fuerza del Software Libre, eliminando licencias propietarias y garantizando la libertad de tu infraestructura.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Open Source Section */
function OpenSourceSection() {
  const benefits = [
    {
      title: "Código Auditable",
      desc: "Miles de desarrolladores e investigadores revisan cada línea de código; las vulnerabilidades se detectan y corrigen con máxima velocidad y transparencia."
    },
    {
      title: "Sin Vendor Lock-in",
      desc: "Libertad total para adaptar, migrar y escalar tu infraestructura sin depender de licencias propietarias ni de un solo proveedor de tecnología."
    },
    {
      title: "Parches Ágiles CVE",
      desc: "La comunidad global de Linux Debian responde a vulnerabilidades de seguridad con rapidez, trazabilidad pública y actualizaciones inmediatas."
    },
    {
      title: "Menor TCO (Costo Total)",
      desc: "Reducimos significativamente el costo total de propiedad (TCO) de tu empresa sin sacrificar robustez, rendimiento ni cumplimiento de normativas."
    }
  ];

  return (
    <section id="opensource" className="opensource-section">
      <div className="container">
        <span className="section-subtitle">Por qué elegir Open Source</span>
        <h2 className="section-title">La transparencia como estrategia de seguridad</h2>
        <p style={{ color: "var(--text-muted)", fontSize: "16px", maxWidth: "700px" }}>
          Elegimos Linux Debian y herramientas libres porque en ciberseguridad, lo que se puede auditar, se puede confiar.
        </p>

        <div className="opensource-grid">
          {benefits.map((b, idx) => (
            <div key={idx} className="opensource-card">
              <h3>{b.title}</h3>
              <p>{b.desc}</p>
            </div>
          ))}
        </div>

        <TerminalCLI />
      </div>
    </section>
  );
}

/* Services Gallery Section */
function ServicesGallery() {
  const list = [
    { title: "Auditorías & Pentesting Box", desc: "Pruebas Black, White & Grey Box para identificar y solucionar brechas de seguridad antes de que un atacante las explote." },
    { title: "Hardening & Seguridad Perimetral", desc: "Endurecimiento de sistemas Linux Debian, Firewalls e IDS/IPS libres, redes LAN/WAN/VPN con comunicaciones cifradas." },
    { title: "Políticas & Gobernanza de Seguridad", desc: "Procedimientos preventivos y reactivos que fortalecen la gobernanza de la seguridad de la información." },
    { title: "Desarrollo Seguro de Software (SSDLC)", desc: "Construcción e integración de sistemas ERP, CRM, CMS y LMS dentro de un Ciclo de Vida Seguro." }
  ];

  return (
    <section id="servicios" className="services-section">
      <div className="container">
        <span className="section-subtitle" style={{ color: "var(--accent-green)" }}>Blindaje Integral: De la Auditoría a la Remediación</span>
        <h2 className="section-title">Nuestros Servicios de Ciberseguridad</h2>
        <div className="services-grid">
          {list.map((s, idx) => (
            <div key={idx} className="svc-item">
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <a href="#contacto" className="svc-link">Conoce más <Icons.ChevronRight /></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Training Section */
function Training() {
  const tracks = [
    { title: "Linux Sysadmin Track", desc: "Administración de sistemas Linux Debian para usuarios, administradores de servidor y desarrolladores." },
    { title: "Hardening & Buenas Prácticas", desc: "Configuración avanzada de seguridad, hardening de kernel y servicios en entornos libres." },
    { title: "Anti-Phishing & Concientización", desc: "Entrenamiento práctico ante ingeniería social, phishing y prevención de vectores humanos." },
    { title: "Cloud & Virtualización (KVM/XEN)", desc: "Despliegue y administración de infraestructuras virtuales privadas de alta disponibilidad." }
  ];

  return (
    <section id="capacitacion" style={{ padding: "100px 0", backgroundColor: "var(--bg-light)" }}>
      <div className="container">
        <span className="section-subtitle">Capacitación Especializada</span>
        <h2 className="section-title">Blinda a tu equipo, no solo tu infraestructura</h2>
        <p style={{ color: "var(--text-muted)", fontSize: "16px", maxWidth: "700px" }}>
          La tecnología avanza rápido; mantener a tu equipo actualizado es la mejor inversión. Formación ejecutiva y técnica adaptada a tu organización.
        </p>
        <div className="tracks-grid">
          {tracks.map((t, idx) => (
            <div key={idx} className="track-card">
              <h4>{t.title}</h4>
              <p>{t.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Process Section */
function Process() {
  const steps = [
    {
      num: "01",
      img: "assets/live/process-image-1-1.jpg",
      title: "Escuchamos primero",
      desc: "No llegamos a venderte licencias. Comenzamos con una conversación honesta para comprender tus retos, procesos y nivel de riesgo operacional."
    },
    {
      num: "02",
      img: "assets/live/process-image-2-1.jpg",
      title: "Diseñamos contigo",
      desc: "Creamos una propuesta técnica en software libre pensada a tu medida. Diseñamos con base en lo que tu negocio necesita para escalar libremente."
    },
    {
      num: "03",
      img: "assets/live/process-image-3-1.jpg",
      title: "Implementamos con orden",
      desc: "Ejecutamos cada auditoría y despliegue con precisión, documentación y hardening. Integramos herramientas funcionales desde el primer día."
    },
    {
      num: "04",
      img: "assets/live/h1-banner6-1.jpg",
      title: "Acompañamiento continuo",
      desc: "Mantenemos soporte y respuesta ágil a vulnerabilidades. Estamos listos para darte ese impulso tecnológico de nivel internacional."
    }
  ];

  return (
    <section className="process-section">
      <div className="container">
        <span className="section-subtitle">Nuestro proceso de trabajo</span>
        <h2 className="section-title">Soluciones de valor</h2>
        <div className="process-grid">
          {steps.map((st, i) => (
            <div key={i} className="process-step-enhanced">
              <div className="process-img-box">
                <img src={st.img} alt={st.title} className="process-step-img" />
                <span className="process-step-badge">{st.num}</span>
              </div>
              <div className="process-step-content">
                <h3>{st.title}</h3>
                <p>{st.desc}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "48px" }}>
          <div className="badge-stat">
            <span style={{ fontSize: "20px", color: "var(--accent-green)" }}>100% Libre</span>
            <span>Código Abierto & Auditable</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ Accordion Section */
function FAQ() {
  const faqs = [
    {
      q: "1. ¿En qué países tienen presencia y soporte?",
      a: "Acompañamos a organizaciones en México, Colombia y Panamá, brindando soporte técnico, auditorías de ciberseguridad y servicios administrados de infraestructura."
    },
    {
      q: "2. ¿Por qué elegir Software Libre y Debian para la ciberseguridad?",
      a: "Porque en ciberseguridad, lo que se puede auditar se puede confiar. Al ser de código abierto, miles de especialistas globales revisan el código, permitiendo parches ágiles ante CVEs y eliminando el costo recurrente de licencias propietarias."
    },
    {
      q: "3. ¿Qué incluye una auditoría de seguridad y pentesting?",
      a: "Realizamos evaluaciones Black, White & Grey Box en hardware, software y servicios para detectar brechas antes de que sean explotadas. Entregamos informes ejecutivos/técnicos, planes de remediación y protocolos de respuesta."
    },
    {
      q: "4. ¿Cómo ayudan a mi equipo con la concientización anti-phishing?",
      a: "Brindamos talleres prácticos de concientización ante ingeniería social y phishing, entrenando al personal para ser la primera línea de defensa activa ante amenazas informáticas."
    }
  ];

  const [active, setActive] = useState(0);

  return (
    <section id="faq" className="faq-section">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="section-subtitle">Preguntas esenciales</span>
            <h2 className="section-title">Lo que todos quieren saber</h2>
            <p style={{ color: "var(--text-muted)", fontSize: "15.5px", marginBottom: "20px" }}>
              Respuestas claras a las dudas más frecuentes sobre nuestro modelo de trabajo, ciberseguridad open source e implementación técnica.
            </p>
            <div className="faq-banner-box">
              <img src="assets/live/h1-banner11-1.jpg" alt="Soporte y Diagnóstico TIC Global" className="faq-banner-img" />
              <div className="faq-banner-overlay">
                <span className="faq-banner-tag">Diagnóstico Sin Costo</span>
                <div className="faq-banner-title">Evaluación Inicial de Ciberseguridad & Infraestructura</div>
              </div>
            </div>
          </div>
          <div className="faq-accordion">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${i === active ? "active" : ""}`}>
                <div className="faq-header" onClick={() => setActive(i === active ? -1 : i)}>
                  <span>{f.q}</span>
                  <Icons.ChevronDown />
                </div>
                <div className="faq-body">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Skills Section */
function Skills() {
  return (
    <section className="skills-section">
      <div className="container">
        <div className="skills-grid">
          <div>
            <span className="section-subtitle">Métricas & Capacidades</span>
            <h2 className="section-title">Tecnología de vanguardia, sin barreras de licenciamiento</h2>
            <p style={{ color: "var(--text-muted)", marginBottom: "20px" }}>
              Ayudamos a las empresas a lograr una transformación digital segura, minimizando los riesgos del negocio y maximizando el valor de su infraestructura TI.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: "12px", marginTop: "24px" }}>
              <div style={{ fontWeight: 700, color: "var(--primary)" }}>✓ Cobertura Regional — México · Colombia · Panamá</div>
              <div style={{ fontWeight: 700, color: "var(--primary)" }}>✓ Soporte Proactivo — Monitoreo constante y respuesta ágil</div>
            </div>
          </div>
          <div>
            <div className="skill-bar-wrap">
              <div className="skill-info">
                <span>Infraestructura Crítica & Debian</span>
                <span>95%</span>
              </div>
              <div className="skill-progress-bg">
                <div className="skill-progress-fill" style={{ width: "95%" }}></div>
              </div>
            </div>
            <div className="skill-bar-wrap">
              <div className="skill-info">
                <span>Ciberseguridad & Pentesting</span>
                <span>90%</span>
              </div>
              <div className="skill-progress-bg">
                <div className="skill-progress-fill" style={{ width: "90%" }}></div>
              </div>
            </div>
            <div className="skill-bar-wrap">
              <div className="skill-info">
                <span>Desarrollo Seguro (SSDLC)</span>
                <span>88%</span>
              </div>
              <div className="skill-progress-bg">
                <div className="skill-progress-fill" style={{ width: "88%" }}></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Testimonials Section */
function Testimonials() {
  const reviews = [
    {
      avatar: "assets/live/avartar-1-1.png",
      quote: "Working with has been a real pleasure and a real experience. Doesn't feel like an offshore operation – the team work as one. It's comforting to know that when you have your back to the wall, TIC Global is standing right beside us.",
      name: "Alex Rony",
      role: "Fresh Design"
    },
    {
      avatar: "assets/live/avatar-2-1.png",
      quote: "Amazing performance! The infrastructure brings a professional and modern execution, perfect for our enterprise systems. Fast and dedicated engineering support. Definitely worth it!",
      name: "James K",
      role: "Tech Consultant"
    },
    {
      avatar: "assets/live/avatar-3-1.png",
      quote: "The design, hardening and pentesting quality is exceptional. High stability, zero downtime and top-tier security standards. Very satisfied with their continuous support in LATAM!",
      name: "Sarah L",
      role: "Web Developer"
    }
  ];

  return (
    <section className="testimonials-section">
      <div className="container">
        <span className="section-subtitle">Lo que dicen quienes confían en TIC Global</span>
        <h2 className="section-title">Testimonios</h2>
        <div className="testimonials-grid">
          {reviews.map((r, i) => (
            <div key={i} className="testi-card">
              <div className="testi-quote">"{r.quote}"</div>
              <div className="testi-author">
                <img src={r.avatar} alt={r.name} className="testi-avatar" />
                <div>
                  <div className="testi-name">{r.name}</div>
                  <div className="testi-role">{r.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Partners Section */
function Partners() {
  const logos = [
    { name: "HPE", src: "assets/live/HPE-logo-full-clr-pos-rgb-3.png" },
    { name: "Microsoft", src: "assets/live/Microsoft_logo_2012.png" },
    { name: "Raspberry Pi", src: "assets/live/Raspberry_Pi1.png" },
    { name: "Debian", src: "assets/live/deb1.png" }
  ];

  return (
    <section className="partners-strip">
      <div className="container">
        <div className="partners-flex">
          {logos.map((p, i) => (
            <img key={i} src={p.src} alt={p.name} className="partner-img" />
          ))}
        </div>
      </div>
    </section>
  );
}

/* Footer Section */
function Footer() {
  return (
    <footer id="contacto" className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <h4>TIC GLOBAL</h4>
            <p>
              Aliado estratégico en Ciberseguridad de Código Abierto e Infraestructura Crítica en <strong>México, Colombia y Panamá</strong>.
            </p>
            <p><strong>Ubicación:</strong> Río Verde #1227, Las Águilas, Zapopan, Jalisco, México. CP 45080</p>
          </div>
          <div className="footer-col">
            <h4>Navegación</h4>
            <ul className="footer-links">
              <li><a href="#">Inicio</a></li>
              <li><a href="#acerca">Acerca de</a></li>
              <li><a href="#opensource">Software Libre</a></li>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#capacitacion">Capacitación</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Servicios</h4>
            <ul className="footer-links">
              <li><a href="#servicios">Pentesting & Auditorías</a></li>
              <li><a href="#servicios">Hardening Linux Debian</a></li>
              <li><a href="#servicios">Desarrollo Seguro SSDLC</a></li>
              <li><a href="#capacitacion">Anti-Phishing Track</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contacto Directo</h4>
            <p><strong>Correo:</strong><br /><a href="mailto:jesus.avalos@ticglobal.com.mx">jesus.avalos@ticglobal.com.mx</a></p>
            <p><strong>Teléfono:</strong><br /><a href="tel:+523313513417">+52 33 1351 3417</a></p>
            <p><strong>Presencia:</strong><br />México · Colombia · Panamá</p>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Seguridad y Desarrollos de TIC Global. Ciberseguridad de Código Abierto.</div>
          <div>México · Colombia · Panamá</div>
        </div>
      </div>
    </footer>
  );
}

/* Main App Component */
function App() {
  return (
    <>
      <Header />
      <HeroSlider />
      <FeatureCards />
      <About />
      <OpenSourceSection />
      <ServicesGallery />
      <Training />
      <Process />
      <FAQ />
      <Skills />
      <Testimonials />
      <Partners />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);