/* global React, ReactDOM, Page, VIDEOS */

function Video() {
  return (
    <Page current="video">
      <section className="page section" data-screen-label="video">
        <div className="wrap">
          <header className="page-head">
            <div className="eyebrow">File 03 · Video</div>
            <h1 className="page-title display">In the<br/>booth</h1>
            <div className="page-meta mono-tiny">
              Feed · <a href="https://www.youtube.com/@DJWoodi" target="_blank" rel="noopener">@DJWoodi</a>
            </div>
          </header>

          <div className="vid-grid">
            {VIDEOS.map((v, i) => (
              <figure key={v.kind + v.id} className={"vid vid-" + v.kind}>
                <div className="vid-frame">
                  {v.kind === "youtube" && (
                    <iframe
                      src={`https://www.youtube.com/embed/${v.id}?rel=0&modestbranding=1`}
                      title={v.title}
                      frameBorder="0"
                      allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                    />
                  )}
                  {v.kind === "instagram" && (
                    <iframe
                      src={`https://www.instagram.com/${v.postType || "reel"}/${v.id}/embed/`}
                      title={v.title}
                      frameBorder="0"
                      scrolling="no"
                      allow="encrypted-media"
                      allowtransparency="true"
                    />
                  )}
                </div>
                <figcaption className="vid-cap">
                  <span className="vid-title">{v.title}</span>
                  <span className="vid-meta">
                    {v.kind === "instagram" ? "IG" : "VID"}-{String(i + 1).padStart(2, "0")} · {v.caption}
                  </span>
                </figcaption>
              </figure>
            ))}
          </div>

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

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