/* ============================================================
   AfricaMart — Modern storefront: hooks, sections, quick-view
   (loaded before pages-store.jsx)
   ============================================================ */

/* ---------- per-supplier B2B capability data ---------- */
const STORE_EXTRAS = {
  s1: { years: 12, transactions: "1,240+", onTime: 97, reorder: 64, staff: "200–500", capacity: "60,000 MT / year",
        leadTime: "2–4 weeks", payment: ["T/T", "L/C at sight", "D/P"], incoterms: ["FOB Mombasa", "CIF", "DAP"],
        oem: true, sample: "Free samples · freight on buyer", markets: ["KE", "UG", "TZ", "RW", "ET"],
        why: ["ISO-certified mill with in-house QC lab", "Mill test certs with every shipment", "Cut-to-length & custom rib geometry", "Bonded warehouse for fast dispatch"] },
  s2: { years: 15, transactions: "2,100+", onTime: 99, reorder: 78, staff: "100–200", capacity: "8,000 MT / year",
        leadTime: "1–3 weeks", payment: ["T/T", "L/C at sight"], incoterms: ["FOB Djibouti", "CIF", "FCA"],
        oem: true, sample: "Paid samples · 200g, courier included", markets: ["ZA", "EG", "MA", "KE", "NG"],
        why: ["Direct cooperative sourcing, full traceability", "Fairtrade & Organic EU certified", "Pre-shipment cupping samples", "Cold-chain & GrainPro packaging"] },
  s3: { years: 10, transactions: "870+", onTime: 94, reorder: 55, staff: "200–500", capacity: "40,000 MT / year",
        leadTime: "2–5 weeks", payment: ["T/T", "D/P"], incoterms: ["FOB Lagos", "DAP", "EXW"],
        oem: true, sample: "Free samples · 1m offcut", markets: ["NG", "GH", "CI", "SN"],
        why: ["Integrated extrusion across two plants", "SON MANCAP certified", "Co-extruded ID/OD striping", "Coils up to DN110"] },
  s4: { years: 17, transactions: "1,430+", onTime: 96, reorder: 71, staff: "500–1000", capacity: "12M m / year",
        leadTime: "3–6 weeks", payment: ["T/T", "L/C at sight", "O/A (approved)"], incoterms: ["FOB Cape Town", "CIF", "DAP"],
        oem: true, sample: "Free swatch book · paid lab dips", markets: ["ZA", "KE", "NG", "EG"],
        why: ["Vertical spin → weave → dye → finish", "OEKO-TEX & GOTS certified", "18 stock shades, custom dyeing", "Industrial-laundry tested durability"] },
  s5: { years: 13, transactions: "640+", onTime: 92, reorder: 49, staff: "200–500", capacity: "1.2M MT / year",
        leadTime: "1–2 weeks", payment: ["T/T", "L/C at sight"], incoterms: ["FOB Casablanca", "CIF", "DAP"],
        oem: false, sample: "Bagged samples on request", markets: ["MA", "SN", "CI", "GH"],
        why: ["EN 197-1 certified clinker", "Bagged or bulk tanker dispatch", "Consistent 42.5N strength class", "Port-adjacent loading"] },
  s6: { years: 8, transactions: "310+", onTime: 88, reorder: 41, staff: "50–100", capacity: "Distributor",
        leadTime: "3–8 weeks", payment: ["T/T", "D/P"], incoterms: ["FOB Tema", "DAP", "CFR"],
        oem: false, sample: "Demo units on request", markets: ["GH", "CI", "NG"],
        why: ["Authorized dealer with genuine parts", "On-site commissioning & training", "2-year warranty support", "Regional spares inventory"] },
};
function extras(s) {
  return STORE_EXTRAS[s.id] || STORE_EXTRAS.s1;
}

/* ---------- scroll spy ---------- */
function useScrollSpy(ids, offset = 140) {
  const [active, setActive] = useState(ids[0]);
  useEffect(() => {
    const onScroll = () => {
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById("sec-" + id);
        if (el && el.getBoundingClientRect().top <= offset) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [ids.join()]);
  return active;
}
function scrollToSec(id, offset = 124) {
  const el = document.getElementById("sec-" + id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior: "smooth" });
}

/* ---------- section shell ---------- */
function StoreSection({ id, title, sub, action, children, alt }) {
  return (
    <section id={"sec-" + id} style={{ scrollMarginTop: 124, padding: "44px 0", borderTop: alt ? "none" : "1px solid var(--border)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginBottom: 24 }}>
        <div>
          <h2 style={{ fontSize: 24, letterSpacing: "-.02em" }}>{title}</h2>
          {sub && <p className="muted" style={{ marginTop: 6, fontSize: 14.5 }}>{sub}</p>}
        </div>
        {action}
      </div>
      {children}
    </section>
  );
}

/* ---------- Products section with in-store search + quick view ---------- */
function StoreProducts({ supplier, nav, currency, showToast }) {
  const all = AM.PRODUCTS.filter(p => p.supplier === supplier.id);
  const [q, setQ] = useState("");
  const [tag, setTag] = useState("");
  const [quick, setQuick] = useState(null);
  const tags = [...new Set(all.flatMap(p => p.tags))].slice(0, 8);
  const list = all.filter(p => (!q || p.name.toLowerCase().includes(q.toLowerCase())) && (!tag || p.tags.includes(tag)));
  const featured = all[0];

  return (
    <StoreSection id="products" title="Products" sub={all.length + " products in this store"}
      action={
        <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#fff", border: "1px solid var(--border-strong)", borderRadius: 10, padding: "0 12px", minWidth: 240 }}>
          <Icon name="search" size={16} style={{ color: "var(--ink-400)" }} />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search this store…" style={{ border: "none", outline: "none", padding: "10px 0", fontSize: 14, width: "100%" }} />
        </div>
      }>
      {/* tag chips */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 22 }}>
        <button onClick={() => setTag("")} className="badge" style={{ cursor: "pointer", padding: "7px 14px", fontSize: 13, border: "1px solid " + (tag === "" ? "var(--navy-800)" : "var(--border-strong)"), background: tag === "" ? "var(--navy-800)" : "#fff", color: tag === "" ? "#fff" : "var(--ink-600)" }}>All products</button>
        {tags.map(t => (
          <button key={t} onClick={() => setTag(tag === t ? "" : t)} className="badge" style={{ cursor: "pointer", padding: "7px 14px", fontSize: 13, border: "1px solid " + (tag === t ? "var(--gold-500)" : "var(--border-strong)"), background: tag === t ? "var(--gold-100)" : "#fff", color: tag === t ? "var(--gold-700)" : "var(--ink-600)" }}>{t}</button>
        ))}
      </div>

      {/* featured spotlight */}
      {featured && !q && !tag && (
        <div className="card store-spotlight" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", overflow: "hidden", marginBottom: 22, padding: 0 }}>
          <ProductPh product={featured} h={300} />
          <div style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span className="badge badge-premium" style={{ alignSelf: "flex-start", marginBottom: 12 }}><Icon name="star" size={11} /> Featured</span>
            <h3 style={{ fontSize: 22, lineHeight: 1.2 }}>{featured.name}</h3>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 12 }}>
              <span style={{ fontSize: 30, fontWeight: 800, color: "var(--navy-800)" }}>{fmtPrice(featured.priceUSD, currency)}</span>
              <span className="muted">/ {featured.unit} · MOQ {featured.moq} {featured.moqUnit}</span>
            </div>
            <p className="muted" style={{ marginTop: 12, fontSize: 14, lineHeight: 1.6 }}>{featured.desc.slice(0, 150)}…</p>
            <div style={{ display: "flex", gap: 10, marginTop: 18, flexWrap: "wrap" }}>
              <button className="btn btn-gold" onClick={() => nav("product", { slug: featured.slug })}>View details</button>
              <button className="btn btn-ghost" onClick={() => setQuick(featured)}><Icon name="eye" size={16} /> Quick view</button>
            </div>
          </div>
        </div>
      )}

      {list.length === 0 ? (
        <div className="card" style={{ padding: 40, textAlign: "center" }}>
          <Icon name="package-search" size={36} style={{ color: "var(--ink-300)" }} />
          <p className="muted" style={{ marginTop: 10 }}>No products match "{q || tag}".</p>
        </div>
      ) : (
        <div className="results-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
          {list.map(p => <QuickProductCard key={p.id} product={p} nav={nav} currency={currency} onQuick={() => setQuick(p)} />)}
        </div>
      )}

      {quick && <QuickView product={quick} supplier={supplier} currency={currency} nav={nav} onClose={() => setQuick(null)} showToast={showToast} />}
    </StoreSection>
  );
}

/* product card with hover quick-view overlay */
function QuickProductCard({ product, nav, currency, onQuick }) {
  const [hover, setHover] = useState(false);
  return (
    <div className="card" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ overflow: "hidden", display: "flex", flexDirection: "column", transition: "transform .16s, box-shadow .16s", boxShadow: hover ? "var(--sh-md)" : "var(--sh-sm)", transform: hover ? "translateY(-3px)" : "none" }}>
      <div style={{ position: "relative" }}>
        <ProductPh product={product} h={170} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", gap: 8, background: "rgba(13,27,42,.45)", opacity: hover ? 1 : 0, transition: "opacity .18s", pointerEvents: hover ? "auto" : "none" }}>
          <button className="btn btn-gold btn-sm" onClick={() => onQuick()}><Icon name="eye" size={15} /> Quick view</button>
        </div>
      </div>
      <div style={{ padding: "14px 16px 16px", display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
        <div onClick={() => nav("product", { slug: product.slug })} style={{ cursor: "pointer", fontWeight: 600, fontSize: 14.5, lineHeight: 1.3, minHeight: 38 }}>{product.name}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
          <span style={{ fontWeight: 700, fontSize: 18, color: "var(--navy-800)" }}>{fmtPrice(product.priceUSD, currency)}</span>
          <span className="muted" style={{ fontSize: 12.5 }}>/ {product.unit}</span>
        </div>
        <div className="muted" style={{ fontSize: 12.5, marginTop: "auto", paddingTop: 8, borderTop: "1px solid var(--border)" }}>MOQ {product.moq} {product.moqUnit} · {product.inquiries} inquiries</div>
      </div>
    </div>
  );
}

/* quick-view modal */
function QuickView({ product, supplier, currency, nav, onClose, showToast }) {
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 80, background: "rgba(13,27,42,.55)", backdropFilter: "blur(3px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={e => e.stopPropagation()} className="route-anim quickview" style={{ background: "#fff", borderRadius: 16, width: "min(820px,100%)", maxHeight: "90vh", overflow: "auto", boxShadow: "var(--sh-lg)", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
        <ProductPh product={product} h={360} />
        <div style={{ padding: 26, position: "relative" }}>
          <button onClick={onClose} style={{ position: "absolute", top: 16, right: 16, padding: 4 }}><Icon name="x" size={22} style={{ color: "var(--ink-500)" }} /></button>
          <div className="mono muted" style={{ fontSize: 12 }}>{product.sku}</div>
          <h3 style={{ fontSize: 20, marginTop: 6, lineHeight: 1.2 }}>{product.name}</h3>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 14 }}>
            <span style={{ fontSize: 28, fontWeight: 800, color: "var(--navy-800)" }}>{fmtPrice(product.priceUSD, currency)}</span>
            <span className="muted">/ {product.unit}</span>
          </div>
          <div className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>MOQ {product.moq} {product.moqUnit} · Lead time 2–4 weeks</div>
          <div style={{ margin: "18px 0", display: "flex", flexDirection: "column", gap: 8 }}>
            {product.specs.slice(0, 4).map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, borderBottom: "1px solid var(--border)", paddingBottom: 6 }}>
                <span className="muted">{k}</span><span style={{ fontWeight: 600 }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn btn-gold" style={{ flex: 1 }} onClick={() => { onClose(); showToast("Inquiry started for " + product.name); nav("product", { slug: product.slug }); }}><Icon name="mail" size={16} /> Inquire</button>
            <button className="btn btn-ghost" onClick={() => { onClose(); nav("product", { slug: product.slug }); }}>Full details</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Capabilities ---------- */
function StoreCapabilities({ supplier }) {
  const x = extras(supplier);
  const cards = [
    { icon: "factory", label: "Production capacity", value: x.capacity },
    { icon: "boxes", label: "Min. order (MOQ)", value: "From " + AM.PRODUCTS.filter(p => p.supplier === supplier.id)[0].moq + " " + AM.PRODUCTS.filter(p => p.supplier === supplier.id)[0].moqUnit },
    { icon: "clock", label: "Lead time", value: x.leadTime },
    { icon: "users", label: "Staff", value: x.staff },
    { icon: "credit-card", label: "Payment terms", value: x.payment.join(" · ") },
    { icon: "ship", label: "Shipping (Incoterms)", value: x.incoterms.join(" · ") },
    { icon: "settings-2", label: "Customization", value: x.oem ? "OEM & ODM available" : "Standard catalog" },
    { icon: "flask-conical", label: "Samples", value: x.sample },
  ];
  return (
    <StoreSection id="capabilities" title="Trade capabilities" sub="What you need to know before you order">
      <div className="cap-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
        {cards.map(c => (
          <div key={c.label} className="card" style={{ padding: 18 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--navy-50)", color: "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 12 }}>
              <Icon name={c.icon} size={20} sw={1.7} />
            </div>
            <div className="muted" style={{ fontSize: 12.5 }}>{c.label}</div>
            <div style={{ fontWeight: 700, fontSize: 14.5, marginTop: 3, lineHeight: 1.3 }}>{c.value}</div>
          </div>
        ))}
      </div>
      {/* main markets */}
      <div className="card" style={{ marginTop: 16, padding: 20, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
        <div>
          <div className="muted" style={{ fontSize: 12.5 }}>Main export markets</div>
          <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>{x.markets.length} countries</div>
        </div>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          {x.markets.map(code => (
            <span key={code} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13.5, fontWeight: 500 }}>
              <Flag code={code} size={16} /> {AM.countryByCode[code].name}
            </span>
          ))}
        </div>
      </div>
    </StoreSection>
  );
}

/* ---------- About ---------- */
function StoreAbout({ supplier }) {
  const x = extras(supplier);
  const c = AM.countryByCode[supplier.country];
  return (
    <StoreSection id="about" title={"About " + supplier.name}>
      <div className="about-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 28, alignItems: "start" }}>
        <div>
          <p style={{ lineHeight: 1.75, color: "var(--ink-700)", fontSize: 15.5 }}>{supplier.bio}</p>
          <h4 style={{ fontSize: 15, marginTop: 24, marginBottom: 12 }}>Why buyers choose us</h4>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {x.why.map(w => (
              <div key={w} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <Icon name="check-circle-2" size={18} style={{ color: "var(--green-600)", flexShrink: 0, marginTop: 1 }} />
                <span style={{ fontSize: 14, color: "var(--ink-700)", lineHeight: 1.45 }}>{w}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <h4 style={{ fontSize: 14, marginBottom: 14 }}>Company snapshot</h4>
          {[["Business type", supplier.type], ["Headquarters", c.name], ["Established", supplier.since], ["Employees", x.staff], ["Annual capacity", x.capacity], ["Main products", supplier.tags.join(", ")]].map(([k, v]) => (
            <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "9px 0", borderTop: "1px solid var(--border)", fontSize: 13.5 }}>
              <span className="muted">{k}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </StoreSection>
  );
}

/* ---------- Certifications ---------- */
function StoreCerts({ supplier, showToast }) {
  return (
    <StoreSection id="certs" title="Certifications & compliance" sub="Verified documents on file with AfricaMart">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(260px,1fr))", gap: 16 }}>
        {supplier.certs.map(cert => (
          <div key={cert} className="card" style={{ padding: 20, display: "flex", gap: 14, alignItems: "center" }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--green-50)", color: "var(--green-600)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="award" size={24} sw={1.7} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 14.5 }}>{cert}</div>
              <div className="muted" style={{ fontSize: 12.5, marginTop: 2, display: "flex", alignItems: "center", gap: 5 }}><Icon name="badge-check" size={13} style={{ color: "var(--gold-600)" }} /> Verified · valid 2026</div>
            </div>
            <button onClick={() => showToast("Opening certificate")} style={{ padding: 6 }}><Icon name="file-down" size={18} style={{ color: "var(--ink-500)" }} /></button>
          </div>
        ))}
      </div>
    </StoreSection>
  );
}

/* ---------- Reviews ---------- */
function StoreReviews({ supplier }) {
  const reviews = AM.REVIEWS[supplier.id] || [];
  const dist = { 5: 78, 4: 18, 3: 3, 2: 1, 1: 0 };
  return (
    <StoreSection id="reviews" title="Buyer reviews" sub={supplier.reviews + " verified reviews"}>
      <div className="reviews-grid" style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 28, alignItems: "start" }}>
        <div className="card" style={{ padding: 24, textAlign: "center" }}>
          <div style={{ fontSize: 52, fontWeight: 800, color: "var(--navy-800)", lineHeight: 1 }}>{supplier.rating}</div>
          <div style={{ marginTop: 8 }}><Stars value={supplier.rating} size={18} /></div>
          <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>{supplier.reviews} reviews</div>
          <div style={{ marginTop: 18 }}>
            {[5, 4, 3, 2, 1].map(n => (
              <div key={n} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, marginBottom: 5 }}>
                <span style={{ width: 10 }}>{n}</span>
                <Icon name="star" size={11} style={{ fill: "var(--gold-500)", color: "var(--gold-500)" }} />
                <span style={{ flex: 1, height: 6, background: "var(--paper-2)", borderRadius: 3, overflow: "hidden" }}>
                  <span style={{ display: "block", height: "100%", width: dist[n] + "%", background: "var(--gold-500)" }} />
                </span>
                <span className="muted" style={{ width: 30, textAlign: "right" }}>{dist[n]}%</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {reviews.length === 0 ? <div className="card" style={{ padding: 28 }}><p className="muted">No written reviews yet.</p></div> :
            reviews.map((r, i) => (
              <div key={i} className="card" style={{ padding: 20 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--navy-50)", color: "var(--navy-600)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>{r.buyer.split(" ").map(w => w[0]).slice(0, 2).join("")}</div>
                  <div><div style={{ fontWeight: 700, fontSize: 14, display: "flex", alignItems: "center", gap: 6 }}>{r.buyer} <span className="badge badge-green" style={{ fontSize: 10.5 }}><Icon name="badge-check" size={10} /> Verified buyer</span></div>
                    <div className="muted" style={{ fontSize: 12, display: "flex", alignItems: "center", gap: 5, marginTop: 2 }}><Flag code={r.country} size={11} /> {AM.countryByCode[r.country].name}</div></div>
                  <div style={{ marginLeft: "auto", textAlign: "right" }}><Stars value={r.rating} size={13} /><div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{r.date}</div></div>
                </div>
                <p style={{ marginTop: 12, color: "var(--ink-700)", lineHeight: 1.6, fontSize: 14.5 }}>{r.text}</p>
              </div>
            ))}
        </div>
      </div>
    </StoreSection>
  );
}

/* ---------- Contact ---------- */
function StoreContact({ supplier, showToast }) {
  const x = extras(supplier);
  const c = AM.countryByCode[supplier.country];
  return (
    <StoreSection id="contact" title="Contact this supplier" sub={"Replies " + supplier.responseTime + " on average · " + supplier.responseRate + "% response rate"}>
      <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 28, alignItems: "start" }}>
        <InquiryForm supplier={supplier} showToast={showToast} />
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card" style={{ padding: 20 }}>
            <h4 style={{ fontSize: 14, marginBottom: 14 }}>Business details</h4>
            {[["map-pin", c.name + " · HQ"], ["clock", "Mon–Fri, 08:00–17:00 EAT"], ["zap", supplier.responseRate + "% response · " + supplier.responseTime], ["calendar-check", "On AfricaMart since " + supplier.since]].map(([ic, v]) => (
              <div key={v} style={{ display: "flex", gap: 10, alignItems: "center", padding: "8px 0", fontSize: 13.5 }}>
                <Icon name={ic} size={17} style={{ color: "var(--ink-400)", flexShrink: 0 }} /> <span>{v}</span>
              </div>
            ))}
          </div>
          <div className="card ph" style={{ height: 180, padding: 0 }}>
            <div style={{ position: "relative", zIndex: 1, textAlign: "center", color: "var(--ink-400)" }}>
              <Icon name="map" size={28} /><div style={{ fontSize: 12.5, marginTop: 6 }}>{c.name}</div>
            </div>
          </div>
        </div>
      </div>
    </StoreSection>
  );
}

Object.assign(window, { STORE_EXTRAS, extras, useScrollSpy, scrollToSec, StoreSection, StoreProducts, QuickProductCard, QuickView, StoreCapabilities, StoreAbout, StoreCerts, StoreReviews, StoreContact });