/* ====================== Upcoming Sales + Gallery + Shop ====================== */

function SaleStub({ s }) {
  return (
    <article className={`stub reveal stub-coming`}>
      <div className="stub-img">
        <div className="sale-coming-placeholder">
          <span className="sale-coming-icon">🏠</span>
          <span className="sale-coming-label mono">Sale Coming Soon</span>
        </div>
        <span className="stub-when mono">COMING SOON</span>
      </div>
      <div className="stub-body">
        <div className="stub-lot mono coming-muted">DOLLYE DEALS · DFW</div>
        <h3 className="stub-name coming-soon-title">Coming Soon</h3>
        <div className="stub-meta mono coming-muted">
          <span><Icon name="pin" size={14} /> Fort Worth &amp; DFW Area</span>
          <span><Icon name="cal" size={14} /> Date TBA</span>
          <span><Icon name="clock" size={14} /> Time TBA</span>
        </div>
        <p className="stub-blurb coming-muted">Details and address will be announced to our follower list first. Sign up below to get early access.</p>
        <div className="stub-tags">
          <span className="chip mono coming-chip">Estate Sale</span>
          <span className="chip mono coming-chip">DFW</span>
          <span className="chip mono coming-chip">More details soon</span>
        </div>
      </div>
      <div className="stub-foot">
        <span className="mono stub-foot-note">Address released to followers 48 hrs prior</span>
        <a href="#contact" className="btn btn-ghost btn-sm">Join the list →</a>
      </div>
    </article>
  );
}

function UpcomingSales() {
  const [filter, setFilter] = useState("all");
  const shown = SALES.filter(s => filter === "all" ? true : filter === "weekend" ? s.when === "weekend" : s.when === "upcoming");
  return (
    <section className="section sales-sec" id="sales">
      <div className="wrap">
        <div className="sales-head">
          <SectionHead
            eyebrow="Come treasure hunting"
            eyebrowTone="denim"
            title="Upcoming sales"
            lede="Mark your calendar, follow us for early address drops, and come find something you'll love."
          />
          <div className="sales-filter mono reveal">
            {[["all", "All"], ["weekend", "This weekend"], ["upcoming", "Upcoming"]].map(([k, l]) => (
              <button key={k} className={filter === k ? "on" : ""} onClick={() => setFilter(k)}>{l}</button>
            ))}
          </div>
        </div>
        <div className="stub-grid">
          {shown.map(s => <SaleStub s={s} key={s.id} />)}
        </div>
        <div className="sales-cta reveal">
          <p className="mono">Want first dibs? Our followers get addresses early.</p>
          <div className="flex gap-s aic">
            <a href="#contact" className="btn btn-ghost btn-sm"><Icon name="star" size={15} /> Join the buyer list</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Gallery ---------------- */
function Gallery({ onOpen }) {
  const [cat, setCat] = useState("All");
  const shown = GALLERY.filter(g => cat === "All" ? true : g.cat === cat);
  return (
    <section className="section gallery-sec" id="gallery">
      <div className="wrap">
        <SectionHead
          eyebrow="Past sales"
          title="A look at what's passed through our doors."
          lede="From mid-century furniture to costume jewelry — every sale is staged, styled, and shot to sell."
        />
        <div className="gal-filter mono reveal">
          {GALLERY_CATS.map(c => (
            <button key={c} className={cat === c ? "on" : ""} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>
        <div className="gal-grid">
          {shown.map((g, i) => (
            <div
              className={`gal-item reveal ${g.span}`}
              key={g.label}
              style={{ transitionDelay: `${(i % 4) * 50}ms` }}
            >
              <Slot id={`gal-${g.label.replace(/\s+/g, "-")}`} label={g.label} tone={g.tone} src={g.img} />
              <span className="gal-cat mono">{g.cat}</span>
              <button className="gal-expand" onClick={() => onOpen(g)} aria-label={`View ${g.label}`}>
                <Icon name="loupe" size={16} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Lightbox({ item, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);
  if (!item) return null;
  return (
    <div className="lightbox" onClick={onClose}>
      <div className="lightbox-inner" onClick={e => e.stopPropagation()}>
        <button className="lightbox-x mono" onClick={onClose} aria-label="Close">✕ CLOSE</button>
        <div className="lightbox-img">
          <Slot id={`gal-${item.label.replace(/\s+/g, "-")}`} label={item.label} tone={item.tone} src={item.img} />
        </div>
        <div className="lightbox-cap">
          <span className="chip mono">{item.cat}</span>
          <span className="mono lightbox-name">{item.label}</span>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Shop ---------------- */
function ShopCard({ p, onAdd, inCart }) {
  return (
    <article className="prod reveal">
      <div className="prod-img">
        <div className="prod-coming-soon">
          <span className="prod-coming-icon">🏷️</span>
          <span className="prod-coming-text mono">Coming Soon</span>
        </div>
        <span className="prod-tag tag">$0</span>
      </div>
      <div className="prod-body">
        <span className="prod-cat mono">{p.cat} · {p.note}</span>
        <h3 className="prod-name coming-soon-title">Coming Soon</h3>
        <button className="prod-add btn btn-sm btn-ghost" disabled style={{opacity:0.45, cursor:'not-allowed'}}>
          <Icon name="cart" size={15} /> Coming Soon
        </button>
      </div>
    </article>
  );
}

function Shop({ onAdd, cart }) {
  const [cat, setCat] = useState("All");
  const shown = SHOP.filter(p => cat === "All" ? true : p.cat === cat);
  const ids = new Set(cart.map(c => c.id));
  return (
    <section className="section shop-sec" id="shop">
      <div className="wrap">
        <div className="sales-head">
          <SectionHead
            eyebrow="Can't make it in person?"
            eyebrowTone="denim"
            title="Shop the finds, before the sale."
            lede="Twenty years of online selling didn't go to waste. We list standout furniture and decor from our sales right here — local pickup or delivery across the DFW Metroplex."
          />
          <div className="gal-filter mono reveal shop-filter">
            {SHOP_CATS.map(c => (
              <button key={c} className={cat === c ? "on" : ""} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="prod-grid">
          {shown.map(p => <ShopCard p={p} key={p.id} onAdd={onAdd} inCart={ids.has(p.id)} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UpcomingSales, Gallery, Lightbox, Shop });