/* RotinaNutri — Home: full-screen hero slideshow.
   Three 100vh slides, auto-fade every ~4.5s. Backgrounds are <image-slot>s,
   so any slide image can be swapped by dropping a new file (persists), and
   headlines/slides are just data in SLIDES below — easy to edit or extend. */
(function () {
const { Button } = window.RootinaNutriDesignSystem_7af00c;
const { Icon } = window.Chrome;

const SLIDES = [
  {
    id: 'hero-slide-1',
    kicker: 'Advanced dehydration',
    title: 'Higher nutrient retention through advanced dehydration',
    sub: 'Our closed-loop, low-temperature process keeps colour, aroma and nutrition locked in — batch after batch.',
    placeholder: 'Drop slide 1 image — fresh produce / dehydration process',
  },
  {
    id: 'hero-slide-2',
    kicker: 'Freshly harvested',
    title: 'From the heart of Mysore, freshly harvested',
    sub: 'Sourced direct from farms around Mysore and processed at peak freshness in our own facility.',
    placeholder: 'Drop slide 2 image — farms / harvest around Mysore',
  },
  {
    id: 'hero-slide-3',
    kicker: '100% natural',
    title: 'Nothing added. Nothing artificial. Pure fruits and vegetables.',
    sub: 'No fillers, no preservatives, no additives — just whole fruits and vegetables, gently dehydrated.',
    placeholder: 'Drop slide 3 image — premium dehydrated fruits & vegetables',
  },
];

const AUTOPLAY_MS = 4500;

function HomePage() {
  const [i, setI] = React.useState(0);
  const n = SLIDES.length;
  const go = React.useCallback((next) => setI(((next % n) + n) % n), [n]);
  const reduce = React.useRef(false);
  const paused = React.useRef(false);

  React.useEffect(() => {
    reduce.current = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce.current) return;
    const t = setInterval(() => { if (!paused.current) setI((p) => (p + 1) % n); }, AUTOPLAY_MS);
    return () => clearInterval(t);
  }, [n]);

  // keyboard arrows
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'ArrowRight') go(i + 1); if (e.key === 'ArrowLeft') go(i - 1); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [i, go]);

  return (
    <div className="hero-slider"
      onMouseEnter={() => { paused.current = true; }}
      onMouseLeave={() => { paused.current = false; }}>
      {SLIDES.map((s, idx) => (
        <div key={s.id} className={'hero-slide' + (idx === i ? ' active' : '')} aria-hidden={idx !== i}>
          <image-slot id={s.id} shape="rect" fit="cover" class="t-hero" placeholder={s.placeholder}></image-slot>
          <div className="hero-overlay" />
          <div className="hero-content">
            <div className="wrap-w" style={{ width: '100%' }}>
              <div className="inner">
                <span className="hero-kicker">{s.kicker}</span>
                <h1 className="hero-h1">{s.title}</h1>
                <p className="hero-sub">{s.sub}</p>
                <div className="hero-ctas">
                  <a href="products.html"><Button variant="primary" size="lg">Explore products</Button></a>
                  <a href="contact.html"><Button variant="ghostDark" size="lg">Contact us</Button></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}

      {/* arrows */}
      <button className="hero-arrow prev" aria-label="Previous slide" onClick={() => go(i - 1)}><Icon name="arrow" size={22} style={{ transform: 'rotate(180deg)' }} /></button>
      <button className="hero-arrow next" aria-label="Next slide" onClick={() => go(i + 1)}><Icon name="arrow" size={22} /></button>

      {/* dots */}
      <div className="hero-dots">
        {SLIDES.map((s, idx) => (
          <button key={s.id} className={'hero-dot' + (idx === i ? ' active' : '')} aria-label={'Go to slide ' + (idx + 1)} onClick={() => go(idx)} />
        ))}
      </div>

      {/* scroll hint */}
      <div className="hero-scroll" aria-hidden="true">
        <span>Scroll</span>
        <Icon name="chevron" size={18} />
      </div>
    </div>
  );
}

window.HomePage = HomePage;
})();