// GuerrerosCR — About, Tech, Blog, CTA, Contact, Footer

function About() {
  const isEn = window.location.pathname.startsWith("/en");
  const VALUES = isEn ? [
    { t: "Clarity", d: "We explain solutions in simple terms and work with concrete objectives." },
    { t: "Accountability", d: "Business technology must be reliable, secure, and stable." },
    { t: "Practical approach", d: "We don't build for the sake of building. We create tools that solve real problems." },
    { t: "Continuous improvement", d: "Every solution can evolve as the company grows." },
  ] : [
    { t: "Claridad", d: "Explicamos las soluciones de forma sencilla y trabajamos con objetivos concretos." },
    { t: "Responsabilidad", d: "La tecnología de una empresa debe ser confiable, segura y estable." },
    { t: "Enfoque práctico", d: "No desarrollamos por desarrollar. Creamos herramientas que resuelven problemas reales." },
    { t: "Mejora continua", d: "Cada solución puede evolucionar conforme crece la empresa." },
  ];
  return (
    <section id="nosotros" className="section">
      <div className="about-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>{isEn ? "About us" : "Nosotros"}</span>
          <h2 style={{ marginTop: 20 }}>
            {isEn ? "Technology built from real business experience." : "Tecnología construida desde la experiencia real de negocio."}
          </h2>
          <p style={{ marginTop: 20, fontSize: 16 }}>
            {isEn ? "GuerrerosCR combines web development with operational experience in technical support, infrastructure, databases, ERP, and administrative processes. This allows us to build solutions that " : "GuerrerosCR combina desarrollo web con experiencia operativa en soporte técnico, infraestructura, bases de datos, ERP y procesos administrativos. Esto nos permite construir soluciones que "}
            <b style={{color:'var(--ink)'}}>{isEn ? "not only look great but actually work" : "no solo se ven bien, sino que funcionan"}</b>
            {isEn ? " in real business scenarios." : " en escenarios reales de negocio."}
          </p>
          <p style={{ marginTop: 12, fontSize: 16 }}>
            {isEn ? "We understand both the technical and operational sides: what users need, what management needs, and what the system needs to run properly." : "Entendemos tanto el lado técnico como el lado operativo: qué necesita el usuario, qué necesita la gerencia y qué necesita el sistema para funcionar correctamente."}
          </p>

          <div className="values-grid">
            {VALUES.map((v, i) => (
              <div key={i} className="value-card">
                <h4>{v.t}</h4>
                <p>{v.d}</p>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="mv-card">
            <div className="grid-glow"></div>
            <h3><span className="pill">{isEn ? "Mission" : "Misión"}</span></h3>
            <p style={{ marginTop: 14, fontSize: 16 }}>
              {isEn ? "To help companies improve their processes through practical, secure, and scalable digital solutions." : "Ayudar a empresas a mejorar sus procesos mediante soluciones digitales prácticas, seguras y escalables."}
            </p>
          </div>
          <div className="mv-card">
            <div className="grid-glow"></div>
            <h3><span className="pill">{isEn ? "Vision" : "Visión"}</span></h3>
            <p style={{ marginTop: 14, fontSize: 16 }}>
              {isEn ? "To be a technology partner for companies seeking to grow with more structure, automation, and information control." : "Ser un aliado tecnológico para empresas que buscan crecer con más orden, automatización y control de su información."}
            </p>
          </div>
          <div className="mv-card" style={{ background: "var(--bg-2)", color: "var(--ink)", border: "1px solid var(--line)" }}>
            <h3 style={{ color: "var(--ink)" }}>
              <span className="pill" style={{ background: "color-mix(in oklab, var(--brand) 14%, transparent)", color: "var(--brand)" }}>{isEn ? "Promise" : "Promesa"}</span>
            </h3>
            <p style={{ marginTop: 14, fontSize: 16, color: "var(--muted)" }}>
              {isEn ? "We turn manual processes into clear, secure, and scalable digital solutions." : "Convertimos procesos manuales en soluciones digitales claras, seguras y escalables."}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;

// === Tech Stack ===
function TechStack() {
  const isEn = window.location.pathname.startsWith("/en");
  const TECH = isEn ? [
    { name: "React", label: "Frontend" },
    { name: "Node.js", label: "Runtime" },
    { name: "Express", label: "API" },
    { name: "Laravel", label: "Backend" },
    { name: "PHP", label: "Backend" },
    { name: "MySQL", label: "Database" },
    { name: "SQL Server", label: "Database" },
    { name: "Tailwind CSS", label: "UI" },
    { name: "REST APIs", label: "Integration" },
    { name: "ERP", label: "Integration" },
    { name: "Hosting", label: "Deployment" },
    { name: "Domains", label: "Deployment" },
  ] : [
    { name: "React", label: "Frontend" },
    { name: "Node.js", label: "Runtime" },
    { name: "Express", label: "API" },
    { name: "Laravel", label: "Backend" },
    { name: "PHP", label: "Backend" },
    { name: "MySQL", label: "Base de datos" },
    { name: "SQL Server", label: "Base de datos" },
    { name: "Tailwind CSS", label: "UI" },
    { name: "APIs REST", label: "Integración" },
    { name: "ERP", label: "Integración" },
    { name: "Hosting", label: "Despliegue" },
    { name: "Dominios", label: "Despliegue" },
  ];
  return (
    <section className="section section-tight">
      <div className="sec-head">
        <div>
          <span className="eyebrow green"><span className="dot"></span>Stack</span>
          <h2 style={{ marginTop: 20 }}>{isEn ? "Modern and reliable technologies." : "Tecnologías modernas y confiables."}</h2>
        </div>
        <p className="side">{isEn ? "Proven tools to build fast, secure, and scalable web solutions." : "Herramientas probadas para construir soluciones web rápidas, seguras y escalables."}</p>
      </div>
      <div className="tech-grid">
        {TECH.map((t, i) => (
          <div key={i} className="tech-chip">
            <span className="tech-chip-label">{t.label}</span>
            <span>{t.name}</span>
          </div>
        ))}
      </div>
    </section>
  );
}
window.TechStack = TechStack;

// === Blog ===
function Blog() {
  const isEn = window.location.pathname.startsWith("/en");
  const base = isEn ? "/en" : "";
  const POSTS = [
    { cat: isEn ? "Automation" : "Automatización", title: isEn ? "How to digitize internal approvals with web forms" : "Cómo digitalizar aprobaciones internas con formularios web", excerpt: isEn ? "From emails and spreadsheet signatures to a clear workflow with notifications and traceability." : "De correos y firmas en Excel a un flujo claro con notificaciones y trazabilidad.", read: isEn ? "10 min" : "10 min", date: "May 2026", href: `${base}/blog/digitalizar-aprobaciones-internas` },
    { cat: isEn ? "ERP & Data" : "ERP & Datos", title: isEn ? "What ERP integration is and why it saves time" : "Qué es una integración con ERP y por qué ahorra tiempo", excerpt: isEn ? "When to connect your ERP to a web application and what to expect from the project." : "Cuándo conviene conectar su ERP con una aplicación web y qué esperar del proyecto.", read: "8 min", date: "May 2026", href: `${base}/blog/integracion-erp-ahorro-tiempo` },
    { cat: isEn ? "Web Development" : "Desarrollo web", title: isEn ? "Website vs web application: key differences" : "Diferencias entre una página web y una aplicación web", excerpt: isEn ? "When a website is enough and when you truly need an internal platform." : "Cuándo basta con un sitio y cuándo realmente necesita una plataforma interna.", read: "5 min", date: isEn ? "Apr 2026" : "Abr 2026", href: `${base}/blog/pagina-web-vs-aplicacion-web` },
    { cat: isEn ? "Productivity" : "Productividad", title: isEn ? "How to reduce Excel dependency in critical processes" : "Cómo reducir el uso de Excel en procesos críticos", excerpt: isEn ? "Typical spreadsheet risks and practical ways to replace them." : "Riesgos típicos del Excel compartido y rutas concretas para sustituirlo.", read: "7 min", date: isEn ? "Apr 2026" : "Abr 2026", href: `${base}/blog/reducir-uso-excel-procesos-criticos` },
    { cat: "Dashboards", title: isEn ? "How to build dashboards for better decisions" : "Cómo crear dashboards para tomar mejores decisiones", excerpt: isEn ? "Which metrics to include, how to structure them, and how to connect to real data." : "Qué indicadores reportar, cómo estructurarlos y cómo conectarlos a los datos reales.", read: "6 min", date: "Mar 2026", href: `${base}/blog/crear-dashboards-mejores-decisiones` },
    { cat: isEn ? "Business" : "Empresarial", title: isEn ? "What a business website in Costa Rica should include" : "Qué debe tener una página web empresarial en Costa Rica", excerpt: isEn ? "The essentials to turn your site into a real lead channel." : "Lo básico (y lo no tan básico) para que su sitio realmente genere conversaciones.", read: "9 min", date: "Mar 2026", href: `${base}/blog/pagina-web-empresarial-costa-rica` },
  ];
  return (
    <section id="blog" className="section">
      <div className="sec-head">
        <div>
          <span className="eyebrow"><span className="dot"></span>Blog</span>
          <h2 style={{ marginTop: 20 }}>{isEn ? "Ideas and resources to digitize your business better." : "Ideas y recursos para digitalizar mejor su empresa."}</h2>
        </div>
        <p className="side">{isEn ? "Practical content on web development, automation, ERP, and business technology." : "Contenido práctico sobre desarrollo web, automatización, ERP y tecnología aplicada a negocios."}</p>
      </div>
      <div className="blog-grid">
        {POSTS.map((p, i) => (
          <a href={p.href} key={i} className="blog-card">
            <div className="blog-cat">{p.cat}</div>
            <h3>{p.title}</h3>
            <p>{p.excerpt}</p>
            <div className="blog-meta">
              <span>{p.date}</span>
              <span>{p.read} {isEn ? "read" : "de lectura"} →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
window.Blog = Blog;

// === CTA banner ===
function CTABanner() {
  const isEn = window.location.pathname.startsWith("/en");
  const base = isEn ? "/en" : "";
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };
  return (
    <section className="section">
      <div className="cta">
        <div style={{ position: "relative", zIndex: 1 }}>
          <span className="eyebrow green" style={{ background: "rgba(34, 197, 94, 0.16)" }}><span className="dot"></span>{isEn ? "Free diagnosis" : "Diagnóstico inicial"}</span>
          <h2 style={{ marginTop: 16 }}>
            {isEn ? "Do you have a process still relying on Excel, email, or manual work?" : "¿Tiene un proceso que todavía depende de Excel, correos o trabajo manual?"}
          </h2>
          <p>
            {isEn ? "We review one of your current processes and propose a clear roadmap to digitize, automate, or integrate it with your existing systems." : "Revisamos un proceso actual de su empresa y le proponemos una ruta clara para digitalizarlo, automatizarlo o integrarlo con sus sistemas existentes."}
          </p>
        </div>
        <div className="cta-actions" style={{ position: "relative", zIndex: 1 }}>
          <a href={`${base}/#contacto`} onClick={go("contacto")} className="btn btn-primary btn-lg">
            {isEn ? "Let's talk about your project" : "Hablemos de su proyecto"} <Icon name="arrow" size={14} />
          </a>
          <a
            href="https://wa.me/50670181607?text=Hola%2C%20vi%20la%20web%20de%20GuerrerosCR%20y%20me%20interesa%20conversar."
            target="_blank" rel="noreferrer"
            className="btn btn-wa btn-lg"
          >
            <Icon name="wa" size={16} /> WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}
window.CTABanner = CTABanner;

// === Contact ===
function Contact() {
  const isEn = window.location.pathname.startsWith("/en");
  const base = isEn ? "/en" : "";
  const [form, setForm] = useState({
    nombre: "", empresa: "", correo: "", whatsapp: "",
    servicio: isEn ? "Custom web application" : "Aplicación web a la medida", presupuesto: "", mensaje: "",
  });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [serverError, setServerError] = useState("");

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const setBudget = (v) => setForm({ ...form, presupuesto: v });

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.nombre.trim()) errs.nombre = isEn ? "Required" : "Requerido";
    if (!form.correo.trim()) errs.correo = isEn ? "Required" : "Requerido";
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.correo)) errs.correo = isEn ? "Invalid email" : "Correo no válido";
    if (!form.mensaje.trim() || form.mensaje.trim().length < 10) errs.mensaje = isEn ? "Tell us a bit more" : "Cuéntenos un poco más";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    setServerError("");
    try {
      const fd = new FormData();
      Object.entries(form).forEach(([k, v]) => fd.append(k, v));
      fd.append("website", document.getElementById("gc-hp")?.value || "");
      fd.append("page_origin", window.location.href);

      const r = await fetch("/api/contact.php", { method: "POST", body: fd });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) {
        setServerError(data.error || (isEn ? "We couldn't send your message. Please try again." : "No pudimos enviar su mensaje. Inténtelo de nuevo."));
        return;
      }
      window.location.href = `${base}/gracias`;
    } catch (err) {
      setServerError(isEn ? "Network error. Check your connection and try again." : "Error de red. Verifique su conexión e intente de nuevo.");
    } finally {
      setSubmitting(false);
    }
  };

  const servicios = isEn ? [
    "Custom web application",
    "Process automation",
    "ERP / Database integration",
    "Professional web development",
    "Dashboards and reports",
    "IT consulting / Support",
    "Not sure, I need guidance",
  ] : [
    "Aplicación web a la medida",
    "Automatización de procesos",
    "Integración con ERP / Bases de datos",
    "Desarrollo web profesional",
    "Dashboards y reportes",
    "Consultoría / Soporte IT",
    "No estoy seguro, necesito orientación",
  ];

  const presupuestos = isEn ? ["< $300", "$300 – $700", "$700 – $1,500", "$1,500+", "Not sure"] : ["< $300", "$300 – $700", "$700 – $1,500", "$1,500+", "No estoy seguro"];

  return (
    <section id="contacto" className="section">
      <div className="contact-grid">
        <div className="contact-aside">
          <span className="eyebrow"><span className="dot"></span>{isEn ? "Contact" : "Contacto"}</span>
          <h2 style={{ marginTop: 20 }}>{isEn ? "Let's talk about your project." : "Hablemos de su proyecto."}</h2>
          <p style={{ marginTop: 16, fontSize: 16 }}>
            {isEn ? "Tell us what process you want to improve, what system you need developed, or what idea you want to turn into a digital solution. We'll reply with a clear initial assessment." : "Cuéntenos qué proceso desea mejorar, qué sistema necesita desarrollar o qué idea quiere llevar a una solución digital. Le respondemos con una orientación inicial clara."}
          </p>

          <div className="contact-channels">
            <a className="channel" href="https://wa.me/50670181607?text=Hola%2C%20vi%20la%20web%20de%20GuerrerosCR%20y%20me%20interesa%20conversar." target="_blank" rel="noreferrer">
              <span className="channel-ico wa"><Icon name="wa" size={18} /></span>
              <div className="channel-body">
                <div className="channel-label">{isEn ? "WhatsApp · quick reply" : "WhatsApp · respuesta rápida"}</div>
                <div className="channel-value">+506 7018-1607</div>
              </div>
              <span className="channel-arrow">↗</span>
            </a>
            <a className="channel" href="mailto:adrian@guerreroscr.com">
              <span className="channel-ico"><Icon name="mail" size={18} /></span>
              <div className="channel-body">
                <div className="channel-label">{isEn ? "Email" : "Correo"}</div>
                <div className="channel-value">adrian@guerreroscr.com</div>
              </div>
              <span className="channel-arrow">↗</span>
            </a>
            <div className="channel">
              <span className="channel-ico"><Icon name="pin" size={18} /></span>
              <div className="channel-body">
                <div className="channel-label">{isEn ? "Location" : "Ubicación"}</div>
                <div className="channel-value">San José, Costa Rica</div>
              </div>
            </div>
          </div>
        </div>

        <div className="contact-card">
          {sent ? (
            <div className="thanks">
              <div className="check"><Icon name="check" size={28} /></div>
              <h3 style={{ fontSize: 24 }}>{isEn ? "Thank you, " : "Gracias, "}{form.nombre.split(" ")[0]}.</h3>
              <p style={{ marginTop: 8, fontSize: 15 }}>
                {isEn ? "We have received your message and will review the information to get back to you with an initial assessment." : "Hemos recibido su mensaje y revisaremos la información para responderle con una orientación inicial."}
              </p>
              <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 24 }}>
                <a
                  className="btn btn-wa"
                  href={`https://wa.me/50670181607?text=Hola%2C%20envi%C3%A9%20el%20formulario%20de%20${encodeURIComponent(form.servicio)}.`}
                  target="_blank" rel="noreferrer"
                >
                  <Icon name="wa" size={14} /> {isEn ? "Continue on WhatsApp" : "Continuar por WhatsApp"}
                </a>
                <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ nombre: "", empresa: "", correo: "", whatsapp: "", servicio: isEn ? "Custom web application" : "Aplicación web a la medida", presupuesto: "", mensaje: "" }); }}>
                  {isEn ? "Send another message" : "Enviar otro mensaje"}
                </button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit}>
              {/* Honeypot anti-spam — debe quedar vacío */}
              <input
                id="gc-hp"
                name="website"
                type="text"
                tabIndex="-1"
                autoComplete="off"
                style={{ position: "absolute", left: "-10000px", width: 1, height: 1, opacity: 0 }}
                aria-hidden="true"
              />
              <div className="form-row">
                <div className="field">
                  <label>{isEn ? "Name" : "Nombre"}</label>
                  <input type="text" value={form.nombre} onChange={set("nombre")} placeholder={isEn ? "Your name" : "Su nombre"} />
                  {errors.nombre && <div className="field-error">{errors.nombre}</div>}
                </div>
                <div className="field">
                  <label>{isEn ? "Company" : "Empresa"}</label>
                  <input type="text" value={form.empresa} onChange={set("empresa")} placeholder={isEn ? "Company name" : "Nombre de la empresa"} />
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>{isEn ? "Email" : "Correo"}</label>
                  <input type="email" value={form.correo} onChange={set("correo")} placeholder={isEn ? "email@company.com" : "correo@empresa.com"} />
                  {errors.correo && <div className="field-error">{errors.correo}</div>}
                </div>
                <div className="field">
                  <label>WhatsApp</label>
                  <input type="tel" value={form.whatsapp} onChange={set("whatsapp")} placeholder="+506" />
                </div>
              </div>
              <div className="field">
                <label>{isEn ? "Service of interest" : "Servicio de interés"}</label>
                <select value={form.servicio} onChange={set("servicio")}>
                  {servicios.map(s => <option key={s}>{s}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{isEn ? "Approximate budget" : "Presupuesto aproximado"}</label>
                <div className="budget-options">
                  {presupuestos.map(b => (
                    <button
                      key={b} type="button"
                      className={`budget-pill ${form.presupuesto === b ? "active" : ""}`}
                      onClick={() => setBudget(b)}
                    >{b}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>{isEn ? "Message" : "Mensaje"}</label>
                <textarea value={form.mensaje} onChange={set("mensaje")} placeholder={isEn ? "Tell us what process you want to improve or what solution you need..." : "Cuéntenos qué proceso desea mejorar o qué solución necesita..."} rows={4}></textarea>
                {errors.mensaje && <div className="field-error">{errors.mensaje}</div>}
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 8 }}>
                <button type="submit" className="btn btn-primary btn-lg" disabled={submitting}>
                  {submitting ? (isEn ? "Sending..." : "Enviando...") : <><span>{isEn ? "Send message" : "Enviar mensaje"}</span> <Icon name="send" size={14} /></>}
                </button>
                <span style={{ fontSize: 12, color: "var(--muted)" }}>
                  {isEn ? "We'll reply within 24 business hours." : "Responderemos en menos de 24h hábiles."}
                </span>
              </div>
              {serverError && <div className="field-error" style={{ marginTop: 10 }}>{serverError}</div>}
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

// === Footer ===
function Footer() {
  const isEn = window.location.pathname.startsWith("/en");
  const base = isEn ? "/en" : "";
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <a href={`${base}/#inicio`} className="brand">
            <img className="brand-logo" src="/logoGuerreros-transparent.png" alt="GuerrerosCR" />
          </a>
          <p style={{ marginTop: 14, fontSize: 14, maxWidth: 340 }}>
            {isEn ? "Digital solutions for companies that want to work with more order, efficiency, and control." : "Soluciones digitales para empresas que quieren trabajar con más orden, eficiencia y control."}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
            <a className="btn btn-wa" href="https://wa.me/50670181607" target="_blank" rel="noreferrer" style={{ padding: "9px 14px", fontSize: 13 }}>
              <Icon name="wa" size={14} /> WhatsApp
            </a>
            <a className="btn btn-ghost" href="mailto:adrian@guerreroscr.com" style={{ padding: "9px 14px", fontSize: 13 }}>
              <Icon name="mail" size={14} /> {isEn ? "Email" : "Correo"}
            </a>
          </div>
        </div>
        <div>
          <h5>{isEn ? "Services" : "Servicios"}</h5>
          <ul>
            <li><a href={`${base}/#servicios`}>{isEn ? "Custom applications" : "Aplicaciones a la medida"}</a></li>
            <li><a href={`${base}/#servicios`}>{isEn ? "Automation" : "Automatización"}</a></li>
            <li><a href={`${base}/#servicios`}>{isEn ? "ERP integrations" : "Integraciones ERP"}</a></li>
            <li><a href={`${base}/#servicios`}>{isEn ? "Web development" : "Desarrollo web"}</a></li>
            <li><a href={`${base}/#servicios`}>{isEn ? "Dashboards" : "Dashboards"}</a></li>
            <li><a href={`${base}/#servicios`}>{isEn ? "IT consulting" : "Consultoría IT"}</a></li>
          </ul>
        </div>
        <div>
          <h5>{isEn ? "Company" : "Empresa"}</h5>
          <ul>
            <li><a href={`${base}/#nosotros`}>{isEn ? "About" : "Nosotros"}</a></li>
            <li><a href={`${base}/#proyectos`}>{isEn ? "Projects" : "Proyectos"}</a></li>
            <li><a href={`${base}/blog`}>{isEn ? "Blog" : "Blog"}</a></li>
            <li><a href={`${base}/contacto`}>{isEn ? "Contact" : "Contacto"}</a></li>
          </ul>
        </div>
        <div>
          <h5>{isEn ? "Contact" : "Contacto"}</h5>
          <ul>
            <li>+506 7018-1607</li>
            <li>adrian@guerreroscr.com</li>
            <li>San José, Costa Rica</li>
          </ul>
        </div>
      </div>
      <div className="footer-meta">
        <span>{isEn ? "© 2026 GuerrerosCR · All rights reserved." : "© 2026 GuerrerosCR · Todos los derechos reservados."}</span>
        <span style={{ display: "flex", gap: 18 }}>
          <a href={`${base}/politica-de-privacidad`}>{isEn ? "Privacy policy" : "Política de privacidad"}</a>
          <a href={`${base}/aviso-de-cookies`}>{isEn ? "Cookie notice" : "Aviso de cookies"}</a>
        </span>
      </div>
    </footer>
  );
}
window.Footer = Footer;