// RFQPage.jsx, Buyer RFQ form + live feed of recent RFQs

const RFQPage = ({ onNavigate }) => {
 const vp = useViewport();
 const [submitted, setSubmitted] = useState(false);

 return (
  <div>
   <section style={{ padding: "32px var(--pad-x) 0", borderBottom: "1px solid var(--color-border)" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
     <div style={{ fontSize: 12, color: "var(--color-fg-muted)", display: "flex", gap: 6, marginBottom: 12 }}>
      <a href="#" onClick={e => { e.preventDefault(); onNavigate("home"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Home</a>
      <span>/</span><span style={{ color: "var(--color-fg)" }}>RFQs</span>
     </div>
     <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", paddingBottom: 32, gap: 24, flexWrap: "wrap" }}>
      <div style={{ maxWidth: 720 }}>
       <Eyebrow>Sourcing</Eyebrow>
       <h1 style={{ marginTop: 12, fontSize: vp.isMobile ? 30 : 40, lineHeight: 1.15, letterSpacing: "-0.018em", color: "var(--jv-navy-800)" }}>
        Post your sourcing request.
       </h1>
       <p style={{ marginTop: 16, fontSize: vp.isMobile ? 15 : 17, lineHeight: 1.55, color: "var(--color-fg-body)" }}>
        Tell us what you need. We broadcast your RFQ to matching verified suppliers, they reply with FOB / CIF quotes, MOQ, and lead times within 1 business day.
       </p>
      </div>
      <div style={{ textAlign: vp.isMobile ? "left" : "right" }}>
       <div style={{ fontSize: 11, color: "var(--color-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 500 }}>This week</div>
       <Mono style={{ fontSize: 32, color: "var(--jv-navy-800)", display: "block", marginTop: 4 }}>148</Mono>
       <div style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>RFQs posted · avg. 4.8 quotes each</div>
      </div>
     </div>
    </div>
   </section>

   <div style={{ maxWidth: 1280, margin: "0 auto", padding: "48px var(--pad-x)", display: "grid", gridTemplateColumns: vp.isDesktop ? "1.4fr 1fr" : "1fr", gap: vp.isWide ? 56 : 32 }}>
    {/* FORM */}
    <section style={{ minWidth: 0 }}>
     {submitted ? (
      <div style={{ padding: 40, background: "var(--jv-trust-50)", border: "1px solid var(--jv-trust-100)", borderRadius: 10, display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }}>
       <div style={{ width: 48, height: 48, borderRadius: 999, background: "var(--jv-trust-100)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name="check" size={24} color="var(--jv-trust-600)"/>
       </div>
       <h2 style={{ fontSize: 24, color: "var(--jv-navy-800)" }}>RFQ broadcast to 24 verified suppliers.</h2>
       <p style={{ fontSize: 15, color: "var(--color-fg-body)" }}>Track responses in your buyer dashboard. Replies typically arrive within 1 business day.</p>
       <Button variant="primary" onClick={() => setSubmitted(false)}>Post another RFQ</Button>
      </div>
     ) : (
      <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
       <Eyebrow>New RFQ</Eyebrow>
       <Field label="Product description" help="Plain prose. Suppliers see your description before they see your name.">
        <Input placeholder="e.g. Black tiger shrimp HLSO 16/20, IQF, vacuum-packed, double-glazed."/>
       </Field>

       <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr 1fr", gap: 12 }}>
        <Field label="HS code (optional)"><Input placeholder="0306.17.10" style={{ fontFamily: "var(--font-mono)" }}/></Field>
        <Field label="Quantity"><Input placeholder="5 000 kg"/></Field>
        <Field label="Target price / kg"><Input placeholder="USD 11.50"/></Field>
       </div>

       <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 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 country">
         <Select defaultValue="jp"><option value="jp">Japan</option><option value="vn">Vietnam</option><option value="other">Other</option></Select>
        </Field>
        <Field label="Required delivery"><Input type="date" defaultValue="2026-07-15"/></Field>
       </div>

       <div style={{ display: "grid", gridTemplateColumns: vp.isMobile ? "1fr" : "1fr 1fr 1fr", gap: 12 }}>
        <Field label="Incoterm">
         <Select defaultValue="FOB"><option>FOB</option><option>CIF</option><option>EXW</option><option>DAP</option></Select>
        </Field>
        <Field label="Destination port">
         <Select><option>Yokohama</option><option>Kobe</option><option>Osaka</option><option>Hai Phong</option></Select>
        </Field>
        <Field label="Payment terms">
         <Select defaultValue="LC"><option value="LC">LC at sight</option><option value="TT">TT 30/70</option><option value="DA">D/A 60 days</option></Select>
        </Field>
       </div>

       <Field label="Required certifications">
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", padding: "4px 0" }}>
         {["HACCP", "FSSC 22000", "BRCGS", "ASC CoC", "MSC CoC", "JAS Organic", "Halal"].map(c => (
          <label key={c} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px", border: "1px solid var(--color-border)", borderRadius: 999, fontSize: 13, cursor: "pointer", background: "#fff" }}>
           <input type="checkbox" style={{ accentColor: "var(--jv-navy-800)" }}/>
           <CertTag>{c}</CertTag>
          </label>
         ))}
        </div>
       </Field>

       <Field label="Message to suppliers" help="EN, JA, or VN. Platform translates automatically.">
        <Textarea placeholder="Hello. We are a Tokyo-based importer sourcing for premium retail. Looking for a long-term relationship, 5,000 kg/month from Q3 2026 onward. Please include a recent third-party inspection report with your quote." style={{ minHeight: 120 }}/>
       </Field>

       <div style={{ padding: 14, background: "var(--jv-trust-50)", border: "1px solid var(--jv-trust-100)", borderRadius: 6, fontSize: 13, color: "var(--jv-trust-700)", display: "flex", gap: 12, alignItems: "flex-start" }}>
        <Icon name="shield-check" size={18} color="var(--jv-trust-600)"/>
        <div>Visible only to <strong>verified suppliers</strong>. Your company name and email are masked until you accept a quote.</div>
       </div>

       <div style={{ display: "flex", gap: 12, alignItems: "center", marginTop: 4, flexWrap: "wrap" }}>
        <Button type="submit" variant="primary" size="lg">Submit RFQ</Button>
        <Button variant="secondary" size="lg">Save draft</Button>
        <div style={{ marginLeft: vp.isMobile ? 0 : "auto", fontSize: 12, color: "var(--color-fg-muted)" }}>
         Broadcast to <Mono style={{ color: "var(--color-fg)" }}>24</Mono> matching verified suppliers
        </div>
       </div>
      </form>
     )}
    </section>

    {/* LIVE FEED */}
    <aside style={{ minWidth: 0 }}>
     <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
      <Eyebrow>Live · recent RFQs from other buyers</Eyebrow>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--jv-trust-700)" }}>
       <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--jv-trust-600)" }}/>
       Live
      </span>
     </div>
     <div style={{ border: "1px solid var(--color-border)", borderRadius: 6, overflow: "hidden", background: "#fff" }}>
      {RECENT_RFQS.map((r, i) => (
       <div key={r.id} style={{ padding: "14px 16px", borderTop: i ? "1px solid var(--color-divider)" : 0, display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <Mono style={{ fontSize: 11, color: "var(--color-fg-muted)" }}>{r.id}</Mono>
          <img src={`assets/flag-${r.flag}.svg`} width="14" height="11"/>
          <span style={{ fontSize: 12, color: "var(--color-fg-body)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.buyer}</span>
         </div>
         <span style={{ fontSize: 11, color: "var(--color-fg-muted)", flexShrink: 0 }}>{r.age}</span>
        </div>
        <div style={{ fontSize: 14, fontWeight: 500, color: "var(--jv-navy-800)", lineHeight: 1.35 }}>{r.product}</div>
        <div style={{ display: "flex", gap: 12, fontSize: 12, color: "var(--color-fg-muted)", flexWrap: "wrap" }}>
         <span>Qty <Mono style={{ color: "var(--color-fg)" }}>{r.qty}</Mono></span>
         <span>→ {r.dest}</span>
         <Mono style={{ color: "var(--color-fg)" }}>{r.incoterm}</Mono>
         <span style={{ color: "var(--jv-navy-700)" }}>· {r.cert}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 4 }}>
         <span style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>
          <Mono style={{ color: "var(--jv-trust-700)" }}>{r.responses}</Mono> suppliers quoted
         </span>
         <Button variant="ghost" size="sm" trailing="arrow-right">View</Button>
        </div>
       </div>
      ))}
     </div>
     <div style={{ marginTop: 12, fontSize: 12, color: "var(--color-fg-muted)", textAlign: "center" }}>
      Showing 8 most recent. <a href="#" style={{ color: "var(--jv-navy-800)", borderBottom: "1px solid var(--color-border)" }}>View all 148</a>
     </div>
    </aside>
   </div>
  </div>
 );
};

Object.assign(window, { RFQPage });