/* ============================================================
   AfricaMart — PREMIUM white-label storefront
   (paid tier · zero AfricaMart branding · standalone-site feel)
   ============================================================ */

/* bespoke hero copy for flagship premium suppliers; generic fallback otherwise */
const PREMIUM_COPY = {
  s1: { tagline: "Steel that builds East Africa.",
        lede: "ISO-certified rebar, structural sections and galvanized roofing — milled in Mombasa and delivered with certainty across fourteen countries.",
        word: "Steelworks" },
  s4: { tagline: "Woven with precision. Finished to last.",
        lede: "Spinning, weaving, dyeing and finishing under one roof — engineered workwear and woven fabric for industry across Southern Africa.",
        word: "Textile Mills" },
  s2: { tagline: "Single-origin coffee, sourced with conscience.",
        lede: "Traceable, fair-trade Arabica and oilseeds from the cooperatives of the Ethiopian highlands — cupped, graded and shipped to the world's roasters.",
        word: "Exports" },
};
function premiumCopy(s) {
  return PREMIUM_COPY[s.id] || {
    tagline: s.tags[0] + ", crafted for a continent.",
    lede: s.bio,
    word: s.type,
  };
}

/* darken a hex color */
function shade(hex, amt) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  let r = (n >> 16) + amt, g = ((n >> 8) & 255) + amt, b = (n & 255) + amt;
  r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function pScroll(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: "smooth" });
}

function PremiumStorePage({ nav, currency, params, showToast }) {
  const s = AM.supplierBySlug[params.slug] || AM.SUPPLIERS[0];
  const c = AM.countryByCode[s.country];
  const x = extras(s);
  const copy = premiumCopy(s);
  const products = AM.PRODUCTS.filter(p => p.supplier === s.id);
  const reviews = AM.REVIEWS[s.id] || [];
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);

  const accent = s.color;
  const accentDeep = shade(s.color, -38);
  const domain = "www." + s.slug.replace(/-/g, "") + ".com";
  const monogram = s.name.split(" ").map(w => w[0]).slice(0, 2).join("");

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? (window.scrollY / h) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navLinks = [["collections", "Collections"], ["capabilities", "Capabilities"], ["about", "About"], ["clients", "Clients"], ["contact", "Contact"]];

  return (
    <div className="prem-root" style={{ "--pa": accent, "--pad": accentDeep, background: "#fbfaf8", color: "#16181c", fontFamily: "var(--font)" }}>
      {/* scroll progress */}
      <div style={{ position: "fixed", top: 0, left: 0, height: 3, width: progress + "%", background: "var(--pa)", zIndex: 60, transition: "width .1s linear" }} />

      {/* ===== White-label nav ===== */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        background: scrolled ? "rgba(251,250,248,.92)" : "transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        borderBottom: "1px solid " + (scrolled ? "rgba(0,0,0,.08)" : "transparent"),
        transition: "background .3s, border-color .3s",
      }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px", height: 74, display: "flex", alignItems: "center", gap: 28 }}>
          <a onClick={() => pScroll("prem-top")} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 40, height: 40, borderRadius: 10, background: "var(--pa)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Cormorant Garamond',serif", fontWeight: 700, fontSize: 21, letterSpacing: ".02em" }}>{monogram}</span>
            <span style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 600, fontSize: 23, letterSpacing: ".01em", color: scrolled ? "#16181c" : "#fff", transition: "color .3s" }}>{s.name}</span>
          </a>
          <nav className="prem-nav" style={{ display: "flex", gap: 26, marginLeft: "auto" }}>
            {navLinks.map(([id, label]) => (
              <a key={id} onClick={() => pScroll("p-" + id)} style={{ cursor: "pointer", fontSize: 14, fontWeight: 500, letterSpacing: ".01em", color: scrolled ? "#4a4f57" : "rgba(255,255,255,.85)", transition: "color .3s" }}>{label}</a>
            ))}
          </nav>
          <button onClick={() => pScroll("p-contact")} className="prem-cta" style={{ padding: "11px 22px", borderRadius: 2, background: "var(--pa)", color: "#fff", fontWeight: 600, fontSize: 13.5, letterSpacing: ".03em", textTransform: "uppercase" }}>Request a quote</button>
        </div>
      </header>

      {/* ===== Editorial hero ===== */}
      <section id="prem-top" style={{ position: "relative", marginTop: -74, minHeight: 720, background: "linear-gradient(120deg, " + accentDeep + " 0%, #0c0f12 75%)", color: "#fff", overflow: "hidden", display: "flex", alignItems: "center" }}>
        <div style={{ position: "absolute", inset: 0, opacity: .5, backgroundImage: "radial-gradient(circle at 78% 30%, " + accent + "55, transparent 45%)" }} />
        <div style={{ position: "absolute", inset: 0, opacity: .12, backgroundImage: "linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px)", backgroundSize: "60px 60px", maskImage: "linear-gradient(120deg, transparent 40%, black)" }} />
        <div className="prem-hero-grid" style={{ position: "relative", maxWidth: 1200, margin: "0 auto", padding: "120px 32px 90px", display: "grid", gridTemplateColumns: "1.15fr .85fr", gap: 56, alignItems: "center", width: "100%" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12.5, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(255,255,255,.7)", fontWeight: 600 }}>
              <span style={{ width: 28, height: 1, background: "var(--pa)" }} /> {s.type} · Est. {s.since} · {c.name}
            </div>
            <h1 style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 600, fontSize: "clamp(44px, 6vw, 78px)", lineHeight: 1.02, letterSpacing: "-.01em", marginTop: 22 }}>{copy.tagline}</h1>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: "rgba(255,255,255,.82)", marginTop: 24, maxWidth: 520 }}>{copy.lede}</p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <button onClick={() => pScroll("p-contact")} style={{ padding: "15px 30px", background: "var(--pa)", color: "#fff", fontWeight: 600, fontSize: 14, letterSpacing: ".03em", textTransform: "uppercase", borderRadius: 2 }}>Request a quote</button>
              <button onClick={() => pScroll("p-collections")} style={{ padding: "15px 30px", background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.3)", fontWeight: 600, fontSize: 14, letterSpacing: ".03em", textTransform: "uppercase", borderRadius: 2 }}>View collections</button>
            </div>
            <div style={{ display: "flex", gap: 40, marginTop: 52, flexWrap: "wrap" }}>
              {[[x.capacity.split(" ")[0] + (x.capacity.includes("MT") ? " MT" : x.capacity.includes("m") ? " m" : ""), "Annual capacity"], [x.markets.length + " markets", "Export reach"], [x.years + " years", "Of craft"]].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 34, fontWeight: 600 }}>{v}</div>
                  <div style={{ fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", color: "rgba(255,255,255,.6)", marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* hero showpiece */}
          <div className="prem-hero-art" style={{ position: "relative", aspectRatio: "4/5", borderRadius: 4, overflow: "hidden", border: "1px solid rgba(255,255,255,.14)" }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, " + accent + "33, rgba(255,255,255,.03))" }} />
            <div style={{ position: "absolute", inset: 0, opacity: .5, backgroundImage: "linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px)", backgroundSize: "30px 30px" }} />
            <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14 }}>
              <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 120, fontWeight: 600, color: "rgba(255,255,255,.9)", lineHeight: 1 }}>{monogram}</span>
              <span style={{ fontSize: 13, letterSpacing: ".24em", textTransform: "uppercase", color: "rgba(255,255,255,.6)" }}>{copy.word}</span>
            </div>
            <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 11.5, color: "rgba(255,255,255,.6)", letterSpacing: ".05em" }}>
              <span className="mono">{domain}</span>
              {s.verified && <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="shield-check" size={13} style={{ color: "var(--pa)" }} /> Verified</span>}
            </div>
          </div>
        </div>
      </section>

      {/* ===== Certification marquee ===== */}
      <div style={{ borderBottom: "1px solid rgba(0,0,0,.08)", background: "#fff" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "22px 32px", display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
          <span style={{ fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "#9aa0a8", fontWeight: 600 }}>Certified to</span>
          <div style={{ display: "flex", gap: 28, flexWrap: "wrap", alignItems: "center" }}>
            {s.certs.map(cert => (
              <span key={cert} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'Cormorant Garamond',serif", fontSize: 21, fontWeight: 600, color: "#2a2e34" }}>
                <Icon name="award" size={17} style={{ color: "var(--pa)" }} /> {cert}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* ===== Collections (products) ===== */}
      <section id="p-collections" style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
        <PremHead eyebrow="The collection" title="Products engineered to specification" />
        <div className="prem-prod-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28, marginTop: 48 }}>
          {products.map(p => (
            <a key={p.id} onClick={() => nav("product", { slug: p.slug })} className="prem-prod" style={{ cursor: "pointer", display: "block" }}>
              <div style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden", borderRadius: 3, background: accent + "0e", border: "1px solid rgba(0,0,0,.06)" }}>
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name={AM.catById[p.cat].icon} size={56} sw={1} style={{ color: accent + "99" }} />
                </div>
                <span className="mono" style={{ position: "absolute", top: 12, left: 12, fontSize: 10.5, color: "#9aa0a8", letterSpacing: ".05em" }}>{p.sku}</span>
              </div>
              <div style={{ marginTop: 18 }}>
                <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 25, fontWeight: 600, lineHeight: 1.15 }}>{p.name}</h3>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 12, paddingTop: 14, borderTop: "1px solid rgba(0,0,0,.1)" }}>
                  <span style={{ fontSize: 19, fontWeight: 600 }}>{fmtPrice(p.priceUSD, currency)} <span style={{ fontSize: 13, color: "#9aa0a8", fontWeight: 400 }}>/ {p.unit}</span></span>
                  <span className="prem-link" style={{ fontSize: 13, fontWeight: 600, letterSpacing: ".03em", textTransform: "uppercase", color: "var(--pa)", display: "inline-flex", alignItems: "center", gap: 6 }}>Inquire <Icon name="arrow-up-right" size={15} /></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* ===== Capabilities (big numbers) ===== */}
      <section id="p-capabilities" style={{ background: "#0c0f12", color: "#fff" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
          <PremHead eyebrow="Capabilities" title="Built for serious volume" dark />
          <div className="prem-cap-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0, marginTop: 52 }}>
            {[[x.capacity, "Production capacity"], [x.leadTime, "Standard lead time"], [x.onTime + "%", "On-time delivery"], [x.reorder + "%", "Buyer reorder rate"]].map(([v, l], i) => (
              <div key={l} style={{ padding: "8px 28px", borderLeft: i ? "1px solid rgba(255,255,255,.14)" : "none" }}>
                <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 40, fontWeight: 600, lineHeight: 1.05 }}>{v}</div>
                <div style={{ fontSize: 12.5, letterSpacing: ".08em", textTransform: "uppercase", color: "rgba(255,255,255,.55)", marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
          <div className="prem-terms" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28, marginTop: 64 }}>
            {[["credit-card", "Payment terms", x.payment.join(" · ")], ["ship", "Incoterms", x.incoterms.join(" · ")], ["settings-2", "Customization", x.oem ? "OEM & ODM available" : "Standard catalogue"]].map(([ic, t, v]) => (
              <div key={t} style={{ paddingTop: 22, borderTop: "1px solid rgba(255,255,255,.16)" }}>
                <Icon name={ic} size={22} sw={1.4} style={{ color: "var(--pa)" }} />
                <div style={{ fontSize: 12.5, letterSpacing: ".08em", textTransform: "uppercase", color: "rgba(255,255,255,.55)", marginTop: 14 }}>{t}</div>
                <div style={{ fontSize: 16, fontWeight: 500, marginTop: 5 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== About split ===== */}
      <section id="p-about" style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
        <div className="prem-about" style={{ display: "grid", gridTemplateColumns: ".85fr 1.15fr", gap: 64, alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "1/1", borderRadius: 4, overflow: "hidden", background: "linear-gradient(150deg, " + accent + "1c, " + accentDeep + "12)", border: "1px solid rgba(0,0,0,.07)" }}>
            <div style={{ position: "absolute", inset: 0, opacity: .35, backgroundImage: "linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px)", backgroundSize: "34px 34px" }} />
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="building-2" size={72} sw={1} style={{ color: accent + "aa" }} />
            </div>
          </div>
          <div>
            <PremHead eyebrow="Our story" title={"A house of " + copy.word.toLowerCase()} />
            <p style={{ fontSize: 17, lineHeight: 1.75, color: "#3a3f47", marginTop: 24 }}>{s.bio}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 28 }}>
              {x.why.map(w => (
                <div key={w} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--pa)", marginTop: 8, flexShrink: 0 }} />
                  <span style={{ fontSize: 14.5, color: "#3a3f47", lineHeight: 1.5 }}>{w}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ===== Testimonial spotlight ===== */}
      {reviews.length > 0 && (
        <section id="p-clients" style={{ background: accent + "0c", borderTop: "1px solid rgba(0,0,0,.06)", borderBottom: "1px solid rgba(0,0,0,.06)" }}>
          <div style={{ maxWidth: 920, margin: "0 auto", padding: "96px 32px", textAlign: "center" }}>
            <Icon name="quote" size={40} sw={1.2} style={{ color: "var(--pa)" }} />
            <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: "clamp(26px,3.4vw,40px)", fontWeight: 500, lineHeight: 1.25, marginTop: 20, color: "#1a1d22" }}>"{reviews[0].text}"</p>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginTop: 28 }}>
              <span style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--pa)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 15 }}>{reviews[0].buyer.split(" ").map(w => w[0]).slice(0, 2).join("")}</span>
              <div style={{ textAlign: "left" }}>
                <div style={{ fontWeight: 700, fontSize: 15 }}>{reviews[0].buyer}</div>
                <div style={{ fontSize: 13, color: "#7a808a", display: "flex", alignItems: "center", gap: 6 }}><Flag code={reviews[0].country} size={12} /> {AM.countryByCode[reviews[0].country].name}</div>
              </div>
            </div>
            <div style={{ display: "inline-flex", gap: 32, marginTop: 44, padding: "20px 36px", background: "#fff", borderRadius: 4, boxShadow: "var(--sh-sm)" }}>
              {[[s.rating, "Rating"], [s.reviews, "Reviews"], [x.transactions, "Orders"]].map(([v, l]) => (
                <div key={l} style={{ textAlign: "center" }}>
                  <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 600 }}>{v}</div>
                  <div style={{ fontSize: 11.5, letterSpacing: ".08em", textTransform: "uppercase", color: "#9aa0a8" }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ===== Contact ===== */}
      <section id="p-contact" style={{ background: "#0c0f12", color: "#fff" }}>
        <div className="prem-contact" style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <PremHead eyebrow="Get in touch" title="Let's discuss your requirement" dark />
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "rgba(255,255,255,.72)", marginTop: 22, maxWidth: 420 }}>
              Share your specification and target volume. Our team replies within {s.responseTime.replace("<", "under")} and prepares a formal quotation.
            </p>
            <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 16 }}>
              {[["map-pin", c.name + " — Head office"], ["clock", "Mon–Fri · 08:00–17:00"], ["globe", domain], ["zap", s.responseRate + "% response · replies " + s.responseTime]].map(([ic, v]) => (
                <div key={v} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 15 }}>
                  <Icon name={ic} size={18} style={{ color: "var(--pa)", flexShrink: 0 }} /> <span style={{ color: "rgba(255,255,255,.85)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
          <PremiumInquiry supplier={s} showToast={showToast} accent={accent} />
        </div>
      </section>

      {/* ===== White-label footer ===== */}
      <footer style={{ background: "#08090b", color: "rgba(255,255,255,.6)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 32px 32px" }}>
          <div className="prem-foot" style={{ display: "flex", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
            <div style={{ maxWidth: 300 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 38, height: 38, borderRadius: 9, background: "var(--pa)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Cormorant Garamond',serif", fontWeight: 700, fontSize: 19 }}>{monogram}</span>
                <span style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 600, fontSize: 21, color: "#fff" }}>{s.name}</span>
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.6, marginTop: 16 }}>{s.type} · {c.name}. {s.tags.slice(0, 3).join(" · ")}.</p>
            </div>
            <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
              <div>
                <div style={{ fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(255,255,255,.4)", marginBottom: 14 }}>Explore</div>
                {navLinks.map(([id, l]) => <div key={id} onClick={() => pScroll("p-" + id)} style={{ cursor: "pointer", fontSize: 14, marginBottom: 9 }}>{l}</div>)}
              </div>
              <div>
                <div style={{ fontSize: 11.5, letterSpacing: ".12em", textTransform: "uppercase", color: "rgba(255,255,255,.4)", marginBottom: 14 }}>Contact</div>
                <div style={{ fontSize: 14, marginBottom: 9 }} className="mono">{domain}</div>
                <div style={{ fontSize: 14, marginBottom: 9 }}>+{c.code === "KE" ? "254" : c.code === "ZA" ? "27" : "20"} ··· ··· ···</div>
              </div>
            </div>
          </div>
          <div style={{ borderTop: "1px solid rgba(255,255,255,.1)", marginTop: 40, paddingTop: 22, fontSize: 12.5 }}>
            © 2026 {s.name}. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
}

function PremHead({ eyebrow, title, dark }) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", fontWeight: 600, color: "var(--pa)" }}>
        <span style={{ width: 24, height: 1, background: "var(--pa)" }} /> {eyebrow}
      </div>
      <h2 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: "clamp(30px,4vw,46px)", fontWeight: 600, lineHeight: 1.08, letterSpacing: "-.01em", marginTop: 16, color: dark ? "#fff" : "#16181c" }}>{title}</h2>
    </div>
  );
}

function PremiumInquiry({ supplier, showToast, accent }) {
  const [sent, setSent] = useState(false);
  if (sent) return (
    <div style={{ background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.12)", borderRadius: 4, padding: 40, textAlign: "center" }}>
      <div style={{ width: 56, height: 56, borderRadius: "50%", background: accent, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><Icon name="check" size={28} /></div>
      <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 600, color: "#fff" }}>Thank you</h3>
      <p style={{ color: "rgba(255,255,255,.7)", marginTop: 8 }}>Your inquiry has reached {supplier.name}. Expect a reply {supplier.responseTime}.</p>
      <button onClick={() => setSent(false)} style={{ marginTop: 20, padding: "11px 22px", background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.3)", borderRadius: 2, fontWeight: 600, fontSize: 13.5 }}>Send another</button>
    </div>
  );
  const fld = { width: "100%", padding: "13px 15px", background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.16)", borderRadius: 3, color: "#fff", fontSize: 14.5, fontFamily: "var(--font)" };
  const lbl = { display: "block", fontSize: 12, letterSpacing: ".06em", textTransform: "uppercase", color: "rgba(255,255,255,.6)", marginBottom: 7, fontWeight: 600 };
  return (
    <form onSubmit={e => { e.preventDefault(); setSent(true); showToast && showToast("Inquiry sent to " + supplier.name); }}
      style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.12)", borderRadius: 4, padding: 32 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div><label style={lbl}>Name</label><input style={fld} required placeholder="Your name" /></div>
        <div><label style={lbl}>Company</label><input style={fld} required placeholder="Company" /></div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
        <div><label style={lbl}>Quantity</label><input style={fld} required placeholder="e.g. 50 MT" /></div>
        <div><label style={lbl}>Destination</label>
          <select style={fld} required defaultValue=""><option value="" disabled style={{ color: "#000" }}>Select…</option>{AM.COUNTRIES.map(co => <option key={co.code} style={{ color: "#000" }}>{co.name}</option>)}</select>
        </div>
      </div>
      <div style={{ marginTop: 16 }}><label style={lbl}>Message</label><textarea style={{ ...fld, resize: "vertical" }} rows="3" defaultValue={"We'd like to request a quotation. Please share pricing, lead time and terms."} /></div>
      <button type="submit" style={{ width: "100%", marginTop: 20, padding: "15px", background: accent, color: "#fff", fontWeight: 600, fontSize: 14, letterSpacing: ".04em", textTransform: "uppercase", borderRadius: 2 }}>Send inquiry</button>
    </form>
  );
}

/* ===== Preview switch (only AfricaMart-aware control on store routes) ===== */
function StorePreviewSwitch({ supplier, variant, nav }) {
  const isPrem = variant === "premium";
  return (
    <div style={{ position: "fixed", bottom: 18, left: "50%", transform: "translateX(-50%)", zIndex: 65, display: "flex", alignItems: "center", gap: 4, background: "rgba(13,27,42,.92)", backdropFilter: "blur(8px)", borderRadius: 999, padding: 4, boxShadow: "var(--sh-lg)", border: "1px solid rgba(255,255,255,.1)" }}>
      <span style={{ fontSize: 11, color: "rgba(255,255,255,.55)", padding: "0 8px 0 12px", letterSpacing: ".04em", whiteSpace: "nowrap" }}>Storefront</span>
      <button onClick={() => nav("store", { slug: supplier.slug, variant: "standard" })} style={{ padding: "7px 14px", borderRadius: 999, fontSize: 12.5, fontWeight: 600, color: !isPrem ? "var(--navy-900)" : "rgba(255,255,255,.8)", background: !isPrem ? "var(--gold-500)" : "transparent" }}>Standard</button>
      <button onClick={() => nav("store", { slug: supplier.slug, variant: "premium" })} style={{ padding: "7px 14px", borderRadius: 999, fontSize: 12.5, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 5, color: isPrem ? "var(--navy-900)" : "rgba(255,255,255,.8)", background: isPrem ? "var(--gold-500)" : "transparent" }}>
        <Icon name="crown" size={13} /> Premium
      </button>
    </div>
  );
}

Object.assign(window, { PremiumStorePage, PremHead, PremiumInquiry, StorePreviewSwitch, premiumCopy, shade, pScroll });