/* creative.jsx — "A Creative Life" (Vol. II) entry.
 *
 * Uses the SHARED, global masthead (<MastheadNav>) and footer (<Footer>) so the
 * header + footer match "A Working Life" exactly and live in one place. The page
 * body is the existing "Coming Soon" stub.
 */
/* global React, ReactDOM, MastheadNav, Footer, AboutZineModal */

function CreativeLife() {
  const year = new Date().getFullYear();
  const edition = (
    <>
      <strong>VOL. II</strong>
      <span className="masthead-nav__edition-rest">
        &nbsp;&nbsp;·&nbsp;&nbsp;{year} EDITION&nbsp;&nbsp;·&nbsp;&nbsp;ISS. 00
      </span>
    </>
  );

  return (
    <>
      {/* Shared global masthead (outside page-host so its sticky positioning
          anchors to the viewport). */}
      <MastheadNav current="creative" edition={edition}>
        <div className="masthead-nav__sub" role="tablist" aria-label="Section">
          <button type="button" className="masthead-nav__sub-link" disabled aria-disabled="true">
            Creative exploration
          </button>
          <button type="button" className="masthead-nav__sub-link" disabled aria-disabled="true">
            Creative inspiration
          </button>
        </div>
      </MastheadNav>

      <div className="page-host">
        <main className="creative-stub">
          <section className="creative-stub__main">
            <p className="creative-stub__supra">a creative story&mdash;</p>
            <h1 className="creative-stub__title">VAS<em>TO</em>LA</h1>
            <p className="creative-stub__deck">
              A creative portfolio. Photography, writing, side projects, and the work
              that doesn&rsquo;t pay the bills but feeds the rest of it.
            </p>
            <div className="creative-stub__stamp">Coming Soon</div>
            <p className="creative-stub__back">
              <a href="/aworkinglife">&larr; Back to A Working Life</a>
            </p>
          </section>
        </main>

        {/* Shared global footer. */}
        {typeof Footer !== "undefined" && <Footer />}
      </div>

      {/* "About this zine" easter egg (shared) — footer tagline + first visit. */}
      {typeof AboutZineModal !== "undefined" && <AboutZineModal />}
    </>
  );
}

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