// ============================================================
// Home — composes hero + trust + curated products + collection
// rail + editorial + testimonials + newsletter. Single source
// for the homepage layout; hero variant comes from props.
// ============================================================

function JmHome({ lang, heroVariant, onOpenProduct, onAdd, onGoShop, onGoAbout, onGoCollection, onGoBestsellers }) {
  const t = JM.t[lang];
  const [cat, setCat] = React.useState('all');
  const bestsellers = JM.products.filter(p => cat === 'all' ? true : p.category === cat).sort(JM.featuredSort).slice(0, 6);

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  return (
    <div data-screen-label="Homepage">
      <JmHero variant={heroVariant} lang={lang} onCta={onGoShop} onSecondary={onGoAbout}/>
      <JmMarqueeStrip lang={lang}/>

      {/* Curated grid */}
      <section className="jm-section" id="curated" data-screen-label="Curated grid">
        <div className="jm-container">
          <div className="jm-collection__head">
            <div>
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 12 }}>
                {t['nav.bestsellers']}
              </div>
              <h2 className="jm-h1">{lang === 'vi' ? 'Những món được yêu thích nhất' : 'The most-loved pieces'}</h2>
              <p className="jm-small" style={{ marginTop: 12, maxWidth: 460 }}>
                {lang === 'vi'
                  ? 'Xếp theo số lượng bán thực tế. Tinh tế, không phô trương, vừa vặn cho mỗi nhịp sống của các nàng.'
                  : 'Ranked by actual sales. Refined, never loud, made for your everyday.'}
              </p>
            </div>
            <button className="jm-btn jm-btn-ghost" onClick={onGoBestsellers}>{t['cta.viewAll']} →</button>
          </div>

          <div className="jm-collection__tabs">
            {JM.categories.map(c => (
              <button key={c.id} className={`jm-tab ${cat === c.id ? 'is-active' : ''}`} onClick={() => setCat(c.id)}>
                {lang === 'vi' ? c.vi : c.en}
              </button>
            ))}
          </div>

          <div className="jm-grid">
            {bestsellers.map(p => (
              <JmProductCard key={p.id} product={p} lang={lang} onOpen={onOpenProduct} onAdd={onAdd}/>
            ))}
          </div>
        </div>
      </section>

      {/* Collections rail */}
      <section className="jm-section jm-section-alt" data-screen-label="Collections rail">
        <div className="jm-container">
          <div className="jm-collection__head">
            <div>
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 12 }}>
                {lang === 'vi' ? 'Bộ sưu tập' : 'Collections'}
              </div>
              <h2 className="jm-h1">{lang === 'vi' ? 'Mỗi bộ sưu tập, một câu chuyện' : 'Every collection tells a story'}</h2>
            </div>
          </div>

          <div className="jm-rail jm-rail--4">
            {JM.collections.map(col => (
              <article className="jm-rail-card" key={col.id} onClick={() => onGoCollection && onGoCollection(col.id)} data-screen-label={`Collection card · ${col.id}`}>
                <div className="jm-rail-card__art">
                  <JmCollectionCover col={col}/>
                </div>
                <div className="jm-rail-card__body">
                  <div className="jm-label">
                    {lang === 'vi' ? col.season : col.enSeason} · {col.status === 'coming' ? (lang === 'vi' ? 'Sắp mở bán' : 'Coming soon') : (lang === 'vi' ? `${col.pieces} món` : `${col.pieces} pieces`)}
                  </div>
                  <h3 className="jm-rail-card__name">{lang === 'vi' ? col.name : col.en}</h3>
                  <p className="jm-small">{lang === 'vi' ? col.tagline : col.enTagline}</p>
                  <span className="jm-rail-card__cta">{lang === 'vi' ? 'Xem bộ sưu tập' : 'View collection'} →</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Editorial block — story behind */}
      <section className="jm-section" data-screen-label="Editorial story">
        <div className="jm-container">
          <div className="jm-editorial__inner">
            <div className="jm-editorial__art">
              <JmEditorialImage kind="about-studio"/>
            </div>
            <div>
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>
                {lang === 'vi' ? 'Câu chuyện thương hiệu' : 'Brand story'}
              </div>
              <h2 className="jm-h1" style={{ marginBottom: 24 }}>
                {lang === 'vi' ? 'Sản phẩm cao cấp với mức giá không cao cấp' : 'Fine-feeling jewelry that doesn\'t cost a fortune'}
              </h2>
              <p style={{ marginBottom: 20 }}>
                {lang === 'vi'
                  ? 'Từ năm 2020, Jesmee được tạo nên bởi đội ngũ thiết kế Việt — sản phẩm thiết kế riêng, đạt tiêu chuẩn châu Âu, dành cho những phụ nữ tin vào nét đẹp riêng của mình.'
                  : 'Since 2020, Jesmee has been crafted by a Vietnamese design team — original pieces built to European standards, for women who trust their own beauty.'}
              </p>
              <p style={{ marginBottom: 32, color: 'var(--jm-muted)' }}>
                {lang === 'vi'
                  ? '"JES" — Jewelry Styling. "MEE" — Me. Mỗi món đồ là một dấu vân tay riêng. Jesmee không bán trang sức — Jesmee bán sự tự tin để các nàng kể câu chuyện của mình.'
                  : '"JES" — Jewelry Styling. "MEE" — Me. Each piece, a fingerprint of its wearer. We don\'t sell jewelry — we sell the confidence to wear your own story.'}
              </p>
              <button className="jm-btn jm-btn-secondary" onClick={onGoAbout}>
                {lang === 'vi' ? 'Đọc tiếp' : 'Read on'}
              </button>
            </div>
          </div>
        </div>
      </section>

      <JmTestimonials lang={lang}/>
      <JmNewsletter lang={lang}/>
    </div>
  );
}

window.JmHome = JmHome;