/* ============================================================
   AfricaMart — SERVICE storefronts (logistics, CHA, consulting…)
   ServiceStorePage = standard (AfricaMart-branded)
   ============================================================ */

/* ---------- shared service inquiry (standard / light) ---------- */
function ServiceInquiry({ supplier, showToast }) {
  const [sent, setSent] = useState(false);
  if (sent) return (
    <div className="card route-anim" style={{ padding: 40, textAlign: "center" }}>
      <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--green-50)", color: "var(--green-600)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><Icon name="check" size={30} /></div>
      <h3 style={{ fontSize: 20 }}>Request sent to {supplier.name}</h3>
      <p className="muted" style={{ marginTop: 8 }}>They typically reply {supplier.responseTime}. You'll get an email and can track it in your dashboard.</p>
      <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => setSent(false)}>Send another</button>
    </div>
  );
  return (
    <form className="card" style={{ padding: 28 }} onSubmit={e => { e.preventDefault(); setSent(true); showToast && showToast("Request sent to " + supplier.name); }}>
      <h3 style={{ fontSize: 19, marginBottom: 4 }}>Request a quote</h3>
      <p className="muted" style={{ fontSize: 13.5, marginBottom: 18 }}>from {supplier.name} · {supplier.serviceType}</p>
      <div style={{ marginBottom: 14 }}><label className="field-label">Service needed</label>
        <select className="select" required defaultValue="">
          <option value="" disabled>Select a service…</option>
          {supplier.services.map(sv => <option key={sv.name}>{sv.name}</option>)}
        </select>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div><label className="field-label">Origin / from</label><input className="input" placeholder="e.g. Shanghai" /></div>
        <div><label className="field-label">Destination / to</label>
          <select className="select" defaultValue=""><option value="" disabled>Select…</option>{AM.COUNTRIES.map(co => <option key={co.code}>{co.name}</option>)}</select>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
        <div><label className="field-label">Scope / cargo</label><input className="input" placeholder="e.g. 2× 40ft FCL" /></div>
        <div><label className="field-label">Timeline</label><input className="input" type="date" /></div>
      </div>
      <div style={{ marginTop: 14 }}><label className="field-label">Details</label><textarea className="textarea" rows="3" defaultValue="Please share your rate, lead time and what's included." /></div>
      <button type="submit" className="btn btn-gold btn-block btn-lg" style={{ marginTop: 18 }}><Icon name="send" size={16} /> Send request</button>
    </form>
  );
}

/* ---------- standard service sections ---------- */
function ServiceList({ supplier, showToast }) {
  return (
    <div className="svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
      {supplier.services.map(sv => (
        <div key={sv.name} className="card" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 44, height: 44, borderRadius: 11, background: supplier.color + "16", color: supplier.color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={sv.icon} size={22} sw={1.6} /></span>
            <h3 style={{ fontSize: 16.5, lineHeight: 1.25 }}>{sv.name}</h3>
          </div>
          <p className="muted" style={{ fontSize: 14, lineHeight: 1.55 }}>{sv.desc}</p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {sv.includes.map(inc => <span key={inc} className="badge badge-gray"><Icon name="check" size={11} /> {inc}</span>)}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
            <div><div className="muted" style={{ fontSize: 11.5 }}>Pricing</div><div style={{ fontWeight: 700, fontSize: 14 }}>{sv.price}</div></div>
            <div><div className="muted" style={{ fontSize: 11.5 }}>Turnaround</div><div style={{ fontWeight: 700, fontSize: 14 }}>{sv.turnaround}</div></div>
            <button className="btn btn-gold btn-sm" style={{ marginLeft: "auto" }} onClick={() => showToast("Quote requested: " + sv.name)}>Get a quote</button>
          </div>
        </div>
      ))}
    </div>
  );
}

function ServiceCoverage({ supplier }) {
  return (
    <div className="card" style={{ padding: 24 }}>
      <div style={{ display: "flex", gap: 28, flexWrap: "wrap", alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontSize: 30, fontWeight: 800, color: "var(--navy-800)" }}>{supplier.coverage.length} countries</div>
          <div className="muted" style={{ fontSize: 13.5, marginTop: 2 }}>Active service coverage</div>
        </div>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          {supplier.coverage.map(code => (
            <span key={code} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14.5, fontWeight: 500, padding: "8px 14px", border: "1px solid var(--border)", borderRadius: 999 }}>
              <Flag code={code} size={15} /> {AM.countryByCode[code].name}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function ServiceProcess({ supplier }) {
  return (
    <div className="proc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
      {supplier.process.map((p, i) => (
        <div key={p.title} className="card" style={{ padding: 22, position: "relative" }}>
          <div style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--navy-800)", color: "var(--gold-400)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 16 }}>{i + 1}</div>
          <h3 style={{ fontSize: 15.5, marginTop: 14 }}>{p.title}</h3>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.55 }}>{p.desc}</p>
        </div>
      ))}
    </div>
  );
}

function ServiceCredentials({ supplier }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))", gap: 16 }}>
      {supplier.credentials.map(cr => (
        <div key={cr} className="card" style={{ padding: 20, display: "flex", gap: 14, alignItems: "center" }}>
          <div style={{ width: 46, height: 46, borderRadius: 11, background: "var(--blue-50)", color: "var(--blue-600)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="shield-check" size={23} sw={1.7} /></div>
          <div><div style={{ fontWeight: 700, fontSize: 14.5 }}>{cr}</div><div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>Verified credential</div></div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   STANDARD service storefront (AfricaMart-branded)
   ============================================================ */
function ServiceStorePage({ nav, params, showToast }) {
  const s = AM.supplierBySlug[params.slug] || AM.SERVICE_SUPPLIERS[0];
  const c = AM.countryByCode[s.country];
  const [stuck, setStuck] = useState(false);
  const SECS = ["services", "coverage", "process", "credentials", "reviews", "contact"];
  const LABELS = { services: "Services", coverage: "Coverage", process: "How it works", credentials: "Credentials", reviews: "Reviews", contact: "Contact" };
  const active = useScrollSpy(SECS);
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 360);
    onScroll(); window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const initials = s.name.split(" ").map(w => w[0]).slice(0, 3).join("");
  const goContact = () => scrollToSec("contact");

  return (
    <div className="route-anim store-root">
      {/* sticky compact bar */}
      <div style={{ position: "sticky", top: "var(--nav-h)", zIndex: 40, transform: stuck ? "translateY(0)" : "translateY(-110%)", opacity: stuck ? 1 : 0, transition: "transform .28s cubic-bezier(.16,1,.3,1), opacity .2s", background: "rgba(255,255,255,.94)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--border)", boxShadow: "var(--sh-sm)" }}>
        <div className="wrap" style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 24px" }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: s.color + "1a", color: s.color, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 13, flexShrink: 0 }}>{initials}</div>
          <div style={{ fontWeight: 700, fontSize: 14.5, display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}><span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</span>{s.verified && <Icon name="badge-check" size={15} style={{ color: "var(--gold-600)", flexShrink: 0 }} />}</div>
          <span className="stuck-rating muted" style={{ fontSize: 13 }}>{s.serviceType}</span>
          <div style={{ marginLeft: "auto" }}><button className="btn btn-gold btn-sm" onClick={goContact}><Icon name="mail" size={15} /> Request a quote</button></div>
        </div>
      </div>

      {/* hero */}
      <div className="store-hero" style={{ height: 240, background: "linear-gradient(115deg, " + s.color + " 0%, var(--navy-700) 62%, var(--navy-800) 100%)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: .4, backgroundImage: "linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px)", backgroundSize: "44px 44px" }} />
        <div style={{ position: "absolute", top: -90, right: 60, width: 320, height: 320, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.18), transparent 70%)" }} />
        {s.verified && <div style={{ position: "absolute", top: 20, left: 24, display: "inline-flex", alignItems: "center", gap: 7, background: "rgba(232,184,75,.16)", border: "1px solid rgba(232,184,75,.4)", color: "var(--gold-400)", padding: "6px 13px", borderRadius: 999, fontSize: 12.5, fontWeight: 700, backdropFilter: "blur(4px)" }}><Icon name="shield-check" size={14} /> AfricaMart Verified Service Provider</div>}
        <div style={{ position: "absolute", right: 36, bottom: 28, display: "inline-flex", alignItems: "center", gap: 8, color: "rgba(255,255,255,.9)", fontSize: 13.5, fontWeight: 600 }}><Icon name={s.icon} size={18} style={{ color: "var(--gold-400)" }} /> {s.serviceType}</div>
      </div>

      <div className="wrap" style={{ padding: "0 24px" }}>
        {/* header */}
        <div className="card store-header" style={{ marginTop: -64, padding: 24, display: "flex", gap: 22, alignItems: "flex-start", flexWrap: "wrap", position: "relative", zIndex: 2 }}>
          <div style={{ width: 104, height: 104, borderRadius: 20, background: s.color + "22", color: s.color, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 34, flexShrink: 0, border: "4px solid #fff", boxShadow: "var(--sh-md)" }}>{initials}</div>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <h1 style={{ fontSize: 27, letterSpacing: "-.02em" }}>{s.name}</h1>
              {s.verified && <span className="badge badge-verified"><Icon name="badge-check" size={12} /> Verified</span>}
              <TierBadge tier={s.tier} />
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 11, flexWrap: "wrap", fontSize: 14, color: "var(--ink-600)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name={s.icon} size={15} style={{ color: "var(--ink-400)" }} /> {s.serviceType}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Flag code={s.country} size={15} /> {c.name}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Stars value={s.rating} /> <b style={{ color: "var(--ink-900)" }}>{s.rating}</b> <span className="muted">({s.reviews})</span></span>
              <span className="badge badge-green"><Icon name="zap" size={12} /> Replies {s.responseTime}</span>
            </div>
            <p className="muted" style={{ marginTop: 12, fontSize: 14, lineHeight: 1.55, maxWidth: 640 }}>{s.bio}</p>
          </div>
          <div className="store-cta" style={{ display: "flex", flexDirection: "column", gap: 10, minWidth: 210 }}>
            <button className="btn btn-gold btn-block" onClick={goContact}><Icon name="mail" size={16} /> Request a quote</button>
            <button className="btn btn-navy btn-block" onClick={goContact}><Icon name="message-square" size={16} /> Message provider</button>
          </div>
        </div>

        {/* ribbon */}
        <div className="card store-ribbon" style={{ marginTop: 14, padding: 0, display: "grid", gridTemplateColumns: "repeat(6,1fr)", overflow: "hidden" }}>
          {s.ribbon.map((r, i) => (
            <div key={r[1]} style={{ padding: "18px 14px", borderLeft: i ? "1px solid var(--border)" : "none", textAlign: "center" }}>
              <div style={{ fontSize: 21, fontWeight: 800, color: "var(--navy-800)", letterSpacing: "-.02em" }}>{r[0]}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>{r[1]}</div>
            </div>
          ))}
        </div>

        {/* nav */}
        <nav className="store-nav thin-scroll" style={{ position: "sticky", top: "var(--nav-h)", zIndex: 30, background: "var(--paper)", display: "flex", gap: 4, marginTop: 18, borderBottom: "1px solid var(--border)", overflowX: "auto" }}>
          {SECS.map(id => (
            <button key={id} onClick={() => scrollToSec(id)} style={{ padding: "14px 16px", fontWeight: 600, fontSize: 14.5, whiteSpace: "nowrap", color: active === id ? "var(--navy-800)" : "var(--ink-500)", borderBottom: "2.5px solid " + (active === id ? "var(--gold-500)" : "transparent"), marginBottom: -1 }}>{LABELS[id]}</button>
          ))}
        </nav>

        <StoreSection id="services" title="Services" sub={s.services.length + " services offered"}><ServiceList supplier={s} showToast={showToast} /></StoreSection>
        <StoreSection id="coverage" title="Coverage" sub="Where this provider operates"><ServiceCoverage supplier={s} /></StoreSection>
        <StoreSection id="process" title="How it works" sub="A clear path from request to delivery"><ServiceProcess supplier={s} /></StoreSection>
        <StoreSection id="credentials" title="Credentials & licenses" sub="Verified with AfricaMart"><ServiceCredentials supplier={s} /></StoreSection>
        <StoreReviews supplier={s} />
        <StoreSection id="contact" title="Contact this provider" sub={"Replies " + s.responseTime + " · " + s.responseRate + "% response rate"}>
          <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 28, alignItems: "start" }}>
            <ServiceInquiry supplier={s} showToast={showToast} />
            <div className="card" style={{ padding: 20 }}>
              <h4 style={{ fontSize: 14, marginBottom: 14 }}>Provider details</h4>
              {[["briefcase", s.type], ["map-pin", c.name + " · HQ"], ["clock", "Mon–Fri, 08:00–17:00"], ["zap", s.responseRate + "% response · " + s.responseTime], ["calendar-check", "On AfricaMart since " + s.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>
        </StoreSection>
        <div style={{ height: 48 }} />
      </div>

      <button onClick={goContact} title="Chat" style={{ position: "fixed", left: 18, bottom: 18, zIndex: 55, height: 50, borderRadius: 999, padding: "0 20px", background: "var(--navy-800)", color: "#fff", boxShadow: "var(--sh-lg)", display: "flex", alignItems: "center", gap: 9, fontWeight: 600, fontSize: 14 }}><Icon name="message-circle" size={20} style={{ color: "var(--gold-400)" }} /> Chat</button>
    </div>
  );
}

Object.assign(window, { ServiceInquiry, ServiceList, ServiceCoverage, ServiceProcess, ServiceCredentials, ServiceStorePage });