/* Photos page — galleries by location */

const GALLERIES = [
  { slug: "soap-creek",          name: "Soap Creek",          tours: "#soap-creek",          files: ["soap-creek-1.jpg","soap-creek-2.png","soap-creek-3.jpg","soap-creek-4.jpg"] },
  { slug: "the-wave",            name: "The Wave · North Coyote Buttes", tours: "#the-wave", files: ["the-wave-1.jpg","the-wave-2.jpg","the-wave-3.jpg","the-wave-4.jpg"] },
  { slug: "south-coyote-buttes", name: "South Coyote Buttes", tours: "#south-coyote-buttes", files: ["south-coyote-buttes-1.jpg","south-coyote-buttes-2.jpg","south-coyote-buttes-3.jpg","south-coyote-buttes-4.jpg"] },
  { slug: "white-pocket",        name: "White Pocket",        tours: "#white-pocket",        files: ["white-pocket-1.jpg","white-pocket-2.jpg","white-pocket-3.jpg","white-pocket-4.jpg"] },
  { slug: "yellow-rock",         name: "Yellow Rock",         tours: "#yellow-rock",         files: ["yellow-rock-1.jpg","yellow-rock-2.jpg","yellow-rock-3.jpg","yellow-rock-4.jpg"] },
  { slug: "sidestep-canyon",     name: "Sidestep Canyon",     tours: "#sidestep-canyon",     files: ["sidestep-canyon-1.jpg","sidestep-canyon-2.jpg","sidestep-canyon-3.jpg","sidestep-canyon-4.jpg"] },
  { slug: "vermilion-cliffs",    name: "Vermilion Cliffs",    tours: "#vermilion-cliffs",    files: ["vermilion-cliffs-1.jpg","vermilion-cliffs-2.jpg","vermilion-cliffs-3.jpg","vermilion-cliffs-4.jpg"] },
  { slug: "grand-staircase",     name: "Grand Staircase",     tours: "#grand-staircase",     files: ["grand-staircase-1.jpg","grand-staircase-2.jpg","grand-staircase-3.jpg","grand-staircase-4.jpg"] },
];

function PhotosPage() {
  return (
    <React.Fragment>
      <Nav active="photos" />

      <header className="page-head">
        <div className="container">
          <div className="crumb">Photo Galleries</div>
          <h1>Twenty-eight years of color.</h1>
          <p>Eight galleries, one region. Landscape, hoodoo, slot canyon and slickrock — photographed by us, by our friends Laurent Martres and Mike Leinen, and by guests with sharper eyes than ours.</p>
        </div>
      </header>

      <section className="toursPage">
        <div className="container">
          {GALLERIES.map(g => (
            <div className="gallery" key={g.slug} id={g.slug}>
              <div className="gallery-head">
                <h2>{g.name}</h2>
                <a href={`tours.html${g.tours}`} className="k">Book the tour →</a>
              </div>
              <div className="gallery-grid">
                {g.files.map((f, i) => (
                  <a className="gallery-tile" key={f} href={`photos/gallery/${f}`} target="_blank" rel="noopener">
                    <SmartImg src={`photos/gallery/${f}`} label={`${g.name.toUpperCase()} · ${i+1}`} tone={["rust","canyon","gold","sand","shadow"][i%5]} />
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="heritageQuote">
        <div className="container">
          <blockquote>
            "Thanks to Laurent Martres, Jennifer Khordi, Fred Carneau, Matthias Sebald, Jim &amp; Nina Pollock, Dallas Barnhurst and Mike Leinen for their photo contributions over the years."
          </blockquote>
          <cite>— Steve &amp; Susan Dodson</cite>
        </div>
      </section>

      <Footer />
      <Tweaks />
    </React.Fragment>
  );
}

window.PhotosPage = PhotosPage;