// RFQModal.jsx, Request-for-Quote modal flow

const RFQModal = ({ open, onClose }) => {
 const vp = useViewport();
 const [step, setStep] = useState(1);
 const [sent, setSent] = useState(false);

 if (!open) return null;

 const close = () => { onClose(); setTimeout(() => { setStep(1); setSent(false); }, 200); };

 const isFullScreen = vp.isMobile;

 return (
  <div role="dialog" aria-modal="true"
   onClick={close}
   style={{ position: "fixed", inset: 0, background: "rgba(11,42,74,0.40)", zIndex: 100, display: "flex", alignItems: isFullScreen ? "flex-end" : "center", justifyContent: "center", padding: isFullScreen ? 0 : (vp.isTablet ? 24 : 40) }}>
   <div onClick={e => e.stopPropagation()}
    style={{
     width: "100%",
     maxWidth: 720,
     background: "#fff",
     borderRadius: isFullScreen ? "16px 16px 0 0" : 10,
     boxShadow: "0 16px 40px rgba(11,42,74,0.12), 0 2px 6px rgba(11,42,74,0.06)",
     display: "flex", flexDirection: "column",
     maxHeight: isFullScreen ? "92vh" : "calc(100vh - 80px)",
    }}>

    {/* Header */}
    <div style={{ padding: vp.isMobile ? "16px 20px" : "20px 28px", borderBottom: "1px solid var(--color-border)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
     <div style={{ minWidth: 0 }}>
      <Eyebrow>Request for quote</Eyebrow>
      <div style={{ marginTop: 4, fontSize: vp.isMobile ? 16 : 18, fontWeight: 600, color: "var(--jv-navy-800)" }}>{sent ? "RFQ sent" : (vp.isMobile ? "New RFQ" : "Post an RFQ to verified suppliers")}</div>
     </div>
     <button onClick={close} aria-label="Close" style={{ background: "transparent", border: 0, padding: 8, cursor: "pointer", color: "var(--color-fg-muted)" }}><Icon name="x" size={20}/></button>
    </div>

    {sent ? <RFQSuccess onDone={close}/> : (
     <>
      {/* Stepper */}
      <div style={{ padding: vp.isMobile ? "14px 20px" : "16px 28px", borderBottom: "1px solid var(--color-divider)", display: "flex", gap: 6, alignItems: "center" }}>
       {[
        { n: 1, label: "Product" },
        { n: 2, label: "Terms" },
        { n: 3, label: "Message" },
       ].map((s, i, arr) => (
        <React.Fragment key={s.n}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ width: 22, height: 22, borderRadius: 999, background: step >= s.n ? "var(--jv-navy-800)" : "var(--jv-ink-100)", color: step >= s.n ? "#fff" : "var(--color-fg-muted)", fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{s.n}</div>
          {!vp.isMobile && <span style={{ fontSize: 13, color: step >= s.n ? "var(--jv-navy-800)" : "var(--color-fg-muted)", fontWeight: step === s.n ? 500 : 400 }}>{s.label}</span>}
          {vp.isMobile && step === s.n && <span style={{ fontSize: 13, color: "var(--jv-navy-800)", fontWeight: 500 }}>{s.label}</span>}
         </div>
         {i < arr.length - 1 && <div style={{ flex: 1, height: 1, background: "var(--color-border)" }}/>}
        </React.Fragment>
       ))}
      </div>

      {/* Body */}
      <div style={{ padding: vp.isMobile ? 20 : 28, overflow: "auto" }}>
       {step === 1 && <RFQStep1 vp={vp}/>}
       {step === 2 && <RFQStep2 vp={vp}/>}
       {step === 3 && <RFQStep3/>}
      </div>

      {/* Footer */}
      <div style={{ padding: vp.isMobile ? "14px 20px" : "16px 28px", borderTop: "1px solid var(--color-border)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--jv-ink-50)", borderRadius: isFullScreen ? "0" : "0 0 10px 10px", gap: 12, flexWrap: "wrap" }}>
       {!vp.isMobile && <div style={{ fontSize: 12, color: "var(--color-fg-muted)" }}>RFQ broadcast to <Mono style={{ color: "var(--color-fg)" }}>24</Mono> matching verified suppliers.</div>}
       <div style={{ display: "flex", gap: 8, marginLeft: vp.isMobile ? 0 : "auto" }}>
        {step > 1 && <Button variant="ghost" onClick={() => setStep(step - 1)}>Back</Button>}
        {step < 3 && <Button variant="primary" onClick={() => setStep(step + 1)}>Continue</Button>}
        {step === 3 && <Button variant="primary" onClick={() => setSent(true)}>Send RFQ</Button>}
       </div>
      </div>
     </>
    )}
   </div>
  </div>
 );
};

const RFQStep1 = ({ vp }) => (
 <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <Field label="Product description">
   <Input placeholder="e.g. Black tiger shrimp HLSO 16/20, IQF, vacuum-packed"/>
  </Field>
  <div style={{ display: "grid", gridTemplateColumns: vp && vp.isMobile ? "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>
  </div>
  <Field label="Quality / spec notes">
   <Textarea placeholder="Grade, packaging, certification requirements, target shelf-life, country of origin restrictions…"/>
  </Field>
 </div>
);

const RFQStep2 = ({ vp }) => (
 <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <div style={{ display: "grid", gridTemplateColumns: vp && 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="Origin port (preferred)">
    <Select><option>Any</option><option>Hai Phong</option><option>Cat Lai (HCMC)</option><option>Da Nang</option></Select>
   </Field>
   <Field label="Destination port">
    <Select><option>Yokohama</option><option>Kobe</option><option>Osaka</option><option>Hakata</option></Select>
   </Field>
  </div>
  <div style={{ display: "grid", gridTemplateColumns: vp && vp.isMobile ? "1fr" : "1fr 1fr 1fr", gap: 12 }}>
   <Field label="Target price (per kg)">
    <Input placeholder="USD 11.50"/>
   </Field>
   <Field label="Required delivery">
    <Input type="date" defaultValue="2026-07-15"/>
   </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: "8px 0" }}>
    {["HACCP", "FSSC 22000", "BRCGS", "ASC CoC", "MSC CoC", "JAS Organic"].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>
 </div>
);

const RFQStep3 = () => (
 <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <Field label="Your role">
   <Select defaultValue="procurement"><option value="procurement">Procurement manager</option><option value="trade">Trade manager</option><option value="exec">Executive / owner</option></Select>
  </Field>
  <Field label="Message to suppliers" help="Plain prose. The platform translates between EN, JA, and VN 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."/>
  </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>RFQs are only visible to <strong>verified suppliers</strong>. Your company name and email are never shared until you accept a quote.</div>
  </div>
 </div>
);

const RFQSuccess = ({ onDone }) => (
 <div style={{ padding: "48px 32px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 16 }}>
  <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--jv-trust-50)", display: "flex", alignItems: "center", justifyContent: "center" }}>
   <Icon name="check" size={28} color="var(--jv-trust-600)"/>
  </div>
  <h3 style={{ fontSize: 22, color: "var(--jv-navy-800)" }}>RFQ broadcast to 24 verified suppliers</h3>
  <p style={{ fontSize: 15, color: "var(--color-fg-body)", maxWidth: 440 }}>
   Quotes typically arrive within 1 business day. You'll be notified by email as each one comes in.
  </p>
  <div style={{ display: "flex", gap: 8, marginTop: 8, flexWrap: "wrap", justifyContent: "center" }}>
   <Button variant="primary" onClick={onDone}>Track responses</Button>
   <Button variant="secondary" onClick={onDone}>Close</Button>
  </div>
 </div>
);

Object.assign(window, { RFQModal });