const { useState: useStateAgenda } = React;

function Agenda() {
  const [open, setOpen] = useStateAgenda(new Set([0]));

  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="programa">
      <div className="page">
        <div className="section-head">
          <div className="kicker">02 · Programa</div>
          <h2>
            La mañana,
            <br />
            por partes<span className="accent">.</span>
          </h2>
          <div className="aside">
            De {EVENT.timeRange}. Café de bienvenida a las 09:45 y catering hasta las tres.
            Pulsa en cada bloque para ver el detalle.
          </div>
        </div>

        <div className="timeline">
          {AGENDA.map((item, i) => {
            const isOpen = open.has(i);
            return (
              <button
                key={i}
                type="button"
                className={`tl-item ${isOpen ? 'open' : ''}`}
                onClick={() => toggle(i)}
                aria-expanded={isOpen}
              >
                <div className="tl-time mono">
                  {item.time}
                  {item.timeEnd && <span className="tl-time-end">→ {item.timeEnd}</span>}
                </div>
                <div className="tl-body">
                  <div className="tl-title">
                    <span className={`tag ${item.tagClass}`}>{item.tag}</span>
                    {item.title}
                  </div>
                  <div className="tl-desc">{item.desc}</div>
                </div>
                <div className="tl-caret" aria-hidden="true">
                  +
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// --- Mesa redonda ------------------------------------------------------------
function Speakers() {
  return (
    <section className="block" id="mesa-redonda">
      <div className="page">
        <div className="section-head">
          <div className="kicker">03 · Mesa redonda</div>
          <h2>
            Economía riojana
            <br />
            y tecnología<span className="accent">.</span>
          </h2>
          <div className="aside">
            Hacia dónde va el tejido empresarial de La Rioja y qué papel juega la tecnología.
            Sin moderador externo, y con las preguntas del público encima de la mesa.
          </div>
        </div>

        <div className="speakers">
          {SPEAKERS.map((s, i) => (
            <article className={`speaker ${s.confirmed ? '' : 'pending'}`} key={i}>
              <div className="speaker-avatar" aria-hidden="true">
                {s.confirmed ? s.name.charAt(0) : '·'}
              </div>
              <div className="speaker-body">
                <h3>{s.confirmed ? s.name : 'Por confirmar'}</h3>
                <div className="speaker-role">{s.confirmed ? s.role : s.pendingRole}</div>
                {s.confirmed && s.org && <div className="speaker-org mono">{s.org}</div>}
                <p>{s.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Agenda = Agenda;
window.Speakers = Speakers;