// Redes — tarjetas de redes sociales con espacio para embeds reales
function Redes() {
  const cards = [
    { icon: 'instagram', name: 'Instagram', handle: 'originatural.flowfam', url: 'https://www.instagram.com/originatural.flowfam/', kind: 'Fotos · reels · avisos', variant: 'ph-elec', ratio: 'aspect-[9/16]' },
    { icon: 'tiktok',    name: 'TikTok',    handle: 'flow.fam1',            url: 'https://www.tiktok.com/@flow.fam1',              kind: 'Clips cortos · cyphers',  variant: 'ph-fire', ratio: 'aspect-[9/16]' },
    { icon: 'youtube',   name: 'YouTube',   handle: 'https://www.youtube.com/@FlowFam-df2go',       url: 'https://www.youtube.com/@FlowFam-df2go',        kind: 'Batallas · registro',     variant: 'ph-ink', ratio: 'aspect-video' },
  ];

  return (
    <section id="redes" className="py-20 lg:py-28 bg-ink-900 text-bone-100">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        <div className="flex flex-wrap items-end justify-between gap-6 mb-10 lg:mb-12">
          <div className="reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-bone-100/60 mb-3">
              06 — REDES
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-bone-100">
              Síguenos<br/>
              <span className="text-fire-500">en la calle y en el feed.</span>
            </h2>
          </div>
          <p className="reveal max-w-[32ch] text-[14.5px] leading-relaxed text-bone-100/80">
            Todo lo que pasa se avisa primero por acá. Fechas, cambios de lugar y convocatorias.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-5 items-start">
          {cards.map((c, i) => (
            <a
              key={c.icon}
              href={c.url}
              target="_blank"
              rel="noopener"
              className="group block border-2 border-bone-100/30 hover:border-fire-500 transition reveal"
              style={{ transitionDelay: `${i*70}ms` }}
            >
              <div className={'ph ' + c.ratio + ' ' + c.variant} data-label={c.name + ' · video o imagen aquí'}>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 rounded-full bg-ink-900/70 border-2 border-bone-100 grid place-items-center group-hover:scale-110 group-hover:bg-fire-500 group-hover:text-ink-900 transition">
                    <Icon name="play" size={22} stroke={2} />
                  </div>
                </div>
              </div>
              <div className="p-5 flex items-start justify-between gap-4 bg-ink-900 group-hover:bg-ink-800 transition">
                <div>
                  <div className="flex items-center gap-2 mb-1.5">
                    <Icon name={c.icon} size={17} />
                    <span className="font-display text-[26px] leading-none">{c.name}</span>
                  </div>
                  <div className="font-mono text-[11px] tracking-[0.1em] text-fire-500">{c.handle}</div>
                  <div className="font-mono text-[10px] tracking-[0.16em] uppercase text-bone-100/50 mt-2">{c.kind}</div>
                </div>
                <div className="w-9 h-9 shrink-0 grid place-items-center border-2 border-bone-100/40 group-hover:bg-fire-500 group-hover:border-fire-500 group-hover:text-ink-900 transition">
                  <Icon name="arrow_up_right" size={14} />
                </div>
              </div>
            </a>
          ))}
        </div>

      </div>
    </section>
  );
}

window.Redes = Redes;