/* ============================================================
   AfricaMart — PREMIUM white-label SERVICE storefront
   (paid · zero AfricaMart branding · agency/consultancy feel)
   ============================================================ */
function PremiumServiceInquiry({ 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 request 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("Request 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={{ marginTop: 16 }}><label style={lbl}>Service needed</label>
        <select style={fld} required defaultValue=""><option value="" disabled style={{ color: "#000" }}>Select a service…</option>{supplier.services.map(sv => <option key={sv.name} style={{ color: "#000" }}>{sv.name}</option>)}</select>
      </div>
      <div style={{ marginTop: 16 }}><label style={lbl}>Brief / requirement</label><textarea style={{ ...fld, resize: "vertical" }} rows="3" defaultValue="Please share your scope, route/location and timeline." /></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 request</button>
    </form>
  );
}

function PremiumServiceStorePage({ nav, params, showToast }) {
  const s = AM.supplierBySlug[params.slug] || AM.SERVICE_SUPPLIERS[0];
  const c = AM.countryByCode[s.country];
  const copy = s.premium || { tagline: s.serviceType + " for Africa.", lede: s.bio, word: s.serviceType };
  const reviews = AM.REVIEWS[s.id] || [];
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  const accent = s.color, 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 = [["services", "Services"], ["coverage", "Coverage"], ["process", "Process"], ["clients", "Clients"], ["contact", "Contact"]];

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

      {/* 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("psvc-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 }}>{monogram}</span>
            <span style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 600, fontSize: 23, 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, 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>

      {/* hero */}
      <section id="psvc-top" style={{ position: "relative", marginTop: -74, minHeight: 680, 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.serviceType} · Est. {s.since} · {c.name}</div>
            <h1 style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 600, fontSize: "clamp(44px, 6vw, 76px)", lineHeight: 1.03, 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-services")} 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 }}>Our services</button>
            </div>
            <div style={{ display: "flex", gap: 40, marginTop: 52, flexWrap: "wrap" }}>
              {s.ribbon.slice(0, 3).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>
          <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 }}>
              <Icon name={s.icon} size={88} sw={1} style={{ color: "rgba(255,255,255,.92)" }} />
              <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)" }}>
              <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)" }} /> Accredited</span>}
            </div>
          </div>
        </div>
      </section>

      {/* credentials 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 }}>Accredited by</span>
          <div style={{ display: "flex", gap: 28, flexWrap: "wrap", alignItems: "center" }}>
            {s.credentials.map(cr => <span key={cr} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'Cormorant Garamond',serif", fontSize: 20, fontWeight: 600, color: "#2a2e34" }}><Icon name="shield-check" size={16} style={{ color: "var(--pa)" }} /> {cr}</span>)}
          </div>
        </div>
      </div>

      {/* services */}
      <section id="p-services" style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
        <PremHead eyebrow="What we do" title="Services, end to end" />
        <div className="prem-svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 1, marginTop: 48, background: "rgba(0,0,0,.08)", border: "1px solid rgba(0,0,0,.08)" }}>
          {s.services.map(sv => (
            <div key={sv.name} style={{ background: "#fbfaf8", padding: 32 }}>
              <Icon name={sv.icon} size={28} sw={1.3} style={{ color: "var(--pa)" }} />
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 600, marginTop: 16, lineHeight: 1.15 }}>{sv.name}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "#4a4f57", marginTop: 10 }}>{sv.desc}</p>
              <div style={{ display: "flex", gap: 28, marginTop: 20, paddingTop: 18, borderTop: "1px solid rgba(0,0,0,.1)" }}>
                <div><div style={{ fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "#9aa0a8" }}>Pricing</div><div style={{ fontWeight: 600, fontSize: 15, marginTop: 3 }}>{sv.price}</div></div>
                <div><div style={{ fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "#9aa0a8" }}>Turnaround</div><div style={{ fontWeight: 600, fontSize: 15, marginTop: 3 }}>{sv.turnaround}</div></div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* coverage */}
      <section id="p-coverage" style={{ background: "#0c0f12", color: "#fff" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
          <PremHead eyebrow="Coverage" title={"Operating across " + s.coverage.length + " countries"} dark />
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 44 }}>
            {s.coverage.map(code => (
              <span key={code} style={{ display: "inline-flex", alignItems: "center", gap: 10, fontSize: 16, padding: "12px 20px", border: "1px solid rgba(255,255,255,.18)", borderRadius: 3 }}><Flag code={code} size={18} /> {AM.countryByCode[code].name}</span>
            ))}
          </div>
        </div>
      </section>

      {/* process */}
      <section id="p-process" style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 32px" }}>
        <PremHead eyebrow="How we work" title="A clear path, every time" />
        <div className="prem-proc" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 36, marginTop: 52 }}>
          {s.process.map((p, i) => (
            <div key={p.title} style={{ borderTop: "2px solid var(--pa)", paddingTop: 22 }}>
              <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 40, fontWeight: 600, color: "var(--pa)", lineHeight: 1 }}>0{i + 1}</div>
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 600, marginTop: 12 }}>{p.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "#4a4f57", marginTop: 8 }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* testimonial */}
      {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"], [s.clients, "Clients"]].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 scope your requirement" dark />
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "rgba(255,255,255,.72)", marginTop: 22, maxWidth: 420 }}>Tell us what you need handled. Our team replies within {s.responseTime.replace("<", "under")} with a tailored quote.</p>
            <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 16 }}>
              {[["briefcase", s.type], ["map-pin", c.name + " — Head office"], ["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>
          <PremiumServiceInquiry supplier={s} showToast={showToast} accent={accent} />
        </div>
      </section>

      {/* 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.serviceType} · {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>
            </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>
  );
}

Object.assign(window, { PremiumServiceInquiry, PremiumServiceStorePage });