// 4 Unidades
const Unidades = () => {
  const list = window.ABACO.unidades;
  const [active, setActive] = React.useState(0);
  const cur = list[active];

  return (
    <section id="unidades" className="uni">
      <div className="container">
        <div className="section-head uni-head">
          <div>
            <div className="eyebrow">Nossas unidades</div>
            <h2>Quatro endereços,<br/>uma só escola.</h2>
            <p>Em SBC e São Paulo, ambientes desenhados para cada fase da vida escolar.</p>
          </div>
        </div>

        <div className="uni-layout">
          <div className="uni-map">
            <div className="uni-map-ph ph cyan">
              <span>mapa interativo · {cur.city}</span>
              {list.map((u, i) => {
                const positions = [
                  { left: '24%', top: '70%' },
                  { left: '32%', top: '78%' },
                  { left: '58%', top: '38%' },
                  { left: '70%', top: '52%' },
                ];
                return (
                  <button key={i}
                          onClick={() => setActive(i)}
                          className={"uni-pin " + (active === i ? 'active' : '')}
                          style={positions[i]}>
                    <span>{i + 1}</span>
                  </button>
                );
              })}
            </div>
          </div>
          <div className="uni-list">
            {list.map((u, i) => (
              <button key={i}
                      className={"uni-item " + (active === i ? 'active' : '')}
                      onClick={() => setActive(i)}>
                <div className={"uni-item-badge ph " + (u.tone === 'default' ? '' : u.tone)}>
                  <span>0{i + 1}</span>
                </div>
                <div className="uni-item-body">
                  <strong>{u.tag}</strong>
                  <span className="uni-item-etapas">{u.etapas}</span>
                  <span className="uni-item-addr">{u.address} · {u.city}</span>
                  <span className="uni-item-phone">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2">
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.96.34 1.9.66 2.8a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.84.54 2.8.66A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    {u.phone}
                  </span>
                </div>
                <svg className="uni-item-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
                  <path d="M9 6l6 6-6 6"/>
                </svg>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Unidades = Unidades;