// Hero — poster-style massive type + meta strip
function Hero() {
  return (
    <section id="top" className="relative pt-24 lg:pt-32 pb-16 overflow-hidden">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        {/* Top meta line */}
        <div className="flex items-center justify-between gap-6 mb-10 lg:mb-14 reveal">
          <div className="flex items-center gap-3">
            <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900 bg-bone-200 px-2 py-1">
              EST. 2020 · Pudahuel
            </span>
            <span className="hidden md:inline font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900/60">
              · cultura hip hop a la cuadra
            </span>
          </div>
          <div className="hidden md:flex items-center gap-2 font-mono text-[10px] tracking-[0.18em] uppercase text-ink-900/70">
            <span className="w-2 h-2 bg-fire-500 animate-pulse" />
            Junta este sábado · 17:00
          </div>
        </div>

        {/* Massive headline poster */}
        <div className="relative">
          <div className="flex flex-wrap items-start gap-3">
            <h1 className="font-display text-electric-500 text-[clamp(72px,18vw,280px)] leading-[1.02] pt-2">
              FLOW FAM
            </h1>
            <span className="font-mono text-[11px] tracking-[0.18em] text-bone-100 uppercase rotate-2 bg-electric-500 px-2 py-1 border-2 border-ink-900 mt-4 lg:mt-8">
              Vol. 06
            </span>
          </div>
          <span className="font-display text-ink-950 text-[clamp(30px,7.2vw,112px)] leading-[1.06] block mt-3 lg:mt-5">
            HIP HOP QUE TRANSFORMA
          </span>
        </div>

        {/* Bottom row */}
        <div className="mt-12 lg:mt-16 grid lg:grid-cols-12 gap-8 lg:gap-12 items-end">
          <div className="lg:col-span-7">
            <p className="text-[17px] lg:text-[20px] leading-[1.45] text-ink-900 max-w-[44ch]">
              <strong className="font-semibold">FlowFam</strong> es la organización que mueve los <span className="spray-under font-semibold">4 elementos</span> en
              la comuna: MC, DJ, break y graffiti. Sin entrada, sin filtro,
              en la plaza de la esquina.
            </p>
            <div className="mt-7 flex flex-wrap items-center gap-3">
              <a href="#nosotros" className="btn-fire inline-flex items-center gap-2 px-5 py-3 text-[13px] uppercase tracking-[0.08em]">
                Conócenos
                <Icon name="arrow_right" size={15} />
              </a>
              <a href="#proyectos" className="btn-outline inline-flex items-center gap-2 px-5 py-3 text-[13px] uppercase tracking-[0.08em]">
                Ver proyectos
              </a>
            </div>
          </div>

          {/* Stats column */}
          <div className="lg:col-span-5">
            <div className="grid grid-cols-2 gap-px bg-ink-900 border-2 border-ink-900">
              {STATS.map((s, i) => (
                <div key={s.label} className="bg-bone-100 p-4 lg:p-5">
                  <div className="font-display text-[clamp(36px,4vw,56px)] text-ink-900 leading-none">{s.value}</div>
                  <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-ink-900/70 mt-1.5">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;