/* global React, ReactDOM, Page, VENUES, ALONGSIDE */

function Friends() {
  return (
    <Page current="friends">
      <section className="page section" data-screen-label="friends">
        <div className="wrap">
          <header className="page-head">
            <div className="eyebrow">File 05 · Friends</div>
            <h1 className="page-title display">Where &amp;<br/>with whom</h1>
            <div className="page-meta mono-tiny">City · Chicago &nbsp;·&nbsp; Circuit · Active</div>
          </header>

          <div className="creds-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 22 }}>Venues played</div>
              <ul className="venue-grid">
                {VENUES.map((v, i) => (
                  <li key={v} className="vg-card">
                    <span className="vg-num">{String(i + 1).padStart(2, "0")}</span>
                    <span className="vg-name">{v}</span>
                    <span className="vg-city">Chicago, IL</span>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <div className="eyebrow" style={{ marginBottom: 22 }}>Played alongside</div>
              <ul className="friends-list">
                {ALONGSIDE.map(a => (
                  <li key={a.name} className="friend-row">
                    <span className="fr-name">{a.name}</span>
                    <span className="fr-role">{a.role}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="page-nav">
            <a href="/tour">← Tour</a>
            <a href="/book">Book →</a>
          </div>
        </div>
      </section>
    </Page>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Friends />);