(function(){
const { Icon, IconButton, ProductCard, CategoryCard, EmptyState, ProductCardSkeleton } = window.LemonaSportswearDesignSystem_c8f307;

function SectionHead({ title, sub, link, href = "#", onPrev, onNext }) {
  return (
    <div className="sec__head">
      <div><h2 className="sec__title">{title}</h2>{sub ? <p className="sec__sub">{sub}</p> : null}</div>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)" }}>
        {link ? <a className="sec__link" href={href}>{link}<Icon name="arrow-right" size={13} /></a> : null}
        {onPrev ? (
          <div className="sec__tools">
            <IconButton icon="chevron-left" label="Scroll left" variant="outlined" onClick={onPrev} />
            <IconButton icon="chevron-right" label="Scroll right" variant="outlined" onClick={onNext} />
          </div>
        ) : null}
      </div>
    </div>
  );
}

/* Hero: slides come from the banners table (active only, in display order).
   No image paths are hard-coded here. */
function HeroBanner({ slides = [], loading, interval = 5500 }) {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = slides.length;
  React.useEffect(() => { if (i >= n) setI(0); }, [n, i]);
  const go = (d) => setI((v) => (v + d + n) % n);
  React.useEffect(() => {
    if (paused || n < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
    const t = setInterval(() => setI((v) => (v + 1) % n), interval);
    return () => clearInterval(t);
  }, [paused, n, interval]);

  if (loading) return <section className="hero"><div className="hero__viewport hero__viewport--empty" /></section>;
  if (!n) {
    return (
      <section className="hero">
        <div className="hero__viewport hero__fallback">
          <div className="hero__fallbackInner">
            <h1 className="hero__fallbackTitle">Engineered to move</h1>
            <p className="hero__fallbackCopy">Performance sportswear built for every move.</p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="hero" aria-roledescription="carousel" aria-label="Promotional banners"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="hero__viewport">
        <div className="hero__track" style={{ transform: `translateX(-${i * 100}%)` }}>
          {slides.map((s, idx) => {
            const inner = s.src ? (
              <picture>
                {s.mobileSrc ? <source media="(max-width: 767px)" srcSet={s.mobileSrc} /> : null}
                <img src={s.src} alt={s.alt || ""} loading={idx === 0 ? "eager" : "lazy"} decoding="async"
                  onError={(e) => { e.currentTarget.closest(".hero__slide").classList.add("hero__slide--broken"); }}
                  {...(idx === 0 ? { fetchpriority: "high" } : {})} />
              </picture>
            ) : <div className="hero__slot"><image-slot id={s.id} shape="rect" fit="cover" placeholder={s.placeholder || "Banner image"}></image-slot></div>;
            return (
              <div className="hero__slide" key={s.id} aria-hidden={idx !== i}>
                {s.href ? <a href={s.href} aria-label={s.heading || s.alt || "Banner"}>{inner}</a> : inner}
              </div>
            );
          })}
        </div>
        {n > 1 ? (
          <React.Fragment>
            <button type="button" className="hero__nav hero__nav--prev" aria-label="Previous slide" onClick={() => go(-1)}><Icon name="chevron-left" size={20} /></button>
            <button type="button" className="hero__nav hero__nav--next" aria-label="Next slide" onClick={() => go(1)}><Icon name="chevron-right" size={20} /></button>
            <div className="hero__dots">
              {slides.map((s, idx) => (
                <button key={s.id} type="button" className="hero__dot" aria-current={idx === i} aria-label={`Go to slide ${idx + 1}`} onClick={() => setI(idx)} />
              ))}
            </div>
          </React.Fragment>
        ) : null}
      </div>
    </section>
  );
}

/* One rail component, three homepage uses (best sellers, featured, new arrivals). */
function ProductRail({ title, sub, products = [], loading, onAddToCart, href = "#", tight }) {
  const rail = React.useRef(null);
  const scroll = (d) => rail.current && rail.current.scrollBy({ left: d * rail.current.clientWidth * 0.6, behavior: "smooth" });
  if (!loading && !products.length) return null;
  return (
    <section className={"pg " + (tight ? "sec--tight" : "sec")}>
      <SectionHead title={title} sub={sub} link="View all" href={href} onPrev={() => scroll(-1)} onNext={() => scroll(1)} />
      <div className="rail" ref={rail}>
        {loading
          ? [0, 1, 2, 3].map((k) => <ProductCardSkeleton key={k} />)
          : products.map((p) => <ProductCard key={p.id} {...p} compact onQuickAdd={() => onAddToCart(p)} onWishlist={() => {}} />)}
      </div>
    </section>
  );
}

function ShopByCategory({ categories = [], loading }) {
  if (!loading && !categories.length) return null;
  return (
    <section className="pg sec--tight">
      <SectionHead title="Shop by category" link="All categories" />
      <div className="rail catrail">
        {categories.map((c) => <CategoryCard key={c.id || c.label} label={c.label} count={c.count} image={c.image} href={c.href} placeholder={`${c.label} photo`} />)}
      </div>
    </section>
  );
}

function Gallery({ items = window.GALLERY }) {
  if (!items.length) return null;
  return (
    <section className="pg sec">
      <SectionHead title="Every move counts" sub="Lemona kit, shot on the people wearing it" link="Follow @lemona" />
      <div className="gallery">
        {items.map((g) => (
          <figure className="gallery__tile" key={g.id}>
            {g.url
              ? <img src={g.url} alt={g.alt || g.caption} loading="lazy" decoding="async" />
              : <image-slot id={g.id} shape="rect" fit="cover" placeholder={g.placeholder}></image-slot>}
            <figcaption className="gallery__cap">{g.caption}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

const BENEFITS = [
  { icon: "truck", title: "Free shipping", copy: "Free delivery on every prepaid order above ₹999, dispatched within 24 hours." },
  { icon: "rotate-ccw", title: "Easy 7-day return", copy: "Changed your mind or the fit is off? Return within 7 days, no questions asked." },
];

function Benefits() {
  return (
    <section className="benefits">
      <div className="pg">
        <div className="benefits__grid">
          {BENEFITS.map((b) => (
            <div className="benefit" key={b.title}>
              <span className="benefit__icon"><Icon name={b.icon} size={22} /></span>
              <div>
                <h3 className="benefit__title">{b.title}</h3>
                <p className="benefit__copy">{b.copy}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StoreNotice() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => { window.LemonaStore.ready().then((m) => setShow(m === "preview")); }, []);
  if (!show) return null;
  return <div className="devnote">Preview mode — content is served from local demo data. On Hostinger with <code>api/config.php</code> in place, the same screens read MySQL.</div>;
}

Object.assign(window, { SectionHead, HeroBanner, ProductRail, ShopByCategory, Gallery, Benefits, StoreNotice });
})();