/* Home — hero, categories, collections, bestsellers, trust, reviews. */
function SF_Home({ go, wish, toggleWish, brandFontSize = 320, brandGap = -80 }) {
  const { BrandMark, Button, ProductCard, TrustBadge, StarRating } = window.SS;
  const eyebrow = { fontSize: 11.5, fontWeight: 500, letterSpacing: '.28em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)' };
  const h2 = { fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600, color: 'var(--sf-text)', margin: '10px 0 26px' };
  const bestsellers = window.SS_PRODUCTS.filter((p) => p.badge).slice(0, 4);

  return (
    <div>
      {/* Hero */}
      <div className="sf-hero-section" style={{ background: 'linear-gradient(180deg, #251129 0%, var(--sf-bg) 100%)', padding: '96px 0 100px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div className="sf-maxw" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, textAlign: 'center' }}>
          <BrandMark size={44} color="var(--sf-gold-hi)" />
          <div aria-hidden="true" className="sf-hero-mark" style={{
            width: '100%', height: 260, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'visible',
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: brandFontSize, lineHeight: 1,
            letterSpacing: '.02em', color: 'var(--sf-text)', opacity: 0.05, whiteSpace: 'nowrap',
            pointerEvents: 'none', userSelect: 'none', marginBottom: brandGap,
          }}>{window.SS_SITE.brandNameWine.toUpperCase()}</div>
          <div className="sf-hero-headline" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 12, marginTop: 24 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700, fontSize: 'clamp(34px, 6vw, 64px)', lineHeight: 1.15, color: 'var(--sf-gold-hi)' }}>{window.SS_SITE.tagline}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 22, letterSpacing: '.02em', color: 'var(--sf-text)' }}>{window.SS_SITE.taglineSub}</span>
          </div>
          <div aria-hidden="true" className="sf-hero-mark" style={{
            width: '100%', height: 260, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'visible',
            fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic', fontSize: brandFontSize, lineHeight: 1,
            letterSpacing: '.01em', color: 'var(--sf-text)', opacity: 0.05, whiteSpace: 'nowrap',
            pointerEvents: 'none', userSelect: 'none', marginTop: brandGap,
          }}>{window.SS_SITE.brandNameGold}</div>
          <div className="sf-hero-actions" style={{ display: 'flex', gap: 14, marginTop: 22, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="gold" size="lg" onClick={() => go('listing')}>SHOP ALL</Button>
            <Button variant="ghost" size="lg" onDark onClick={() => go('listing', 'earrings')}>EXPLORE EARRINGS</Button>
          </div>
        </div>
      </div>

      {/* Categories */}
      <div className="sf-maxw" style={{ paddingTop: 112, paddingBottom: 8 }}>
        <div style={eyebrow}>SHOP BY CATEGORY</div>
        <div className="sf-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 20 }}>
          {window.SS_CATEGORIES.map((c) => (
            <button key={c.id} onClick={() => go('listing', c.id)} style={{ all: 'unset', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ aspectRatio: '1', borderRadius: 'var(--sf-radius)', overflow: 'hidden', background: 'var(--sf-well)' }}>
                <img src={c.image} alt={c.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--sf-text)' }}>{c.name}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Collections */}
      <div className="sf-maxw" style={{ paddingTop: 64, paddingBottom: 8 }}>
        <div style={eyebrow}>COLLECTIONS</div>
        <div className="sf-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 20 }}>
          {window.SS_COLLECTIONS.map((c) => (
            <div key={c.id} onClick={() => go('listing')} style={{ cursor: 'pointer', position: 'relative', borderRadius: 'var(--sf-radius)', overflow: 'hidden', aspectRatio: '1/1' }}>
              <img src={c.image} alt={c.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,15,30,0) 40%, rgba(28,15,30,.88) 100%)' }} />
              <div style={{ position: 'absolute', left: 16, right: 16, bottom: 16 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--sf-text)' }}>{c.name}</div>
                <div style={{ fontSize: 12, fontWeight: 300, color: 'var(--sf-text-muted)', marginTop: 2 }}>{c.tagline}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bestsellers */}
      <div className="sf-maxw" style={{ paddingTop: 64, paddingBottom: 8 }}>
        <div style={eyebrow}>BESTSELLERS</div>
        <div className="sf-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 20 }}>
          {bestsellers.map((p) => (
            <ProductCard key={p.id} {...p} wished={!!wish[p.id]} onWish={() => toggleWish(p.id)} onQuickView={() => go('pdp', p.id)} style={{ cursor: 'pointer' }} />
          ))}
        </div>
      </div>

      {/* Trust */}
      <div className="sf-maxw" style={{ paddingTop: 72, paddingBottom: 8, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        <TrustBadge title="100% Authentic" detail="Every piece checked before it ships." />
        <TrustBadge title="7-Day Easy Returns" detail="Not the one? Send it back, no questions." />
        <TrustBadge title="Free Shipping ₹999+" detail="Delivered pan-India in 3–5 days." />
      </div>

      {/* Brand line */}
      <div className="sf-maxw" style={{ paddingTop: 56, paddingBottom: 0, textAlign: 'center' }}>
        <div style={eyebrow}>FASHION &amp; JEWELLERY</div>
      </div>

      {/* Reviews */}
      <div className="sf-maxw" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div style={eyebrow}>WHAT CUSTOMERS SAY</div>
        <div className="sf-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 20 }}>
          {window.SS_REVIEWS.map((r) => (
            <div key={r.name} style={{ background: 'var(--sf-surface)', border: '1px solid var(--sf-border-soft)', borderRadius: 'var(--sf-radius)', padding: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <StarRating value={r.rating} />
              <div style={{ fontSize: 13.5, fontWeight: 300, lineHeight: 1.55, color: 'var(--sf-text-muted)' }}>&ldquo;{r.text}&rdquo;</div>
              <div style={{ fontSize: 12, fontWeight: 500, letterSpacing: '.08em', color: 'var(--sf-text)', marginTop: 4 }}>{r.name}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.SF_Home = SF_Home;