/* ============================================================
   sections.jsx — all page sections
   Receives the active campaign object `camp` from App.
   ============================================================ */

/* ---------------- Header ---------------- */
function Header({ camp }) {
  const cart = window.useCart();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const nav = [
    { t: 'הערכות', h: '#products' },
    { t: 'רכישה קבוצתית', h: 'group.html' },
    { t: 'גלריה', h: '#gallery' },
    { t: 'המלצות', h: '#love' },
    { t: 'שאלות', h: '#faq' },
  ];
  return (
    <>
      <div className="ann-bar">משלוח עד הבית ב-35 ₪ · בקנייה מעל 99 ₪ משלוח ב-20 ₪ בלבד · אספקה 3-5 ימי עסקים</div>
      <header className={'site-head' + (scrolled ? ' is-scrolled' : '')}>
        <div className="wrap head-inner">
          <button className="hamburger" onClick={() => setMenuOpen(true)} aria-label="תפריט">
            <span></span><span></span><span></span>
          </button>
          <a href="#top" className="brand">
            <img src={assetURL('assets/logo.png')} alt="Story Table" className="brand-logo" />
          </a>
          <nav className="head-nav">
            {nav.map((n) => <a key={n.h} href={n.h}>{n.t}</a>)}
          </nav>
          <div className="head-actions">
            <a className="head-phone" href="https://wa.me/972529256476?text=הי%D7%99%20אריאל%2C%20אשמח%20לשמוע%20עוד%20על%20הערכות%20של%20Story%20Table" target="_blank" rel="noreferrer">דברו איתנו</a>
            <button className="cart-btn" onClick={() => cart.setOpen(true)}>
              <Icon name="cart" size={22} sw={2} />
              {cart.count > 0 && <span className={'cart-badge' + (cart.bump ? ' pop' : '')} key={cart.bump}>{cart.count}</span>}
            </button>
          </div>
        </div>
      </header>
      {menuOpen && (
        <div className="mnav-overlay" onClick={() => setMenuOpen(false)}>
          <div className="mnav-panel" onClick={(e) => e.stopPropagation()}>
            <button className="mnav-close" onClick={() => setMenuOpen(false)} aria-label="סגירה"><Icon name="close" size={26} /></button>
            <nav className="mnav-links">
              {nav.map((n) => <a key={n.h} href={n.h} onClick={() => setMenuOpen(false)}>{n.t}</a>)}
            </nav>
            <a className="mnav-wa" href="https://wa.me/972529256476?text=הי%20אריאל%2C%20אשמח%20לשמוע%20עוד%20על%20הערכות%20של%20Story%20Table" target="_blank" rel="noreferrer"><Icon name="whatsapp" size={20} /> דברו איתנו בוואטסאפ</a>
          </div>
        </div>
      )}
    </>
  );
}

/* ---------------- Pop-up hero scene ---------------- */
function PopupScene({ camp }) {
  const p = STData.PRODUCTS[camp.featured];
  return (
    <div className="scene">
      <div className="scene-glow"></div>
      {/* pop-up cards */}
      <div className="pc pc-1"></div>
      <div className="pc pc-2"></div>
      <div className="pc pc-3"></div>
      <div className="scene-center">
        <SmartImg url={p.heroImg || p.img} label={p.name} className="scene-img" objectFit="cover" />
      </div>
      <div className="scene-table"></div>
      <div className="scene-badge">
        <span className="scene-badge-n">10K+</span>
        <span className="scene-badge-l">משפחות מרוצות</span>
      </div>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ camp }) {
  const cart = window.useCart();
  const p = STData.PRODUCTS[camp.featured];
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="kicker">{camp.kicker}</span>
          <h1 className="hero-title">
            {camp.heroTitle.split('\n').map((l, i) => <span key={i}>{l}<br /></span>)}
          </h1>
          <p className="hero-sub">{camp.heroSub}</p>
          <div className="hero-cta">
            <Btn size="lg" icon="cart" onClick={() => cart.add(p.id)}>{camp.primaryCta} · {money(p.price)}</Btn>
            <Btn size="lg" variant="ghost" href="#why">למה Story Table?</Btn>
          </div>
          <div className="hero-rats">
            <div className="stars">{[0,1,2,3,4].map(i => <Icon key={i} name="star" size={18} fill="var(--accent)" stroke="var(--accent)" />)}</div>
            <span>4.9/5 · נמכרו מעל 10,000 ערכות</span>
          </div>
        </div>
        <PopupScene camp={camp} />
      </div>
      <div className="hero-marquee" aria-hidden="true">
        <div className="marq-track">
          {['ערכי · ', 'חינוכי · ', 'רב-פעמי · ', 'משפחתי · ', 'מקורי · ', 'חווייתי · '].concat(['ערכי · ', 'חינוכי · ', 'רב-פעמי · ', 'משפחתי · ', 'מקורי · ', 'חווייתי · ']).map((t, i) => <span key={i}>{t}</span>)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Trust strip ---------------- */
function TrustStrip() {
  return (
    <section className="trust">
      <div className="wrap trust-row">
        {STData.TRUST.map((t, i) => (
          <div className="trust-cell" key={i}>
            <div className="trust-n">{t.n}</div>
            <div className="trust-l">{t.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Why ---------------- */
function WhySection() {
  return (
    <section className="why" id="why">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">למה Story Table</span>
          <h2 className="sec-title">לא עוד משחק. <em>חוויה שמחברת.</em></h2>
          <p className="sec-lead">אנחנו מייצרים ערכות ומשחקים ערכיים, חינוכיים ומיוחדים — שהופכים את השולחן המשפחתי לרגע שזוכרים.</p>
        </div>
        <div className="why-grid">
          {STData.VALUES.map((v, i) => (
            <div className="why-card" key={i}>
              <div className="why-ic"><Icon name={v.ic} size={26} sw={2} /></div>
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Product card ---------------- */
function ProductCard({ id, featured }) {
  const cart = window.useCart();
  const modal = window.useModal();
  const p = STData.PRODUCTS[id];
  const [active, setActive] = useState(0);
  if (!p) return null;
  const onSale = p.regular && p.regular > p.price;
  const gallery = featured && p.images && p.images.length > 1 ? p.images : null;
  const isVid = (it) => it && typeof it === 'object' && (it.file || it.video || it.yt);
  const posterOf = (it) => (typeof it === 'string' ? it : (it.poster || it.file || it.video));
  const activeItem = gallery ? gallery[active] : p.img;
  const openModal = !featured ? () => modal.open(id) : undefined;
  return (
    <article className={'pcard' + (featured ? ' pcard-feat' : ' pcard-click') + (p.mobileOnly ? ' pcard-mobonly' : '')} onClick={openModal}>
      <div className="pcard-mediacol">
        <div className="pcard-media">
          {p.badge && <span className="pcard-badge">{p.badge}</span>}
          {isVid(activeItem)
            ? (activeItem.yt
                ? <iframe key={activeItem.yt} className="pcard-video" src={'https://www.youtube.com/embed/' + activeItem.yt + '?rel=0&playsinline=1'} referrerPolicy="strict-origin-when-cross-origin" allow="autoplay; fullscreen; encrypted-media" allowFullScreen title={p.name}></iframe>
                : activeItem.file
                ? <video key={activeItem.file} className="pcard-video" src={assetURL(activeItem.file)} poster={assetURL(activeItem.poster)} controls playsInline preload="metadata"></video>
                : <iframe key={activeItem.video} className="pcard-video" src={'https://drive.google.com/file/d/' + activeItem.video + '/preview'} allow="autoplay; fullscreen" allowFullScreen title={p.name}></iframe>)
            : <SmartImg key={activeItem} url={activeItem} label={p.name} className="pcard-img" objectFit={gallery ? 'contain' : 'cover'} />}
        </div>
        {gallery && (
          <div className="pcard-thumbs">
            {gallery.map((u, i) => (
              <button key={i} className={'pthumb' + (i === active ? ' on' : '') + (isVid(u) ? ' pthumb-vid' : '')} onClick={() => setActive(i)} aria-label={(isVid(u) ? 'סרטון ' : 'תמונה ') + (i + 1)}>
                <img src={assetURL(posterOf(u))} alt="" loading="eager" />
                {isVid(u) && <span className="pthumb-play"></span>}
              </button>
            ))}
          </div>
        )}
      </div>
      <div className="pcard-body">
        <h3 className="pcard-name">{p.name}</h3>
        <p className="pcard-sub">{p.sub}</p>
        {!featured && <span className="pcard-more">לפרטים נוספים ›</span>}
        {featured && p.bookQuote && <blockquote className="pcard-quote">{p.bookQuote}</blockquote>}
        {featured && (p.desc || p.blurb) && <p className="pcard-desc">{p.desc || p.blurb}</p>}
        {featured && p.bullets && (
          <ul className="pcard-bullets">
            {p.bullets.map((b, i) => <li key={i}><Icon name="check" size={16} sw={3} /> {b}</li>)}
          </ul>
        )}
        <div className="pcard-foot">
          <div className="pcard-price">
            {p.comingSoon ? <span className="price-soon">בקרוב במלאי</span> : <>
              <span className="price-now">{money(p.price)}</span>
              {onSale && <span className="price-was">{money(p.regular)}</span>}
            </>}
          </div>
          {p.comingSoon
            ? <Btn variant="ghost" href={'https://wa.me/972529256476?text=' + encodeURIComponent('היי! אשמח לעדכון כשההגדה של פסח יוצאת 🙌')} size={featured ? 'lg' : 'md'}>עדכנו אותי!</Btn>
            : <Btn icon="cart" onClick={(e) => { if (e && e.stopPropagation) e.stopPropagation(); cart.add(p.id); }} size={featured ? 'lg' : 'md'}>הוספה לסל</Btn>}
        </div>
      </div>
    </article>
  );
}

/* ---------------- Featured + products grid ---------------- */
function ProductsSection({ camp }) {
  const feat = camp.featured;
  const all = Object.keys(STData.PRODUCTS).filter((id) => !STData.PRODUCTS[id].hidden);
  const lineup = camp.lineup.filter((id) => all.includes(id)).concat(all.filter((id) => !camp.lineup.includes(id)));
  const rest = lineup.filter((id) => id !== feat);
  const [showAll, setShowAll] = useState(false);
  const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width:760px)').matches;
  const shown = (isMobile && !showAll) ? rest.slice(0, 3) : rest;
  return (
    <section className="products" id="products">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">הערכות שלנו</span>
          <h2 className="sec-title">בחרו את הערכה <em>שלכם</em></h2>
          <p className="sec-lead">כל ערכה מעוצבת בקפידה, איכותית ורב-פעמית — לשימוש חוזר שנה אחר שנה.</p>
        </div>
        <div className="feat-wrap"><ProductCard id={feat} featured /></div>
        <div className="pgrid">
          {shown.map((id) => <ProductCard key={id} id={id} />)}
        </div>
        {isMobile && !showAll && rest.length > 3 && (
          <button className="btn btn-md btn-full pgrid-more" onClick={() => setShowAll(true)}>לכל הערכות ({rest.length - 3}+)</button>
        )}
      </div>
    </section>
  );
}

/* ---------------- Magic / video ---------------- */
function MagicSection() {
  const [play, setPlay] = useState(false);
  return (
    <section className="magic">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow light">ראו את הקסם בפעולה</span>
          <h2 className="sec-title onDark">איך ערכה אחת הופכת שולחן <em>לחוויה</em></h2>
        </div>
        <div className="video-frame" onClick={() => setPlay(true)}>
          {play
            ? <iframe className="video-embed" src="https://www.youtube.com/embed/ZmY3i1dWR9c?rel=0&autoplay=1&playsinline=1" referrerPolicy="strict-origin-when-cross-origin" allow="autoplay; fullscreen; encrypted-media" allowFullScreen title="סרטון הדגמה"></iframe>
            : <>
                <img src="https://i.ytimg.com/vi/ZmY3i1dWR9c/maxresdefault.jpg" alt="סרטון הדגמה" className="video-img" onError={(e) => { e.target.src = 'https://i.ytimg.com/vi/ZmY3i1dWR9c/hqdefault.jpg'; }} />
                <button className="play-btn" aria-label="נגן"><span className="play-tri"></span></button>
              </>}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Testimonials ---------------- */
function Testimonials() {
  const data = STData.TESTIMONIALS;
  const [i, setI] = useState(0);
  const go = (d) => setI((p) => (p + d + data.length) % data.length);
  useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % data.length), 6000);
    return () => clearInterval(t);
  }, [data.length]);
  return (
    <section className="love" id="love">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">המלצות</span>
          <h2 className="sec-title">אלפי משפחות כבר <em>התאהבו</em></h2>
        </div>
        <div className="quote-stage">
          <button className="q-nav q-prev" onClick={() => go(-1)} aria-label="הקודם"><Icon name="arrowR" size={22} /></button>
          <div className="quote-card" key={i}>
            <div className="stars big">{[0,1,2,3,4].map(s => <Icon key={s} name="star" size={22} fill="var(--accent)" stroke="var(--accent)" />)}</div>
            <p className="quote-text">"{data[i].q}"</p>
            <div className="quote-who"><b>{data[i].n}</b> · {data[i].c}</div>
          </div>
          <button className="q-nav q-next" onClick={() => go(1)} aria-label="הבא"><Icon name="arrowL" size={22} /></button>
        </div>
        <div className="dots">
          {data.map((_, d) => <button key={d} className={'dot' + (d === i ? ' on' : '')} onClick={() => setI(d)} aria-label={'המלצה ' + (d+1)}></button>)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Gallery + lightbox ---------------- */
function Gallery() {
  const g = STData.GALLERY;
  const [open, setOpen] = useState(-1);
  const close = () => setOpen(-1);
  const step = (d) => setOpen((p) => (p + d + g.length) % g.length);
  useEffect(() => {
    if (open < 0) return;
    const h = (e) => { if (e.key === 'Escape') close(); if (e.key === 'ArrowLeft') step(1); if (e.key === 'ArrowRight') step(-1); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open]);
  return (
    <section className="gallery" id="gallery">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">גלריה</span>
          <h2 className="sec-title">רגעים <em>אמיתיים</em> מהשולחן</h2>
        </div>
        <div className="masonry">
          {g.map((im, idx) => (
            <button className={'masonry-item' + (im.tall ? ' tall' : '')} key={idx} onClick={() => setOpen(idx)}>
              <SmartImg url={im.src ? im.src : STData.D(im.id, 640)} label="תמונה" lazy />
            </button>
          ))}
        </div>
      </div>
      {open >= 0 && (
        <div className="lightbox" onClick={close}>
          <button className="lb-close" onClick={close} aria-label="סגירה"><Icon name="close" size={28} /></button>
          <button className="lb-nav lb-prev" onClick={(e) => { e.stopPropagation(); step(1); }} aria-label="הקודם"><Icon name="arrowR" size={30} /></button>
          <img className="lb-img" src={g[open].src ? assetURL(g[open].src) : STData.D(g[open].id, 1400)} alt="" onClick={(e) => e.stopPropagation()} />
          <button className="lb-nav lb-next" onClick={(e) => { e.stopPropagation(); step(-1); }} aria-label="הבא"><Icon name="arrowL" size={30} /></button>
        </div>
      )}
    </section>
  );
}

/* ---------------- About ---------------- */
function About() {
  return (
    <section className="about" id="about">
      <div className="wrap about-grid">
        <div className="about-media">
          <SmartImg url="assets/founders-web.jpg" label="המייסדים" className="about-img" radius={24} />
        </div>
        <div className="about-copy">
          <span className="eyebrow">הסיפור שלנו</span>
          <h2 className="sec-title">משפחה שיוצרת <em>בשביל משפחות</em></h2>
          <p>אריאל ונעמי עמיחי הגו את הרעיון מאחורי Story Table, כשבכל חג חיפשו דרך לשמור על חמשת ילדיהם ערים, פעילים ומחוברים סביב השולחן.</p>
          <p>יחד עם רשל — מעצבת תעשייתית ומתכנתת — הם יצאו למסע של רעיונות יצירתיים שהפכו לערכות שמחברות אלפי משפחות לערכים, לתרבות ולסיפור.</p>
          <div className="about-sign">— אריאל, נעמי ורשל</div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap faq-grid">
        <div className="faq-side">
          <span className="eyebrow">שאלות נפוצות</span>
          <h2 className="sec-title">כל מה שרציתם <em>לדעת</em></h2>
          <p className="sec-lead">לא מצאתם תשובה? <a href="https://wa.me/972529256476?text=הי%D7%99%20אריאל%2C%20יש%20לי%20שאלה%20על%20הערכות%20של%20Story%20Table" target="_blank" rel="noreferrer">דברו איתנו בוואטסאפ</a>.</p>
        </div>
        <div className="faq-list">
          {STData.FAQS.map((f, i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-pm"><Icon name={open === i ? 'minus' : 'plus'} size={20} sw={2.6} /></span>
              </button>
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Final CTA ---------------- */
function FinalCTA({ camp }) {
  const cart = window.useCart();
  const p = STData.PRODUCTS[camp.featured];
  return (
    <section className="final">
      <div className="wrap final-inner">
        <h2>מוכנים להפוך את השולחן <em>לחוויה</em>?</h2>
        <p>הזמינו עכשיו — משלוח עד הבית ב-35 ₪, ובקנייה מעל 99 ₪ רק 20 ₪.</p>
        <div className="final-cta">
          <Btn size="lg" icon="cart" onClick={() => cart.add(p.id)}>{camp.primaryCta} · {money(p.price)}</Btn>
          <Btn size="lg" variant="ghostLight" href="#products">לכל הערכות</Btn>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="site-foot">
      <div className="wrap foot-grid">
        <div>
          <a href="#top" className="brand brand-foot"><span className="brand-foot-name">Story Table</span></a>
          <p className="foot-tag">משחקים וערכות ערכיים שמחברים משפחות סביב השולחן.</p>
        </div>
        <div className="foot-col">
          <h4>ניווט</h4>
          <a href="#products">הערכות</a><a href="group.html">רכישה קבוצתית</a><a href="#gallery">גלריה</a><a href="#faq">שאלות</a>
        </div>
        <div className="foot-col">
          <h4>צרו קשר</h4>
          <a href="tel:+972529256476">052-9256476 · אריאל</a>
          <a href="mailto:storytable.shop@gmail.com">storytable.shop@gmail.com</a>
          <a href="https://wa.me/972529256476?text=הי%D7%99%20אריאל%2C%20אשמח%20לשמוע%20עוד%20על%20הערכות%20של%20Story%20Table" target="_blank" rel="noreferrer">וואטסאפ</a>
          <a href="https://instagram.com/storytable.shop" target="_blank" rel="noreferrer">אינסטגרם</a>
        </div>
      </div>
      <div className="foot-bottom"><div className="wrap">© 2026 Story Table · נבנה באהבה</div></div>
    </footer>
  );
}

/* ---------------- Floating actions (mobile sticky + whatsapp) ---------------- */
function FloatingCTA({ camp }) {
  const cart = window.useCart();
  const p = STData.PRODUCTS[camp.featured];
  return (
    <>
      <a className="wa-fab" href="https://wa.me/972529256476?text=הי%D7%99%20אריאל%2C%20אשמח%20לשמוע%20עוד%20על%20הערכות%20של%20Story%20Table" target="_blank" rel="noreferrer" aria-label="וואטסאפ">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z M12.05 21.79h-.01a9.87 9.87 0 01-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37A9.86 9.86 0 012.17 11.9c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 012.89 6.99c0 5.46-4.44 9.88-9.89 9.88zm8.41-18.3A11.82 11.82 0 0012.05 0C5.44 0 .07 5.36.07 11.97c0 2.11.55 4.17 1.6 5.98L0 24l6.34-1.65a11.9 11.9 0 005.65 1.44h.01c6.61 0 11.98-5.37 11.99-11.97a11.9 11.9 0 00-3.53-8.33z"/></svg>
      </a>
      <div className="mobile-bar">
        <div className="mb-price"><b>{money(p.price)}</b><span>{p.name}</span></div>
        <Btn icon="cart" onClick={() => cart.add(p.id)}>{camp.primaryCta}</Btn>
      </div>
    </>
  );
}

/* ---------------- Product detail modal ---------------- */
function ProductModal() {
  const modal = window.useModal();
  const cart = window.useCart();
  const p = modal.openId ? STData.PRODUCTS[modal.openId] : null;
  const [ai, setAi] = useState(0);
  useEffect(() => { setAi(0); }, [modal.openId]);
  useEffect(() => {
    if (!p) return;
    const h = (e) => { if (e.key === 'Escape') modal.close(); };
    window.addEventListener('keydown', h);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
  }, [p]);
  if (!p) return null;
  const gal = (p.images && p.images.length) ? p.images : [p.img, p.imgAlt].filter(Boolean);
  const onSale = p.regular && p.regular > p.price;
  const addAndClose = () => { cart.add(p.id); modal.close(); };
  return (
    <div className="pm-scrim" onClick={modal.close}>
      <div className="pm" onClick={(e) => e.stopPropagation()} role="dialog" aria-label={p.name}>
        <button className="pm-close" onClick={modal.close} aria-label="סגירה"><Icon name="close" size={24} /></button>
        <div className="pm-scroll">
          <div className="pm-grid">
            <div className="pm-media">
              {p.badge && <span className="pcard-badge pm-badge">{p.badge}</span>}
              <div className="pm-main">
                {gal[ai] && gal[ai].yt
                  ? <iframe key={gal[ai].yt} className="pm-video" src={'https://www.youtube.com/embed/' + gal[ai].yt + '?rel=0&playsinline=1'} referrerPolicy="strict-origin-when-cross-origin" allow="autoplay; fullscreen; encrypted-media" allowFullScreen title={p.name}></iframe>
                  : gal[ai] && gal[ai].file
                  ? <video key={gal[ai].file} className="pm-video" src={assetURL(gal[ai].file)} poster={assetURL(gal[ai].poster)} controls playsInline preload="metadata"></video>
                  : gal[ai] && gal[ai].video
                  ? <iframe key={gal[ai].video} className="pm-video" src={'https://drive.google.com/file/d/' + gal[ai].video + '/preview'} allow="autoplay; fullscreen" allowFullScreen title={p.name}></iframe>
                  : <SmartImg key={gal[ai]} url={gal[ai]} objectFit="contain" label={p.name} />}
              </div>
              {gal.length > 1 && (
                <div className="pm-thumbs">
                  {gal.map((u, i) => {
                    const vid = u && (u.video || u.yt || u.file);
                    return (
                    <button key={i} className={'pthumb' + (i === ai ? ' on' : '') + (vid ? ' pthumb-vid' : '')} onClick={() => setAi(i)} aria-label={(vid ? 'סרטון ' : 'תמונה ') + (i + 1)}>
                      <img src={vid ? assetURL(u.poster) : assetURL(u)} alt="" loading="eager" />
                      {vid && <span className="pthumb-play"></span>}
                    </button>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="pm-info">
              <h2 className="pm-name">{p.name}</h2>
              <p className="pm-sub">{p.sub}</p>
              {p.lead && <p className="pm-lead">{p.lead}</p>}
              <div className="pm-detail">
                {(p.details || []).map((b, i) => {
                  if (b.type === 'h') return <h4 className="pm-h" key={i}>{b.text}</h4>;
                  if (b.type === 'ul') return (
                    <ul className="pm-ul" key={i}>
                      {b.items.map((it, j) => <li key={j}><Icon name="check" size={15} sw={3} /> <span>{it}</span></li>)}
                    </ul>
                  );
                  return <p className="pm-p" key={i}>{b.text}</p>;
                })}
                {!p.details && p.blurb && <p className="pm-p">{p.blurb}</p>}
              </div>
            </div>
          </div>
        </div>
        <div className="pm-foot">
          <div className="pcard-price">
            {p.comingSoon ? <span className="price-soon">בקרוב במלאי</span> : <>
              <span className="price-now">{money(p.price)}</span>
              {onSale && <span className="price-was">{money(p.regular)}</span>}
            </>}
          </div>
          {p.comingSoon
            ? <Btn size="lg" href={'https://wa.me/972529256476?text=' + encodeURIComponent('היי! אשמח לעדכון כשההגדה של פסח יוצאת 🙌')}>עדכנו אותי כשזה יוצא!</Btn>
            : <Btn icon="cart" size="lg" onClick={addAndClose}>הוספה לסל</Btn>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Header, Hero, TrustStrip, WhySection, ProductsSection, MagicSection,
  Testimonials, Gallery, About, FAQ, FinalCTA, Footer, FloatingCTA, ProductModal, SuccessOverlay,
});

/* ---------------- Success overlay (after Grow payment → ?success=true) ---------------- */
function SuccessOverlay() {
  const cart = window.useCart();
  const [show, setShow] = useState(false);
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('success') === 'true') {
      setShow(true);
      if (cart && cart.clear) cart.clear();
    }
  }, []);
  if (!show) return null;
  const close = () => {
    setShow(false);
    // strip the query string so a refresh doesn't re-trigger
    window.history.replaceState({}, '', window.location.pathname);
  };
  return (
    <div className="pm-scrim" onClick={close}>
      <div className="pm success-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="תודה" style={{ width: 'min(520px, 100%)', maxHeight: 'none' }}>
        <button className="pm-close" onClick={close} aria-label="סגירה"><Icon name="close" size={24} /></button>
        <div className="success-inner" style={{ padding: '44px 38px', textAlign: 'center' }}>
          <div className="success-badge" style={{ margin: '0 auto 20px' }}><Icon name="check" size={44} sw={3} /></div>
          <h2 className="success-title">תודה רבה על ההזמנה! 🎉</h2>
          <p className="success-lead">התשלום התקבל בהצלחה. קיבלתם אישור הזמנה, ואנחנו כבר מתחילים להכין את הערכות שלכם באהבה 💛</p>
          <ul className="success-points" style={{ display: 'inline-grid', textAlign: 'right', margin: '22px auto' }}>
            <li><Icon name="check" size={16} sw={3} /> אישור וקבלה נשלחו אליכם</li>
            <li><Icon name="check" size={16} sw={3} /> אספקה תוך 3-5 ימי עסקים</li>
            <li><Icon name="check" size={16} sw={3} /> בכל שאלה — אנחנו בוואטסאפ</li>
          </ul>
          <div className="success-cta" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={close}>חזרה לחנות</Btn>
            <a className="btn btn-wa btn-lg" href="https://wa.me/972529256476" target="_blank" rel="noreferrer" style={{ background: '#25d366', color: '#fff' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z M12.05 21.79h-.01a9.87 9.87 0 01-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37A9.86 9.86 0 012.17 11.9c0-5.45 4.44-9.88 9.89-9.88 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 012.89 6.99c0 5.46-4.44 9.88-9.89 9.88zm8.41-18.3A11.82 11.82 0 0012.05 0C5.44 0 .07 5.36.07 11.97c0 2.11.55 4.17 1.6 5.98L0 24l6.34-1.65a11.9 11.9 0 005.65 1.44h.01c6.61 0 11.98-5.37 11.99-11.97a11.9 11.9 0 00-3.53-8.33z"/></svg>
              דברו איתנו
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SuccessOverlay });