// This is called declarative React code because a a developer, I am telling React what I want to happen in my UI and letting React figure out the steps of how to update the DOM on my behalf.  Normal JavaScript code would be imperative.
const app = document.getElementById("app");

async function goShowMe() {
  /*Do stuff */
  const response = await fetch("index.json");
  const sections = await response.json();

  function Header(props) {
    return (
      <header>
        <div className="container">
          <h1>{props.title ? props.title : "GoShow.me"} </h1>
        </div>
      </header>
    );
  }
  function Wrapper() {
    return (
      <div className="container">
        <p>
          The following is an index of Matterport SDK examples that I have
          written to share with other customers / developers to help them in
          their journey using our SDKs.
        </p>
        <p>
          I would put them on Github, but sometimes seeing things run works a
          little better.  Questions?  Send an email to developer @ matterport dot com!
        </p>
        <Sections />
      </div>
    );
  }
  function Sections() {
    return (
      <div>
        {sections.map((section, index) => (
          <section key={"section" + index}>
            <h2 key={index}>{section.title}</h2>
            <p>{section.description ? section.description : ""}</p>
            <ul>
              {section.items.map((app, subindex) => (
                <li key={subindex}>
                  <h3>
                    <a href={app.url}>{app.name}</a>
                  </h3>
                  {app.description}
                  <span>
                    {app.gh && (
                      <a href={app.gh} target="_blank">
                        GitHub
                      </a>
                    )}
                    {app.sb && (
                      <a href={app.sb} target="_blank">
                        Sandbox
                      </a>
                    )}
                  </span>
                </li>
              ))}
            </ul>
          </section>
        ))}
      </div>
    );
  }
  function HomePage() {
    return (
      <div>
        <Header title="GoShow.me // Matterport SDK Demos" />
        <Wrapper />
        <footer className="footer">
          Page rendered with React.js; Code written by Chris -- developer @
          matterport dot com
        </footer>
      </div>
    );
  }

  ReactDOM.render(<HomePage />, app);
}
goShowMe();