const { useState } = React;

function Agenda() {
  const [open, setOpen] = useState(new Set([0])); // first open by default

  const toggle = (i) => {
    const next = new Set(open);
    if (next.has(i)) next.delete(i); else next.add(i);
    setOpen(next);
  };

  return (
    <section className="block" id="agenda" data-screen-label="Agenda">
      <div className="page">
        <div className="section-head">
          <div className="kicker">02 · Programa</div>
          <h2>Agenda de<br/>la jornada<span style={{color:'var(--accent)'}}>.</span></h2>
          <div className="aside">
            Apertura de puertas 9:30h. Inicio 10:00h. Pulsa en cada punto para ver el detalle.
          </div>
        </div>

        <div className="agenda">
          <aside className="agenda-legend">
            De un solo vistazo: cinco bloques temáticos, dos pausas para conversar.
            <div className="chip-row">
              <span className="chip"><span className="sw" style={{background:'#b4651f'}}></span>Ciberseguridad</span>
              <span className="chip"><span className="sw" style={{background:'#1e3aff'}}></span>Telco</span>
              <span className="chip"><span className="sw" style={{background:'#6d2bb8'}}></span>Infra · IA</span>
              <span className="chip"><span className="sw" style={{background:'#1e7a5e'}}></span>Software</span>
              <span className="chip"><span className="sw" style={{background:'#b4321f'}}></span>Demos</span>
            </div>
          </aside>

          <div className="timeline">
            {AGENDA.map((item, i) => {
              const isOpen = open.has(i);
              return (
                <div
                  key={i}
                  className={`tl-item ${isOpen ? 'open' : ''} ${item.pending ? 'pending' : ''}`}
                  onClick={() => toggle(i)}
                >
                  <div className="tl-time">{item.time}</div>
                  <div className="tl-body">
                    <div className="tl-title">
                      <span className={`tag ${item.tagClass}`}>{item.tag}</span>
                      {item.title}
                      {item.pending && <em>próximamente</em>}
                    </div>
                    <div className="tl-desc">{item.desc}</div>
                  </div>
                  <div className="tl-caret">+</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Agenda = Agenda;