/* ============================================================
   AfricaMart — "Sell on AfricaMart" supplier onboarding landing
   ============================================================ */
function SellPage({ nav }) {
  const goRegister = () => nav("auth", { mode: "register", role: "supplier" });

  const steps = [
    { icon: "user-plus", t: "Create your free account", d: "Sign up in under a minute — no setup fees, no contracts." },
    { icon: "store", t: "Get your branded store page", d: "Your store goes live instantly at africamart.co/supplier/your-company-name." },
    { icon: "package", t: "List your products", d: "Add products, MOQs and pricing — our AI helps write compelling listings." },
    { icon: "messages-square", t: "Start getting inquiries", d: "Buyers across 54 countries can find, message and request quotes from you right away." },
  ];

  const perks = [
    { icon: "badge-check", t: "Verified seller badge", d: "Get verified and stand out to serious buyers with a trust badge on your storefront." },
    { icon: "globe", t: "Reach all of Africa", d: "Your listings are visible to " + AM.STATS.buyers + "+ buyers across all 54 African countries." },
    { icon: "sparkles", t: "AI-matched RFQs", d: "Get matched automatically to relevant buyer RFQs and respond with quotes in one click." },
    { icon: "shield-check", t: "Trade assurance", d: "Trade Assurance protects both sides of every order, end-to-end." },
    { icon: "trending-up", t: "Grow with upgrades", d: "Start free, then unlock a premium white-label storefront as you scale." },
    { icon: "zap", t: "Live in minutes", d: "No approval queue to get started — list your first product the moment you sign up." },
  ];

  return (
    <div className="route-anim">
      {/* HERO */}
      <section style={{ background: "linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 55%, var(--navy-600) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: .5,
          backgroundImage: "linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)",
          backgroundSize: "44px 44px" }} />
        <div style={{ position: "absolute", top: -120, right: -80, width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.22), transparent 70%)" }} />
        <div className="wrap" style={{ position: "relative", padding: "76px 24px 88px", textAlign: "center" }}>
          <span className="ai-chip" style={{ background: "rgba(255,255,255,.1)", color: "var(--gold-400)", margin: "0 auto" }}>
            <Icon name="zap" size={13} /> Free to join — no setup fees
          </span>
          <h1 style={{ fontSize: "clamp(34px, 5.5vw, 60px)", lineHeight: 1.05, marginTop: 18, color: "#fff", maxWidth: 760, margin: "18px auto 0" }}>
            Take your business online — <span style={{ color: "var(--gold-500)" }}>in minutes</span>.
          </h1>
          <p style={{ fontSize: 18, color: "var(--navy-200)", marginTop: 18, maxWidth: 620, lineHeight: 1.6, margin: "18px auto 0" }}>
            Open a branded storefront, list your products, and start getting inquiries from {AM.STATS.buyers}+ verified B2B buyers across all 54 African countries.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
            <button className="btn btn-gold btn-lg" onClick={goRegister}>Start selling — it's free</button>
            <button className="btn btn-ghost-light btn-lg" onClick={() => document.getElementById("sell-how")?.scrollIntoView({ behavior: "smooth" })}>See how it works</button>
          </div>
          <p style={{ marginTop: 18, fontSize: 13.5, color: "var(--navy-300)" }}>
            Your storefront: <code className="mono" style={{ color: "var(--gold-400)" }}>africamart.co/supplier/your-company-name</code>
          </p>
        </div>
      </section>

      {/* STATS BAR */}
      <section style={{ background: "var(--navy-900)", borderTop: "1px solid rgba(255,255,255,.07)" }}>
        <div className="wrap stats-bar" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", padding: "26px 24px" }}>
          {[["buyers", "Active buyers waiting to source"], ["countries", "Countries you can sell to"], ["suppliers", "Suppliers already selling"], ["products", "Products listed"]].map(([k, label], i) => (
            <div key={k} style={{ textAlign: "center", borderLeft: i ? "1px solid rgba(255,255,255,.1)" : "none" }}>
              <div style={{ fontSize: 32, fontWeight: 800, color: "var(--gold-500)", letterSpacing: "-.02em" }}>{AM.STATS[k]}</div>
              <div style={{ fontSize: 13, color: "var(--navy-300)", marginTop: 2 }}>{label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="sell-how" className="section wrap">
        <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
          <span className="eyebrow">How it works</span>
          <h2 style={{ fontSize: 34, marginTop: 10 }}>From sign-up to your first inquiry, in minutes</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: 40 }} className="cat-grid">
          {steps.map((s, i) => (
            <div key={s.t} className="card" style={{ padding: 22, position: "relative" }}>
              <div style={{ position: "absolute", top: 18, right: 18, fontSize: 13, fontWeight: 800, color: "var(--navy-100)" }}>{String(i + 1).padStart(2, "0")}</div>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--gold-100)", color: "var(--gold-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
                <Icon name={s.icon} size={22} sw={1.7} />
              </div>
              <h3 style={{ fontSize: 16 }}>{s.t}</h3>
              <p className="muted" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* WHY SELL HERE */}
      <section style={{ background: "var(--navy-50)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="section wrap">
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
            <span className="eyebrow">Why sellers choose AfricaMart</span>
            <h2 style={{ fontSize: 34, marginTop: 10 }}>Everything you need to sell across Africa</h2>
          </div>
          <div className="card-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 40 }}>
            {perks.map(p => (
              <div key={p.t} className="card" style={{ padding: 24, background: "#fff" }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--gold-100)", color: "var(--gold-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
                  <Icon name={p.icon} size={22} sw={1.7} />
                </div>
                <h3 style={{ fontSize: 16 }}>{p.t}</h3>
                <p className="muted" style={{ fontSize: 13.5, marginTop: 6, lineHeight: 1.6 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="wrap section">
        <div style={{ background: "linear-gradient(120deg, var(--navy-800), var(--navy-600))", borderRadius: 22, padding: "clamp(32px,5vw,56px)", display: "flex", gap: 28, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", right: -60, bottom: -60, width: 280, height: 280, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.18), transparent 70%)" }} />
          <div style={{ position: "relative", maxWidth: 540 }}>
            <h2 style={{ color: "#fff", fontSize: 32 }}>Ready to take your business online?</h2>
            <p style={{ color: "var(--navy-200)", fontSize: 16, marginTop: 12, lineHeight: 1.55 }}>Create your free account now — your storefront and first listing can be live before your coffee gets cold.</p>
          </div>
          <div style={{ position: "relative", display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-gold btn-lg" onClick={goRegister}>Start selling — it's free</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SellPage });