/* ============================================================
   SMB DESIGNS — Homepage
   ============================================================ */

/* ---------------- TRUST BAR ---------------- */
function TrustBar() {
  const items = [
    { icon: "truck", t: "Nationwide delivery", s: "Shipped from Abuja" },
    { icon: "ruler", t: "Size guide", s: "Find your fit before you buy" },
    { icon: "shield", t: "Secure checkout", s: "Paystack" },
  ];
  return (
    <div className="trustbar">
      <div className="wrap trustbar-inner" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        {items.map((it) => (
          <div className="trust-item" key={it.t}>
            <Icon name={it.icon} size={22} stroke={1.4} />
            <div><span className="trust-t">{it.t}</span><span className="trust-s">{it.s}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- CATEGORY STRIP ---------------- */
function CategoryStrip({ onNav }) {
  const cats = [
    { name: "Heels", label: "HEELS" },
    { name: "Sneakers", label: "SNEAKERS" },
    { name: "Sandals", label: "SANDALS" },
    { name: "Flats", label: "FLATS" },
    { name: "Boots", label: "BOOTS" },
  ];
  return (
    <section className="section-pad-sm">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 40 }}>
          <h2 className="serif">Shop by style</h2>
          <button className="link-arrow" onClick={() => onNav("shop", {})}>All products</button>
        </Reveal>
        <div className="cat-strip">
          {cats.map((c, i) => (
            <Reveal key={c.name} delay={(i % 4) + 1} className="cat-card zoomable">
              <button className="cat-card-btn" onClick={() => onNav("shop", { cat: c.name })}>
                <Ph label={c.label + " · SHOP"} ratio="portrait" />
                <div className="cat-card-cap">
                  <span className="serif">{c.name}</span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FEATURED PRODUCTS ---------------- */
function FeaturedRow({ title, eyebrow, products, onNav, link }) {
  const { addToCart, toggleWish, wishlist } = useContext(RBCtx);
  return (
    <section className="section-pad">
      <div className="wrap-wide">
        <Reveal className="section-head" style={{ marginBottom: 44 }}>
          <div>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h2 className="serif" style={{ marginTop: 14 }}>{title}</h2>
          </div>
          <button className="link-arrow" onClick={() => onNav("shop", link || {})}>View all</button>
        </Reveal>
        <div className="product-grid">
          {products.map((p, i) => (
            <Reveal key={p.id} delay={(i % 4) + 1}>
              <ProductCard p={p} onNav={onNav} onAdd={addToCart} wished={wishlist.includes(p.id)} onWish={toggleWish} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRODUCT CARD ---------------- */
function ProductCard({ p, onNav, onAdd, wished, onWish }) {
  return (
    <article className="pcard zoomable" onClick={() => onNav("product", { id: p.id })}>
      <div className="pcard-media">
        {p.badge && <span className="pcard-tag">{p.badge}</span>}
        <button className={"wish" + (wished ? " active" : "")} onClick={(e) => { e.stopPropagation(); onWish(p.id); }} aria-label="Wishlist">
          <Icon name={wished ? "star-f" : "heart"} size={17} />
        </button>
        <Ph label={p.label} ratio="portrait" />
        <button className="quick" onClick={(e) => { e.stopPropagation(); onAdd(p, { size: p.sizes[1] || p.sizes[0], color: p.colors[0].name }); }}>
          + Quick add
        </button>
      </div>
      <div className="pcard-body">
        <span className="pcard-cat">{p.cat}</span>
        <span className="pcard-name">{p.name}</span>
        <span className="pcard-price"><Price ngn={p.price} old={p.oldPrice} /></span>
        <div className="swatches">{p.colors.slice(0, 4).map((c) => <span key={c.name} className="swatch" style={{ background: c.hex }} title={c.name} />)}</div>
      </div>
    </article>
  );
}

/* ---------------- HOME PAGE ---------------- */
function HomePage({ onNav, tweaks }) {
  const newArrivals = RB.PRODUCTS.filter((p) => p.badge === "New" || p.badge === "Signature").slice(0, 4);
  const trending = RB.PRODUCTS.slice(0, 4);
  return (
    <div className="fade-page">
      <HeroCollage onNav={onNav} headline={tweaks.heroHeadline} sub={tweaks.heroSub} />
      <TrustBar />
      <CategoryStrip onNav={onNav} />
      <FeaturedRow eyebrow="Just arrived" title="New this season" products={newArrivals} onNav={onNav} />
      <FeaturedRow eyebrow="Fan favourites" title="Trending now" products={trending} onNav={onNav} />
    </div>
  );
}

Object.assign(window, { HomePage, ProductCard, FeaturedRow });