Footer de sitio.

<footer class="ui-sample ui-site-footer" data-site-footer data-footer-owner="cis"><div class="ui-site-footer__brand"><span class="ui-lockup"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><p>Operación tecnológica y productos digitales.</p></div><nav aria-label="Legal"><strong>Legal</strong><a href="#privacidad">Privacidad</a><a href="#terminos">Términos</a><a href="#mapa">Mapa del sitio</a></nav><nav aria-label="Recursos"><strong>Recursos</strong><a href="#docs">Documentación</a><a href="#archivo">Archivo</a><a href="#estado">Estado</a></nav><div class="ui-site-footer__owner"><span>Una compañía de</span><strong>Círculo de Santiago SpA</strong><small>© 2026 · RUT 78.384.591-1</small></div></footer>

<footer class="ui-sample ui-site-footer border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center justify-between gap-3" data-site-footer data-footer-owner="cis"><div class="ui-site-footer__brand"><span class="ui-lockup"><svg class="ui-lockup__mark h-auto w-full" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><p>Operación tecnológica y productos digitales.</p></div><nav class="flex flex-wrap items-center gap-3" aria-label="Legal"><strong>Legal</strong><a class="underline underline-offset-4" href="#privacidad">Privacidad</a><a class="underline underline-offset-4" href="#terminos">Términos</a><a class="underline underline-offset-4" href="#mapa">Mapa del sitio</a></nav><nav class="flex flex-wrap items-center gap-3" aria-label="Recursos"><strong>Recursos</strong><a class="underline underline-offset-4" href="#docs">Documentación</a><a class="underline underline-offset-4" href="#archivo">Archivo</a><a class="underline underline-offset-4" href="#estado">Estado</a></nav><div class="ui-site-footer__owner"><span>Una compañía de</span><strong>Círculo de Santiago SpA</strong><small class="text-sm text-slate-600">© 2026 · RUT 78.384.591-1</small></div></footer>

export interface FooterLink {
  href: string;
  label: string;
}

export interface FooterColumn {
  title: string;
  links: FooterLink[];
}

export interface FooterSiteProps {
  brand: string;
  domain: string;
  brandName: string;
  markSrc: string;
  description: string;
  columns: FooterColumn[];
  legalOwner: string;
  operatorHref?: string;
  operatorName?: string;
  /** Versión oscura del símbolo (`<marca>-mark-dark.svg`); con ella el pie cambia de símbolo en tema oscuro. */
  markDarkSrc?: string;
}

// La línea legal nombra al operador sólo cuando no es el mismo titular: en los
// sitios propios de la Compañía, «X SpA · Operado por X SpA.» repetía el nombre.
export function FooterSite({ brand, domain, brandName, markSrc, description, columns, legalOwner, operatorHref = "https://innovacionsantiago.cl/", operatorName = "Compañía de Innovación de Santiago SpA", markDarkSrc }: FooterSiteProps) {
  return (
    <footer className="gr-footer" data-cis-chrome="v1" data-site-footer data-footer-owner={brand}>
      <div className="gr-footer__top">
        <div className="gr-footer__brand"><img className={markDarkSrc ? "gr-logo-claro" : undefined} src={markSrc} alt="" width="36" height="36" />{markDarkSrc ? <img className="gr-logo-oscuro" src={markDarkSrc} alt="" width="36" height="36" /> : null}<div><div className="gr-footer__brand-name">{brandName}</div><div className="gr-footer__brand-tag">{description}</div></div></div>
        <div className="gr-footer__grid">{columns.map((column) => <section className="gr-footer__col" key={column.title}><h4>{column.title}</h4><ul>{column.links.map((link) => <li key={link.href}><a href={link.href}>{link.label}</a></li>)}</ul></section>)}</div>
      </div>
      <div className="gr-footer__base"><div className="gr-footer__base-inner"><span>{operatorName === legalOwner ? <>{legalOwner}.</> : <>{legalOwner} · Operado por <a href={operatorHref}>{operatorName}</a>.</>}</span><span className="gr-footer__sites">{domain}</span></div></div>
    </footer>
  );
}