function Footer() {
  return (
    <footer className="bg-ink-900 text-bone-100 pt-14 pb-8 relative overflow-hidden">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        {/* Wordmark */}
        <div className="font-display text-bone-100 text-[clamp(72px,16vw,260px)] leading-[0.85] mb-10 pointer-events-none select-none">
          FLOW<span className="text-electric-500">FAM</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-10 pb-10 border-b-2 border-bone-100/20">
          <div className="lg:col-span-6">
            <p className="text-[14.5px] leading-relaxed text-bone-100/85 max-w-[44ch]">
              FlowFam es una organización comunitaria que acerca la cultura hip hop a Pudahuel
              y al sector poniente de Santiago. Trabajamos los cuatro elementos, cobramos cero
              y dependemos de la comunidad.
            </p>
            <div className="mt-6 flex flex-wrap items-center gap-2">
              {SOCIALS.map(s => (
                <a key={s.icon} href={s.url} target="_blank" rel="noopener"
                   className="inline-flex items-center gap-2 border-2 border-bone-100/40 px-3 h-10 hover:bg-fire-500 hover:border-fire-500 hover:text-ink-900 transition"
                   aria-label={s.label}>
                  <Icon name={s.icon} size={16} />
                  <span className="font-mono text-[11px] tracking-[0.1em]">{s.handle}</span>
                </a>
              ))}
            </div>
          </div>

          <div className="lg:col-span-2">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-bone-100/60 mb-3">Navegar</div>
            <ul className="space-y-2 text-[13.5px]">
              <li><a href="#elementos" className="hover:text-fire-500">4 Elementos</a></li>
              <li><a href="#nosotros"  className="hover:text-fire-500">Quiénes somos</a></li>
              <li><a href="#proyectos" className="hover:text-fire-500">Proyectos</a></li>
              <li><a href="#lineup"    className="hover:text-fire-500">Lineup</a></li>
              <li><a href="#galeria"   className="hover:text-fire-500">Galería</a></li>
              <li><a href="#redes"     className="hover:text-fire-500">Redes</a></li>
            </ul>
          </div>

          <div className="lg:col-span-4">
            <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-bone-100/60 mb-3">Sede</div>
            <ul className="space-y-2 text-[13.5px]">
              <li>Plaza Las Camelias</li>
              <li>Pudahuel · Región Metropolitana</li>
              <li className="text-bone-100/60 pt-2 text-[12.5px]">hola@flowfam.cl · +56 9 0000 0000</li>
            </ul>
          </div>
        </div>

        <div className="pt-6 flex flex-wrap items-center justify-between gap-4 font-mono text-[10.5px] tracking-[0.16em] uppercase text-bone-100/60">
          <div>© 2020 — 2026 · FlowFam Pudahuel</div>
          <div>Cultura hip hop · barrio · sin filtro</div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;