// Proyectos — iniciativas insignia de FlowFam
function Proyectos() {
  return (
    <section id="proyectos" className="py-20 lg:py-28 bg-ink-900 text-bone-100 relative overflow-hidden">
      <div aria-hidden className="absolute top-0 right-0 font-display text-bone-100/[0.04] text-[clamp(120px,18vw,240px)] leading-none pr-4 pt-2 pointer-events-none select-none">
        FLOW<br/>FAM
      </div>

      <div className="max-w-[1400px] mx-auto px-5 lg:px-10 relative">

        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 mb-12 lg:mb-16 items-end">
          <div className="lg:col-span-7 reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-bone-100/60 mb-3">
              03 — PROYECTOS
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-bone-100">
              Lo que <span className="text-fire-500">construimos</span><br/>
              en la comuna.
            </h2>
          </div>
          <p className="reveal lg:col-span-4 lg:col-start-9 text-[14.5px] leading-relaxed text-bone-100/80">
            Tres iniciativas insignia, en escuelas, en la calle y en el barrio de Barrancas.
          </p>
        </div>

        <div className="space-y-px bg-bone-100/15 border-2 border-bone-100/30">
          {PROYECTOS.map((p, i) => (
            <article
              key={p.title}
              className="bg-ink-900 p-6 lg:p-9 group hover:bg-ink-800 transition reveal"
              style={{ transitionDelay: `${i*70}ms` }}
            >
              <div className="grid lg:grid-cols-12 gap-6 items-start">
                <div className="lg:col-span-1">
                  <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-bone-100/50">
                    0{i+1}
                  </div>
                </div>
                <div className="lg:col-span-1 hidden lg:flex">
                  <div className="w-12 h-12 grid place-items-center border-2 border-bone-100">
                    <Icon name={p.icon} size={20} />
                  </div>
                </div>
                <div className="lg:col-span-5">
                  <div className="font-mono text-[10.5px] tracking-[0.18em] uppercase text-fire-400 mb-1.5">
                    {p.kicker}
                  </div>
                  <h3 className="font-display text-[clamp(28px,3.4vw,52px)] text-bone-100 leading-[1.02]">
                    {p.title}
                  </h3>
                </div>
                <p className="lg:col-span-3 text-[14px] leading-relaxed text-bone-100/85">
                  {p.body}
                </p>
                <div className="lg:col-span-2 flex flex-col gap-1.5 text-[12.5px] text-bone-100/85">
                  <div className="flex items-center gap-2"><Icon name="calendar" size={13} /> {p.when}</div>
                  <div className="flex items-center gap-2"><Icon name="map_pin"  size={13} /> {p.where}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

      </div>
    </section>
  );
}

window.Proyectos = Proyectos;