// Lineup — próximas fechas tipo cartel
function Lineup() {
  const [filter, setFilter] = React.useState('TODO');
  const [items, setItems] = React.useState(LINEUP);
  React.useEffect(() => {
    try {
      const raw = localStorage.getItem('flowfam_lineup_v1');
      if (raw) {
        const parsed = JSON.parse(raw);
        if (Array.isArray(parsed) && parsed.length) setItems(parsed);
      }
    } catch (e) {}
  }, []);
  const filters = ['TODO', 'MC', 'DJ', 'BREAK', 'GRAF'];
  const list = items.filter(e => filter === 'TODO' || e.tags.includes(filter));

  return (
    <section id="lineup" 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-10 lg:mb-12">
          <div className="reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60 mb-3">
              04 — PRÓXIMAS FECHAS
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-ink-900">
              Lineup<br/>
              <span className="text-electric-500">agosto → diciembre</span>
            </h2>
          </div>

          {/* Filter chips */}
          <div className="reveal flex flex-wrap items-center gap-2">
            {filters.map(f => (
              <button
                key={f}
                onClick={() => setFilter(f)}
                className={
                  'px-3.5 py-2 text-[11.5px] uppercase tracking-[0.14em] font-medium border-2 border-ink-900 transition ' +
                  (filter === f
                    ? 'bg-ink-900 text-bone-100'
                    : 'bg-bone-100 text-ink-900 hover:bg-fire-500')
                }
              >
                {f}
              </button>
            ))}
          </div>
        </div>

        <div className="border-2 border-ink-900">
          {list.length === 0 && (
            <div className="p-10 text-center text-ink-900/60 font-mono text-[12px] uppercase tracking-[0.16em]">
              · sin fechas para este filtro ·
            </div>
          )}
          {list.map((e, i) => (
            <div
              key={e.date + e.title}
              className={
                'grid grid-cols-12 gap-3 lg:gap-6 items-center px-4 lg:px-6 py-5 lg:py-6 group hover:bg-ink-900 hover:text-bone-100 transition cursor-pointer reveal ' +
                (i < list.length - 1 ? 'border-b-2 border-ink-900' : '')
              }
              style={{ transitionDelay: `${i*40}ms` }}
            >
              {/* Date */}
              <div className="col-span-3 lg:col-span-2">
                <div className="font-display text-[clamp(28px,3.5vw,48px)] leading-[0.95]" style={e.color ? { color: e.color } : undefined}>{e.date}</div>
                <div className="font-mono text-[10px] tracking-[0.22em] uppercase opacity-60 mt-1">{e.day}</div>
              </div>

              {/* Kind */}
              <div className="hidden lg:block lg:col-span-2">
                <span className="font-mono text-[10px] tracking-[0.22em] uppercase border-2 border-current px-2 py-1">
                  {e.kind}
                </span>
              </div>

              {/* Title + place */}
              <div className="col-span-9 lg:col-span-5">
                <div className="font-display text-[clamp(22px,2.6vw,36px)] leading-[0.95]">{e.title}</div>
                <div className="font-mono text-[11px] tracking-[0.14em] uppercase opacity-70 mt-1 flex items-center gap-3">
                  <span className="flex items-center gap-1.5"><Icon name="map_pin" size={11} />{e.place}</span>
                  <span className="flex items-center gap-1.5"><Icon name="clock"   size={11} />{e.hour}</span>
                </div>
              </div>

              {/* Tags */}
              <div className="col-span-12 lg:col-span-2 flex flex-wrap gap-1.5">
                {e.tags.map(t => (
                  <span key={t} className="font-mono text-[9.5px] tracking-[0.18em] uppercase border border-current px-1.5 py-0.5">
                    {t}
                  </span>
                ))}
              </div>

              {/* Arrow */}
              <div className="hidden lg:flex col-span-1 justify-end">
                <div className="w-9 h-9 grid place-items-center border-2 border-current opacity-50 group-hover:opacity-100 transition">
                  <Icon name="arrow_up_right" size={14} />
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-6 flex items-center justify-between text-[11.5px] font-mono uppercase tracking-[0.18em] text-ink-900/70">
          <span>· entrada liberada · aporte voluntario</span>
          <a href="#cta" className="text-ink-900 hover:text-fire-500 transition flex items-center gap-2">
            Escríbenos
            <Icon name="arrow_right" size={13} />
          </a>
        </div>

      </div>
    </section>
  );
}

window.Lineup = Lineup;