// Los 4 Elementos — pillars of hip hop
function Elementos() {
  return (
    <section id="elementos" className="py-20 lg:py-28">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        <div className="flex flex-wrap items-end justify-between gap-6 mb-12 lg:mb-14">
          <div className="reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60 mb-3">
              01 — LOS CUATRO ELEMENTOS
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-ink-900 max-w-[12ch]">
              Cuatro<br/>elementos.<br/>
              <span className="text-fire-500">Una cultura.</span>
            </h2>
          </div>
          <p className="reveal max-w-[36ch] text-[14.5px] leading-relaxed text-ink-900/85">
            Lo que nos junta no es un género musical: es una forma de habitar el barrio.
            Trabajamos los cuatro pilares en paralelo y abiertos a quien quiera entrar.
          </p>
        </div>

        {/* 4 cards in a row */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-ink-900 border-2 border-ink-900">
          {ELEMENTOS.map((el, i) => (
            <div
              key={el.code}
              className="group relative bg-bone-100 p-6 lg:p-7 transition-colors duration-300 hover:bg-fire-500 reveal"
              style={{ transitionDelay: `${i*60}ms` }}
            >
              <div className="flex items-start justify-between mb-12">
                <span className="font-mono text-[11px] tracking-[0.22em] uppercase text-ink-900/60">
                  {el.code}
                </span>
                <div className="w-10 h-10 grid place-items-center border-2 border-ink-900 bg-bone-100 group-hover:bg-electric-500 group-hover:text-bone-100 transition">
                  <Icon name={el.icon} size={18} stroke={1.8} />
                </div>
              </div>

              <div className="font-display text-[clamp(54px,5vw,76px)] text-ink-900 leading-[0.9] mb-1">
                {el.name}
              </div>
              <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-ink-900/60 mb-4">
                {el.full}
              </div>
              <p className="text-[13.5px] leading-relaxed text-ink-900/85">
                {el.body}
              </p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

window.Elementos = Elementos;