e.stopPropagation()}>

{step===1 ? "New invoice" : "Review & send"}

{step===1 ? "Bill a client — optionally advance it with Aria in the same flow." : "Confirm the details before sending."}

1?" done":"")}>

{step>1 ? : 1}

Details

1?" done":"")} />

Review

{financeNow ? "Get paid" : "Send"}

{step === 1 && (

Client

Amount & terms

€ setAmount(e.target.value)} inputMode="decimal"/>

Buyer validation

Auto-validate Unlocks after 3 settled invoices with this buyer.

setValidation("buyer")}/>

Buyer confirms Send link; funds release within ~4h of confirmation.

Documents

{docOptions.map(d => ( toggleDoc(d.id)}/> {d.label} ))}

Internal note

setNote(e.target.value)} rows={2}/>
          </div>
        )}

{step === 2 && (
          <div className="modal-body">
            <div className="ni-review-card">
              <div className="ni-review-head">
                <div>
                  <div className="ni-review-id">INV-2026-· draft</div>
                  <div className="ni-review-buyer">{buyer}</div>
                  <div className="ni-review-sub">{buyerSub} · {terms} · Buyer confirmation</div>
                </div>
                <div className="ni-review-amt">
                  <span className="cur">€</span>{amt.toLocaleString("en-GB",{minimumFractionDigits:2,maximumFractionDigits:2})}
                </div>
              </div>
              <div className="ni-review-docs">
                {docs.map(d => {
                  const meta = (window.DOC_META || {})[d] || { label: d, icon:"file", color:"#475569" };
                  return (
                    <span key={d} className="ni-review-doc">
                      <Icon n={meta.icon} color={meta.color}/>{meta.label}
                    </span>
                  );
                })}
              </div>
              {note && <div className="ni-review-note">“{note}”</div>}
            </div>

<label className={"ni-finance-toggle"+(financeNow?" on":"")}>
              <div className="ni-ft-left">
                <div className="ni-ft-logo"><Icon n="zap"/></div>
                <div>
                  <div className="ni-ft-title">Get paid now with Aria <span className="ni-ft-chip">Optional</span></div>
                  <div className="ni-ft-sub">Advance this invoice instantly — 2% fee, settles in ~4h.</div>
                </div>
              </div>
              <div className="ni-ft-right">
                <div className="ni-ft-payout">{fmtEur(payout)}</div>
                <div className="ni-ft-payout-sub">net payout</div>
              </div>
              <span className={"ni-switch"+(financeNow?" on":"")} aria-hidden="true"><span className="ni-switch-thumb"/></span>
              <input type="checkbox" className="ni-ft-cb" checked={financeNow} onChange={e=>setFinanceNow(e.target.checked)}/>
            </label>

{financeNow && (
              <div className="ni-breakdown">
                <div className="ni-bd-row"><span>Invoice amount</span><b>{fmtEur(amt)}</b></div>
                <div className="ni-bd-row minus"><span>Financing fee · 2%</span><b>− {fmtEur(fee)}</b></div>
                <div className="ni-bd-sep"/>
                <div className="ni-bd-row total"><span>You'll receive</span><b>{fmtEur(payout)}</b></div>
                <div className="ni-bd-foot">
                  <Icon n="info"/>
                  <span>A validation link will be sent to {buyer} — funds release within ~4h of their confirmation.</span>
                </div>
              </div>
            )}
          </div>
        )}

<div className="modal-foot">
          <div className="modal-foot-left">
            {financeNow
              ? <><span style={{color:"#98a2b3"}}>Financing by</span> <img src="aria/logo_forest.png" alt="Aria"/></>
              : <span style={{color:"#cbd5e1"}}>No financing — standard invoice.</span>}
          </div>
          <div className="modal-foot-right">
            {step === 1 && (<>
              <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" disabled={!valid} onClick={()=>setStep(2)}>
                Continue <Icon n="arrowR"/>
              </button>
            </>)}
            {step === 2 && (<>
              <button className="btn btn-secondary" onClick={()=>setStep(1)}>Back</button>
              <button className="btn btn-primary" onClick={handleCreate}>
                {financeNow
                  ? (<><Icon n="zap" size={14}/> Send & get paid now</>)
                  : (<>Send invoice <Icon n="send"/></>)}
              </button>
            </>)}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NewInvoiceModal });