/* global React, ReactDOM, NetworkCanvas, Icon */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSlider, TweakToggle, TweakColor */

const { useEffect, useRef, useState, useCallback } = React;

/* Theme bootstrap (sync, pre-render) */
function getInitialTheme() {
  try {
    const saved = localStorage.getItem("ticglobal_theme");
    if (saved === "light" || saved === "dark") return saved;
  } catch (e) {}
  return "light";
}
function applyTheme(t) {
  document.documentElement.dataset.theme = t;
  try { localStorage.setItem("ticglobal_theme", t); } catch (e) {}
}
applyTheme(getInitialTheme());

/* Reveal hook */
function useReveal() {
  useEffect(() => {
    const vh = () => window.innerHeight || document.documentElement.clientHeight;
    const check = () => {
      const list = document.querySelectorAll(".reveal:not(.in)");
      list.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh() * 0.95 && r.bottom > -50) {
          el.classList.add("in");
        }
      });
    };
    check();
    requestAnimationFrame(check);
    requestAnimationFrame(() => requestAnimationFrame(check));
    const timeouts = [0, 50, 150, 350, 700, 1200].map((d) => setTimeout(check, d));
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    window.addEventListener("load", check);
    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(check).catch(() => {});
    }
    return () => {
      timeouts.forEach(clearTimeout);
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      window.removeEventListener("load", check);
    };
  }, []);
}

/* Animated counter */
function Counter({ to, suffix = "", duration = 1800 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const startedRef = useRef(false);
  useEffect(() => {
    let raf;
    const start = () => {
      if (startedRef.current) return;
      startedRef.current = true;
      const t0 = performance.now();
      const step = (now) => {
        const p = Math.min(1, (now - t0) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(to * eased));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
    };
    const check = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      if (r.top < (window.innerHeight || 800) * 0.9 && r.bottom > 0) {
        start();
        window.removeEventListener("scroll", check);
      }
    };
    requestAnimationFrame(() => requestAnimationFrame(check));
    window.addEventListener("scroll", check, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", check);
    };
  }, [to, duration]);
  return (
    <span ref={ref} className="stat-num">
      {val.toLocaleString("es-MX")}
      {suffix && <span className="stat-suf">{suffix}</span>}
    </span>
  );
}

/* Nav */
function Nav({ theme, setTheme }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")} aria-label="Navegación principal">
      <div className="nav-inner">
        <a href="#top" aria-label="TIC Global — Inicio" style={{ display: "flex", alignItems: "center" }}>
          <img
            className="nav-logo"
            src={theme === "dark" ? "assets/logo-white.png" : "assets/logo-dark.png"}
            alt="TIC Global"
            width="132"
            height="28"
          />
        </a>
        <div className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#nosotros">Nosotros</a>
          <a href="#proceso">Proceso</a>
          <a href="#aliados">Aliados</a>
          <a href="#contacto">Contacto</a>
        </div>
        <button
          className="theme-toggle"
          aria-label={theme === "dark" ? "Activar modo claro" : "Activar modo oscuro"}
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
          {theme === "dark" ? <Icon.Sun /> : <Icon.Moon />}
        </button>
        <a className="btn btn-primary nav-cta" href="#contacto">
          Contacto <Icon.Arrow />
        </a>
      </div>
    </nav>
  );
}

/* Hero */
function Hero({ density = 1, speedMul = 1 }) {
  return (
    <header className="hero" id="top">
      <div className="hero-canvas" aria-hidden="true">
        <NetworkCanvas density={density} speedMul={speedMul} full={true} />
      </div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-tag reveal">
              <span className="hero-tag-dot">T</span>
              <span>TIC Global — Consultoría e Innovación</span>
            </div>
            <h1 className="reveal" data-delay="1">
              Tecnología que <span className="accent">protege</span>, soluciones que <span className="accent">trascienden</span>.
            </h1>
            <p className="hero-sub reveal" data-delay="2">
              Aliados estratégicos en Tecnologías de Información: infraestructura,
              ciberseguridad, capacitación especializada y desarrollo de software seguro
              para impulsar el crecimiento de tu organización.
            </p>
            <div className="hero-ctas reveal" data-delay="3">
              <a className="btn btn-primary" href="#contacto">
                Entrar en contacto <Icon.Arrow />
              </a>
              <a className="btn btn-ghost" href="#servicios">
                Ver servicios
              </a>
            </div>
            <div className="hero-meta reveal" data-delay="4">
              <div className="hero-meta-item">
                <span className="hero-meta-num">+8</span>
                <span className="hero-meta-label">Años en el mercado</span>
              </div>
              <div className="hero-meta-item">
                <span className="hero-meta-num">04</span>
                <span className="hero-meta-label">Áreas de especialización</span>
              </div>
              <div className="hero-meta-item">
                <span className="hero-meta-num">100<span style={{ color: "var(--accent-strong)" }}>%</span></span>
                <span className="hero-meta-label">Enfoque en seguridad</span>
              </div>
            </div>
          </div>
          <HeroVisual />
        </div>
      </div>
    </header>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual reveal" data-delay="2" aria-hidden="true">
      <div className="hero-visual-canvas">
        <NetworkCanvas density={1.6} full={false} />
      </div>
      <div className="hero-visual-overlay">
        <div className="hero-visual-head">
          <span>NODE.MAP / LATAM</span>
          <span className="pill">
            <span className="live"></span>secure
          </span>
        </div>
        <div className="hero-visual-foot">
          <div className="stat">
            <div className="k">Latency</div>
            <div className="v">12<span style={{ color: "var(--fg-subtle)" }}>ms</span></div>
          </div>
          <div className="stat">
            <div className="k">Uptime</div>
            <div className="v">99.99<span style={{ color: "var(--fg-subtle)" }}>%</span></div>
          </div>
          <div className="stat">
            <div className="k">Threats</div>
            <div className="v">0 <span style={{ color: "#22c55e" }}>● ok</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Marquee strip */
function Strip() {
  const items = [
    "Seguridad perimetral", "VPN / LAN / WAN", "Auditorías de seguridad",
    "Penetration testing", "Comunicaciones unificadas", "Virtualización",
    "Data center", "Software seguro", "Capacitación especializada", "Software libre"
  ];
  const row = (
    <span>
      {items.map((t, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 56 }}>
          {t}<span className="dot" />
        </span>
      ))}
    </span>
  );
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip-track">
        {row}{row}
      </div>
    </div>
  );
}

/* Services — 4 áreas de especialización (Carta de Servicios TIC) */
const SERVICES = [
  {
    n: "01",
    icon: <Icon.Server />,
    title: "Análisis de Infraestructura",
    desc: "Las empresas están en crecimiento dinámico, con grandes retos que demandan desarrollo constante y sólido. Somos el aliado tecnológico que soporta e impulsa el desarrollo de tu organización.",
    items: ["Seguridad perimetral", "Redes privadas virtuales", "Comunicaciones unificadas", "Servicios, apps y monitoreo", "Data Center"],
  },
  {
    n: "02",
    icon: <Icon.Shield />,
    title: "Auditorías de Seguridad",
    desc: "México es el primero en América Latina en ataques cibernéticos y el tercero a nivel mundial. Implementamos las mejores prácticas para proteger tu infraestructura, información y operación continua.",
    items: ["Auditorías de infraestructura", "Auditorías de sistemas", "Análisis de vulnerabilidades", "Black / White / Grey Box", "Capacitación a administradores", "Ingeniería social"],
    quote: { text: "Existen solo dos tipos de compañías: las que han sido hackeadas, y las que lo van a ser.", author: "Robert Mueller", role: "Director FBI, 2012" },
  },
  {
    n: "03",
    icon: <Icon.Brain />,
    title: "Capacitación Especializada",
    desc: "Las mejores empresas tienen a los mejores empleados — no por ser las mejores, sino por tener mejor capacitado a su personal. Mantén a tu equipo en la jugada de las nuevas tecnologías emergentes.",
    items: ["Metodologías de desarrollo de software", "Estándares de calidad en TI", "Software libre / Linux", "Virtualización y servicios virtualizados", "Seguridad informática y de la información"],
    quote: { text: "El conocimiento es la mejor inversión que se puede hacer.", author: "Abraham Lincoln" },
  },
  {
    n: "04",
    icon: <Icon.Code />,
    title: "Desarrollo de Software",
    desc: "Tener el mejor hardware no basta. Los sistemas ERP, CRM, CMS, LMS y bases de datos requieren actualizaciones, monitoreo o nuevas implementaciones que se adapten a los requerimientos tecnológicos que se demandan.",
    items: ["Organización de áreas de desarrollo", "Modelos tecnológicos", "Metodologías y modelos de desarrollo", "Desarrollo e implementación", "Sistemas de información"],
  },
];

function Services() {
  const handleMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", ((e.clientX - r.left) / r.width) * 100 + "%");
    e.currentTarget.style.setProperty("--my", ((e.clientY - r.top) / r.height) * 100 + "%");
  };
  return (
    <section id="servicios">
      <div className="container">
        <div className="section-label reveal">Servicios — 04</div>
        <div className="section-head">
          <h2 className="reveal">
            Cuatro áreas de especialización, <em style={{ color: "var(--accent-strong)", fontStyle: "italic", fontWeight: 500 }}>un solo aliado</em>.
          </h2>
          <p className="reveal" data-delay="1">
            Más que una empresa de tecnologías, somos un socio estratégico al que
            puedes confiarle los temas críticos de tu infraestructura tecnológica.
          </p>
        </div>
        <div className="services">
          {SERVICES.map((s, i) => (
            <article className="svc reveal" data-delay={i % 2} key={s.n} onMouseMove={handleMove}>
              <div className="svc-num">{s.n} / SERVICIO</div>
              <div className="svc-icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              {s.quote && (
                <blockquote className="svc-quote">
                  <span className="svc-quote-mark"><Icon.Quote /></span>
                  <span className="svc-quote-text">{s.quote.text}</span>
                  <cite>— {s.quote.author}{s.quote.role && <span> · {s.quote.role}</span>}</cite>
                </blockquote>
              )}
              <ul className="svc-list">
                {s.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Productos y Servicios — Detalle Análisis de Infraestructura (página 5 del PDF) */
const INFRA_PRODUCTS = [
  {
    icon: <Icon.Shield />,
    title: "Seguridad perimetral",
    items: ["Implementación de estructuras lógicas en seguridad", "LAN / WAN — VPNs"],
  },
  {
    icon: <Icon.Network />,
    title: "Comunicaciones Unificadas",
    items: ["Diseño y análisis de redes LAN / WAN / MAN", "Diseño y análisis de redes WiFi"],
  },
  {
    icon: <Icon.Server />,
    title: "Servicios Administrados",
    items: ["Servicios administrados de infraestructura", "Virtualización — VMware, XEN, Hyper-V", "Software de respaldos y monitoreo"],
  },
  {
    icon: <Icon.Database />,
    title: "Data Center",
    items: ["Site de comunicaciones (cableado 0 a 100)", "Respaldos de energía", "Control de energía"],
  },
  {
    icon: <Icon.Box />,
    title: "Arrendamientos",
    items: ["Infraestructura TI", "Servidores", "Supercómputo"],
  },
];

function ProductsDetail() {
  return (
    <section id="productos" className="products">
      <div className="container">
        <div className="section-label reveal">Productos y Servicios — Infraestructura</div>
        <div className="section-head">
          <h2 className="reveal">
            La base técnica para una operación <em style={{ color: "var(--accent-strong)", fontStyle: "italic", fontWeight: 500 }}>sólida y escalable</em>.
          </h2>
          <p className="reveal" data-delay="1">
            Cinco frentes que cubren el ciclo completo de tu infraestructura: desde la
            seguridad de perímetro y las redes hasta el data center y los esquemas de
            arrendamiento tecnológico.
          </p>
        </div>
        <div className="ip-grid">
          {INFRA_PRODUCTS.map((p, i) => (
            <article className="ip-card reveal" data-delay={i % 3} key={p.title}>
              <div className="ip-icon">{p.icon}</div>
              <h3 className="ip-h">{p.title}</h3>
              <ul className="ip-list">
                {p.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* About — Misión, Visión, Valores */
const VALUES = [
  { k: "01", h: "Honestidad", p: "Ser un aliado leal de alto valor en el tema confianza." },
  { k: "02", h: "Servicio", p: "Nuestra satisfacción está en innovar con tecnología." },
  { k: "03", h: "Compromiso", p: "Adquirimos la responsabilidad de cumplir." },
  { k: "04", h: "Equilibrio", p: "Pasión por el desarrollo tecnológico." },
];

const MVV = [
  {
    icon: <Icon.Target />,
    k: "Misión",
    p: "Ser una empresa comprometida con sus clientes, colaborar y apoyar en cualquier requerimiento tecnológico, siendo un aliado con sentido de valor.",
  },
  {
    icon: <Icon.Eye />,
    k: "Visión",
    p: "Más que una empresa de tecnologías, ser un socio de negocios y aliado estratégico en el que se puede confiar de manera leal, siempre al pendiente de los temas importantes en tecnologías de información.",
  },
];

function About() {
  return (
    <section className="about" id="nosotros">
      <div className="container">
        <div className="section-label reveal">Nosotros — desde 2017</div>
        <div className="section-head">
          <h2 className="reveal" data-delay="1">
            Más que tecnología, <em style={{ color: "var(--accent-strong)", fontStyle: "italic", fontWeight: 500 }}>un socio que cumple</em>.
          </h2>
          <p className="reveal" data-delay="2">
            TIC Global se fundó en junio de 2017 y desde el 17 de julio de 2020 opera
            como <strong style={{ color: "var(--fg)" }}>Seguridad y Desarrollos de TIC Global</strong>,
            con enfoque en análisis de infraestructura, auditorías de seguridad,
            capacitación especializada y desarrollo de software seguro.
          </p>
        </div>

        <div className="mvv">
          {MVV.map((m, i) => (
            <div className="mvv-card reveal" data-delay={i} key={m.k}>
              <div className="mvv-icon">{m.icon}</div>
              <div className="mvv-k">{m.k}</div>
              <p className="mvv-p">{m.p}</p>
            </div>
          ))}
        </div>

        <div className="values-block">
          <div className="values-head reveal">
            <div className="section-label" style={{ marginBottom: 0 }}>Valores</div>
            <p>Cuatro principios que guían cada conversación, propuesta y entrega.</p>
          </div>
          <div className="values">
            {VALUES.map((v, i) => (
              <div className="value reveal" data-delay={i} key={v.k}>
                <div className="value-k">{v.k} / valor</div>
                <div className="value-h">{v.h}</div>
                <p className="value-p">{v.p}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Stats */
function Stats() {
  const data = [
    { n: 8, suf: "+", lbl: "Años de trayectoria", desc: "Operando desde 2017 en TI y ciberseguridad" },
    { n: 4, suf: "", lbl: "Áreas integradas", desc: "Infraestructura, auditoría, capacitación, software" },
    { n: 99, suf: "%", lbl: "Compromiso", desc: "De entrega, confianza y transparencia con el cliente" },
    { n: 24, suf: "/7", lbl: "Acompañamiento", desc: "Asesoría continua post-implementación" },
  ];
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid reveal">
          {data.map((s) => (
            <div className="stat-cell" key={s.lbl}>
              <Counter to={s.n} suffix={s.suf} />
              <div className="stat-lbl">{s.lbl}</div>
              <div className="stat-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Approach */
function Approach() {
  const steps = [
    { n: "01", icon: <Icon.Compass />, h: "Conversación honesta", p: "Escuchamos tu reto real, sin venderte productos que no necesitas. Una charla técnica sin compromiso." },
    { n: "02", icon: <Icon.Bolt />, h: "Propuesta a la medida", p: "Diseñamos un plan técnico claro, con alcances, tiempos y métricas, alineado a tu modelo de negocio." },
    { n: "03", icon: <Icon.Audit />, h: "Ejecución con precisión", p: "Implementamos, documentamos y capacitamos. Te quedas con la solución y con el conocimiento." },
  ];
  return (
    <section id="proceso">
      <div className="container">
        <div className="section-label reveal">Cómo trabajamos — 03 pasos</div>
        <div className="section-head">
          <h2 className="reveal">
            Soluciones claras, <em style={{ color: "var(--accent-strong)", fontStyle: "italic", fontWeight: 500 }}>seguras y útiles</em>.
          </h2>
          <p className="reveal" data-delay="1">
            El valor de TIC Global está en la precisión: no llegamos a venderte
            productos, tú vienes a nosotros y construimos juntos la solución correcta.
          </p>
        </div>
        <div className="approach">
          {steps.map((s, i) => (
            <div className="step reveal" data-delay={i} key={s.n}>
              <span className="step-num">{s.n}</span>
              <div className="step-icon">{s.icon}</div>
              <h3 className="step-h">{s.h}</h3>
              <p className="step-p">{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Aliados Tecnológicos — logos SVG inline (Simple Icons MIT) */
const BrandLogos = {
  Debian: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#A81D33">
      <path d="M13.88 12.685c-.4 0 .08.2.601.28.14-.1.27-.22.39-.33a3.001 3.001 0 01-.99.05m2.14-.53c.23-.33.4-.69.47-1.06-.06.27-.2.5-.33.73-.75.47-.07-.27 0-.56-.8 1.01-.11.6-.14.89m.781-2.05c.05-.721-.14-.501-.2-.221.07.04.13.5.2.22M12.38.31c.2.04.45.07.42.12.23-.05.28-.1-.43-.12m.43.12l-.15.03.14-.01V.43m6.633 9.944c.02.64-.2.95-.38 1.5l-.35.181c-.28.54.03.35-.17.78-.44.39-1.34 1.22-1.62 1.301-.201 0 .14-.25.19-.34-.591.4-.481.6-1.371.85l-.03-.06c-2.221 1.04-5.303-1.02-5.253-3.842-.03.17-.07.13-.12.2a3.551 3.552 0 012.001-3.501 3.361 3.362 0 013.732.48 3.341 3.342 0 00-2.721-1.3c-1.18.01-2.281.76-2.651 1.57-.6.38-.67 1.47-.93 1.661-.361 2.601.66 3.722 2.38 5.042.27.19.08.21.12.35a4.702 4.702 0 01-1.53-1.16c.23.33.47.66.8.91-.55-.18-1.27-1.3-1.48-1.35.93 1.66 3.78 2.921 5.261 2.3a6.203 6.203 0 01-2.33-.28c-.33-.16-.77-.51-.7-.57a5.802 5.803 0 005.902-.84c.44-.35.93-.94 1.07-.95-.2.32.04.16-.12.44.44-.72-.2-.3.46-1.24l.24.33c-.09-.6.74-1.321.66-2.262.19-.3.2.3 0 .97.29-.74.08-.85.15-1.46.08.2.18.42.23.63-.18-.7.2-1.2.28-1.6-.09-.05-.28.3-.32-.53 0-.37.1-.2.14-.28-.08-.05-.26-.32-.38-.861.08-.13.22.33.34.34-.08-.42-.2-.75-.2-1.08-.34-.68-.12.1-.4-.3-.34-1.091.3-.25.34-.74.54.77.84 1.96.981 2.46-.1-.6-.28-1.2-.49-1.76.16.07-.26-1.241.21-.37A7.823 7.824 0 0017.702 1.6c.18.17.42.39.33.42-.75-.45-.62-.48-.73-.67-.61-.25-.65.02-1.06 0C15.082.73 14.862.8 13.8.4l.05.23c-.77-.25-.9.1-1.73 0-.05-.04.27-.14.53-.18-.741.1-.701-.14-1.431.03.17-.13.36-.21.55-.32-.6.04-1.44.35-1.18.07C9.6.68 7.847 1.3 6.867 2.22L6.838 2c-.45.54-1.96 1.611-2.08 2.311l-.131.03c-.23.4-.38.85-.57 1.261-.3.52-.45.2-.4.28-.6 1.22-.9 2.251-1.16 3.102.18.27 0 1.65.07 2.76-.3 5.463 3.84 10.776 8.363 12.006.67.23 1.65.23 2.49.25-.99-.28-1.12-.15-2.08-.49-.7-.32-.85-.7-1.34-1.13l.2.35c-.971-.34-.57-.42-1.361-.67l.21-.27c-.31-.03-.83-.53-.97-.81l-.34.01c-.41-.501-.63-.871-.61-1.161l-.111.2c-.13-.21-1.52-1.901-.8-1.511-.13-.12-.31-.2-.5-.55l.14-.17c-.35-.44-.64-1.02-.62-1.2.2.24.32.3.45.33-.88-2.172-.93-.12-1.601-2.202l.15-.02c-.1-.16-.18-.34-.26-.51l.06-.6c-.63-.74-.18-3.102-.09-4.402.07-.54.53-1.1.88-1.981l-.21-.04c.4-.71 2.341-2.872 3.241-2.761.43-.55-.09 0-.18-.14.96-.991 1.26-.7 1.901-.88.7-.401-.6.16-.27-.151 1.2-.3.85-.7 2.421-.85.16.1-.39.14-.52.26 1-.49 3.151-.37 4.562.27 1.63.77 3.461 3.011 3.531 5.132l.08.02c-.04.85.13 1.821-.17 2.711l.2-.42M9.54 13.236l-.05.28c.26.35.47.73.8 1.01-.24-.47-.42-.66-.75-1.3m.62-.02c-.14-.15-.22-.34-.31-.52.08.32.26.6.43.88l-.12-.36m10.945-2.382l-.07.15c-.1.76-.34 1.511-.69 2.212.4-.73.65-1.541.75-2.362M12.45.12c.27-.1.66-.05.95-.12-.37.03-.74.05-1.1.1l.15.02M3.006 5.142c.07.57-.43.8.11.42.3-.66-.11-.18-.1-.42m-.64 2.661c.12-.39.15-.62.2-.84-.35.44-.17.53-.2.83"/>
    </svg>
  ),
  Fortinet: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#EE3124">
      <path d="M0 9.785h6.788v4.454H0zm8.666-6.33h6.668v4.453H8.666zm0 12.637h6.668v4.454H8.666zm8.522-6.307H24v4.454h-6.812zM2.792 3.455C1.372 3.814.265 5.404 0 7.425v.506h6.788V3.454zM0 16.091v.554c.24 1.926 1.276 3.466 2.624 3.9h4.188v-4.454zm24-8.184v-.506c-.265-1.998-1.372-3.587-2.792-3.972h-4.02v4.454H24zM21.376 20.57c1.324-.458 2.36-1.974 2.624-3.9v-.554h-6.812v4.454Z"/>
    </svg>
  ),
  HPE: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#01A982">
      <path d="M12.0069 24h-.3572l2.459-6.7453h3.3796c.5907 0 1.2364-.4533 1.4424-1.0166l2.6652-7.3085c.4396-1.1952-.2473-2.1706-1.525-2.1706h-4.6983l-3.929 10.798-2.2255 6.127C3.929 22.434 0 17.6806 0 12.007 0 6.498 3.7092 1.8546 8.7647.4396L6.4705 6.759 2.6514 17.2547h2.5415L8.4488 8.339h1.9095l-3.2558 8.9158H9.644l3.0223-8.3251c.4396-1.1952-.2473-2.1706-1.525-2.1706h-2.143l2.459-6.7453C11.636 0 11.8145 0 11.9931 0 18.6285 0 24 5.3715 24 12.007c.0137 6.6216-5.3578 11.993-11.9931 11.993zM19.2742 8.325h-1.9096l-2.6789 7.336h1.9096l2.6789-7.336z"/>
    </svg>
  ),
  RaspberryPi: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#C51A4A">
      <path d="m19.8955 10.8961-.1726-.3028c.0068-2.1746-1.0022-3.061-2.1788-3.7348.356-.0938.7237-.1711.8245-.6182.6118-.1566.7397-.4398.8011-.7398.16-.1066.6955-.4061.6394-.9211.2998-.2069.4669-.4725.3819-.8487.3222-.3515.407-.6419.2702-.9096.3868-.4805.2152-.7295.05-.9817.2897-.5254.0341-1.0887-.7758-.9944-.3221-.4733-1.0244-.3659-1.133-.3637-.1215-.1519-.2819-.2821-.7755-.219-.3197-.2851-.6771-.2364-1.0458-.0964-.4378-.3403-.7275-.0675-1.0584.0356-.53-.1706-.6513.0631-.9117.1583-.5781-.1203-.7538.1416-1.0309.4182l-.3224-.0063c-.8719.5061-1.305 1.5366-1.4585 2.0664-.1536-.5299-.5858-1.5604-1.4575-2.0664l-.3223.0063C9.942.5014 9.7663.2394 9.1883.3597 8.9279.2646 8.807.0309 8.2766.2015c-.2172-.0677-.417-.2084-.6522-.2012l.0004.0002C7.5017.0041 7.369.049 7.2185.166c-.3688-.1401-.7262-.1887-1.0459.0964-.4936-.0631-.654.0671-.7756.219C5.2887.4791 4.5862.3717 4.264.845c-.8096-.0943-1.0655.4691-.7756.9944-.1653.2521-.3366.5013.05.9819-.1367.2677-.0519.5581.2703.9096-.085.3763.0822.6418.3819.8487-.0561.515.4795.8144.6394.9211.0614.3001.1894.5832.8011.7398.1008.4472.4685.5244.8245.6183-1.1766.6737-2.1856 1.56-2.1788 3.7348l-.1724.3028c-1.3491.8082-2.5629 3.4056-.6648 5.5167.124.6609.3319 1.1355.5171 1.6609.2769 2.117 2.0841 3.1082 2.5608 3.2255.6984.524 1.4423 1.0212 2.449 1.3696.949.964 1.977 1.3314 3.0107 1.3308.0152 0 .0306.0002.0457 0 1.0337.0006 2.0618-.3668 3.0107-1.3308 1.0067-.3483 1.7506-.8456 2.4491-1.3696.4766-.1173 2.2838-1.1085 2.5607-3.2255.1851-.5253.3931-1 .517-1.6609 1.8981-2.1113.6843-4.7089-.6649-5.517zm-1.0386-.3715c-.0704.8759-4.6354-3.0504-3.8472-3.1808 2.1391-.3558 3.9191.896 3.8472 3.1808zm-2.0155 4.3649c-1.1481.7409-2.8025.2626-3.6953-1.0681-.8928-1.3306-.6858-3.0101.4623-3.7509 1.1481-.7409 2.8025-.2627 3.6953 1.068.8927 1.3307.6858 3.0101-.4623 3.751zM13.6591 1.3721c.0396.1967.0843.321.1354.3577.2537-.272.4611-.5506.7878-.8123.0011.1537-.0776.3205.1169.4425.1752-.2356.4119-.4459.7263-.6244-.1514.2611-.026.3404.0554.4486.24-.2059.4681-.4144.9109-.5759-.121.1474-.2902.2914-.1108.4607.2473-.1544.496-.3086 1.0833-.4183-.1323.1475-.4059.295-.2401.4426.3104-.1186.6539-.2047 1.034-.2546-.182.1496-.3337.2963-.1846.4122.3323-.1022.7899-.2398 1.2372-.1212l-.2832.2849c-.0314.0382.6623.0297 1.1202.0364-.167.2321-.3375.4562-.437.8548.0454.0459.2723.0204.4862 0-.2194.4618-.6004.5783-.6893.776.134.1015.32.075.5232.006-.158.3254-.4892.5484-.7509.8123.0662.047.1818.075.4555.0425-.2418.257-.5339.492-.8802.7032.0614.0708.2722.0681.4678.0727-.3136.3069-.7173.466-1.0955.6668.1885.1288.3234.0988.4678.097-.2676.2198-.7225.3342-1.1448.4668.0803.1249.1607.1589.3324.194-.447.2473-1.0873.1343-1.2679.2607.0435.1243.1665.2053.3139.2728-.7197.0418-2.6879-.0262-3.0652-1.5156.7367-.8094 2.0813-1.7593 4.394-2.934-1.7994.6022-3.4229 1.405-4.7817 2.5096-1.5978-.7436-.4965-2.6197.283-3.3645zm-1.6126 5.3718c1.1329-.0123 2.5356.8325 2.53 1.6286-.005.7027-.9851 1.2715-2.5213 1.2607-1.5043-.0177-2.5172-.7148-2.5137-1.3957.003-.5603 1.2282-1.5263 2.505-1.4936zm-5.7646-.6006c.1717-.0351.252-.0692.3323-.194-.4223-.1327-.8772-.247-1.1448-.4668.1444.0018.2792.0318.4678-.097-.3783-.2008-.782-.3599-1.0956-.6668.1955-.0048.4064-.002.4677-.0728-.3462-.2113-.6383-.4463-.8801-.7033.2738.0325.3893.0045.4555-.0425-.2617-.264-.593-.487-.7509-.8123.2032.069.3892.0954.5232-.006-.089-.1977-.47-.3142-.6894-.776.214.0204.4409.0459.4863 0-.0994-.3985-.2698-.6226-.4369-.8547.4579-.0067 1.1516.0018 1.1202-.0364l-.2831-.2849c.4472-.1186.9049.019 1.2371.1213.1492-.1159-.0026-.2626-.1847-.4123.3801.05.7236.1361 1.034.2547.1659-.1476-.1076-.2951-.24-.4426.5872.1097.8361.2639 1.0833.4183.1794-.1694.0103-.3133-.1108-.4607.4428.1615.6709.37.911.5759.0814-.1082.2068-.1875.0554-.4486.3143.1785.5511.3888.7263.6244.1945-.122.1159-.2888.1169-.4426.3267.2618.534.5404.7879.8124.0511-.0366.0959-.161.1354-.3577.7794.7448 1.8807 2.6208.2831 3.3646-1.3589-1.1039-2.9817-1.9064-4.78-2.5086 2.3115 1.174 3.6556 2.1239 4.392 2.9328-.3773 1.4895-2.3455 1.5575-3.0651 1.5157.1473-.0676.2703-.1485.3139-.2728-.1806-.1264-.8209-.0134-1.2679-.2607zm2.8175 1.1334c.7881.1304-3.7769 4.0567-3.8472 3.1809-.0719-2.2846 1.7079-3.5367 3.8472-3.1809zm-4.847 8.7567c-1.1094-.8789-1.4668-3.4529.5901-4.6097 1.2394-.3273.4184 5.051-.5901 4.6097zm4.2656 4.5989c-.6257.3719-2.1452.2187-3.2252-1.3095-.7283-1.2823-.6345-2.5872-.123-2.9705.7648-.4589 1.9464.1609 2.8559 1.2003.7923.9405 1.1536 2.5927.4923 3.0797zm-1.2415-5.6086c-1.1481-.7409-1.3551-2.4203-.4623-3.7511.8928-1.3307 2.5472-1.8089 3.6952-1.068 1.1481.7409 1.3551 2.4203.4623 3.7509-.8926 1.3308-2.5471 1.809-3.6952 1.0682zm4.7948 8.2279c-1.3763.0584-2.7258-1.1105-2.7081-1.5157-.0206-.594 1.6758-1.0578 2.782-1.0306 1.1131-.0479 2.6068.3531 2.6097.8851.0184.5166-1.3547 1.6838-2.6836 1.6612zm2.7584-5.8578c.0081 1.3899-1.226 2.5225-2.7562 2.5299-1.5302.0073-2.7773-1.1135-2.7854-2.5033v-.0265c-.008-1.3899 1.2259-2.5226 2.7562-2.5299 1.5302-.0073 2.7773 1.1134 2.7853 2.5033a.7794.7794 0 0 1 .0001.0265zm3.855 2.0029c-1.186 1.6208-2.7916 1.684-3.3896 1.2325-.6255-.5811-.148-2.3854.7094-3.3747v-.0003c.9812-1.0912 2.0302-1.8037 2.7609-1.2469.4919.4828.7805 2.3008-.0807 3.3894zm1.0724-3.4301c-1.0086.4413-1.8298-4.9372-.5901-4.61 2.0568 1.1569 1.6994 3.731.5901 4.61zm-.0256-8.3279h.2985v-.5304h.2986c.1502 0 .2053.0624.2262.2052.0152.1088.0113.2395.0477.3253h.2984c-.0533-.0763-.0515-.2358-.0571-.3213-.0097-.1373-.0513-.2796-.1977-.3176v-.0037c.1502-.061.2149-.1807.2149-.341 0-.2048-.1539-.3738-.3974-.3738h-.732v1.3573zm.2985-1.1255h.3269c.1333 0 .2054.0573.2054.188 0 .1369-.0721.1942-.2054.1942H20.03v-.3822zm-1.0337.4633c0 .7009.5682 1.2694 1.2695 1.2694s1.2695-.5684 1.2695-1.2694c0-.7013-.5683-1.2697-1.2695-1.2697-.7013 0-1.2695.5684-1.2695 1.2697zm2.3275 0c0 .5845-.4737 1.058-1.058 1.058s-1.058-.4735-1.058-1.058c0-.5849.4737-1.058 1.058-1.058s1.058.4731 1.058 1.058z"/>
    </svg>
  ),
  Microsoft: () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path fill="#F25022" d="M0 0v11.408h11.408V0z"/>
      <path fill="#7FBA00" d="M12.594 0v11.408H24V0z"/>
      <path fill="#00A4EF" d="M0 12.594V24h11.408V12.594z"/>
      <path fill="#FFB900" d="M12.594 12.594V24H24V12.594z"/>
    </svg>
  ),
};

const PARTNERS = [
  { name: "Debian", tag: "GNU/Linux", Logo: BrandLogos.Debian },
  { name: "Fortinet", tag: "Ciberseguridad", Logo: BrandLogos.Fortinet },
  { name: "HPE", tag: "Hewlett Packard Enterprise", Logo: BrandLogos.HPE },
  { name: "Raspberry Pi", tag: "Hardware", Logo: BrandLogos.RaspberryPi },
  { name: "Microsoft", tag: "Partner Certificado", Logo: BrandLogos.Microsoft },
];

function Partners() {
  return (
    <section id="aliados" className="partners-section">
      <div className="container">
        <div className="section-label reveal">Aliados tecnológicos</div>
        <div className="section-head">
          <h2 className="reveal">
            Trabajamos con <em style={{ color: "var(--accent-strong)", fontStyle: "italic", fontWeight: 500 }}>tecnologías de clase mundial</em>.
          </h2>
          <p className="reveal" data-delay="1">
            Apalancamos plataformas y proveedores reconocidos para garantizar
            soporte, continuidad y soluciones probadas en cada proyecto.
          </p>
        </div>
        <div className="partners-grid">
          {PARTNERS.map((p, i) => {
            const Logo = p.Logo;
            return (
              <div className="partner reveal" data-delay={i % 3} key={p.name}>
                <div className="partner-logo-wrap" aria-hidden="true">
                  <Logo />
                </div>
                <div className="partner-meta">
                  <div className="partner-name">{p.name}</div>
                  <div className="partner-tag">{p.tag}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* Contact */
function Contact() {
  return (
    <section id="contacto">
      <div className="contact">
        <div className="contact-bg" aria-hidden="true" />
        <div className="contact-grid">
          <div>
            <div className="section-label reveal" style={{ color: "rgba(255,255,255,0.5)" }}>Contacto — 24/7</div>
            <h2 className="reveal" data-delay="1">
              ¿Listo para construir <span className="accent">algo seguro</span>?
            </h2>
            <p className="contact-sub reveal" data-delay="2">
              Cuéntanos tu proyecto. Agendamos una llamada de descubrimiento
              sin compromiso para entender qué necesitas y cómo podemos ayudarte.
            </p>
            <a className="contact-cta reveal" data-delay="3" href="mailto:jesus.avalos@ticglobal.com.mx">
              <Icon.Mail /> Escríbenos un correo
            </a>
          </div>
          <div className="contact-info reveal" data-delay="2">
            <div className="contact-row">
              <span className="k">Oficinas</span>
              <span className="v">
                Río Verde #1227, Las Águilas<br />
                Zapopan, Jalisco, México · CP 45080
              </span>
            </div>
            <div className="contact-row">
              <span className="k">CEO</span>
              <span className="v">
                Jesús Ávalos<br />
                <a href="mailto:jesus.avalos@ticglobal.com.mx">jesus.avalos@ticglobal.com.mx</a>
              </span>
            </div>
            <div className="contact-row">
              <span className="k">Teléfono</span>
              <span className="v">
                <a href="tel:+523313513417">+52 33 1351 3417</a><br />
                <a href="tel:+524462360968">+52 446 236 0968</a>
              </span>
            </div>
            <div className="contact-row">
              <span className="k">Sitio</span>
              <span className="v">
                <a href="https://www.ticglobal.com.mx" target="_blank" rel="noopener">ticglobal.com.mx</a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-mono">© {new Date().getFullYear()} SEGURIDAD Y DESARROLLOS DE TIC GLOBAL</div>
        <div className="footer-mono">CONSULTORÍA · INNOVACIÓN · CIBERSEGURIDAD</div>
      </div>
    </footer>
  );
}

/* Tweaks panel */
const TWEAK_DEFAULTS = {
  "accent": "#06b6d4",
  "density": 1,
  "borderRadius": "soft",
  "animations": "medium"
};

function Tweaks({ t, setTweak, theme }) {
  useEffect(() => {
    const r = document.documentElement;
    const accents = {
      "#06b6d4": { light: { strong: "#0891b2", base: "#06b6d4", soft: "rgba(6,182,212,0.08)" }, dark: { strong: "#22d3ee", base: "#22d3ee", soft: "rgba(34,211,238,0.12)" } },
      "#14b8a6": { light: { strong: "#0d9488", base: "#14b8a6", soft: "rgba(20,184,166,0.08)" }, dark: { strong: "#2dd4bf", base: "#2dd4bf", soft: "rgba(45,212,191,0.12)" } },
      "#2563eb": { light: { strong: "#1d4ed8", base: "#2563eb", soft: "rgba(37,99,235,0.08)" }, dark: { strong: "#60a5fa", base: "#60a5fa", soft: "rgba(96,165,250,0.14)" } },
      "#d97706": { light: { strong: "#b45309", base: "#d97706", soft: "rgba(217,119,6,0.08)" }, dark: { strong: "#fbbf24", base: "#fbbf24", soft: "rgba(251,191,36,0.14)" } },
    };
    const isDark = theme === "dark";
    const key = String(t.accent).toLowerCase();
    const a = accents[key] || accents["#06b6d4"];
    const v = isDark ? a.dark : a.light;
    r.style.setProperty("--accent", v.base);
    r.style.setProperty("--accent-strong", v.strong);
    r.style.setProperty("--accent-soft", v.soft);

    if (t.borderRadius === "sharp") {
      r.style.setProperty("--radius-lg", "4px");
      r.style.setProperty("--radius-md", "3px");
      r.style.setProperty("--radius-xl", "6px");
    } else if (t.borderRadius === "round") {
      r.style.setProperty("--radius-lg", "24px");
      r.style.setProperty("--radius-md", "16px");
      r.style.setProperty("--radius-xl", "32px");
    } else {
      r.style.setProperty("--radius-lg", "16px");
      r.style.setProperty("--radius-md", "10px");
      r.style.setProperty("--radius-xl", "24px");
    }
  }, [t.accent, t.borderRadius, theme]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color de acento">
        <TweakColor
          label="Acento"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#06b6d4", "#14b8a6", "#2563eb", "#d97706"]}
        />
      </TweakSection>
      <TweakSection title="Bordes">
        <TweakRadio
          label="Radio"
          value={t.borderRadius}
          onChange={(v) => setTweak("borderRadius", v)}
          options={[
            { value: "sharp", label: "Sharp" },
            { value: "soft",  label: "Soft" },
            { value: "round", label: "Round" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Animaciones">
        <TweakRadio
          label="Intensidad"
          value={t.animations}
          onChange={(v) => setTweak("animations", v)}
          options={[
            { value: "low",    label: "Sutil" },
            { value: "medium", label: "Media" },
            { value: "high",   label: "Alta" },
          ]}
        />
        <TweakSlider
          label="Densidad de nodos"
          value={t.density}
          onChange={(v) => setTweak("density", v)}
          min={0.4} max={2.2} step={0.1}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* App */
function App() {
  const [theme, setThemeState] = useState(getInitialTheme());
  const setTheme = useCallback((t) => {
    setThemeState(t);
    applyTheme(t);
  }, []);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  const speedMul = tweaks.animations === "low" ? 0.5 : tweaks.animations === "high" ? 1.6 : 1;

  return (
    <>
      <Nav theme={theme} setTheme={setTheme} />
      <main id="contenido">
        <Hero density={tweaks.density} speedMul={speedMul} />
        <Strip />
        <Services />
        <ProductsDetail />
        <About />
        <Stats />
        <Approach />
        <Partners />
        <Contact />
      </main>
      <Footer />
      <Tweaks t={tweaks} setTweak={setTweak} theme={theme} />
    </>
  );
}

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