// hero.jsx — animated wordmark loader + cinematic hero with marquee

const { useEffect, useRef, useState } = React;

function Loader({ done }) {
  return (
    <div className={"loader " + (done ? "is-out" : "")}>
      <div className="loader__mark">
        {"SLATE".split("").map((c, i) => (
          <span key={"a" + i} style={{ animationDelay: `${i * 0.06}s` }}>{c}</span>
        ))}
        <span className="loader__amp" style={{ animationDelay: "0.36s" }}>&</span>
        {"ASH".split("").map((c, i) => (
          <span key={"b" + i} style={{ animationDelay: `${0.42 + i * 0.06}s` }}>{c}</span>
        ))}
      </div>
      <div className="loader__bar" />
      <div className="loader__meta">
        <span>EST. MMXIX</span>
        <span>·</span>
        <span>FINE LINEWORK</span>
        <span>·</span>
        <span>BY APPOINTMENT</span>
      </div>
    </div>
  );
}

const HERO_IMAGES = [
  "images/tattoo3.jpg",  "images/tattoo5.jpg",  "images/tattoo9.jpg",  "images/tattoo6.jpg",
  "images/tattoo4.jpg",  "images/tattoo1.jpg",  "images/tattoo7.jpg",  "images/tattoo10.jpg",
  "images/tattoo8.jpg",  "images/tattoo2.jpg",  "images/tattoo6.jpg",  "images/tattoo3.jpg",
  "images/tattoo10.jpg", "images/tattoo5.jpg",  "images/tattoo9.jpg",  "images/tattoo4.jpg",
];

function HeroMarquee() {
  const cols = [
    HERO_IMAGES.slice(0, 4),
    HERO_IMAGES.slice(4, 8),
    HERO_IMAGES.slice(8, 12),
    HERO_IMAGES.slice(12, 16),
  ];
  return (
    <div className="hero__marquee" aria-hidden="true">
      {cols.map((col, i) => (
        <div className="hero__marquee-col" key={i}>
          <div className="hero__marquee-track">
            {[...col, ...col].map((src, j) => (
              <div key={j} className={`ph ph--photo ph--tone-${(j % 4) + 1}`} style={{ backgroundImage: `url(${src})` }} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="hero" data-screen-label="01 Hero">
      <HeroMarquee />
      <div className="hero__inner">
        <h1 className="hero__title">
          Slate<span className="amp">&amp;</span>Ash
        </h1>
        <div className="hero__meta">
          <div className="hero__meta-block">
            <strong>A private studio</strong>
            for considered tattooing
          </div>
          <div className="hero__meta-block">
            <strong>Brooklyn, NY</strong>
            742 Inkwell Lane · Suite 3B
          </div>
          <div className="hero__meta-block">
            <strong>By appointment</strong>
            tues — sat · 11—7
          </div>
          <div className="hero__meta-block">
            <strong>Now booking</strong>
            summer · MMXXVI
          </div>
        </div>
      </div>
      <div className="hero__scroll">
        <div className="hero__scroll-line" />
        scroll · gallery
      </div>
    </section>
  );
}

window.Loader = Loader;
window.Hero = Hero;