/* global React */
/*
 * MASoft.es — Código compartido entre index.html y descargas.html
 *
 * Se carga como <script type="text/babel" src="common.jsx"> ANTES del script
 * de cada página (app.jsx / descargas.jsx). Todo el contenido va dentro de una
 * IIFE y se expone a través de `window` — mismo patrón que tweaks-panel.jsx —
 * para evitar colisiones de identificadores entre los distintos scripts Babel.
 */
(function () {
  const { useState, useEffect } = React;

  /* ---------- Utilidades ---------- */
  const fmtDate = s => {
    if (!s) return "—";
    const p = s.slice(0, 10).split("-");
    return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : s.slice(0, 10);
  };

  /* ---------- Estadística de visitas (sin cookies; ver api/visit.php) ---------- */
  // Una petición por página cargada. Si falla, no pasa nada: la web sigue igual.
  (() => {
    try {
      if (!/^https?:$/.test(location.protocol)) return;
      const fichero = (location.pathname.split("/").pop() || "").toLowerCase().replace(/\.html$/, "");
      const page = (fichero === "" || fichero === "index" || fichero === "masoft") ? "inicio" : fichero;
      const qs = new URLSearchParams(location.search);
      fetch("api/visit.php", {
        method: "POST",
        keepalive: true,
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          page,
          detail: page === "proyecto" ? (qs.get("p") || "") : "",
          ref: document.referrer || "",
          utm: qs.get("utm_source") || ""
        })
      }).catch(() => {});
    } catch (e) { /* sin estadística */ }
  })();

  /* ---------- Iconos minimalistas ---------- */
  const Icon = ({ name, size = 18, stroke = 1.7 }) => {
    const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
    switch (name) {
      case "arrow-right": return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
      case "arrow-down": return <svg {...props}><path d="M12 5v14M5 13l7 7 7-7" /></svg>;
      case "code": return <svg {...props}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>;
      case "cpu": return <svg {...props}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>;
      case "refresh": return <svg {...props}><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>;
      case "download": return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>;
      case "upload": return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;
      case "x": return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
      case "menu": return <svg {...props}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>;
      case "sun": return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>;
      case "moon": return <svg {...props}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>;
      case "mail": return <svg {...props}><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>;
      case "phone": return <svg {...props}><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>;
      case "pin": return <svg {...props}><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>;
      case "check": return <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>;
      case "lock": return <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
      case "shield": return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
      case "image": return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>;
      case "search": return <svg {...props}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>;
      case "github": return <svg {...props}><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>;
      case "file-text": return <svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>;
      case "images": return <svg {...props}><rect x="5" y="5" width="16" height="16" rx="2"/><rect x="3" y="3" width="16" height="16" rx="2"/><circle cx="9.5" cy="9.5" r="1.5"/><polyline points="19 13 14 8 3 19"/></svg>;
      case "grid":   return <svg {...props}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
      case "list":   return <svg {...props}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>;
      case "users":  return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
      case "clock":  return <svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
      case "calendar": return <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
      case "database": return <svg {...props}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>;
      case "key":    return <svg {...props}><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>;
      case "server": return <svg {...props}><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>;
      case "smartphone": return <svg {...props}><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>;
      case "star":   return <svg {...props}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
      case "chart":  return <svg {...props}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>;
      case "tool":   return <svg {...props}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>;
      case "box":    return <svg {...props}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>;
      case "book":   return <svg {...props}><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>;
      case "globe":  return <svg {...props}><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>;
      case "eye":    return <svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
      case "pen":    return <svg {...props}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>;
      case "sparkles": return <svg {...props}><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></svg>;
      default: return null;
    }
  };

  /* ---------- Reveal hook ---------- */
  const useReveal = (trigger) => {
    useEffect(() => {
      const els = document.querySelectorAll(".reveal:not(.is-in)");
      if (!els.length) return;
      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("is-in"); obs.unobserve(e.target); }});
      }, { threshold: 0.12 });
      els.forEach(el => obs.observe(el));
      return () => obs.disconnect();
    }, [trigger]);
  };

  /* ---------- Aplica tema + acento + tipografía al documento ---------- */
  const applyTweaks = (t) => {
    document.documentElement.setAttribute("data-theme", t.theme || "light");
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-soft", `color-mix(in oklab, ${t.accent} 14%, transparent)`);
    document.documentElement.style.setProperty("--display", `"${t.fontDisplay}", system-ui, sans-serif`);
  };

  /* ---------- Hook de tweaks del sitio (fuente única de defaults) ---------- */
  // El bloque EDITMODE lo reescribe la herramienta de edición visual. Al estar
  // aquí, index.html y descargas.html comparten exactamente los mismos valores.
  //
  // useTweaks (tweaks-panel.jsx) es una plantilla de herramienta de diseño:
  // solo guarda el valor en memoria (useState) y no persiste nada por sí sola.
  // Como cada página de este sitio es una carga completa (no una SPA), sin
  // localStorage el tema se reiniciaría al valor por defecto en cada navegación.
  const TWEAKS_STORAGE_KEY = "masoft_site_tweaks";
  const loadStoredTweaks = () => {
    try { return JSON.parse(localStorage.getItem(TWEAKS_STORAGE_KEY)) || {}; }
    catch (e) { return {}; }
  };
  const saveStoredTweaks = (edits) => {
    try { localStorage.setItem(TWEAKS_STORAGE_KEY, JSON.stringify({ ...loadStoredTweaks(), ...edits })); }
    catch (e) { /* localStorage no disponible (privado/bloqueado) — se ignora */ }
  };
  const useSiteTweaks = () => {
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "theme": "light",
      "accent": "#3D7BFF",
      "heroVariant": "code",
      "fontDisplay": "Manrope"
    }/*EDITMODE-END*/;
    const initial = { ...TWEAK_DEFAULTS, ...loadStoredTweaks() };
    const [t, setRawTweak] = window.useTweaks ? window.useTweaks(initial) : [initial, () => {}];
    const setTweak = (keyOrEdits, val) => {
      setRawTweak(keyOrEdits, val);
      const edits = typeof keyOrEdits === "object" && keyOrEdits !== null ? keyOrEdits : { [keyOrEdits]: val };
      saveStoredTweaks(edits);
    };
    useEffect(() => { applyTweaks(t); }, [t]);
    return [t, setTweak];
  };

  /* ---------- Panel de Tweaks (idéntico en ambas páginas) ---------- */
  const SiteTweaks = ({ t, setTweak }) => {
    const TweaksPanel = window.TweaksPanel;
    const TweakSection = window.TweakSection;
    const TweakRadio = window.TweakRadio;
    const TweakColor = window.TweakColor;
    const TweakSelect = window.TweakSelect;
    if (!TweaksPanel) return null;
    return (
      <TweaksPanel title="Tweaks">
        <TweakSection title="Apariencia">
          <TweakRadio label="Tema" value={t.theme} onChange={v => setTweak("theme", v)} options={[
            { value: "light", label: "Claro" },
            { value: "dark", label: "Oscuro" }
          ]}/>
          <TweakColor label="Color principal" value={t.accent} onChange={v => setTweak("accent", v)} options={["#3D7BFF", "#0066FF", "#00C2FF", "#7C3AED", "#10B981"]}/>
        </TweakSection>
        <TweakSection title="Tipografía">
          <TweakSelect label="Fuente display" value={t.fontDisplay} onChange={v => setTweak("fontDisplay", v)} options={[
            { value: "Manrope", label: "Manrope" },
            { value: "Inter", label: "Inter" },
            { value: "Space Grotesk", label: "Space Grotesk" },
            { value: "Geist", label: "Geist" },
            { value: "DM Sans", label: "DM Sans" }
          ]}/>
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio label="Variante" value={t.heroVariant} onChange={v => setTweak("heroVariant", v)} options={[
            { value: "code", label: "Código" },
            { value: "bento", label: "Bento" },
            { value: "minimal", label: "Mínimo" }
          ]}/>
        </TweakSection>
      </TweaksPanel>
    );
  };

  /* ---------- Navegación entre secciones ---------- */
  // page: "home" (index.html) | "downloads" (descargas.html)
  // target: "top" | "servicios" | "proceso" | "contacto" | "descargas"
  // En "home", los enlaces a secciones propias hacen scroll suave; en el resto
  // navegan a index.html#seccion. "descargas" siempre navega a descargas.html.
  const sectionNav = (page, target, onScroll) => {
    if (target === "descargas") return { href: "descargas.html" };
    if (target === "proyectos") return { href: "proyectos.html" };
    if (target === "top") {
      return page === "home"
        ? { href: "#top", onClick: (e) => { e.preventDefault(); onScroll && onScroll("top"); } }
        : { href: "index.html" };
    }
    // Servicios/Proceso/Contacto viven solo en su propia página (ya no hay
    // sección equivalente en la portada), igual que Descargas/Proyectos.
    if (target === "servicios" || target === "proceso" || target === "contacto") {
      return { href: `${target}.html` };
    }
    return page === "home"
      ? { href: `#${target}`, onClick: (e) => { e.preventDefault(); onScroll && onScroll(target); } }
      : { href: `index.html#${target}` };
  };

  /* ---------- Navbar ---------- */
  const Navbar = ({ page = "home", theme, onToggleTheme, onScroll }) => {
    const [mobileOpen, setMobileOpen] = useState(false);
    const isActive = (...names) => names.includes(page);
    const links = [
      // «Servicios» lleva a la portada (la cabecera «Software a medida…»): el logo no es enlace y es la única
      // forma de volver a ella desde el menú. El detalle (servicios.html) sigue en el botón «Ver servicios» y en el pie.
      { href: "index.html", label: "Servicios", active: isActive("home", "services") },
      { target: "proceso",   label: "Proceso",   active: isActive("process") },
      { href: "masupport.html", label: "MASupport", active: isActive("masupport") },
      { href: "maperit.html", label: "MAPerit", active: isActive("maperit") },
      { href: "masys.html", label: "MASys", active: isActive("masys") },
      { href: "madeca.html", label: "MADeCa", active: isActive("madeca") },
      // Software gratis vive en descargas.html (se mantiene la dirección).
      { href: "descargas.html", label: "Software gratis", active: isActive("downloads") },
      { target: "contacto",  label: "Contacto",  active: isActive("contact") },
      // "Proyectos" deshabilitado de momento: el enlace se retira del menú y
      // del pie, pero proyectos.html / proyecto.html siguen en el repo. Para
      // reactivarlo, restaura esta entrada y la del Footer, y quita el
      // <meta robots noindex> de esas páginas.
      // { href: "proyectos.html", label: "Proyectos", active: isActive("projects", "project-detail") },
    ];
    const linkProps = (l) => l.href ? { href: l.href } : sectionNav(page, l.target, onScroll);

    return (
      <header className="nav">
        <div className="container nav__inner">
          <div className="brand">
            <span className="brand__mark">MA</span>
            <div>
              <div className="brand__name"><b>MASoft</b><i>.es</i></div>
              <span className="brand__sub">Sistemas Informáticos</span>
            </div>
          </div>
          <nav className="nav__links">
            {links.map(l => (
              <a key={l.label} {...linkProps(l)} className={l.active ? "is-active" : undefined} aria-current={l.active ? "page" : undefined}>{l.label}</a>
            ))}
          </nav>
          <div className="nav__cta">
            <button className="icon-btn" onClick={onToggleTheme} aria-label="Cambiar tema">
              <Icon name={theme === "dark" ? "sun" : "moon"} size={16}/>
            </button>
            <a className="btn btn--accent btn--sm" {...sectionNav(page, "contacto", onScroll)}>
              Hablemos <Icon name="arrow-right" size={14}/>
            </a>
            <button className="icon-btn nav__burger" onClick={() => setMobileOpen(v => !v)} aria-label="Abrir menú" aria-expanded={mobileOpen}>
              <Icon name={mobileOpen ? "x" : "menu"} size={18}/>
            </button>
          </div>
        </div>
        <nav className={`nav__mobile ${mobileOpen ? "is-open" : ""}`}>
          {links.map(l => (
            <a key={l.label} {...linkProps(l)} className={l.active ? "is-active" : undefined} onClick={() => setMobileOpen(false)}>{l.label}</a>
          ))}
        </nav>
      </header>
    );
  };

  /* ---------- Footer ---------- */
  const Footer = ({ page = "home", contactInfo = {}, onScroll }) => {
    const email = contactInfo.contact_email || "hola@masoft.es";
    const phone = contactInfo.contact_phone || "+34 600 123 456";
    const phoneTel = phone.replace(/\s+/g, "");

    return (
      <footer className="footer">
        <div className="container">
          <div className="footer__top">
            <div>
              <div className="brand">
                <span className="brand__mark">MA</span>
                <div>
                  <div className="brand__name"><b>MASoft</b><i>.es</i></div>
                  <span className="brand__sub">Sistemas Informáticos</span>
                </div>
              </div>
              <p style={{fontSize: 13.5, color: "var(--muted)", maxWidth: 320, marginTop: 18}}>
                Software a medida y automatización con IA para empresas que quieren funcionar mejor.
              </p>
            </div>
            <div>
              <h4>Servicios</h4>
              <ul>
                <li><a {...sectionNav(page, "servicios", onScroll)}>Desarrollo a medida</a></li>
                <li><a {...sectionNav(page, "servicios", onScroll)}>Automatización IA</a></li>
                <li><a {...sectionNav(page, "servicios", onScroll)}>Modernización</a></li>
                <li><a {...sectionNav(page, "proceso", onScroll)}>Proceso</a></li>
              </ul>
            </div>
            <div>
              <h4>Recursos</h4>
              <ul>
                <li><a href="masupport.html" className="footer-destacado">MASupport</a></li>
                <li><a href="maperit.html">MAPerit</a></li>
                <li><a href="masys.html">MASys</a></li>
                <li><a href="madeca.html">MADeCa</a></li>
                <li><a href="descargas.html">Software gratis</a></li>
                {/* "Proyectos" deshabilitado de momento — ver nota en Navbar */}
                <li><a {...sectionNav(page, "contacto", onScroll)}>Soporte</a></li>
              </ul>
            </div>
            <div>
              <h4>Contacto</h4>
              <ul>
                <li><a href={`mailto:${email}`}>{email}</a></li>
                <li><a href={`tel:${phoneTel}`}>{phone}</a></li>
                <li><a {...sectionNav(page, "contacto", onScroll)}>Formulario</a></li>
              </ul>
            </div>
          </div>
          <div className="footer__copy">
            <span>© 2026 MASoft.es · Sistemas Informáticos</span>
            <span>v2026.05</span>
          </div>
        </div>
      </footer>
    );
  };

  /* ---------- Caja privacidad (RGPD) ---------- */
  const PrivacyBox = ({ email }) => {
    const addr = email || "hola@masoft.es";
    return (
      <div style={{background:"var(--bg)", border:"1px solid var(--line)", borderRadius:8, padding:"14px 16px", fontSize:12.5, color:"var(--muted)", marginBottom:14, lineHeight:1.65}}>
        <b style={{color:"var(--ink)", display:"block", marginBottom:8}}>Información básica sobre protección de datos (RGPD)</b>
        <p style={{margin:"0 0 5px"}}><b>Responsable:</b> MASoft Sistemas Informáticos &mdash; <a href={`mailto:${addr}`} style={{color:"var(--accent)"}}>{addr}</a></p>
        <p style={{margin:"0 0 5px"}}><b>Finalidad:</b> Gestionar tu suscripción y enviarte comunicaciones sobre nuevos productos, actualizaciones y herramientas publicados en MASoft.es.</p>
        <p style={{margin:"0 0 5px"}}><b>Base jurídica:</b> Consentimiento expreso del interesado (art. 6.1.a del Reglamento UE 2016/679 &mdash; RGPD).</p>
        <p style={{margin:"0 0 5px"}}><b>Conservación:</b> Hasta que solicites la baja. Puedes cancelar tu suscripción en cualquier momento mediante el enlace incluido en cada comunicación o escribiendo a la dirección indicada.</p>
        <p style={{margin:"0 0 5px"}}><b>Destinatarios:</b> No se ceden datos a terceros salvo obligación legal. Los datos se tratan en servidores dentro de la UE.</p>
        <p style={{margin:0}}><b>Derechos:</b> Puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad escribiendo a <a href={`mailto:${addr}`} style={{color:"var(--accent)"}}>{addr}</a>. Si consideras que el tratamiento no es conforme, puedes reclamar ante la <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" style={{color:"var(--accent)"}}>Agencia Española de Protección de Datos (aepd.es)</a>.</p>
      </div>
    );
  };

  /* ---------- Modal galería de capturas ---------- */
  const ScreenshotsModal = ({ open, item, onClose }) => {
    if (!item) return null;
    const allShots = [];
    if (item.screenshot_url) allShots.push(item.screenshot_url);
    if (item.screenshots_extra_urls) allShots.push(...item.screenshots_extra_urls);

    return (
      <div className={`modal-bg ${open ? "is-open" : ""}`} onClick={onClose}>
        <div className="modal modal--wide" onClick={e => e.stopPropagation()} style={{maxWidth: 720, maxHeight: '85vh', overflowY: 'auto'}}>
          <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16}/></button>
          <span className="eyebrow"><Icon name="images" size={12}/> &nbsp;Capturas</span>
          <h3>{item.title}</h3>
          <div style={{display:'grid', gap:14, marginTop:16}}>
            {allShots.map((url, i) => (
              <img key={i} src={url} alt={`Captura ${i+1}`} style={{width:'100%', borderRadius:10, border:'1px solid var(--line)'}}/>
            ))}
            {allShots.length === 0 && <p style={{color:'var(--muted)', textAlign:'center', padding:'30px 0'}}>No hay capturas disponibles.</p>}
          </div>
          <div style={{textAlign:'center', marginTop:18}}>
            <button className="btn btn--ghost" onClick={onClose}>Cerrar</button>
          </div>
        </div>
      </div>
    );
  };

  /* ---------- Modal Solicitud de descarga (Proyectos) ---------- */
  // A diferencia de Software gratis (descarga directa), aquí el archivo del
  // programa y el manual requieren aprobación manual: se manda la solicitud
  // y, si se aprueba desde el panel, el enlace llega por email.
  const ProjectRequestModal = ({ open, item, fileType, onClose, adminEmail }) => {
    const [form, setForm] = useState({ name: "", email: "", company: "", message: "", accept: false });
    const [done, setDone] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [showTerms, setShowTerms] = useState(false);

    useEffect(() => {
      if (open) {
        setDone(false); setError(null); setShowTerms(false);
        setForm({ name: "", email: "", company: "", message: "", accept: false });
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "";
      }
      return () => { document.body.style.overflow = ""; };
    }, [open, item, fileType]);

    if (!item) return null;
    const label = fileType === "manual" ? "manual" : "archivo del programa";

    const submit = async (e) => {
      e.preventDefault();
      if (!form.email || !form.accept) return;
      setLoading(true); setError(null);
      try {
        const res = await fetch("api/project_request.php", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ ...form, item_id: item.id, file_type: fileType })
        });
        const data = await res.json();
        if (data.ok) setDone(true);
        else setError(data.error === "email_invalid" ? "Email no válido" : "No se ha podido enviar la solicitud");
      } catch { setError("No se ha podido conectar con el servidor"); }
      setLoading(false);
    };

    return (
      <div className={`modal-bg ${open ? "is-open" : ""}`} onClick={onClose}>
        <div className="modal" onClick={e => e.stopPropagation()}>
          <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16}/></button>
          {!done ? (
            <>
              <span className="eyebrow"><Icon name="lock" size={12}/> &nbsp;Descarga con solicitud</span>
              <h3>{item.name}</h3>
              <p style={{fontSize: 14, color: "var(--muted)", marginBottom: 20}}>
                El {label} de <b>{item.name}</b> no es de descarga libre. Rellena tus datos y, si se aprueba tu solicitud, recibirás el enlace de descarga por email.
              </p>
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="field"><label>Nombre</label><input value={form.name} onChange={e=>setForm({...form, name: e.target.value})}/></div>
                  <div className="field"><label>Empresa</label><input value={form.company} onChange={e=>setForm({...form, company: e.target.value})}/></div>
                </div>
                <div className="field"><label>Email *</label><input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} required/></div>
                <div className="field"><label>Motivo de la solicitud (opcional)</label><textarea value={form.message} onChange={e=>setForm({...form, message: e.target.value})}/></div>
                <label className="field--check" style={{marginBottom: 8}}>
                  <input type="checkbox" checked={form.accept} onChange={e=>setForm({...form, accept: e.target.checked})}/>
                  Acepto la{" "}
                  <button type="button" onClick={() => setShowTerms(v => !v)} style={{background:"none", border:"none", padding:0, color:"var(--accent)", textDecoration:"underline", cursor:"pointer", fontSize:"inherit", fontFamily:"inherit"}}>
                    política de privacidad
                  </button>
                  {" "}y el tratamiento de mis datos para gestionar esta solicitud.
                </label>
                {showTerms && <PrivacyBox email={adminEmail}/>}
                <button type="submit" className="btn btn--accent" style={{width:"100%", justifyContent:"center"}} disabled={!form.email || !form.accept || loading}>
                  {loading ? "Enviando..." : <><Icon name="mail" size={16}/> Enviar solicitud</>}
                </button>
                {error && <p style={{color:"#c33", fontSize:13, marginTop:10, textAlign:"center"}}>{error}</p>}
              </form>
            </>
          ) : (
            <div style={{textAlign:"center", padding:"20px 0"}}>
              <div style={{width:64, height:64, borderRadius:16, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", margin:"0 auto 18px"}}>
                <Icon name="check" size={32} stroke={2.5}/>
              </div>
              <h3>Solicitud enviada</h3>
              <p style={{color:"var(--muted)", fontSize:14}}>La revisaremos y, si se aprueba, recibirás el enlace de descarga en tu email.</p>
              <button className="btn btn--ghost" onClick={onClose} style={{marginTop:16}}>Cerrar</button>
            </div>
          )}
        </div>
      </div>
    );
  };

  /* ---------- Modal Suscripción ---------- */
  const SubscribeModal = ({ open, onClose, adminEmail }) => {
    const [form, setForm] = useState({ name: "", email: "", company: "", accept: false });
    const [done, setDone] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [showTerms, setShowTerms] = useState(false);

    useEffect(() => {
      if (open) {
        setDone(false); setError(null); setShowTerms(false);
        setForm({ name: "", email: "", company: "", accept: false });
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "";
      }
      return () => { document.body.style.overflow = ""; };
    }, [open]);

    const submit = async (e) => {
      e.preventDefault();
      if (!form.email || !form.accept) return;
      setLoading(true); setError(null);
      try {
        const res = await fetch("api/subscribe.php", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(form)
        });
        const data = await res.json();
        if (data.ok) setDone(true);
        else setError(data.error === "email_invalid" ? "Email no válido" : "Error al suscribirse");
      } catch { setError("No se ha podido conectar con el servidor"); }
      setLoading(false);
    };

    return (
      <div className={`modal-bg ${open ? "is-open" : ""}`} onClick={onClose}>
        <div className="modal" onClick={e => e.stopPropagation()}>
          <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16}/></button>
          {!done ? (
            <>
              <span className="eyebrow"><Icon name="mail" size={12}/> &nbsp;Mantenme informado</span>
              <h3>Recibe nuestras novedades</h3>
              <p style={{fontSize: 14, color: "var(--muted)", marginBottom: 22}}>
                Te avisaremos cuando publiquemos nuevo software, actualizaciones y herramientas gratuitas. Sin spam, puedes darte de baja cuando quieras.
              </p>
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="field"><label>Nombre</label><input value={form.name} onChange={e=>setForm({...form, name: e.target.value})}/></div>
                  <div className="field"><label>Empresa</label><input value={form.company} onChange={e=>setForm({...form, company: e.target.value})}/></div>
                </div>
                <div className="field"><label>Email *</label><input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} required/></div>
                <label className="field--check" style={{marginBottom: 8}}>
                  <input type="checkbox" checked={form.accept} onChange={e=>setForm({...form, accept: e.target.checked})}/>
                  Acepto la{" "}
                  <button type="button" onClick={() => setShowTerms(v => !v)} style={{background:"none", border:"none", padding:0, color:"var(--accent)", textDecoration:"underline", cursor:"pointer", fontSize:"inherit", fontFamily:"inherit"}}>
                    política de privacidad
                  </button>
                  {" "}y el envío de comunicaciones.
                </label>
                {showTerms && <PrivacyBox email={adminEmail}/>}
                <button type="submit" className="btn btn--accent" style={{width:"100%", justifyContent:"center"}} disabled={!form.email || !form.accept || loading}>
                  {loading ? "Enviando..." : <><Icon name="check" size={16}/> Suscribirme</>}
                </button>
                {error && <p style={{color:"#c33", fontSize:13, marginTop:10, textAlign:"center"}}>{error}</p>}
              </form>
            </>
          ) : (
            <div style={{textAlign:"center", padding:"20px 0"}}>
              <div style={{width:64, height:64, borderRadius:16, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center", margin:"0 auto 18px"}}>
                <Icon name="check" size={32} stroke={2.5}/>
              </div>
              <h3>¡Ya estás en la lista!</h3>
              <p style={{color:"var(--muted)", fontSize:14}}>Te avisaremos cuando publiquemos novedades.</p>
              <button className="btn btn--ghost" onClick={onClose} style={{marginTop:16}}>Cerrar</button>
            </div>
          )}
        </div>
      </div>
    );
  };

  /* ---------- Exponer a las páginas ---------- */
  /* ---------- Galería de capturas con visor (páginas de producto) ----------
     shots: [{ src, t (título), d (descripción) }]. Esc cierra; ← → navegan.
     iniciales (opcional): nº de capturas visibles de entrada; el resto se
     revela con «Ver más» (si no se pasa, se muestran todas, como siempre).
     textoMas (opcional): texto de ese botón. */
  const Galeria = ({ shots, iniciales, textoMas }) => {
    const [abierta, setAbierta] = useState(-1);

    useEffect(() => {
      if (abierta < 0) return undefined;
      document.body.style.overflow = "hidden";
      const tecla = (e) => {
        if (e.key === "Escape") setAbierta(-1);
        if (e.key === "ArrowRight") setAbierta(i => (i + 1) % shots.length);
        if (e.key === "ArrowLeft") setAbierta(i => (i - 1 + shots.length) % shots.length);
      };
      window.addEventListener("keydown", tecla);
      return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", tecla); };
    }, [abierta, shots.length]);

    const actual = abierta >= 0 ? shots[abierta] : null;
    const tope = iniciales ? Math.min(iniciales, shots.length) : shots.length;
    const visibles = shots.slice(0, tope);
    const ocultas = shots.length - tope;

    return (
      <>
        <div className={`md-shots${visibles.length % 3 === 0 ? "" : " md-shots--2"}`}>
          {visibles.map((s, i) => (
            <button key={s.src} type="button" className="md-shot reveal" onClick={() => setAbierta(i)} aria-label={`Ampliar: ${s.t}`}>
              <span className="md-shot__img"><img src={s.src} alt={s.t} loading="lazy"/></span>
              <span className="md-shot__txt">
                <b>{s.t}</b>
                <span>{s.d}</span>
              </span>
            </button>
          ))}
        </div>

        {ocultas > 0 && (
          <div style={{ textAlign: "center", marginTop: 22 }}>
            <button type="button" className="btn btn--ghost" onClick={() => setAbierta(tope)}>
              {textoMas || `Ver las ${shots.length} capturas en el visor`}
              <span style={{ display: "inline-flex" }}><Icon name="arrow-right" size={16}/></span>
            </button>
          </div>
        )}

        <div className={`modal-bg md-lightbox ${actual ? "is-open" : ""}`} onClick={() => setAbierta(-1)}>
          {actual && (
            <div className="md-lightbox__box" onClick={e => e.stopPropagation()}>
              <button className="modal__close" onClick={() => setAbierta(-1)} aria-label="Cerrar"><Icon name="x" size={16}/></button>
              <img src={actual.src} alt={actual.t}/>
              <div className="md-lightbox__bar">
                <button type="button" className="btn btn--ghost" onClick={() => setAbierta((abierta - 1 + shots.length) % shots.length)} aria-label="Anterior">‹</button>
                <div className="md-lightbox__cap"><b>{actual.t}</b><span>{actual.d}</span></div>
                <button type="button" className="btn btn--ghost" onClick={() => setAbierta((abierta + 1) % shots.length)} aria-label="Siguiente">›</button>
              </div>
            </div>
          )}
        </div>
      </>
    );
  };

  Object.assign(window, {
    fmtDate, Icon, useReveal, applyTweaks, sectionNav,
    useSiteTweaks, SiteTweaks, Navbar, Footer, PrivacyBox,
    ScreenshotsModal, SubscribeModal, ProjectRequestModal, Galeria,
  });
})();