/* ============================================================
   PAGE COMPONENTS — Home (per-direction) and About
   ============================================================ */

function HomeMenu({ go, t, variant }) {
  const cols = window.SITE.collections;
  return (
    <nav className={"hmenu hmenu--" + variant}>
      {cols.map((c, i) => (
        <button key={c.id} className="hmenu__link" onClick={() => go({ page: "gallery", id: c.id })}>
          {t.indexNumbers && <span className="hmenu__num">{String(i + 1).padStart(2, "0")}</span>}
          <span className="hmenu__label">{c.title}</span>
        </button>
      ))}
      <button className="hmenu__link hmenu__link--about" onClick={() => go({ page: "about" })}>
        <span className="hmenu__label">About</span>
      </button>
    </nav>
  );
}

function Home({ dir, go, t }) {
  return (
    <section className={"hero hero--" + dir}>
      <div
        className="hero__bg"
        style={{ backgroundImage: `url(${window.SITE.heroImage})` }}
        role="img"
        aria-label="Photograph by Mauricio Chigutti"
      />
      <div className="hero__scrim" />
      <div className="hero__grain" />

      <div className="hero__top">
        <span className="hero__eyebrow">Photography</span>
        <span className="hero__eyebrow hero__eyebrow--right">Paris · {new Date().getFullYear()}</span>
      </div>

      <div className="hero__content">
        <p className="hero__kicker">{window.SITE.heroKicker}</p>
        <h1 className="hero__name">{t.name}</h1>
        <HomeMenu go={go} t={t} variant="hero" />
      </div>
    </section>
  );
}

function About({ dir, go, t }) {
  const a = window.SITE.about;
  return (
    <section className={"about about--" + dir}>
      <div className="about__media">
        <img src={a.portrait} alt="Portrait of Mauricio Chigutti" />
      </div>
      <div className="about__body">
        <p className="about__kicker">About</p>
        <div className="about__text">
          {a.lines.map((l, i) => (
            <p key={i}>{l}</p>
          ))}
        </div>
        <div className="about__meta">
          <a
            className="about__cta"
            href={a.instagram}
            target="_blank"
            rel="noopener noreferrer"
          >
            Instagram ↗
          </a>
          <a className="about__contact" href={"mailto:" + a.email}>{a.email}</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, About });