// Hero component: slideshow background changing every 2 seconds, static copy, static product reveal section
const { useEffect: useEffectHero, useState: useStateHero } = React;

const HERO_IMAGES = [
  'New folder/pexels-19x14-8481803.jpg',
  'New folder/n1.jpg',
  'New folder/n2.jpg',
  'New folder/pexels-26342542-6778142.jpg',
  'New folder/pexels-arturoaez225-17139287.jpg',
  'New folder/pexels-basiciggy-27064652.jpg',
  'New folder/pexels-dibert-31312901.jpg',
  'New folder/pexels-ekrulila-36352203.jpg',
  'New folder/pexels-faruktokluoglu-33116224.jpg',
  'New folder/pexels-jasper-hale-14869790-36422641.jpg',
  'New folder/pexels-justguryan-20793643.jpg',
  'New folder/pexels-marek-piwnicki-3907296-26558815.jpg',
  'New folder/pexels-martinpechy-1292305.jpg',
  'New folder/pexels-nuno-fangueiro-3525738-7326464.jpg',
  'New folder/pexels-rb-audiovisual-37331249.jpg',
  'New folder/pexels-riley-dowell-8334080-6045798.jpg',
  'New folder/pexels-sattyfit-4925221.jpg',
  'New folder/pexels-shtefutsa-38944340.jpg',
  'New folder/pexels-souvenirpixels-4554150.jpg',
  'New folder/pexels-tobius-peppercorn-16618565-6402611.jpg',
  'New folder/pexels-tom-van-dyck-423949093-15549131.jpg',
  'New folder/pexels-tomas-malik-793526-4090086.jpg'
];

function Hero({ setPage }) {
  const [currentImgIdx, setCurrentImgIdx] = useStateHero(0);
  // Only track which images have actually been shown — prevents downloading all 22 upfront
  const [loadedIdxs, setLoadedIdxs] = useStateHero(() => new Set([0, 1])); // load first 2 only

  useEffectHero(() => {
    const timer = setInterval(() => {
      setCurrentImgIdx((prev) => {
        const next = (prev + 1) % HERO_IMAGES.length;
        setLoadedIdxs((s) => {
          const updated = new Set(s);
          updated.add(next);
          // Prefetch one image ahead so transition is instant
          updated.add((next + 1) % HERO_IMAGES.length);
          return updated;
        });
        return next;
      });
    }, 2000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="hero">
      {/* Slideshow background — only loaded images get a backgroundImage src */}
      <div className="hero-bg-slideshow">
        {HERO_IMAGES.map((src, idx) => (
          <div
            key={src}
            className="hero-bg-slide"
            style={{
              backgroundImage: loadedIdxs.has(idx) ? `url("${src}")` : 'none',
              opacity: idx === currentImgIdx ? 1 : 0,
            }}
          />
        ))}
        <div className="hero-bg-overlay" />
      </div>

      {/* Overlay copy */}
      <div className="hero-copy">
        <h1 className="visually-hidden">Bamboos Culture</h1>
        <div className="hero-eyebrow">bamboosculture — since 2007</div>
        <div className="hero-maintenance-banner">
          Currently Undergoing Scheduled Maintenance. We'll be back shortly! Please come back again soon.
        </div>
        <div className="hero-title">
          Rooted in Earth.<br /><em>Awakened</em> in Spirit.
        </div>
        <div className="hero-sub">Objects made slowly, from a single stalk.</div>
        <div className="hero-sub">Now from our Craftsman's hand to the whole World!</div>
      </div>

      {/* Scroll cue (Order Now + Arrow Down) */}
      <div className="hero-scroll-cue" onClick={() => {
        window.scrollTo({ top: window.innerHeight - 84, behavior: 'smooth' });
      }}>
        <span>ORDER NOW</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
          <path d="M12 5 v14 M5 12 l7 7 l7-7" />
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });