// SupplierProfile.jsx, verified-supplier detail page

const SupplierProfile = ({ supplierId, onNavigate, onRFQ }) => {
 const vp = useViewport();
 const s = SUPPLIERS.find(x => x.id === supplierId) || SUPPLIERS[0];
 const [tab, setTab] = useState("overview");

 const SAMPLE_VIDEO = "assets/facility/walkthrough.mp4";

 const facilityMedia = s.country === "vn"
  ? [
   { kind: "video", label: "Factory walkthrough", caption: "02:14 · filmed 2025-11",
     poster: "assets/facility/walkthrough.jpg", src: SAMPLE_VIDEO },
   { kind: "photo", label: "Vessel intake", caption: "Same-day landing",
     src: "assets/facility/catch.jpg" },
   { kind: "photo", label: "IQF cold storage", caption: "−25°C · 1,200 t cap.",
     src: "assets/facility/coldstore.jpg" },
   { kind: "photo", label: "Hai Phong loading bay", caption: "Reefer dispatch",
     src: "assets/facility/port.jpg" },
   { kind: "photo", label: "Product macro · HLSO", caption: "16/20 grade",
     src: "assets/facility/product.jpg" },
  ]
  : [
   { kind: "video", label: "Plant walkthrough", caption: "03:08 · filmed 2025-10",
     poster: "assets/facility/walkthrough.jpg", src: SAMPLE_VIDEO },
   { kind: "photo", label: "QA laboratory", caption: "In-house testing",
     src: "assets/facility/qa-lab.jpg" },
   { kind: "photo", label: "Distribution warehouse", caption: "FSSC 22000",
     src: "assets/facility/distribution.jpg" },
   { kind: "photo", label: "Yokohama dispatch", caption: "Reefer container",
     src: "assets/facility/port.jpg" },
   { kind: "photo", label: "Product macro", caption: "Vac-pack 500 g",
     src: "assets/facility/product.jpg" },
  ];
 const [activeMedia, setActiveMedia] = useState(0);

 const heroCols = vp.isDesktop ? "1.5fr 1fr" : "1fr";
 const contentCols = vp.isDesktop ? "1fr 320px" : "1fr";

 return (
  <div>
   {/* HERO PANEL */}
   <section style={{ background: s.premium ? "var(--jv-sand-100)" : "var(--color-bg-soft)", borderBottom: "1px solid var(--color-border)", padding: "32px var(--pad-x) 40px" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ fontSize: 12, color: "var(--color-fg-muted)", display: "flex", gap: 6, marginBottom: 20, flexWrap: "wrap" }}>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate("home"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Home</a>
      <span>/</span>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate("directory"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Suppliers</a>
      <span>/</span><span style={{ color: "var(--color-fg)" }}>{s.name}</span>
     </div>

     <div style={{ display: "grid", gridTemplateColumns: heroCols, gap: vp.isWide ? 56 : 32, alignItems: "flex-start" }}>
      <div>
       <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 16, flexWrap: "wrap" }}>
        <div style={{ width: vp.isMobile ? 56 : 72, height: vp.isMobile ? 56 : 72, borderRadius: 10, background: "#fff", border: "1px solid var(--color-border)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: "var(--jv-navy-800)", fontSize: vp.isMobile ? 20 : 24, flexShrink: 0 }}>{s.initials}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
         <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <h1 style={{ fontSize: vp.isMobile ? 22 : (vp.isTablet ? 26 : 32), lineHeight: 1.15, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>{s.name}</h1>
          {s.verified && <StatusPill tone="trust">Verified supplier</StatusPill>}
          {s.premium && <PremiumTag/>}
         </div>
        </div>
       </div>

       <div style={{ display: "flex", gap: vp.isMobile ? 14 : 24, fontSize: 13, color: "var(--color-fg-muted)", marginTop: 4, marginBottom: 24, flexWrap: "wrap" }}>
        <CountryChip country={s.country} label={`${s.city}, ${s.country.toUpperCase()}`}/>
        <span>Est. <Mono style={{ color: "var(--color-fg)" }}>{s.established}</Mono></span>
        <span><Mono style={{ color: "var(--color-fg)" }}>{s.employees}</Mono> employees</span>
        <span>Revenue <Mono style={{ color: "var(--color-fg)" }}>{s.revenueBand}</Mono></span>
       </div>

       <p style={{ fontSize: vp.isMobile ? 15 : 17, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 640 }}>{s.blurb}</p>

       <div style={{ display: "flex", gap: 8, marginTop: 20, flexWrap: "wrap" }}>
        {s.certs.map(c => <CertTag key={c}>{c}</CertTag>)}
       </div>
      </div>

      {/* Action card */}
      <div style={{ background: "#fff", border: "1px solid var(--color-border)", borderRadius: 10, padding: vp.isMobile ? 20 : 24, display: "flex", flexDirection: "column", gap: 14 }}>
       <Eyebrow>Quick quote</Eyebrow>
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", rowGap: 12, columnGap: 16, padding: "12px 0", borderTop: "1px solid var(--color-divider)", borderBottom: "1px solid var(--color-divider)" }}>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>MOQ</div>
         <Mono style={{ fontSize: 17, color: "var(--jv-navy-800)" }}>{s.moq}</Mono>
        </div>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Lead time</div>
         <Mono style={{ fontSize: 17, color: "var(--jv-navy-800)" }}>{s.leadTime}</Mono>
        </div>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Incoterm</div>
         <Mono style={{ fontSize: 17, color: "var(--jv-navy-800)" }}>FOB / CIF</Mono>
        </div>
        <div>
         <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>Port</div>
         <Mono style={{ fontSize: 17, color: "var(--jv-navy-800)" }}>{s.country === "vn" ? "Hai Phong" : "Yokohama"}</Mono>
        </div>
       </div>
       <div style={{ display: "flex", gap: 8 }}>
        <Button variant="primary" onClick={onRFQ} style={{ flex: 1, justifyContent: "center" }}>Request Quote</Button>
        <Button variant="secondary" style={{ flex: 1, justifyContent: "center" }}>{vp.isMobile ? "Message" : "Message Supplier"}</Button>
       </div>

       <a href="#"
        onClick={e => { e.preventDefault(); onNavigate("trading-support"); }}
        style={{ marginTop: 6, padding: "16px 18px", background: "var(--jv-sand-100)", border: "1px solid var(--jv-sand-300)", borderRadius: 8, display: "block", textDecoration: "none", color: "inherit", transition: "border-color var(--dur-micro) var(--ease-standard)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
         <Icon name="shield-check" size={15} color="var(--jv-navy-800)"/>
         <div style={{ fontSize: 10.5, color: "var(--jv-navy-800)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600 }}>JVFood trading support</div>
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.4, color: "var(--jv-navy-800)", fontWeight: 600, marginBottom: 6 }}>
         Don't want to manage the shipment yourself?
        </div>
        <div style={{ fontSize: 12.5, lineHeight: 1.55, color: "var(--color-fg-body)", marginBottom: 12 }}>
         We'll handle bilingual negotiation, factory audit, documents and logistics with this supplier end-to-end. One named trade manager, no hidden markup.
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 500, color: "var(--jv-navy-800)", borderBottom: "1px solid var(--jv-navy-800)", paddingBottom: 1 }}>
         Explore trading support
         <Icon name="arrow-right" size={14}/>
        </div>
       </a>
      </div>
     </div>
    </div>
   </section>

   {/* TABS — horizontal scroll on mobile */}
   <section style={{ borderBottom: "1px solid var(--color-border)", padding: "0 var(--pad-x)", position: "sticky", top: 64, background: "rgba(255,255,255,0.95)", backdropFilter: "blur(8px)", zIndex: 20 }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div className="jv-tabs-scroll" style={{ display: "flex", gap: vp.isMobile ? 20 : 28 }}>
      {[
       { id: "overview", label: "Overview" },
       { id: "products", label: "Products" },
       { id: "capabilities", label: "Capabilities" },
       { id: "certifications", label: "Certifications" },
       { id: "trade", label: "Trade history" },
      ].map(t => (
       <button key={t.id} onClick={() => setTab(t.id)}
        style={{ background: "transparent", border: 0, padding: "16px 0", fontSize: 14, fontFamily: "var(--font-sans)",
         color: tab === t.id ? "var(--jv-navy-800)" : "var(--color-fg-body)",
         fontWeight: tab === t.id ? 500 : 400,
         borderBottom: tab === t.id ? "2px solid var(--jv-navy-800)" : "2px solid transparent",
         cursor: "pointer", whiteSpace: "nowrap" }}>{t.label}</button>
      ))}
     </div>
    </div>
   </section>

   {/* CONTENT */}
   <section style={{ padding: vp.isMobile ? "32px var(--pad-x)" : "48px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: contentCols, gap: vp.isWide ? 48 : 32 }}>
     <div style={{ display: "flex", flexDirection: "column", gap: 48, minWidth: 0 }}>

      {tab === "overview" && (
       <React.Fragment>
        <div>
         <Eyebrow>Facility</Eyebrow>
         <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>Inside the operation</h2>
         <FacilityGallery items={facilityMedia} active={activeMedia} onChange={setActiveMedia}/>
        </div>
        <div>
         <Eyebrow>Products</Eyebrow>
         <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>Top of the price list</h2>
         <ProductTable supplier={s}/>
         <div style={{ marginTop: 14 }}>
          <Button variant="ghost" size="sm" trailing="arrow-right" onClick={() => setTab("products")}>See all products</Button>
         </div>
        </div>
       </React.Fragment>
      )}

      {tab === "products" && (
       <div>
        <Eyebrow>Products</Eyebrow>
        <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>Current price list</h2>
        <ProductTable supplier={s}/>
       </div>
      )}

      {tab === "capabilities" && (
       <div>
        <Eyebrow>Capabilities</Eyebrow>
        <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>What this facility can do</h2>
        <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "repeat(2, 1fr)", gap: 12 }}>
         {s.capabilities.map(c => (
          <div key={c} style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", border: "1px solid var(--color-border)", borderRadius: 6, fontSize: 14 }}>
           <Icon name="check" size={16} color="var(--jv-trust-600)"/>{c}
          </div>
         ))}
        </div>
       </div>
      )}

      {tab === "certifications" && (
       <div>
        <Eyebrow>Certifications on file</Eyebrow>
        <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>Audited by third parties</h2>
        <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
         {s.certs.map((c, i) => (
          <div key={c} style={{ padding: vp.isMobile ? "14px 16px" : "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: i ? "1px solid var(--color-divider)" : 0, gap: 12 }}>
           <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 0 }}>
            <Icon name="shield-check" size={20} color="var(--jv-trust-600)"/>
            <div style={{ minWidth: 0 }}>
             <div style={{ fontSize: 14, fontWeight: 500, color: "var(--jv-navy-800)" }}>{c}</div>
             <div style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>Issued 2024-08 · Valid through 2027-08</div>
            </div>
           </div>
           <Button variant="ghost" size="sm" trailing="external">PDF</Button>
          </div>
         ))}
        </div>
       </div>
      )}

      {tab === "trade" && (
       <div>
        <Eyebrow>Trade history</Eyebrow>
        <h2 style={{ marginTop: 8, marginBottom: 20, fontSize: vp.isMobile ? 22 : 24, color: "var(--jv-navy-800)" }}>Verified shipments on JVFood</h2>
        <TradeHistoryTable supplier={s}/>
       </div>
      )}
     </div>

     {/* Sidebar, facts */}
     <aside style={{ display: "flex", flexDirection: "column", gap: 24, minWidth: 0 }}>
      <FactCard label="Facility">
       <div style={{ aspectRatio: "4 / 3", background: "var(--jv-navy-50)", borderRadius: 6, marginBottom: 12, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-fg-muted)", fontSize: 12, fontFamily: "var(--font-mono)" }}>FACILITY PHOTO</div>
       <div style={{ fontSize: 13, color: "var(--color-fg-body)", lineHeight: 1.55 }}>{s.city}, {s.country === "vn" ? "Vietnam" : "Japan"} · {s.employees} employees · est. {s.established}</div>
      </FactCard>

      <FactCard label="Trade lanes">
       <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
        {[
         { from: "vn", to: "jp", port: "Hai Phong → Yokohama" },
         { from: "vn", to: "jp", port: "Cat Lai → Kobe" },
         { from: "vn", to: "jp", port: "Da Nang → Osaka" },
        ].map((l, i) => (
         <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src={`assets/flag-${l.from}.svg`} width="18" height="13"/>
          <Icon name="arrow-right" size={14} color="var(--color-fg-muted)"/>
          <img src={`assets/flag-${l.to}.svg`} width="18" height="13"/>
          <span style={{ color: "var(--color-fg-body)" }}>{l.port}</span>
         </div>
        ))}
       </div>
      </FactCard>

      <FactCard label="Documents on file">
       <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
        {["Business registration", "Export license", "Beneficial ownership", "Financials 2022–2024", "Bank reference"].map(d => (
         <div key={d} style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--color-fg-body)" }}>
          <Icon name="file-check" size={14} color="var(--jv-trust-600)"/>{d}
         </div>
        ))}
       </div>
      </FactCard>
     </aside>
    </div>
   </section>
  </div>
 );
};

// ---------- Facility gallery ----------------------------------------------
const toneFill = {
 "navy-50": "var(--jv-navy-50)",
 "navy-100": "var(--jv-navy-100)",
 "navy-200": "var(--jv-navy-200)",
 "sand-100": "var(--jv-sand-100)",
 "ink-100": "var(--jv-ink-100)",
};

const PlaceholderFill = ({ tone, label, caption, large }) => (
 <div style={{ position: "absolute", inset: 0, background: toneFill[tone] || "var(--jv-navy-50)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: large ? 10 : 6, padding: large ? 24 : 10, textAlign: "center" }}>
  <div style={{ fontFamily: "var(--font-mono)", fontSize: large ? 12 : 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--color-fg-muted)" }}>{label}</div>
  {large && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-fg-subtle)", letterSpacing: "0.04em" }}>{caption}</div>}
 </div>
);

const SafeImage = ({ src, tone, label, caption, large, alt }) => {
 const [failed, setFailed] = useState(false);
 return (
  <>
   {!failed && src && (
    <img
     src={src}
     alt={alt || label}
     onError={() => setFailed(true)}
     style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
    />
   )}
   {(failed || !src) && <PlaceholderFill tone={tone} label={label} caption={caption} large={large}/>}
  </>
 );
};

const PlayBadge = ({ size = 56 }) => (
 <div style={{ width: size, height: size, borderRadius: 999, background: "rgba(11, 42, 74, 0.92)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 2px 8px rgba(11,42,74,0.18)" }}>
  <svg width={size * 0.34} height={size * 0.34} viewBox="0 0 24 24" fill="#fff"><path d="M7 4.5v15l13-7.5Z"/></svg>
 </div>
);

const FacilityGallery = ({ items, active, onChange }) => {
 const current = items[active] || items[0];
 const isVideo = current.kind === "video";
 const [playing, setPlaying] = useState(false);

 React.useEffect(() => { setPlaying(false); }, [active]);

 const featuredSrc = isVideo ? current.poster : current.src;

 return (
  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
   <div style={{ position: "relative", aspectRatio: "16 / 9", borderRadius: 10, overflow: "hidden", border: "1px solid var(--color-border)", background: "var(--jv-navy-50)" }}>
    {isVideo && playing ? (
     <video
      key={active}
      src={current.src}
      poster={current.poster}
      controls
      autoPlay
      muted
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", background: "#000" }}
     />
    ) : (
     <SafeImage src={featuredSrc} tone={current.tone} label={current.label} caption={current.caption} large/>
    )}

    {isVideo && !playing && (
     <button
      onClick={() => setPlaying(true)}
      aria-label="Play facility video"
      style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,42,74,0) 40%, rgba(11,42,74,0.45) 100%)", border: 0, padding: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <PlayBadge size={64}/>
     </button>
    )}

    {!(isVideo && playing) && (
     <div style={{ position: "absolute", left: 16, bottom: 16, display: "flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.92)", padding: "6px 10px", borderRadius: 4, border: "1px solid var(--color-border)", fontSize: 12, color: "var(--jv-navy-800)", maxWidth: "calc(100% - 32px)" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: isVideo ? "var(--jv-accent-600)" : "var(--jv-trust-600)", flexShrink: 0 }}/>
      <span style={{ whiteSpace: "nowrap" }}>{isVideo ? "Video" : "Photo"}</span>
      <span style={{ color: "var(--color-fg-muted)" }}>·</span>
      <span style={{ color: "var(--color-fg-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 }}>{current.caption}</span>
      <span style={{ color: "var(--color-fg-muted)" }}>·</span>
      <span style={{ color: "var(--color-fg-muted)", whiteSpace: "nowrap" }}>{active + 1} / {items.length}</span>
     </div>
    )}
   </div>

   {/* Thumbnail strip */}
   <div style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`, gap: 10 }}>
    {items.map((m, i) => {
     const thumbSrc = m.kind === "video" ? m.poster : m.src;
     return (
      <button
       key={i}
       onClick={() => onChange(i)}
       style={{ position: "relative", aspectRatio: "4 / 3", border: i === active ? "2px solid var(--jv-navy-800)" : "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden", padding: 0, cursor: "pointer", background: "transparent" }}>
       <SafeImage src={thumbSrc} tone={m.tone} label={m.label}/>
       {m.kind === "video" && (
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(180deg, rgba(11,42,74,0.05) 0%, rgba(11,42,74,0.45) 100%)" }}>
         <PlayBadge size={32}/>
        </div>
       )}
      </button>
     );
    })}
   </div>
  </div>
 );
};

const FactCard = ({ label, children }) => (
 <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, padding: 16 }}>
  <Eyebrow style={{ marginBottom: 12 }}>{label}</Eyebrow>
  {children}
 </div>
);

const PRODUCT_IMAGES = {
 shrimp: "assets/products/shrimp.jpg",
 prawn: "assets/products/shrimp.jpg",
 vannamei: "assets/products/shrimp.jpg",
 tuna: "assets/products/tuna.jpg",
 scallop: "assets/products/scallop.jpg",
 urchin: "assets/products/scallop.jpg",
 hokke: "assets/products/scallop.jpg",
 surimi: "assets/products/scallop.jpg",
 mackerel: "assets/products/fish.jpg",
 saury: "assets/products/fish.jpg",
 bonito: "assets/products/fish.jpg",
 pangasius: "assets/products/fish.jpg",
 tra: "assets/products/fish.jpg",
 whitefish: "assets/products/fish.jpg",
 fish: "assets/products/fish.jpg",
 dumpling: "assets/products/dumpling.jpg",
 "spring roll": "assets/products/dumpling.jpg",
 pho: "assets/products/noodle.jpg",
 iqf: "assets/products/dumpling.jpg",
 beef: "assets/products/beef.jpg",
 wagyu: "assets/products/beef.jpg",
 rice: "assets/products/rice.jpg",
 mango: "assets/products/mango.jpg",
 fruit: "assets/products/mango.jpg",
 tea: "assets/products/tea.jpg",
 yuzu: "assets/products/sauce.jpg",
 soy: "assets/products/sauce.jpg",
 miso: "assets/products/sauce.jpg",
 sauce: "assets/products/sauce.jpg",
 cashew: "assets/products/dried.jpg",
 nut: "assets/products/dried.jpg",
 dried: "assets/products/dried.jpg",
 coconut: "assets/products/dried.jpg",
};
const imageForProduct = (name) => {
 const n = (name || "").toLowerCase();
 for (const key of Object.keys(PRODUCT_IMAGES)) {
  if (n.includes(key)) return PRODUCT_IMAGES[key];
 }
 return "assets/products/fish.jpg";
};

const ProductTable = ({ supplier }) => {
 const lines = supplier.products.map((p, i) => ({
  hs: ["0306.17.10", "0303.54.00", "0307.49.20", "1604.20.00"][i % 4],
  name: p,
  pack: ["HLSO 16/20", "Whole round IQF", "Block frozen", "Vac-pack 500 g"][i % 4],
  moq: [supplier.moq, "1 t", "500 kg", "300 kg"][i % 4],
  price: supplier.country === "vn"
   ? ["USD 11.80 / kg", "USD 4.20 / kg", "USD 6.50 / kg", "USD 3.90 / kg"][i % 4]
   : ["JPY 1,820 / kg", "JPY 620 / kg", "JPY 940 / kg", "JPY 540 / kg"][i % 4],
 }));
 return (
  <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
   <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", width: 64 }}/>
       <th style={{ padding: "10px 14px" }}>HS Code</th>
       <th style={{ padding: "10px 14px" }}>Product</th>
       <th style={{ padding: "10px 14px" }}>Pack / spec</th>
       <th style={{ padding: "10px 14px", textAlign: "right" }}>MOQ</th>
       <th style={{ padding: "10px 14px", textAlign: "right" }}>FOB</th>
       <th style={{ padding: "10px 14px" }}/>
      </tr>
     </thead>
     <tbody>
      {lines.map((l, i) => (
       <tr key={i} style={{ borderTop: "1px solid var(--color-divider)" }}>
        <td style={{ padding: "10px 14px" }}>
         <div style={{ width: 48, height: 48, borderRadius: 4, overflow: "hidden", border: "1px solid var(--color-border)", background: "var(--jv-ink-50)" }}>
          <img src={imageForProduct(l.name)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
         </div>
        </td>
        <td style={{ padding: "12px 14px" }}><Mono style={{ color: "var(--jv-navy-800)" }}>{l.hs}</Mono></td>
        <td style={{ padding: "12px 14px", color: "var(--jv-navy-800)", fontWeight: 500 }}>{l.name}</td>
        <td style={{ padding: "12px 14px", color: "var(--color-fg-body)" }}>{l.pack}</td>
        <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{l.moq}</Mono></td>
        <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono weight={500} style={{ color: "var(--jv-navy-800)" }}>{l.price}</Mono></td>
        <td style={{ padding: "12px 14px", textAlign: "right" }}><Button variant="ghost" size="sm">Quote</Button></td>
       </tr>
      ))}
     </tbody>
    </table>
   </div>
  </div>
 );
};

const TradeHistoryTable = ({ supplier }) => {
 const months = ["2026-04", "2026-02", "2025-12", "2025-10", "2025-08", "2025-06"];
 const buyers = supplier.country === "vn"
  ? ["Marubeni Foods K.K.", "Itochu Trading", "Nichirei Logistics", "Mitsui Marine", "Maruha Nichiro"]
  : ["Ichiban Holdings", "Toyo Trading", "Daiichi Foods", "Sankyo Logistics"];
 const ports = supplier.country === "vn"
  ? ["Hai Phong → Yokohama", "Cat Lai → Kobe", "Da Nang → Osaka", "Hai Phong → Tokyo"]
  : ["Yokohama → Hai Phong", "Kobe → Cat Lai", "Osaka → Da Nang"];
 const rows = months.map((m, i) => ({
  month: m,
  buyer: buyers[i % buyers.length],
  product: supplier.products[i % supplier.products.length],
  lane: ports[i % ports.length],
  qty: ["12 t", "8 t", "20 t", "5 t", "15 t", "10 t"][i],
  value: ["USD 142k", "USD 96k", "USD 240k", "USD 58k", "USD 178k", "USD 118k"][i],
 }));
 return (
  <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden" }}>
   <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" }}>Month</th>
       <th style={{ padding: "10px 14px" }}>Buyer</th>
       <th style={{ padding: "10px 14px" }}>Product</th>
       <th style={{ padding: "10px 14px" }}>Lane</th>
       <th style={{ padding: "10px 14px", textAlign: "right" }}>Qty</th>
       <th style={{ padding: "10px 14px", textAlign: "right" }}>Value</th>
      </tr>
     </thead>
     <tbody>
      {rows.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.month}</Mono></td>
        <td style={{ padding: "12px 14px", color: "var(--jv-navy-800)", fontWeight: 500 }}>{r.buyer}</td>
        <td style={{ padding: "12px 14px", color: "var(--color-fg-body)" }}>{r.product}</td>
        <td style={{ padding: "12px 14px", color: "var(--color-fg-body)" }}>{r.lane}</td>
        <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono>{r.qty}</Mono></td>
        <td style={{ padding: "12px 14px", textAlign: "right" }}><Mono weight={500} style={{ color: "var(--jv-navy-800)" }}>{r.value}</Mono></td>
       </tr>
      ))}
     </tbody>
    </table>
   </div>
  </div>
 );
};

Object.assign(window, { SupplierProfile });