// Page: Home
function HomePage({ lang, navigate, wishlist, toggleWish, onWaOrder, tweaks }) {
  const t = I18N[lang];
  useReveal();

  const newest = PRODUCTS.filter(p => p.isNew).slice(0, tweaks.gridCount);
  const bestsellers = [...PRODUCTS].sort((a,b) => b.sales - a.sales).slice(0, tweaks.gridCount);

  return (
    <main>
      {/* HERO */}
      {tweaks.heroStyle === 'fullscreen' && (
        <section className="hero hero-fullscreen">
          <div className="bg" style={{backgroundImage: `url(${IMG.hero1})`}}/>
          <div className="container inner">
            <span className="eyebrow">{t.hero.eyebrow}</span>
            <h1 className="reveal in">
              {lang === 'ar' ? <>الأناقة<br/><span className="it">بتفاصيل ناعمة</span></> : <>Elegance<br/><span className="it">in soft details</span></>}
            </h1>
            <p>{t.hero.sub}</p>
            <div className="actions">
              <button className="btn btn-ghost-light btn-lg" onClick={() => navigate('shop')}>
                {t.hero.cta} <Icon.Arrow/>
              </button>
            </div>
          </div>
        </section>
      )}

      {tweaks.heroStyle === 'split' && (
        <section className="hero hero-split">
          <div className="text">
            <span className="eyebrow left">{t.hero.eyebrow}</span>
            <h1>
              {lang === 'ar' ? <>الأناقة<br/><span className="it">بتفاصيل ناعمة</span></> : <>Elegance<br/><span className="it">in soft details</span></>}
            </h1>
            <p>{t.hero.sub}</p>
            <div style={{display:'flex',gap:12}}>
              <button className="btn btn-primary" onClick={() => navigate('shop')}>{t.hero.cta} <Icon.Arrow/></button>
            </div>
          </div>
          <div className="img" style={{backgroundImage: `url(${IMG.hero1})`}}/>
        </section>
      )}

      {tweaks.heroStyle === 'grid' && (
        <section className="hero hero-grid">
          <div className="tile main" style={{backgroundImage: `url(${IMG.hero1})`}}>
            <span className="eyebrow" style={{color:'var(--bone)'}}>{t.hero.eyebrow}</span>
            <h1>
              {lang === 'ar' ? <>الأناقة<br/><span className="it">بتفاصيل ناعمة</span></> : <>Elegance<br/><span className="it">in soft details</span></>}
            </h1>
            <p>{t.hero.sub}</p>
            <button className="btn btn-ghost-light" onClick={() => navigate('shop')} style={{alignSelf:'flex-start'}}>{t.hero.cta} <Icon.Arrow/></button>
          </div>
          <div className="tile" style={{backgroundImage: `url(${IMG.hero2})`}}/>
          <div className="tile" style={{backgroundImage: `url(${IMG.p[2]})`}}/>
          <div className="tile" style={{backgroundImage: `url(${IMG.p[6]})`}}/>
          <div className="tile" style={{backgroundImage: `url(${IMG.p[9]})`}}/>
        </section>
      )}

      {/* CATEGORIES */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow left">{lang === 'ar' ? 'تسوقي' : 'Shop'}</span>
              <h2>{t.sections.shopBy}</h2>
            </div>
          </div>
          <div className="cats-grid reveal">
            {CATEGORIES.map(c => (
              <div className="cat-tile" key={c.id} onClick={() => navigate('shop', { cat: c.id })}>
                <img src={c.img} alt={c[lang]} loading="lazy"/>
                <span>{c[lang]}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NEWEST */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow left">{t.sections.newestSub}</span>
              <h2>{t.sections.newest}</h2>
            </div>
            <a className="link" onClick={() => navigate('shop')}>{t.sections.viewAll}</a>
          </div>
          <div className={`pgrid cols-${tweaks.gridCols} reveal`}>
            {newest.map(p => (
              <ProductCard key={p.id} product={p} lang={lang} variant={tweaks.cardStyle}
                onClick={(pr) => navigate('product', { id: pr.id })}
                wishlist={wishlist} toggleWish={toggleWish} onWaOrder={onWaOrder}/>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED BANNER */}
      <section className="featured-banner reveal" style={{backgroundImage: `url(${IMG.hero3})`}}>
        <div className="container">
          <div className="inner">
            <span className="eyebrow" style={{color:'var(--bone)'}}>
              <span style={{color:'var(--bone)'}}>{lang === 'ar' ? 'عرض خاص' : 'Special offer'}</span>
            </span>
            <h2>
              {lang === 'ar' ? <>خصم <span className="it">٢٠٪</span><br/>على المجموعة الجديدة</> : <>Get <span className="it">20%</span> off<br/>the new collection</>}
            </h2>
            <p>{lang === 'ar' ? 'استخدمي الكود SPRING20 عند الطلب — لفترة محدودة' : 'Use code SPRING20 at checkout — limited time'}</p>
            <button className="btn btn-ghost-light" onClick={() => navigate('shop')}>{t.hero.cta} <Icon.Arrow/></button>
          </div>
        </div>
      </section>

      {/* BESTSELLERS */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow left">{t.sections.bestsellersSub}</span>
              <h2>{t.sections.bestsellers}</h2>
            </div>
            <a className="link" onClick={() => navigate('shop')}>{t.sections.viewAll}</a>
          </div>
          <div className={`pgrid cols-${tweaks.gridCols} reveal`}>
            {bestsellers.slice(0, tweaks.gridCols * 2).map(p => (
              <ProductCard key={p.id} product={p} lang={lang} variant={tweaks.cardStyle}
                onClick={(pr) => navigate('product', { id: pr.id })}
                wishlist={wishlist} toggleWish={toggleWish} onWaOrder={onWaOrder}/>
            ))}
          </div>
        </div>
      </section>

      {/* LOOKBOOK */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow left">{t.sections.lookbookSub}</span>
              <h2>{t.sections.lookbook}</h2>
            </div>
            <a className="link" href="https://instagram.com/hallo.banat" target="_blank" rel="noreferrer">@hallo.banat</a>
          </div>
          <div className="lookbook reveal">
            {LOOKBOOK.map((src, i) => (
              <a key={i} className="lb-tile" href="https://instagram.com/hallo.banat" target="_blank" rel="noreferrer">
                <img src={src} alt="" loading="lazy"/>
                <span className="ig-mark"><Icon.Instagram size={28}/></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <section className="newsletter reveal">
        <h2>{t.sections.newsletter}</h2>
        <p>{t.sections.newsletterSub}</p>
        <form className="newsletter-form" onSubmit={(e) => { e.preventDefault(); alert(lang==='ar'?'شكراً لاشتراكك ✿':'Thanks for subscribing ✿'); }}>
          <input type="email" placeholder={t.sections.newsletterPh} required/>
          <button type="submit" className="btn-primary" style={{background:'var(--ink)',color:'var(--bone)'}}>{t.sections.subscribe}</button>
        </form>
      </section>
    </main>
  );
}

window.HomePage = HomePage;