/* global React */
const { useState: useStateH, useEffect: useEffectH } = React;

function Hero() {
  const images = window.HERO_IMAGES;
  const [i, setI] = useStateH(0);
  const [progress, setProgress] = useStateH(0);

  useEffectH(() => {
    setProgress(0);
    const start = Date.now();
    const DURATION = 6000;
    const id = setInterval(() => {
      const p = Math.min(100, ((Date.now() - start) / DURATION) * 100);
      setProgress(p);
      if (p >= 100) {
        setI((i + 1) % images.length);
      }
    }, 40);
    return () => clearInterval(id);
  }, [i, images.length]);

  return (
    <section id="home" className="hero" data-screen-label="Hero">
      <div className="hero-stage">
        {images.map((im, idx) => (
          <div key={idx} className={"hero-slide" + (idx === i ? " is-active" : "")}>
            <div className="hero-img" style={{ backgroundImage: `url(${im.url})` }} />
          </div>
        ))}
        <div className="hero-scrim" />
      </div>

      <div className="hero-controls">
        <span className="hero-count">{String(i+1).padStart(2,"0")} / {String(images.length).padStart(2,"0")}</span>
        <div className="hero-progress" style={{ "--p": progress + "%" }} />
      </div>

      <div className="hero-content">
        <div className="hero-panel">
          <div className="eyebrow"><span className="dot"/>{window.COPY.heroEyebrow}</div>
          <h1>
            {window.COPY.heroH1Main}<br/>
            <em>{window.COPY.heroH1Italic}</em> {window.COPY.heroH1Suffix}
          </h1>
          <div className="hero-actions">
            <a href="#projects" className="btn btn-hero-primary">
              View our work <span className="arrow"/>
            </a>
            <a href="#contact" className="btn btn-hero-outline">
              Start a project <span className="arrow"/>
            </a>
          </div>
        </div>
        <div className="hero-meta">
          <div className="eyebrow">Now showing</div>
          <div className="caption">{images[i].caption}</div>
        </div>
      </div>

      <div className="hero-scroll-hint">
        <span>Scroll</span>
        <span className="line" />
      </div>
    </section>
  );
}

window.Hero = Hero;