// Componentes compartidos: Header, Footer, Logo Hex, Iconos
// Cargado por todas las páginas del sitio ASCICOM.

const HEX_PATH = "M50 5 L88 27.5 L88 72.5 L50 95 L12 72.5 L12 27.5 Z";

function HexMark({ size = 36, color = "var(--accent)", inner = "stroke", strokeWidth = 6, children }) {
  return (
    <span className="hex" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden="true">
        <path d={HEX_PATH}
              stroke={color}
              strokeWidth={strokeWidth}
              fill={inner === "fill" ? color : "transparent"}
              strokeLinejoin="round" />
        {children}
      </svg>
    </span>
  );
}

function BrandLogo({ variant = "dark" }) {
  // variant: 'dark' (sobre fondo oscuro) o 'light' (sobre fondo claro)
  return (
    <a href="index.html" className={`brand brand--${variant}`} aria-label="ASCICOM Tech Consulting — Inicio">
      <img
        src="assets/logo-ascicom-mark.png"
        alt=""
        className="brand__logo-img"
        aria-hidden="true"
      />
      <span className="brand__name">
        <span className="name">ASCICOM</span>
        <span className="brand__tag">TECH CONSULTING</span>
      </span>
    </a>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SiteHeader({ active = "inicio" }) {
  const items = [
    { id: "inicio", label: "Inicio", href: "index.html" },
    { id: "servicios", label: "Servicios", href: "servicios.html" },
    { id: "sectores", label: "Sectores", href: "sectores.html" },
    { id: "nosotros", label: "Nosotros", href: "nosotros.html" },
    { id: "casos", label: "Casos de éxito", href: "casos.html" },
    { id: "blog", label: "Blog", href: "blog.html" },
  ];
  return (
    <>
      <header className="site-header">
        <div className="container site-header__inner">
          <BrandLogo variant="dark" />
          <nav className="nav" aria-label="Principal">
            {items.map((it) => (
              <a key={it.id} href={it.href} className={active === it.id ? "active" : ""}>
                {it.label}
              </a>
            ))}
          </nav>
          <a href="contacto.html" className="btn btn--primary">
            Contactar <ArrowRight />
          </a>
        </div>
      </header>
      <WhatsAppFloatingButton />
    </>
  );
}

function WhatsAppFloatingButton() {
  return (
    <a
      className="whatsapp-float"
      href="https://wa.me/34687797988"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Contactar por WhatsApp"
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path
          d="M4.9 19.1 6 15.1a7.2 7.2 0 1 1 2.9 2.8l-4 1.2Z"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M9.3 8.7c.2-.4.4-.4.7-.4h.5c.2 0 .4.1.5.4l.7 1.6c.1.2.1.4-.1.6l-.4.5c-.1.2-.1.3 0 .5.3.6.8 1.1 1.3 1.5.5.4 1 .7 1.6.9.2.1.4.1.5-.1l.6-.7c.1-.2.4-.2.6-.1l1.6.7c.3.1.4.3.4.5 0 .5-.2 1.2-.5 1.5-.4.4-1.3.6-2.5.3-1.2-.3-2.6-1.1-3.8-2.2-1.1-1.1-2-2.4-2.4-3.6-.4-1-.1-1.7.2-2Z"
          fill="currentColor"
        />
      </svg>
      <span>WhatsApp</span>
    </a>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__grid">
          <div>
            <BrandLogo variant="dark" />
            <p className="site-footer__about">
              Partner tecnológico integral para empresas que quieren modernizar su
              infraestructura, automatizar procesos y crecer sin límites.
            </p>
            <div className="site-footer__social">
              <a href="#" aria-label="LinkedIn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 18.34V9.67H5.67v8.67h2.67zM7 8.34a1.55 1.55 0 1 0 0-3.1 1.55 1.55 0 0 0 0 3.1zm11.34 10V13.5c0-2.5-1.34-3.67-3.13-3.67-1.45 0-2.1.8-2.46 1.36V9.67h-2.66c.03.74 0 8.67 0 8.67h2.66v-4.84c0-.24.02-.47.09-.65.18-.47.62-.96 1.34-.96.94 0 1.32.71 1.32 1.76v4.69h2.84z"/>
                </svg>
              </a>
              <a href="#" aria-label="X">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                </svg>
              </a>
              <a href="#" aria-label="GitHub">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.7-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.4-5.26 5.68.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/>
                </svg>
              </a>
            </div>
          </div>
          <div>
            <h5>Servicios</h5>
            <ul>
              <li><a href="servicios.html#software">Software a medida</a></li>
              <li><a href="servicios.html#ia">Automatización + IA</a></li>
              <li><a href="servicios.html#integraciones">Integraciones</a></li>
              <li><a href="servicios.html#saas">SaaS propios</a></li>
              <li><a href="servicios.html#equipos">Equipos y redes</a></li>
            </ul>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li><a href="nosotros.html">Nosotros</a></li>
              <li><a href="casos.html">Casos de éxito</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="nosotros.html#trabaja">Trabaja con nosotros</a></li>
              <li><a href="contacto.html">Contacto</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <div className="contact-line">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M2 4l6 4 6-4M2 4v8h12V4M2 4h12" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
              </svg>
              ines@ascicom.com
            </div>
            <div className="contact-line">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M3 3.5a1.5 1.5 0 0 1 1.5-1.5h1.6a1 1 0 0 1 .98.8l.5 2.5a1 1 0 0 1-.27.92l-1.2 1.2a10 10 0 0 0 4.5 4.5l1.2-1.2a1 1 0 0 1 .92-.27l2.5.5a1 1 0 0 1 .8.98v1.6a1.5 1.5 0 0 1-1.5 1.5A11.5 11.5 0 0 1 3 3.5z" stroke="currentColor" strokeWidth="1.4"/>
              </svg>
              +34 963 831 344
            </div>
            <div className="contact-line">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M8 14s5-4.5 5-8.5a5 5 0 1 0-10 0C3 9.5 8 14 8 14z" stroke="currentColor" strokeWidth="1.4"/>
                <circle cx="8" cy="5.5" r="2" stroke="currentColor" strokeWidth="1.4"/>
              </svg>
              Mislata, Valencia
            </div>
            <div className="iso-badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
                <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <span>
                <span className="iso-num">ISO 27001</span><br />
                <span className="iso-lbl">Información segura</span>
              </span>
            </div>
          </div>
        </div>
        <div className="site-footer__bottom">
          <div>© 2026 ASCICOM Tech Consulting. Todos los derechos reservados.</div>
          <div>
            <a href="#">Política de privacidad</a>
            <a href="#">Aviso legal</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ── Reveal on scroll observer ────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-stagger');
    if (!('IntersectionObserver' in window) || els.length === 0) {
      els.forEach((e) => e.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-in');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ── Apply tweak palette to root ──────────────────────────────────────
const PALETTES = {
  signature: {
    accent: "#F26B1A", soft: "#FF8A3D", deep: "#C24E0B",
    glow: "rgba(242,107,26,.18)",
  },
  cobalto: {
    accent: "#2B5BFF", soft: "#5C82FF", deep: "#1740CC",
    glow: "rgba(43,91,255,.20)",
  },
  esmeralda: {
    accent: "#0F9D6E", soft: "#3FBA8E", deep: "#0A7855",
    glow: "rgba(15,157,110,.20)",
  },
  magenta: {
    accent: "#D8347B", soft: "#E55E9A", deep: "#A8205D",
    glow: "rgba(216,52,123,.20)",
  },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.signature;
  const r = document.documentElement.style;
  r.setProperty('--accent', p.accent);
  r.setProperty('--accent-soft', p.soft);
  r.setProperty('--accent-deep', p.deep);
  r.setProperty('--accent-glow', p.glow);
}

Object.assign(window, {
  HEX_PATH, HexMark, BrandLogo, ArrowRight,
  SiteHeader, SiteFooter, useReveal, applyPalette, PALETTES,
});