/* ===== Kuntur shared: Footer (CTA + form + image marquee + links) ===== */
function Footer({ hideCTA }) {
  const D = window.KUNTUR;
  return (
    <footer className="footer">
      {/* Let's Talk CTA */}
      {!hideCTA &&
      <section className="cta wrap">
        <div className="cta__head">
          <RevealText as="h2" className="cta__title">Hablemos</RevealText>
          <div className="cta__follow" data-reveal>
            <span className="eyebrow">CONTACTO</span>
            <div className="cta__socials">
              {D.socials.map((s, i) =>
              <a key={i} href={s.href} target="_blank" rel="noreferrer" aria-label={s.name} className="soc-chip"><Social name={s.ic} /></a>
              )}
            </div>
          </div>
        </div>

        <div className="cta__grid">
          <div className="cta__left">
            <div className="cta__pic"><img src={D.ctaImage} alt="" /></div>
          </div>

          <div className="cta__form">
            <div className="cta__offer">
              <span className="eyebrow">Lo que ofrecemos</span>
              <ul>
                {D.services.map((s, i) => <li key={i}><a href={L(s.href)}>{s.title}</a><Icon name="arrowUR" /></li>)}
              </ul>
            </div>
          </div>
        </div>
      </section>
      }

      {/* Image marquee */}
      <div className="footer-marquee">
        <Marquee speed={70} gap={18}>
          {D.footerImages.map((src, i) =>
          <div className="fm-item" key={i}>
              <img src={src} alt="" loading="lazy" />
              <span className="fm-num">({String(i + 1).padStart(2, "0")})</span>
            </div>
          )}
        </Marquee>
      </div>

      {/* Links + copyright */}
      <div className="footer-bottom wrap">
        <div className="footer-cols">
          <div className="footer-brand">
            <span className="footer-logo-txt" style={{ fontSize: "36px" }}>KUNTUR®</span>
            <p>Estudio digital creativo premiado que construye sitios rápidos, amigables y orientados a la conversión.</p>
            <a className="back-home" href={L("index.html")}><Icon name="arrow" /> Volver arriba</a>
          </div>
          <div className="footer-col">
            <span className="footer-lbl">Páginas Principales</span>
            <a href={L("index.html")}>Inicio</a><a href={L("about/about-a.html")}>Nosotros</a>
            <a href={L("services/ui-ux-design.html")}>Servicios</a><a href={L("featured-work/featured-work.html")}>Trabajo Destacado</a>
            <a href={L("case-studies/conversion-led-digital-optimization.html")}>Caso de Estudio</a><a href={L("contact.html")}>Contacto</a>
          </div>
          <div className="footer-col">
            <span className="footer-lbl">Páginas Internas</span>
            {D.services.map((s, i) => <a key={i} href={L(s.href)}>{s.title}</a>)}
          </div>
          <div className="footer-col">
            <span className="footer-lbl">Utilidades</span>
            <a href={L("style-guide.html")}>Guía de Estilos</a>
            <a href={L("privacy-policy.html")}>Política de Privacidad</a>
            <a href={L("404.html")}>Página 404</a>
          </div>
        </div>
        <div className="footer-copy">
          <span>© {new Date().getFullYear()} Agencia Digital Kuntur.</span>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;