// "Witches" section repurposed for prompt's "ART & LIFESTYLE · V. RITUAL PHOTOGRAPHY".
// Hosts moved to Witch Is (Manifesto.jsx). Here we keep the witness manifesto,
// a masonry gallery of real photos, and the photographic deliverable.

// 17 photos sequenced for narrative rhythm — each adjacent pair flips
// at least one of: colour↔B&W, day↔night, motion↔stillness, group↔solo,
// water↔forest, figure↔landscape. Reads as a film cut, not a contact sheet.
const GALLERY = [
  // 1 — open big: dramatic top-down drone ritual (signature shot)
  { src: "photos/island/drone-grass-ritual.jpeg",     alt: "Drone view — two figures entwined in a grass spiral, top-down ritual" },
  // 2 — colour, solo with white scarf billowing in wind, against sky
  { src: "photos/island/wind-scarf-rock.jpeg",        alt: "Figure kneeling on a rock with a white scarf billowing in the wind under a vast sky" },
  // 3 — colour, cinematic single-body action, sunset
  { src: "photos/island/water-splash-sunset.jpeg",    alt: "Lake plunge at sunset — body breaking the water, sky on fire" },
  // 4 — breather: leaning birch over the lake (no figure, peaceful)
  { src: "photos/island/birch-leaning-lake.jpeg",     alt: "A leaning birch tree across the still lake, reeds and clouds beyond" },
  // 5 — pivot to mystical B&W; figure framed in fallen-tree altar
  { src: "photos/island/bw-figure-tree-altar.jpeg",   alt: "Figure standing inside a fallen birch shell in the forest, black and white" },
  // 6 — colour: lake-side dance, guitar, naked summer freedom
  { src: "photos/island/dance-guitar.jpeg",           alt: "Lake-side dance, guitar, summer light — naked freedom" },
  // 7 — same dance impulse at night, by fire, B&W
  { src: "photos/island/bw-night-dance-fire.jpeg",    alt: "Naked figure dancing by a bonfire under the moon, lake reflection, black and white" },
  // 8 — colour, sky, arms wide in tall grass
  { src: "photos/island/figure-grass.jpeg",           alt: "Figure in tall reeds, arms open to the sky" },
  // 9 — B&W: solo body lying on flat rock by the lake, restful
  { src: "photos/island/bw-rock-lake-rest.jpeg",      alt: "A nude figure resting on a flat granite rock at the lake's edge, black and white" },
  // 10 — intimate, red sauna glow, single body
  { src: "photos/island/red-sauna-glow.jpeg",         alt: "Sauna interior in deep red light, a figure resting in the heat" },
  // 11 — B&W: dark forest tunnel, mystery, soft light at the end
  { src: "photos/island/bw-forest-path-tunnel.jpeg",  alt: "Dark forest tunnel through dense trees, a glimmer of lake light at the end, black and white" },
  // 12 — cohort motion blur, ritual lift
  { src: "photos/island/cohort-motion.jpeg",          alt: "Cohort in the forest — motion-blur ritual, bodies lifted" },
  // 13 — colour burst: red poppies in sunlit garden
  { src: "photos/island/red-poppies-garden.jpeg",     alt: "Vivid red poppies in a sunlit garden by a wooden cabin" },
  // 14 — B&W: primal, broken birch trunk like an antler
  { src: "photos/island/bw-forest-broken-tree.jpeg",  alt: "Broken birch trunk rising like an antler in a dim forest, black and white" },
  // 15 — colour: forest path, lake glinting at side
  { src: "photos/island/forest-path.jpeg",            alt: "Forest path along the island, lake to one side" },
  // 16 — colour, unexpected intimacy with animals
  { src: "photos/island/cow-pasture-tattoo.jpeg",     alt: "A nude tattooed person crouching to meet a cow eye-to-eye in a sunlit pasture" },
  // 17 — quiet closer: swan on still water
  { src: "photos/island/swan.jpeg",                   alt: "Swan on the lake, bokeh of reeds behind" },
];

// Arrows scroll the viewport's NATIVE scroll-snap to the prev/next
// snap point. Wheel/touch on the viewport also scrolls normally —
// arrows are just an alternate control. Disabled state tracks scrollTop.
function useArtStackControls() {
  React.useEffect(() => {
    const viewport = document.querySelector(".art-stack__viewport");
    const up = document.querySelector(".art-stack__btn--up");
    const down = document.querySelector(".art-stack__btn--down");
    if (!viewport || !up || !down) return;
    const stepBy = (dir) => {
      const tiles = Array.from(viewport.querySelectorAll(".art-stack__tile"));
      if (!tiles.length) return;
      const center = viewport.scrollTop + viewport.clientHeight / 2;
      let active = 0, best = Infinity;
      tiles.forEach((t, i) => {
        const d = Math.abs(t.offsetTop + t.offsetHeight / 2 - center);
        if (d < best) { best = d; active = i; }
      });
      const target = tiles[Math.max(0, Math.min(tiles.length - 1, active + dir))];
      if (!target) return;
      viewport.scrollTo({
        top: target.offsetTop + target.offsetHeight / 2 - viewport.clientHeight / 2,
        behavior: "smooth",
      });
    };
    const onUp = () => stepBy(-1);
    const onDown = () => stepBy(1);
    const updateDisabled = () => {
      const max = viewport.scrollHeight - viewport.clientHeight;
      up.toggleAttribute("disabled", viewport.scrollTop <= 4);
      down.toggleAttribute("disabled", viewport.scrollTop >= max - 4);
    };
    up.addEventListener("click", onUp);
    down.addEventListener("click", onDown);
    viewport.addEventListener("scroll", updateDisabled, { passive: true });
    window.addEventListener("resize", updateDisabled, { passive: true });
    updateDisabled();
    return () => {
      up.removeEventListener("click", onUp);
      down.removeEventListener("click", onDown);
      viewport.removeEventListener("scroll", updateDisabled);
      window.removeEventListener("resize", updateDisabled);
    };
  }, []);
}

function Witches() {
  useArtStackControls();
  return (
    <section className="dark" id="art">
      <div className="grain"></div>
      <div className="vignette"></div>
      <div className="container">
        <SectionHead
          eyebrow="Ritual Photography · The Witness Practice · V"
          title={<>
            <span className="title-word">
              <img className="word-char" src="./characters/michael-jackson.webp" alt="" aria-hidden="true" />
              We don't pose
            </span>. We witness.
          </>}
          lede="Nine years of ritual photography. Johnny holds the lens. You don't perform — you exist, and we honour it."
          ornaments={["star-seven", "all-seeing-eye", "star-seven"]}
        />

        <Reveal className="witness-pull" delay={120}>
          <p>
            The photographs are made on the island, across seven days, in the rhythm of your
            life there. <em>Not a content shoot. Not a brand session. A witnessing.</em>
          </p>
          <p>
            Around Johnny, you find yourself <em>relaxing without trying</em>. He carries a
            quiet, natural acceptance — and the photographs catch that ease, again and again.
          </p>
          <p>
            The camera does not arrive to flatten you. It arrives to remember you correctly.
          </p>
          <div className="credit-line">— Johnny, on the practice</div>
        </Reveal>

        <Reveal className="art-stack" delay={120}>
          <button type="button" className="art-stack__btn art-stack__btn--up" aria-label="Previous photo">↑</button>
          <div className="art-stack__viewport" role="region" aria-label="Ritual photography gallery — scroll or use the arrows">
            {GALLERY.map((g, i) => (
              <figure key={i} className="art-stack__tile">
                <img src={g.src}
                     alt={g.alt}
                     loading={i < 2 ? "eager" : "lazy"}
                     decoding="async" />
                <figcaption className="art-credit">© Johnny</figcaption>
              </figure>
            ))}
          </div>
          <button type="button" className="art-stack__btn art-stack__btn--down" aria-label="Next photo">↓</button>
        </Reveal>

        <Reveal className="deliverables" delay={120}>
          <h4>The Part You Can Frame</h4>
          <p className="deliverables-sub">For the walls. The rest is between you and the universe.</p>
          <ul>
            <li><em>24+</em> high-quality ritual photographs of you</li>
            <li><em>Edited <span className="amp">&amp;</span> gallery-ready</em> within 30 days of return</li>
            <li>Full <em>ownership rights</em> — we never use your face without separate consent</li>
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Witches, GALLERY });