// Auth.jsx, Login + Supplier dashboard + Buyer dashboard

const Login = ({ onNavigate }) => {
 const vp = useViewport();
 const [role, setRole] = useState("buyer");
 return (
  <div style={{ flex: 1, minHeight: vp.isTabletDown ? "auto" : 720, display: "flex", flexDirection: vp.isTabletDown ? "column" : "row", alignItems: "stretch" }}>
   <div style={{ flex: "1 1 0", padding: vp.isMobile ? "40px var(--pad-x)" : (vp.isTabletDown ? "56px 48px" : "64px 56px"), display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: vp.isTabletDown ? "100%" : 560 }}>
    <a href="#" onClick={e => { e.preventDefault(); onNavigate("home"); }} style={{ display: "inline-flex", alignItems: "center", border: 0, marginBottom: 40 }}>
     <img src="assets/logo-jvfood.svg" height="32" style={{ height: 32, width: "auto", display: "block" }} alt="JVFood"/>
    </a>
    <Eyebrow>Sign in</Eyebrow>
    <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 26 : 32, lineHeight: 1.2, color: "var(--jv-navy-800)" }}>Welcome back.</h1>
    <p style={{ marginTop: 8, fontSize: 14, color: "var(--color-fg-body)" }}>
     New to JVFood? <a href="#" style={{ color: "var(--jv-navy-800)", borderBottom: "1px solid var(--color-border)" }}>Create an account</a>
    </p>

    <div style={{ display: "flex", gap: 8, marginTop: 28, padding: 4, background: "var(--jv-ink-50)", borderRadius: 6, border: "1px solid var(--color-border)" }}>
     {[
      { id: "buyer", label: "I'm a buyer" },
      { id: "supplier", label: "I'm a supplier" },
     ].map(r => (
      <button key={r.id} onClick={() => setRole(r.id)}
       style={{ flex: 1, padding: "8px 12px", border: 0, background: role === r.id ? "#fff" : "transparent", boxShadow: role === r.id ? "0 1px 2px rgba(11,42,74,0.06)" : "none", borderRadius: 4, fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: role === r.id ? "var(--jv-navy-800)" : "var(--color-fg-body)", cursor: "pointer" }}>
       {r.label}
      </button>
     ))}
    </div>

    <form style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 24 }}>
     <Field label="Work email"><Input placeholder="you@company.com"/></Field>
     <Field label="Password"><Input type="password" placeholder="••••••••"/></Field>
     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
      <label style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--color-fg-body)" }}>
       <input type="checkbox" defaultChecked style={{ accentColor: "var(--jv-navy-800)" }}/>
       Remember me
      </label>
      <a href="#" style={{ fontSize: 13, color: "var(--jv-navy-800)", borderBottom: "1px solid var(--color-border)" }}>Forgot password?</a>
     </div>
     <Button variant="primary" size="lg" type="button" onClick={() => onNavigate(role === "buyer" ? "buyer-dash" : "supplier-dash")}>
      Sign in as {role === "buyer" ? "buyer" : "supplier"}
     </Button>
     <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12, color: "var(--color-fg-muted)", margin: "8px 0" }}>
      <div style={{ flex: 1, height: 1, background: "var(--color-border)" }}/>
      or
      <div style={{ flex: 1, height: 1, background: "var(--color-border)" }}/>
     </div>
     <Button variant="secondary" size="lg" type="button">Sign in with SSO</Button>
    </form>

    <div style={{ marginTop: 28, fontSize: 12, color: "var(--color-fg-muted)", lineHeight: 1.6 }}>
     By signing in you agree to JVFood's <a href="#" style={{ color: "var(--color-fg-body)", borderBottom: "1px solid var(--color-border)" }}>Terms</a> and <a href="#" style={{ color: "var(--color-fg-body)", borderBottom: "1px solid var(--color-border)" }}>Privacy policy</a>.
    </div>
   </div>

   {/* Right pane: testimonial / trust — hidden on mobile to save space */}
   {!vp.isMobile && (
    <div style={{ flex: "1 1 0", background: "var(--jv-navy-900)", color: "#fff", padding: vp.isTabletDown ? "48px var(--pad-x)" : "64px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
     <div style={{ maxWidth: 480 }}>
      <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)" }}>Trusted by</Eyebrow>
      <div style={{ display: "flex", gap: 32, marginTop: 16, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600, flexWrap: "wrap" }}>
       <span>大和水産</span>
       <span>NICHIREI</span>
       <span>丸紅</span>
       <span>MARUHA NICHIRO</span>
       <span>伊藤忠</span>
      </div>
      <blockquote style={{ marginTop: 48, fontSize: vp.isTabletDown ? 18 : 22, lineHeight: 1.45, color: "#fff", letterSpacing: "-0.005em", margin: "48px 0 0" }}>
       "We replaced three brokers with one JVFood Verified supplier. Lead time dropped from 38 days to 18, and we finally have the audit report on file."
      </blockquote>
      <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 12 }}>
       <div style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 600 }}>YT</div>
       <div>
        <div style={{ fontSize: 14, fontWeight: 500 }}>Yuki Tanaka</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.6)" }}>Procurement Manager · Tokyo Food Imports K.K.</div>
       </div>
      </div>
     </div>
    </div>
   )}
  </div>
 );
};

const DashShell = ({ user, onNavigate, items, active, children }) => {
 const vp = useViewport();
 const [navOpen, setNavOpen] = useState(false);
 const showInline = vp.isDesktop;

 const sidebarContent = (
  <>
   <div style={{ padding: "8px 12px 18px", borderBottom: "1px solid var(--color-divider)", marginBottom: 12 }}>
    <div style={{ fontSize: 12, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Signed in as</div>
    <div style={{ marginTop: 6, fontSize: 14, fontWeight: 600, color: "var(--jv-navy-800)" }}>{user.name}</div>
    <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 2 }}>{user.role}</div>
   </div>
   {items.map(it => (
    <button key={it.id}
     style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", border: 0, background: active === it.id ? "var(--jv-navy-50)" : "transparent", borderRadius: 4, fontFamily: "var(--font-sans)", fontSize: 14, color: active === it.id ? "var(--jv-navy-800)" : "var(--color-fg-body)", fontWeight: active === it.id ? 500 : 400, cursor: "pointer", textAlign: "left" }}>
     <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <Icon name={it.icon} size={16} color={active === it.id ? "var(--jv-navy-800)" : "var(--color-fg-muted)"}/>
      {it.label}
     </span>
     {it.badge && <Mono style={{ fontSize: 11, padding: "1px 6px", background: "var(--jv-accent-50)", color: "var(--jv-accent-700)", borderRadius: 999 }}>{it.badge}</Mono>}
    </button>
   ))}
   <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--color-divider)" }}>
    <button onClick={() => onNavigate("home")} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", border: 0, background: "transparent", fontSize: 13, color: "var(--color-fg-muted)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
     <Icon name="external" size={14}/>
     Back to marketplace
    </button>
   </div>
  </>
 );

 return (
  <div style={{ display: "grid", gridTemplateColumns: showInline ? "240px 1fr" : "1fr", minHeight: "calc(100vh - 64px)" }}>
   {showInline && (
    <aside style={{ background: "#fff", borderRight: "1px solid var(--color-border)", padding: "24px 16px", display: "flex", flexDirection: "column", gap: 4 }}>
     {sidebarContent}
    </aside>
   )}
   <main style={{ background: "var(--color-bg-soft)", padding: vp.isMobile ? "20px var(--pad-x)" : "32px var(--pad-x)", minWidth: 0 }}>
    {!showInline && (
     <div style={{ marginBottom: 20 }}>
      <Button variant="secondary" size="sm" leading="menu" onClick={() => setNavOpen(true)}>Dashboard menu</Button>
     </div>
    )}
    {children}
   </main>
   {!showInline && (
    <>
     <div className="jv-drawer-scrim" data-open={navOpen ? "true" : "false"} onClick={() => setNavOpen(false)}/>
     <aside className="jv-drawer" data-open={navOpen ? "true" : "false"}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 22px", borderBottom: "1px solid var(--color-border)" }}>
       <div style={{ fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>Dashboard</div>
       <button onClick={() => setNavOpen(false)} aria-label="Close" style={{ background: "transparent", border: 0, padding: 6, cursor: "pointer", color: "var(--color-fg-muted)" }}>
        <Icon name="x" size={20}/>
       </button>
      </div>
      <div style={{ padding: "16px 16px", display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
       {sidebarContent}
      </div>
     </aside>
    </>
   )}
  </div>
 );
};

const SupplierDashboard = ({ onNavigate, onRFQ }) => {
 const vp = useViewport();
 const items = [
  { id: "overview", label: "Overview", icon: "factory" },
  { id: "profile", label: "Company profile", icon: "shield-check" },
  { id: "products", label: "Products", icon: "package", badge: "12" },
  { id: "inquiries", label: "Inquiries", icon: "file-check", badge: "4" },
  { id: "rfqs", label: "Inbound RFQs", icon: "search", badge: "18" },
  { id: "trade", label: "Trade history", icon: "globe" },
  { id: "settings", label: "Settings", icon: "filter" },
 ];

 return (
  <DashShell
   user={{ name: "Mekong Seafood Export", role: "Supplier · Verified" }}
   onNavigate={onNavigate}
   items={items}
   active="overview">

   <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24, gap: 16, flexWrap: "wrap" }}>
    <div>
     <Eyebrow>Supplier dashboard</Eyebrow>
     <h1 style={{ marginTop: 8, fontSize: vp.isMobile ? 22 : 28, color: "var(--jv-navy-800)" }}>Welcome back, Mekong Seafood.</h1>
    </div>
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
     <Button variant="secondary" size="sm" trailing="external">{vp.isMobile ? "Profile" : "View public profile"}</Button>
     <Button variant="primary" size="sm">Add product</Button>
    </div>
   </div>

   <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "1.4fr 1fr" : "1fr", gap: 16, marginBottom: 16 }}>
    <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, padding: 24 }}>
     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
      <div>
       <Eyebrow>Profile completion</Eyebrow>
       <div style={{ marginTop: 8, display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
        <Mono style={{ fontSize: 36, color: "var(--jv-navy-800)" }}>78%</Mono>
        <span style={{ fontSize: 13, color: "var(--color-fg-muted)" }}>7 of 9 sections complete</span>
       </div>
      </div>
      <StatusPill tone="trust">Verified supplier</StatusPill>
     </div>
     <div style={{ height: 6, background: "var(--jv-ink-100)", borderRadius: 999, marginTop: 16, overflow: "hidden" }}>
      <div style={{ width: "78%", height: "100%", background: "var(--jv-trust-600)" }}/>
     </div>
     <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: vp.isMobile ? "1fr 1fr" : "repeat(3, 1fr)", gap: 8, fontSize: 13 }}>
      {[
       ["Company overview", true],
       ["Business registration", true],
       ["HACCP certificate", true],
       ["BRCGS certificate", true],
       ["Facility photos", true],
       ["Product portfolio", true],
       ["Trade history", true],
       ["Bank reference", false],
       ["ASC chain-of-custody", false],
      ].map(([label, done]) => (
       <div key={label} style={{ display: "flex", alignItems: "center", gap: 8, color: done ? "var(--color-fg-body)" : "var(--color-fg-muted)" }}>
        <Icon name={done ? "check" : "x"} size={14} color={done ? "var(--jv-trust-600)" : "var(--jv-ink-400)"}/>
        {label}
       </div>
      ))}
     </div>
    </div>

    <div style={{ background: "var(--jv-sand-100)", border: "1px solid var(--jv-sand-200)", borderRadius: 6, padding: 24 }}>
     <Eyebrow>Verification status</Eyebrow>
     <div style={{ marginTop: 12, fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>Verified, expires 2027-08-12</div>
     <div style={{ marginTop: 8, fontSize: 13, color: "var(--color-fg-body)", lineHeight: 1.55 }}>Re-audit scheduled for 2027-06. Documents on file: business reg, export license, HACCP, BRCGS.</div>
     <Button variant="secondary" size="sm" style={{ marginTop: 16 }}>Manage documents</Button>
    </div>
   </div>

   {/* KPI strip */}
   <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr 1fr" : (vp.isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)"), gap: 16, marginBottom: 16 }}>
    {[
     ["This month", "1 482", "Profile views", "+18%"],
     ["This month", "26", "Quote requests", "+4"],
     ["Avg. response", "8 h", "First reply time", "-2 h"],
     ["This year", "USD 1.4 M", "Trade facilitated", "+22%"],
    ].map((k, i) => (
     <div key={i} style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, padding: 20 }}>
      <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>{k[0]}</div>
      <Mono style={{ fontSize: vp.isMobile ? 20 : 26, color: "var(--jv-navy-800)", display: "block", marginTop: 6 }}>{k[1]}</Mono>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 12, gap: 4 }}>
       <span style={{ color: "var(--color-fg-muted)" }}>{k[2]}</span>
       <Mono style={{ color: "var(--jv-trust-700)" }}>{k[3]}</Mono>
      </div>
     </div>
    ))}
   </div>

   <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "1.2fr 1fr" : "1fr", gap: 16 }}>
    <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
     <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--color-divider)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
      <div>
       <Eyebrow>Inquiries</Eyebrow>
       <div style={{ marginTop: 4, fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>4 new this week</div>
      </div>
      <Button variant="ghost" size="sm" trailing="arrow-right">View all</Button>
     </div>
     <div className="jv-x-scroll">
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 520 }}>
       <thead style={{ background: "var(--jv-ink-50)" }}>
        <tr style={{ textAlign: "left", color: "var(--color-fg-muted)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>
         <th style={{ padding: "10px 14px" }}>Buyer</th>
         <th style={{ padding: "10px 14px" }}>Product</th>
         <th style={{ padding: "10px 14px", textAlign: "right" }}>Qty</th>
         <th style={{ padding: "10px 14px" }}>Status</th>
        </tr>
       </thead>
       <tbody>
        {[
         ["Tokyo Food Imports", "jp", "Black tiger shrimp HLSO 16/20", "5 t", "new"],
         ["Osaka Marine Trading","jp","Vannamei shrimp PD", "2 t", "new"],
         ["Nippon Gourmet Supply","jp","Pangasius fillet, IQF", "12 t", "replied"],
         ["Kanto Holdings", "jp", "Vannamei shrimp HLSO", "8 t", "replied"],
         ["Tokyo private label", "jp", "Frozen shrimp, OEM packing", "3 t", "won"],
        ].map((r, i) => (
         <tr key={i} style={{ borderTop: "1px solid var(--color-divider)" }}>
          <td style={{ padding: "12px 14px" }}>
           <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <img src={`assets/flag-${r[1]}.svg`} width="14" height="11"/>
            <span style={{ color: "var(--jv-navy-800)", fontWeight: 500 }}>{r[0]}</span>
           </span>
          </td>
          <td style={{ padding: "12px 14px", color: "var(--color-fg-body)" }}>{r[2]}</td>
          <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{r[3]}</Mono></td>
          <td style={{ padding: "12px 14px" }}>
           {r[4] === "new" && <StatusPill tone="danger">New</StatusPill>}
           {r[4] === "replied" && <StatusPill tone="neutral">Replied</StatusPill>}
           {r[4] === "won" && <StatusPill tone="trust">Won</StatusPill>}
          </td>
         </tr>
        ))}
       </tbody>
      </table>
     </div>
    </div>

    <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
     <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--color-divider)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div>
       <Eyebrow>Matched RFQs</Eyebrow>
       <div style={{ marginTop: 4, fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>18 open</div>
      </div>
      <Button variant="ghost" size="sm" trailing="arrow-right">View feed</Button>
     </div>
     <div style={{ padding: 8 }}>
      {RECENT_RFQS.slice(0, 4).map((r, i) => (
       <div key={r.id} style={{ padding: 12, borderRadius: 4, display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <Mono style={{ fontSize: 11, color: "var(--color-fg-muted)" }}>{r.id}</Mono>
         <span style={{ fontSize: 11, color: "var(--color-fg-muted)" }}>{r.age}</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 500, color: "var(--jv-navy-800)", lineHeight: 1.4 }}>{r.product}</div>
        <div style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>Qty <Mono style={{ color: "var(--color-fg)" }}>{r.qty}</Mono> · <Mono style={{ color: "var(--color-fg)" }}>{r.incoterm}</Mono> · {r.cert}</div>
       </div>
      ))}
     </div>
    </div>
   </div>
  </DashShell>
 );
};

const BuyerDashboard = ({ onNavigate, onRFQ }) => {
 const vp = useViewport();
 const items = [
  { id: "overview", label: "Overview", icon: "search" },
  { id: "rfqs", label: "My RFQs", icon: "file-check", badge: "5" },
  { id: "saved", label: "Saved suppliers", icon: "shield-check" },
  { id: "messages", label: "Messages", icon: "package", badge: "2" },
  { id: "orders", label: "Orders", icon: "globe" },
  { id: "settings", label: "Settings", icon: "filter" },
 ];

 return (
  <DashShell
   user={{ name: "Tokyo Food Imports", role: "Buyer · Premium" }}
   onNavigate={onNavigate}
   items={items}
   active="overview">

   <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24, gap: 16, flexWrap: "wrap" }}>
    <div>
     <Eyebrow>Buyer dashboard</Eyebrow>
     <h1 style={{ marginTop: 8, fontSize: vp.isMobile ? 22 : 28, color: "var(--jv-navy-800)" }}>Welcome back, Tokyo Food Imports.</h1>
    </div>
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
     <Button variant="secondary" size="sm" trailing="external" onClick={() => onNavigate("directory")}>{vp.isMobile ? "Suppliers" : "Browse suppliers"}</Button>
     <Button variant="primary" size="sm" onClick={() => onNavigate("rfq-page")}>Post an RFQ</Button>
    </div>
   </div>

   <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr 1fr" : (vp.isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)"), gap: 16, marginBottom: 16 }}>
    {[
     ["Open", "5", "Active RFQs", "-"],
     ["Avg. responses", "4.8", "Quotes per RFQ", "+0.6"],
     ["This year", "USD 2.1 M", "Trade volume", "+34%"],
     ["Saved", "12", "Verified suppliers", "+3"],
    ].map((k, i) => (
     <div key={i} style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, padding: 20 }}>
      <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>{k[0]}</div>
      <Mono style={{ fontSize: vp.isMobile ? 20 : 26, color: "var(--jv-navy-800)", display: "block", marginTop: 6 }}>{k[1]}</Mono>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 12, gap: 4 }}>
       <span style={{ color: "var(--color-fg-muted)" }}>{k[2]}</span>
       <Mono style={{ color: "var(--jv-trust-700)" }}>{k[3]}</Mono>
      </div>
     </div>
    ))}
   </div>

   <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden", marginBottom: 16 }}>
    <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--color-divider)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
     <div>
      <Eyebrow>My RFQs</Eyebrow>
      <div style={{ marginTop: 4, fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>5 active sourcing requests</div>
     </div>
     <Button variant="ghost" size="sm" trailing="arrow-right">View all</Button>
    </div>
    <div className="jv-x-scroll">
     <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13, minWidth: 720 }}>
      <thead style={{ background: "var(--jv-ink-50)" }}>
       <tr style={{ textAlign: "left", color: "var(--color-fg-muted)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>
        <th style={{ padding: "10px 14px" }}>RFQ ID</th>
        <th style={{ padding: "10px 14px" }}>Product</th>
        <th style={{ padding: "10px 14px", textAlign: "right" }}>Qty</th>
        <th style={{ padding: "10px 14px", textAlign: "right" }}>Quotes</th>
        <th style={{ padding: "10px 14px" }}>Best price</th>
        <th style={{ padding: "10px 14px" }}>Status</th>
        <th style={{ padding: "10px 14px" }}>Closes</th>
       </tr>
      </thead>
      <tbody>
       {[
        ["R-1412","Black tiger shrimp HLSO 16/20","5 t","7","USD 11.20 /kg","quoting","2 d"],
        ["R-1410","Frozen pho broth concentrate","500 u","4","USD 5.10 /kg","quoting","5 d"],
        ["R-1408","Cashew nuts W320","3 t","6","USD 7.05 /kg","reviewing","closed"],
        ["R-1405","Koshihikari rice 5 kg","800 kg","3","JPY 3 250 /u","reviewing","closed"],
        ["R-1402","Coconut milk powder","1.5 t","4","USD 3.95 /kg","won","-"],
       ].map((r, i) => (
        <tr key={i} style={{ borderTop: "1px solid var(--color-divider)" }}>
         <td style={{ padding: "12px 14px" }}><Mono style={{ color: "var(--jv-navy-800)" }}>{r[0]}</Mono></td>
         <td style={{ padding: "12px 14px", color: "var(--jv-navy-800)", fontWeight: 500 }}>{r[1]}</td>
         <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{r[2]}</Mono></td>
         <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono style={{ color: "var(--jv-trust-700)" }}>{r[3]}</Mono></td>
         <td style={{ padding: "12px 14px" }}><Mono style={{ color: "var(--jv-navy-800)" }}>{r[4]}</Mono></td>
         <td style={{ padding: "12px 14px" }}>
          {r[5] === "quoting" && <StatusPill tone="warn">Quoting</StatusPill>}
          {r[5] === "reviewing" && <StatusPill tone="neutral">Reviewing</StatusPill>}
          {r[5] === "won" && <StatusPill tone="trust">Won</StatusPill>}
         </td>
         <td style={{ padding: "12px 14px", color: "var(--color-fg-muted)" }}>{r[6]}</td>
        </tr>
       ))}
      </tbody>
     </table>
    </div>
   </div>

   <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, padding: 24 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, flexWrap: "wrap", gap: 8 }}>
     <div>
      <Eyebrow>Saved suppliers</Eyebrow>
      <div style={{ marginTop: 4, fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)" }}>12 verified suppliers</div>
     </div>
     <Button variant="ghost" size="sm" trailing="arrow-right" onClick={() => onNavigate("directory")}>{vp.isMobile ? "Directory" : "Browse directory"}</Button>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : (vp.isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)"), gap: 12 }}>
     {SUPPLIERS.filter(s => s.verified).slice(0, 4).map(s => (
      <button key={s.id} onClick={() => onNavigate("profile", s.id)}
       style={{ border: "1px solid var(--color-border)", borderRadius: 6, padding: 14, background: "#fff", cursor: "pointer", textAlign: "left", display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--font-sans)" }}>
       <div style={{ width: 36, height: 36, borderRadius: 6, background: "var(--jv-navy-50)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 700, color: "var(--jv-navy-800)", flexShrink: 0 }}>{s.initials}</div>
       <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: "var(--jv-navy-800)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div>
        <CountryChip country={s.country} label={s.city}/>
       </div>
      </button>
     ))}
    </div>
   </div>
  </DashShell>
 );
};

Object.assign(window, { Login, SupplierDashboard, BuyerDashboard });