function HorizType() {
  const names = ['Sgt. Pepe', 'Pepe X', 'Reina Rana', 'Karen', 'WAGMI Party', 'Wallace', 'Pepe Jones', 'EL FAFO'];
  const colors = ['#8e4932', '#341a1d', '#9c4238'];
  return (
    <section className="horiz" id="horiz" data-horiz>
      <div className="horiz-pin">
        <div className="horiz-track" data-horiz-track>
          {names.map((n, i) => (
            <React.Fragment key={i}>
              <span className="horiz-word" style={{ color: n === 'Pepe X' ? '#735386' : colors[i % colors.length] }}>{n}</span>
              {i < names.length - 1 && <span className="horiz-word dot" style={{ color: colors[(i + 1) % colors.length] }}>.</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HorizType = HorizType;