// HomePage.jsx, landing page

const HomePage = ({ onNavigate, onRFQ, lang }) => {
 const vp = useViewport();
 const [tab, setTab] = useState("products"); // products | suppliers
 const [query, setQuery] = useState("");
 const [origin, setOrigin] = useState("any");
 const featured = SUPPLIERS.filter(s => s.verified).slice(0, 4);

 const submit = () => {
  if (tab === "products") onNavigate("products");
  else onNavigate("directory");
 };

 const placeholder = tab === "products"
  ? (vp.isMobile ? "Search products…" : "Search products — e.g. Black tiger shrimp, HS 0306.17")
  : (vp.isMobile ? "Search suppliers…" : "Search suppliers — by name, product, or capability");

 return (
  <div>
   {/* HERO ============================================================ */}
   <section style={{ paddingTop: vp.isMobile ? 48 : 80, paddingBottom: vp.isMobile ? 40 : 64, paddingLeft: "var(--pad-x)", paddingRight: "var(--pad-x)", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: vp.isDesktop ? "1.2fr 1fr" : "1fr", gap: vp.isWide ? 80 : (vp.isDesktop ? 56 : 40), alignItems: "center" }}>
     <div>
      <h1 className="jv-display-lg" style={{ fontWeight: 600, color: "var(--jv-navy-800)", marginBottom: vp.isMobile ? 20 : 28 }}>
       Verified suppliers,<br/>end&nbsp;to&nbsp;end.
      </h1>
      <p style={{ fontSize: vp.isMobile ? 16 : 17, lineHeight: 1.55, color: "var(--color-fg-body)", maxWidth: 520, marginBottom: vp.isMobile ? 28 : 36 }}>
       JVFood is the verified B2B marketplace for food, seafood, and food manufacturing trade between Vietnam and Japan. Every supplier KYC'd. Every facility on file.
      </p>
      <div style={{ display: "flex", gap: 12, marginBottom: 28, flexWrap: "wrap" }}>
       <Button variant="primary" size={vp.isMobile ? "md" : "lg"} onClick={() => onNavigate("directory")}>Browse 1,240 suppliers</Button>
       <Button variant="secondary" size={vp.isMobile ? "md" : "lg"} trailing="arrow-right">How verification works</Button>
      </div>
      <div style={{ display: "flex", gap: vp.isMobile ? 18 : 28, fontSize: 12, color: "var(--color-fg-muted)", flexWrap: "wrap" }}>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 14 }}>1,240</Mono> verified suppliers</div>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 14 }}>USD 380 M</Mono> trade facilitated</div>
       <div><Mono style={{ color: "var(--jv-navy-800)", fontSize: 14 }}>14 d</Mono> avg. lead time</div>
      </div>
     </div>

     {/* Right: quick-access supplier search panel */}
     <div style={{ background: "var(--jv-sand-100)", border: "1px solid var(--jv-sand-200)", borderRadius: 16, padding: vp.isMobile ? 20 : 28 }}>
      <Eyebrow>Find a supplier</Eyebrow>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 14 }}>
       <Field label="What are you sourcing?">
        <Input placeholder={vp.isMobile ? "e.g. Black tiger shrimp" : "e.g. Black tiger shrimp, HS 0306.17"}/>
       </Field>
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="Origin">
         <Select defaultValue="vn"><option value="any">Any</option><option value="vn">Vietnam</option><option value="jp">Japan</option></Select>
        </Field>
        <Field label="Destination">
         <Select defaultValue="jp"><option value="any">Any</option><option value="jp">Japan</option><option value="vn">Vietnam</option></Select>
        </Field>
       </div>
       <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <Field label="Cert required">
         <Select><option>Any</option><option>HACCP</option><option>FSSC 22000</option><option>BRCGS</option><option>ASC CoC</option></Select>
        </Field>
        <Field label="MOQ ceiling">
         <Select><option>Any</option><option>≤ 500 kg</option><option>≤ 1 t</option><option>≤ 5 t</option></Select>
        </Field>
       </div>
       <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
        <Button variant="primary" size="md" leading="search" onClick={() => onNavigate("directory")}>{vp.isMobile ? "Search suppliers" : "Search Verified Suppliers"}</Button>
        <div style={{ flex: 1, textAlign: vp.isMobile ? "left" : "center" }}>
         <Button variant="link" size="md" onClick={onRFQ}>Post an RFQ</Button>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>

   {/* TRUST STRIP ==================================================== */}
   <section style={{ padding: "32px var(--pad-x)", background: "var(--color-bg-soft)", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: vp.isMobile ? 16 : 40, flexWrap: "wrap" }}>
     <div style={{ fontSize: 12, color: "var(--color-fg-muted)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 500 }}>{vp.isMobile ? "Trusted by 380 importers" : "Trusted by 380 importers across Japan"}</div>
     <div style={{ display: "flex", gap: vp.isMobile ? 18 : (vp.isTabletDown ? 24 : 36), color: "var(--jv-navy-400)", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: vp.isMobile ? 14 : 18, flexWrap: "wrap", rowGap: 8 }}>
      <span>大和水産</span>
      <span>NICHIREI</span>
      <span>丸紅</span>
      <span>MARUHA NICHIRO</span>
      <span>伊藤忠</span>
      <span>SEIYU</span>
     </div>
    </div>
   </section>

   {/* PRODUCT / SUPPLIER SEARCH =================================== */}
   <section style={{ padding: vp.isMobile ? "40px var(--pad-x)" : "56px var(--pad-x)", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 880, margin: "0 auto" }}>
     {/* Tabs */}
     <div role="tablist" style={{ display: "flex", gap: vp.isMobile ? 20 : 32, marginBottom: 20, borderBottom: "1px solid var(--color-border)" }}>
      {[
       { id: "products", label: "Products" },
       { id: "suppliers", label: "Suppliers" },
      ].map(t => {
       const active = tab === t.id;
       return (
        <button
         key={t.id}
         role="tab"
         aria-selected={active}
         onClick={() => { setTab(t.id); setQuery(""); }}
         style={{
          background: "transparent",
          border: 0,
          padding: "8px 4px 16px",
          marginBottom: -1,
          cursor: "pointer",
          fontFamily: "var(--font-sans)",
          fontSize: vp.isMobile ? 18 : 22,
          fontWeight: active ? 700 : 500,
          letterSpacing: "-0.015em",
          color: active ? "var(--jv-navy-800)" : "var(--color-fg-muted)",
          borderBottom: active ? "3px solid var(--jv-accent-600)" : "3px solid transparent",
          transition: "color 120ms var(--ease-standard), border-color 120ms var(--ease-standard)",
         }}
         onMouseEnter={e => { if (!active) e.currentTarget.style.color = "var(--jv-navy-700)"; }}
         onMouseLeave={e => { if (!active) e.currentTarget.style.color = "var(--color-fg-muted)"; }}
        >
         {t.label}
        </button>
       );
      })}
     </div>

     {/* Command bar */}
     <CommandBar
      query={query}
      setQuery={setQuery}
      origin={origin}
      setOrigin={setOrigin}
      placeholder={placeholder}
      onSubmit={submit}
      vp={vp}
     />

     <div style={{ marginTop: 16, fontSize: 13, color: "var(--color-fg-muted)" }}>
      Can't find what you need?{" "}
      <a href="#" onClick={e => { e.preventDefault(); onRFQ(); }} style={{ color: "var(--jv-navy-800)", borderBottom: "1px solid var(--color-border)", fontWeight: 500 }}>Post an RFQ</a>
      {" "}and let verified suppliers come to you.
     </div>
    </div>
   </section>

   {/* CATEGORIES ==================================================== */}
   <section style={{ padding: vp.isMobile ? "56px var(--pad-x)" : "80px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <Eyebrow>Browse by category</Eyebrow>
     <h2 style={{ marginTop: 12, marginBottom: vp.isMobile ? 24 : 32, fontSize: vp.isMobile ? 26 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>Six verticals. One verified directory.</h2>
     <div style={{ display: "grid", gridTemplateColumns: vp.isDesktop ? "repeat(3, 1fr)" : (vp.isMobile ? "1fr" : "repeat(2, 1fr)"), gap: 16 }}>
      {[
       { icon: "anchor", label: "Seafood, fresh & frozen", count: "612 suppliers" },
       { icon: "package", label: "Processed food & ready-to-eat", count: "284 suppliers" },
       { icon: "factory", label: "Food manufacturing & OEM", count: "176 suppliers" },
       { icon: "globe", label: "Trading & re-export", count: "98 suppliers" },
       { icon: "file-check", label: "Cold-chain & logistics", count: "44 suppliers" },
       { icon: "shield-check", label: "Certification & compliance", count: "26 partners" },
      ].map((c, i) => (
       <a key={i} href="#" onClick={e => { e.preventDefault(); onNavigate("directory"); }}
        style={{ padding: "20px 22px", background: "#fff", border: "1px solid var(--color-border)", borderRadius: 6, display: "flex", alignItems: "center", gap: 16, transition: "border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard)" }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--color-border-strong)"; e.currentTarget.style.boxShadow = "var(--shadow-1)"; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--color-border)"; e.currentTarget.style.boxShadow = "none"; }}>
        <div style={{ width: 40, height: 40, borderRadius: 6, background: "var(--jv-navy-50)", color: "var(--jv-navy-800)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
         <Icon name={c.icon} size={20}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{ fontSize: 15, fontWeight: 500, color: "var(--jv-navy-800)" }}>{c.label}</div>
         <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 2 }}>{c.count}</div>
        </div>
        <Icon name="chevron-right" size={18} color="var(--color-fg-muted)"/>
       </a>
      ))}
     </div>
    </div>
   </section>

   {/* FEATURED VERIFIED ============================================= */}
   <section style={{ padding: vp.isMobile ? "72px var(--pad-x)" : "120px var(--pad-x)", borderTop: "1px solid var(--color-border)", background: "var(--color-bg-soft)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ display: "flex", alignItems: vp.isMobile ? "flex-start" : "flex-end", justifyContent: "space-between", gap: vp.isMobile ? 24 : 48, marginBottom: vp.isMobile ? 32 : 48, flexDirection: vp.isMobile ? "column" : "row" }}>
      <div>
       <Eyebrow>Featured · verified this week</Eyebrow>
       <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 28 : 40, lineHeight: 1.12, letterSpacing: "-0.018em", color: "var(--jv-navy-800)", marginBottom: 12 }}>
        Suppliers recently audited.
       </h2>
       <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--color-fg-muted)", maxWidth: 500 }}>
        Every listing below passed a third-party site visit in the last 30 days. Audit reports available on request.
       </p>
      </div>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate("directory"); }}
       style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--jv-navy-800)", fontSize: 14, fontWeight: 500, borderBottom: "1px solid var(--color-border)", flexShrink: 0, whiteSpace: "nowrap" }}>
       View all verified suppliers <Icon name="arrow-right" size={16}/>
      </a>
     </div>
     <div style={{ display: "grid", gridTemplateColumns: vp.isTabletDown ? "1fr" : "repeat(2, 1fr)", gap: vp.isMobile ? 16 : 24 }}>
      {featured.map(s => (
       <AuditedSupplierCard key={s.id} supplier={s} onClick={() => onNavigate("profile", s.id)} onRFQ={onRFQ}/>
      ))}
     </div>
    </div>
   </section>

   {/* HOW IT WORKS ============================================= */}
   <section style={{ padding: vp.isMobile ? "64px var(--pad-x)" : "96px var(--pad-x)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ maxWidth: 720, marginBottom: vp.isMobile ? 36 : 56 }}>
      <Eyebrow>Why JVFood</Eyebrow>
      <h2 style={{ marginTop: 12, fontSize: vp.isMobile ? 24 : 32, lineHeight: 1.2, letterSpacing: "-0.015em", color: "var(--jv-navy-800)" }}>Transforming cross-border trading from relationship-based and opaque into data-driven, transparent, and trusted.</h2>
     </div>
     <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "repeat(3, 1fr)", gap: vp.isMobile ? 28 : 32, borderTop: "1px solid var(--color-border)", paddingTop: vp.isMobile ? 28 : 40 }}>
      {[
       { n: "01", h: "KYC every supplier", b: "Business registration, beneficial ownership, export license, three years of financials. No anonymous listings." },
       { n: "02", h: "Audit every facility", b: "Third-party site visit on file. HACCP, FSSC 22000, BRCGS, ASC where applicable. Reports available on request." },
       { n: "03", h: "Direct, bilingual", b: "Talk to suppliers in EN, JA, or VN. Quotes include FOB, MOQ, and lead-time, never a re-seller markup." },
      ].map(step => (
       <div key={step.n} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <Mono style={{ color: "var(--jv-accent-600)", fontSize: 13 }}>{step.n}</Mono>
        <div style={{ fontSize: 20, fontWeight: 600, color: "var(--jv-navy-800)", lineHeight: 1.35 }}>{step.h}</div>
        <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--color-fg-body)" }}>{step.b}</p>
       </div>
      ))}
     </div>
    </div>
   </section>
  </div>
 );
};

// CommandBar — clean search row.
// Desktop: [icon][input][origin][SEARCH btn] in one row.
// Mobile:  stacks the origin select + button below the input.
// -------------------------------------------------------------
const CommandBar = ({ query, setQuery, origin, setOrigin, placeholder, onSubmit, vp }) => {
 const [focus, setFocus] = useState(false);
 const ORIGINS = [
  { id: "any", label: "All origins" },
  { id: "vn", label: "Vietnam" },
  { id: "jp", label: "Japan" },
 ];
 const isCompact = vp ? vp.isMobile : false;

 const wrapStyle = {
  display: "flex",
  alignItems: "stretch",
  flexDirection: isCompact ? "column" : "row",
  background: "#fff",
  border: `1px solid ${focus ? "var(--jv-navy-500)" : "var(--color-border-strong)"}`,
  borderRadius: 10,
  boxShadow: focus ? "0 0 0 3px rgba(11,42,74,0.18)" : "var(--shadow-1)",
  transition: "border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard)",
  overflow: "hidden",
  minHeight: isCompact ? "auto" : 64,
 };
 return (
  <div style={wrapStyle}>
   {/* Top row on mobile, single row on desktop */}
   <div style={{ display: "flex", alignItems: "center", flex: 1, minHeight: isCompact ? 52 : "auto", borderBottom: isCompact ? "1px solid var(--color-divider)" : 0 }}>
    <div style={{ display: "flex", alignItems: "center", paddingLeft: isCompact ? 16 : 22, color: "var(--color-fg-muted)" }}>
     <Icon name="search" size={isCompact ? 18 : 22}/>
    </div>
    <input
     type="text"
     value={query}
     onChange={e => setQuery(e.target.value)}
     onFocus={() => setFocus(true)}
     onBlur={() => setFocus(false)}
     onKeyDown={e => { if (e.key === "Enter") onSubmit(); }}
     placeholder={placeholder}
     style={{
      flex: 1,
      minWidth: 0,
      border: 0,
      outline: "none",
      background: "transparent",
      padding: "0 16px",
      fontFamily: "var(--font-sans)",
      fontSize: isCompact ? 15 : 16,
      color: "var(--color-fg)",
      height: "100%",
     }}
    />
   </div>

   {/* Bottom row on mobile, inline on desktop */}
   <div style={{ display: "flex", alignItems: "stretch", minHeight: isCompact ? 48 : "auto" }}>
    <div style={{ display: "flex", alignItems: "center", borderLeft: isCompact ? 0 : "1px solid var(--color-divider)", position: "relative", paddingLeft: 16, paddingRight: 10, flex: isCompact ? 1 : "0 0 auto" }}>
     {origin !== "any" && (
      <img src={`assets/flag-${origin}.svg`} width="18" height="13" alt="" style={{ marginRight: 8 }}/>
     )}
     <select
      value={origin}
      onChange={e => setOrigin(e.target.value)}
      style={{
       appearance: "none",
       border: 0,
       background: "transparent",
       padding: "0 22px 0 0",
       fontFamily: "var(--font-sans)",
       fontSize: 14,
       fontWeight: 500,
       color: "var(--jv-navy-800)",
       cursor: "pointer",
       outline: "none",
       height: "100%",
       width: "100%",
      }}
     >
      {ORIGINS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
     </select>
     <div style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--color-fg-muted)" }}>
      <Icon name="chevron-down" size={16}/>
     </div>
    </div>
    <button
     onClick={onSubmit}
     style={{
      background: "var(--jv-accent-600)",
      color: "#fff",
      border: 0,
      padding: isCompact ? "0 24px" : "0 36px",
      fontFamily: "var(--font-sans)",
      fontSize: isCompact ? 14 : 16,
      fontWeight: 600,
      cursor: "pointer",
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      gap: 8,
      transition: "background 120ms var(--ease-standard)",
      whiteSpace: "nowrap",
     }}
     onMouseEnter={e => e.currentTarget.style.background = "var(--jv-accent-700)"}
     onMouseLeave={e => e.currentTarget.style.background = "var(--jv-accent-600)"}
     onMouseDown={e => e.currentTarget.style.background = "var(--jv-accent-800)"}
     onMouseUp={e => e.currentTarget.style.background = "var(--jv-accent-700)"}
    >
     Search
    </button>
   </div>
  </div>
 );
};

// Facility image + audit-date lookup maps ----------------------
const FACILITY_IMGS = {
 "mekong-seafood":       "assets/products/shrimp.jpg",
 "saigon-premium-foods": "assets/products/dried.jpg",
 "viet-frozen-foods":    "assets/facility/distribution.jpg",
 "hai-phong-cold":       "assets/facility/port.jpg",
 "tokyo-food-imports":   "assets/facility/walkthrough.jpg",
 "osaka-marine-trading": "assets/facility/qa-lab.jpg",
 "nippon-gourmet":       "assets/products/tea.jpg",
 "hokkaido-marine":      "assets/facility/catch.jpg",
 "osaka-fine-foods":     "assets/products/sauce.jpg",
 "kanto-holdings":       "assets/facility/port.jpg",
};
const AUDIT_DATES = {
 "mekong-seafood":       "14 May 2026",
 "saigon-premium-foods": "11 May 2026",
 "viet-frozen-foods":    "9 May 2026",
 "hai-phong-cold":       "7 May 2026",
};

// AuditedSupplierCard — homepage "recently audited" showcase ---
const AuditedSupplierCard = ({ supplier: s, onClick, onRFQ }) => {
 const [hover, setHover] = useState(false);
 const img = FACILITY_IMGS[s.id];
 const auditDate = AUDIT_DATES[s.id] || "May 2026";

 return (
  <div
   onClick={onClick}
   onMouseEnter={() => setHover(true)}
   onMouseLeave={() => setHover(false)}
   style={{
    background: "#fff",
    border: `1px solid ${hover ? "var(--color-border-strong)" : "var(--color-border)"}`,
    borderTop: s.premium ? "2px solid var(--jv-accent-600)" : `1px solid ${hover ? "var(--color-border-strong)" : "var(--color-border)"}`,
    borderRadius: 6,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    cursor: "pointer",
    transition: "border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard)",
    boxShadow: hover ? "var(--shadow-1)" : "none",
   }}>

   {/* FACILITY IMAGE */}
   <div style={{ position: "relative", aspectRatio: "16 / 9", overflow: "hidden", background: "var(--jv-navy-100)", flexShrink: 0 }}>
    {img ? (
     <img
      src={img}
      alt=""
      style={{
       width: "100%", height: "100%",
       objectFit: "cover",
       filter: "saturate(0.75) brightness(0.9)",
       transition: "transform 320ms var(--ease-decel)",
       transform: hover ? "scale(1.04)" : "scale(1.0)",
       display: "block",
      }}
     />
    ) : (
     <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Icon name="factory" size={40} color="var(--jv-navy-300)"/>
     </div>
    )}
    <div style={{
     position: "absolute", inset: 0,
     background: "linear-gradient(to bottom, rgba(11,42,74,0.18) 0%, transparent 45%)",
     pointerEvents: "none",
    }}/>
    <div style={{
     position: "absolute", top: 12, right: 12,
     display: "flex", alignItems: "center", gap: 5,
     background: "rgba(11,42,74,0.76)",
     backdropFilter: "blur(8px)",
     color: "#fff",
     borderRadius: 4,
     padding: "5px 10px",
     fontSize: 11,
     fontWeight: 500,
     letterSpacing: "0.02em",
     fontFamily: "var(--font-sans)",
    }}>
     <Icon name="shield-check" size={12} color="#5fd49a"/>
     Audited {auditDate}
    </div>
    {s.premium && (
     <div style={{ position: "absolute", bottom: 12, left: 12 }}>
      <PremiumTag/>
     </div>
    )}
   </div>

   {/* INFO PANEL */}
   <div style={{ padding: "20px 22px 22px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
     <div style={{ minWidth: 0, flex: 1 }}>
      <div style={{ fontSize: 16, fontWeight: 600, color: "var(--jv-navy-800)", lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
       {s.name}
      </div>
      {s.nameJa && (
       <div style={{ fontSize: 12, color: "var(--color-fg-muted)", marginTop: 2, fontFamily: "var(--font-jp)" }}>
        {s.nameJa}
       </div>
      )}
      <div style={{ marginTop: 7 }}>
       <CountryChip country={s.country} label={s.city}/>
      </div>
     </div>
     <div style={{ flexShrink: 0 }}>
      <StatusPill tone="trust">Verified</StatusPill>
     </div>
    </div>

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

    <p style={{
     margin: 0,
     fontSize: 13,
     lineHeight: 1.55,
     color: "var(--color-fg-body)",
     display: "-webkit-box",
     WebkitLineClamp: 2,
     WebkitBoxOrient: "vertical",
     overflow: "hidden",
     flex: 1,
    }}>
     {s.blurb}
    </p>

    <div style={{
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     paddingTop: 14,
     borderTop: "1px solid var(--color-divider)",
     marginTop: "auto",
     gap: 12,
     flexWrap: "wrap",
    }}>
     <div style={{ display: "flex", gap: 18, fontSize: 12, color: "var(--color-fg-muted)" }}>
      <span>MOQ <Mono style={{ color: "var(--color-fg)", fontSize: 12 }}>{s.moq}</Mono></span>
      <span>Lead <Mono style={{ color: "var(--color-fg)", fontSize: 12 }}>{s.leadTime}</Mono></span>
     </div>
     <div style={{ display: "flex", gap: 8 }}>
      <Button variant="ghost" size="sm" onClick={e => { e.stopPropagation(); onRFQ && onRFQ(); }}>Quote</Button>
      <Button variant="secondary" size="sm" trailing="arrow-right" onClick={e => { e.stopPropagation(); onClick && onClick(); }}>Profile</Button>
     </div>
    </div>
   </div>
  </div>
 );
};

// SupplierCard, shared by Home + Directory ---------------------
const SupplierCard = ({ supplier: s, onClick, onRFQ }) => {
 const [hover, setHover] = useState(false);
 return (
  <div
   onClick={onClick}
   onMouseEnter={() => setHover(true)}
   onMouseLeave={() => setHover(false)}
   style={{
    background: "#fff",
    border: "1px solid var(--color-border)",
    borderTop: s.premium ? "2px solid var(--jv-accent-600)" : "1px solid var(--color-border)",
    borderRadius: 6,
    padding: 16,
    display: "flex",
    flexDirection: "column",
    gap: 14,
    cursor: "pointer",
    transition: "border-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard)",
    boxShadow: hover ? "var(--shadow-1)" : "none",
    borderColor: hover ? "var(--color-border-strong)" : undefined,
   }}>
   <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
     <div style={{ width: 40, height: 40, borderRadius: 6, background: s.premium ? "var(--jv-sand-100)" : "var(--jv-navy-50)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, color: "var(--jv-navy-800)", fontSize: 14, flexShrink: 0 }}>{s.initials}</div>
     <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--jv-navy-800)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div>
      <CountryChip country={s.country} label={s.city}/>
     </div>
    </div>
    {s.premium && <PremiumTag/>}
   </div>
   <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
    {s.certs.map(c => <CertTag key={c}>{c}</CertTag>)}
   </div>
   <div style={{ fontSize: 13, color: "var(--color-fg-body)", lineHeight: 1.5, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
    {s.blurb}
   </div>
   <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 12, borderTop: "1px solid var(--color-divider)", fontSize: 12, color: "var(--color-fg-muted)", gap: 8, flexWrap: "wrap" }}>
    <div style={{ display: "flex", gap: 14 }}>
     <span>MOQ <Mono style={{ color: "var(--color-fg)" }}>{s.moq}</Mono></span>
     <span>Lead <Mono style={{ color: "var(--color-fg)" }}>{s.leadTime}</Mono></span>
    </div>
    {s.verified ? <StatusPill tone="trust">Verified</StatusPill> : <StatusPill tone="warn">Pending</StatusPill>}
   </div>
  </div>
 );
};

Object.assign(window, { HomePage, SupplierCard });