/* ============================================================
   Carzello — CONSIGNOR PORTAL
   Seller-facing surface for dealers/fleets/companies who consign
   cars to Sayarah. Shares the live Engine store.
   ============================================================ */

const CONS_SS = "sayarah.consignor.cid";

/* Real auth: the signed-in Firebase account's email must match a consignor record. */
function useConsignorAuth() {
  const user = useAuthUser();
  const s = useStore();
  const email = user && user.email ? user.email.toLowerCase() : null;
  const me = email ? s.consignors.find((c) => (c.email || "").toLowerCase() === email) : null;
  return { user, cid: me ? me.id : null, signOut: () => FB.signOut() };
}

function CKpi({ icon, label, value, sub }) {
  return <div className="kpi"><div className="ic">{icon}</div><div className="l">{label}</div><div className="v tnum">{value}</div>{sub && <div className="s">{sub}</div>}</div>;
}

const CONS_NAV = [
  { id: "dashboard", label: "Dashboard", path: "/consignor", icon: "grid" },
  { id: "vehicles", label: "My vehicles", path: "/consignor/vehicles", icon: "car" },
  { id: "offers", label: "Offers", path: "/consignor/offers", icon: "offer" },
  { id: "payouts", label: "Payouts", path: "/consignor/payouts", icon: "truck" },
  { id: "sell", label: "List a car", path: "/consignor/sell", icon: "plus" },
  { id: "account", label: "Account", path: "/consignor/account", icon: "user" },
];

function ConsignorSignIn() {
  const user = useAuthUser();
  const s = useStore();
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const knownEmails = s.consignors.map((c) => (c.email || "").toLowerCase());
  function go() {
    if (busy) return;
    setErr(null); setBusy(true);
    FB.signIn(email, pw)
      .then((cred) => {
        if (!knownEmails.includes((cred.user.email || "").toLowerCase())) {
          setErr("No consignor account is linked to this email. Contact Carzello to get onboarded.");
          setBusy(false);
          return FB.signOut();
        }
        return FB.adoptAccountState().then(() => location.reload());
      })
      .catch((e) => { setErr(e.message); setBusy(false); });
  }
  return (
    <div className="col gap-12">
      {user && <div className="feedback warn"><I.alert width="13" height="13" /> Signed in as {user.email} — this email has no consignor account. Contact Carzello to get onboarded.</div>}
      <div className="muted" style={{ fontSize: 13 }}>Sign in with your consignor account to list vehicles and track sales &amp; payouts.</div>
      <div className="field"><label>Email</label><input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" /></div>
      <div className="field"><label>Password</label><input className="input" type="password" value={pw} onChange={(e) => { setPw(e.target.value); setErr(null); }} onKeyDown={(e) => e.key === "Enter" && go()} autoComplete="current-password" /></div>
      {err && <div className="feedback err"><I.alert width="13" height="13" /> {err}</div>}
      <button className="btn primary lg block" onClick={go} disabled={busy}><I.shield width="14" height="14" /> {busy ? "Signing in…" : "Sign in"}</button>
    </div>
  );
}

function ConsignorGate() {
  return (
    <div className="gate">
      <div className="card" style={{ maxWidth: 420 }}>
        <div className="row gap-10" style={{ marginBottom: 16 }}>
          <div><img src="assets/carzello-logo.svg" alt="Carzello" style={{ height: 26, display: "block", marginBottom: 6 }} /><div className="muted" style={{ fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700 }}>Consignor portal</div></div>
        </div>
        <ConsignorSignIn />
        <div className="muted" style={{ fontSize: 12, textAlign: "center", marginTop: 14 }}><a href="#/browse" style={{ color: "var(--brand)", fontWeight: 700 }}>Back to buyer site</a></div>
      </div>
    </div>
  );
}

function Consignor({ section }) {
  const auth = useConsignorAuth();
  const s = useStore();
  if (!auth.cid) return <ConsignorGate />;
  const me = s.consignors.find(c => c.id === auth.cid);
  if (!me) { auth.signOut(); return null; }
  const sec = section || "dashboard";
  const myLots = Object.values(s.lots).filter(L => L.consignorId === me.id);
  const mySettlements = s.settlements.filter(x => x.consignorId === me.id);
  const myOffers = s.offers.filter(o => { const L = s.lots[o.lotId]; return L && L.consignorId === me.id; });

  function body() {
    switch (sec) {
      case "vehicles": return <CVehicles me={me} lots={myLots} />;
      case "offers": return <COffers me={me} offers={myOffers} lots={s.lots} />;
      case "payouts": return <CPayouts me={me} settlements={mySettlements} />;
      case "sell": return <CSell me={me} />;
      case "account": return <CAccount me={me} onSignOut={auth.signOut} />;
      default: return <CDashboard me={me} lots={myLots} settlements={mySettlements} />;
    }
  }
  const title = (CONS_NAV.find(n => ("/consignor/" + sec) === n.path) || (sec === "dashboard" ? { label: "Dashboard" } : { label: "" })).label;

  return (
    <div className="admin">
      <aside className="admin-side">
        <a className="brand" href="#/consignor"><span className="mark">S</span><div>Sayarah<small>Consignor</small></div></a>
        <nav className="admin-nav">
          {CONS_NAV.map(n => {
            const on = ("/consignor/" + sec) === n.path || (sec === "dashboard" && n.id === "dashboard");
            const badge = n.id === "offers" ? myOffers.filter(o => o.status === "pending").length : 0;
            return <a key={n.id} href={"#" + n.path} className={on ? "on" : ""}>{I[n.icon] ? I[n.icon]({ width: 17, height: 17 }) : null}{n.label}{badge > 0 && <span className="badge">{badge}</span>}</a>;
          })}
        </nav>
        <div className="foot">
          <a href="#/browse"><I.eye width="15" height="15" /> View buyer site</a>
          <a onClick={auth.signOut} style={{ cursor: "pointer" }}><I.back width="15" height="15" /> Sign out</a>
        </div>
      </aside>
      <div className="admin-main">
        <header className="admin-top">
          <h1>{sec === "sell" ? "List a car" : title}</h1>
          <span className="crumb">/ {me.business}</span>
          <span className="spacer" />
          <a className="btn primary sm" href="#/consignor/sell"><I.plus width="14" height="14" /> List a car</a>
          <div className="avatar" style={{ width: 34, height: 34, fontSize: 12 }}>{me.business.split(" ").map(x => x[0]).slice(0, 2).join("")}</div>
        </header>
        <div className="admin-body">{body()}</div>
      </div>
    </div>
  );
}

/* ---- Dashboard ---- */
function CDashboard({ me, lots, settlements }) {
  const live = lots.filter(L => L.status === "live" && !L.hidden);
  const ended = lots.filter(L => L.status === "ended");
  const sold = settlements.length;
  const sellThrough = ended.length ? Math.round((sold / ended.length) * 100) : (sold ? 100 : 0);
  const pendingPayout = settlements.filter(x => x.status !== "paid").reduce((a, x) => a + x.net, 0);
  const lifetime = settlements.reduce((a, x) => a + x.net, 0);
  return (
    <div className="fadein col gap-20">
      <div className="kpi-grid">
        <CKpi icon={<I.car width="17" height="17" />} label="Active listings" value={live.length} sub={`${lots.length} total`} />
        <CKpi icon={<I.gavel width="17" height="17" />} label="On the block now" value={live.filter(L => L.saleType === "live").length} sub={`${live.reduce((a, L) => a + L.bidCount, 0)} bids in`} />
        <CKpi icon={<I.tag width="17" height="17" />} label="Sold" value={sold} sub={`${sellThrough}% sell-through`} />
        <CKpi icon={<I.truck width="17" height="17" />} label="Pending payout" value={fmtUSD(pendingPayout)} sub={`${settlements.filter(x => x.status !== "paid").length} awaiting`} />
        <CKpi icon={<I.bolt width="17" height="17" />} label="Lifetime net proceeds" value={fmtUSD(lifetime)} sub={`★ ${me.rating} rating`} />
      </div>

      <div className="row gap-20 wrap" style={{ alignItems: "flex-start" }}>
        <div className="form-card" style={{ flex: 2, minWidth: 320 }}>
          <h3>On the block now</h3>
          {live.length === 0
            ? <div className="muted" style={{ fontSize: 13 }}>No live listings. <a href="#/consignor/sell" style={{ color: "var(--brand)", fontWeight: 700 }}>List a car →</a></div>
            : <div className="col gap-8">{live.sort((a, b) => a.endsAt - b.endsAt).slice(0, 6).map(L => {
              const mine = L.highBidder === "you";
              return (
                <div key={L.id} className="row gap-10" style={{ padding: "8px 0", borderTop: "1px solid var(--border)", cursor: "pointer" }} {...clickable(() => navigate(`/lot/${L.id}`), `${L.year} ${L.make} ${L.model}`)}>
                  <b style={{ fontSize: 13, flex: 1 }}>{L.year} {L.make} {L.model}</b>
                  <span className="muted" style={{ fontSize: 12 }}>{L.bidCount} bids</span>
                  {L.reserve != null && <Pill kind={L.reserveMet ? "green" : "amber"} style={{ fontSize: 10 }}>{L.reserveMet ? "Reserve met" : `${fmtUSD(L.reserve - L.highBid)} to reserve`}</Pill>}
                  <span className="tnum" style={{ fontWeight: 700 }}>{fmtUSD(L.highBid)}</span>
                  <Countdown to={L.endsAt} className="mono" />
                </div>
              );
            })}</div>}
        </div>
        <div className="form-card" style={{ flex: 1, minWidth: 260 }}>
          <h3>Why consign with Sayarah</h3>
          <div className="col gap-10" style={{ fontSize: 13 }}>
            <div className="row gap-8"><I.check width="15" height="15" style={{ color: "var(--green)" }} /><span>Reach credit-approved GCC &amp; Central-Asia buyers</span></div>
            <div className="row gap-8"><I.check width="15" height="15" style={{ color: "var(--green)" }} /><span>AutoGrade + condition report drives higher bids</span></div>
            <div className="row gap-8"><I.check width="15" height="15" style={{ color: "var(--green)" }} /><span>Fast USD payout on cleared funds + title</span></div>
            <div className="row gap-8"><I.check width="15" height="15" style={{ color: "var(--green)" }} /><span>Sayarah handles export logistics &amp; arbitration</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Offers on my cars ---- */
function COffers({ me, offers, lots }) {
  if (offers.length === 0) return <Empty icon={<I.offer width="24" height="24" />} title="No offers yet" sub="Buyer offers and below-reserve if-sale bids on your cars land here — accept, counter, or decline." />;
  return (
    <div className="fadein atable-wrap">
      <table className="atable">
        <thead><tr><th>Vehicle</th><th>Type</th><th>Offer</th><th>Your reserve</th><th>Age</th><th>Respond</th></tr></thead>
        <tbody>
          {offers.slice().sort((a, b) => b.ts - a.ts).map(o => { const L = lots[o.lotId]; return (
            <tr key={o.id}>
              <td><b>{L ? `${L.year} ${L.make} ${L.model}` : o.lotId}</b><div className="muted" style={{ fontSize: 11.5 }}>{o.lotId}</div></td>
              <td>{o.ifSale ? <Pill kind="amber">If-sale</Pill> : <Pill kind="blue">Offer</Pill>}</td>
              <td className="tnum" style={{ fontWeight: 700 }}>{fmtUSD(o.amount)}</td>
              <td className="tnum muted">{L && L.reserve != null ? fmtUSD(L.reserve) : "None"}</td>
              <td className="muted mono" style={{ fontSize: 11 }}>{timeAgo(o.ts)}</td>
              <td><OfferActions o={o} lot={L} /></td>
            </tr>
          ); })}
        </tbody>
      </table>
    </div>
  );
}

/* ---- My vehicles ---- */
function CVehicles({ me, lots }) {
  if (lots.length === 0) return <Empty icon={<I.car width="24" height="24" />} title="No vehicles yet" sub="List your first car — Sayarah inspects, grades, and runs it in front of export buyers." action={<a className="btn primary" href="#/consignor/sell">List a car</a>} />;
  return (
    <div className="fadein atable-wrap">
      <table className="atable">
        <thead><tr><th>Vehicle</th><th>AutoGrade</th><th>High bid</th><th>Reserve</th><th>Status</th><th>Ends</th><th></th></tr></thead>
        <tbody>
          {lots.sort((a, b) => a.endsAt - b.endsAt).map(L => (
            <tr key={L.id}>
              <td><b>{L.year} {L.make} {L.model}</b><div className="muted" style={{ fontSize: 11.5 }}>{L.trim} · {L.id}</div></td>
              <td><GradeChip score={L.autograde} /></td>
              <td className="tnum" style={{ fontWeight: 700 }}>{fmtUSD(L.highBid)}</td>
              <td>{L.reserve == null ? <Pill kind="green">None</Pill> : <Pill kind={L.reserveMet ? "green" : "amber"}>{L.reserveMet ? "Met" : fmtUSD(L.reserve)}</Pill>}</td>
              <td>{L.hidden ? <span className="sdot" style={{ color: "var(--fg-3)" }}>Held</span> : L.status === "live" ? <span className="sdot" style={{ color: "var(--green)" }}>Live</span> : <span className="sdot" style={{ color: L.result === "won" ? "var(--green)" : "var(--amber)" }}>{L.result === "won" ? "Sold" : "No sale"}</span>}</td>
              <td className="mono" style={{ fontSize: 12 }}>{L.status === "live" ? <Countdown to={L.endsAt} /> : "—"}</td>
              <td style={{ textAlign: "right" }}><div className="row gap-6" style={{ justifyContent: "flex-end" }}>{L.status === "ended" && L.result !== "won" && <button className="btn primary sm" onClick={() => Engine.relistUnsold(L.id)}>Run again</button>}<a className="btn outline sm" href={`#/lot/${L.id}`}>View</a></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---- Payouts ---- */
const C_STAGES = [{ k: "pending", l: "Funds clearing" }, { k: "funded", l: "Cleared" }, { k: "paid", l: "Paid" }];
function CPayouts({ me, settlements }) {
  const [open, setOpen] = useState(null);
  const [printId, setPrintId] = useState(null);
  const pr = settlements.find(x => x.id === printId);
  if (settlements.length === 0) return <Empty icon={<I.truck width="24" height="24" />} title="No payouts yet" sub="When your consigned cars sell, settlement statements and payout status appear here." />;
  const total = settlements.reduce((a, x) => a + x.net, 0);
  const pending = settlements.filter(x => x.status !== "paid").reduce((a, x) => a + x.net, 0);
  return (
    <div className="fadein col gap-16">
      <div className="kpi-grid">
        <CKpi icon={<I.bolt width="17" height="17" />} label="Net proceeds (lifetime)" value={fmtUSD(total)} />
        <CKpi icon={<I.truck width="17" height="17" />} label="Awaiting payout" value={fmtUSD(pending)} sub={`${settlements.filter(x => x.status !== "paid").length} sales`} />
        <CKpi icon={<I.check width="17" height="17" />} label="Paid out" value={fmtUSD(total - pending)} />
      </div>
      <div className="col gap-12">
        {settlements.map(x => {
          const idx = C_STAGES.findIndex(st => st.k === x.status);
          return (
            <div key={x.id} className="card card-pad">
              <div className="row gap-12" style={{ cursor: "pointer" }} {...clickable(() => setOpen(open === x.id ? null : x.id), x.title + " — payout details")}>
                <div style={{ flex: 1 }}>
                  <div className="row gap-8"><b style={{ fontSize: 15 }}>{x.title}</b><Pill kind={x.status === "paid" ? "green" : x.status === "funded" ? "blue" : "amber"}>{C_STAGES[idx].l}</Pill></div>
                  <div className="muted" style={{ fontSize: 12.5 }}>{x.lotId} · sold {timeAgo(x.soldAt)}</div>
                </div>
                <div style={{ textAlign: "right" }}><div className="muted" style={{ fontSize: 11 }}>Net to you</div><div className="tnum" style={{ fontWeight: 800, fontSize: 18 }}>{fmtUSD(x.net)}</div></div>
                <I.chevD width="16" height="16" style={{ color: "var(--fg-4)", transform: open === x.id ? "rotate(180deg)" : "none", transition: ".2s" }} />
              </div>
              {open === x.id && (
                <div className="fadein" style={{ marginTop: 14, borderTop: "1px solid var(--border)", paddingTop: 14 }}>
                  <div className="stepper">
                    {C_STAGES.map((st, i) => (
                      <div key={st.k} className={"st " + (i < idx || x.status === "paid" ? "done " : "") + (i === idx ? "cur" : "")}><span className="dot">{i < idx || x.status === "paid" ? <I.check width="11" height="11" /> : i + 1}</span>{st.l}</div>
                    ))}
                  </div>
                  <div style={{ maxWidth: 380 }}>
                    <div className="feerow"><span>Sale price (hammer)</span><span className="tnum">{fmtUSD(x.salePrice)}</span></div>
                    <div className="feerow"><span>Sayarah commission</span><span className="tnum">− {fmtUSD(x.commission)}</span></div>
                    <div className="feerow total"><span>Net proceeds</span><span className="tnum">{fmtUSD(x.net)}</span></div>
                  </div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>{x.status === "paid" ? `Paid ${timeAgo(x.paidAt)} to ${me.payout}.` : x.status === "funded" ? `Buyer funds cleared — payout to ${me.payout} releases on title hand-off.` : "Awaiting buyer payment to clear (escrow held)."}</div>
                  <button className="btn outline sm" style={{ marginTop: 10 }} onClick={(e) => { e.stopPropagation(); setPrintId(x.id); }}><I.doc width="12" height="12" /> Print statement</button>
                </div>
              )}
            </div>
          );
        })}
      </div>
      {pr && (
        <PrintDoc title="Settlement statement" subtitle={pr.lotId + " · " + me.business} onClose={() => setPrintId(null)}>
          <dl className="kv" style={{ gridTemplateColumns: "auto 1fr", marginBottom: 12 }}>
            <dt>Consignor</dt><dd>{me.business} ({me.id})</dd>
            <dt>Vehicle</dt><dd>{pr.title}</dd>
            <dt>Lot</dt><dd>{pr.lotId}</dd>
            <dt>Sold</dt><dd>{new Date(pr.soldAt).toLocaleDateString()}</dd>
            <dt>Payout method</dt><dd>{me.payout}</dd>
          </dl>
          <div className="feerow"><span>Hammer price</span><span className="tnum">{fmtUSD(pr.salePrice)}</span></div>
          <div className="feerow"><span>Sayarah commission</span><span className="tnum">− {fmtUSD(pr.commission)}</span></div>
          <div className="feerow total"><span>Net proceeds</span><span className="tnum">{fmtUSD(pr.net)}</span></div>
          <div style={{ marginTop: 10 }}>{pr.status === "paid" ? <Pill kind="green"><I.check width="11" height="11" /> Paid {new Date(pr.paidAt).toLocaleDateString()}</Pill> : <Pill kind="amber">Payout {pr.status}</Pill>}</div>
        </PrintDoc>
      )}
    </div>
  );
}

/* ---- Self-list ---- */
function CSell({ me }) {
  const [f, setF] = useState({ year: "", make: "", model: "", trim: "", body: "SUV", vin: "", mileage: "", startPrice: "", reserve: "", buyNow: "" });
  const [done, setDone] = useState(null);
  const set = (k) => (e) => setF(p => ({ ...p, [k]: e.target.value }));
  const ready = f.year && f.make && f.model && String(f.vin).length >= 11 && f.startPrice;
  function submit() {
    // real flow: a listing REQUEST goes to the Carzello team, who inspect, grade, and publish
    const rec = {
      id: "LR-" + Date.now().toString(36).toUpperCase(),
      consignorId: me.id, business: me.business, contact: me.contact, email: me.email,
      year: f.year, make: f.make, model: f.model, trim: f.trim, body: f.body, vin: f.vin,
      mileage: f.mileage, startPrice: f.startPrice, reserve: f.reserve, buyNow: f.buyNow,
      country: me.country, status: "pending", ts: Date.now(),
    };
    FB.opsPush("listing", rec);
    Engine.notify("admin", null, "Consignment listing request", `${me.business}: ${f.year} ${f.make} ${f.model} — review in Admin → Consignors.`);
    setDone(rec.id);
  }
  if (done) return <Empty icon={<I.check width="26" height="26" />} title="Submitted — pending inspection" sub={`Your ${f.year} ${f.make} ${f.model} was sent to the Carzello team. It goes live after inspection and AutoGrade.`} action={<a className="btn primary" href="#/consignor/vehicles">My vehicles</a>} />;
  return (
    <div className="fadein col gap-16" style={{ maxWidth: 720 }}>
      <div className="feedback info"><I.shield width="13" height="13" /> Sayarah inspects and assigns the AutoGrade — you set the reserve. Commission is taken only on a successful sale.</div>
      <div className="form-card">
        <h3><I.car width="14" height="14" /> Vehicle</h3>
        <div className="form-grid">
          <div className="field"><label>Year</label><input className="input" value={f.year} onChange={set("year")} placeholder="2021" inputMode="numeric" /></div>
          <div className="field"><label>Make</label><input className="input" value={f.make} onChange={set("make")} placeholder="Toyota" /></div>
          <div className="field"><label>Model</label><input className="input" value={f.model} onChange={set("model")} placeholder="Land Cruiser" /></div>
          <div className="field"><label>Trim</label><input className="input" value={f.trim} onChange={set("trim")} placeholder="VXR 5.7" /></div>
          <div className="field"><label>Body</label><select className="select" value={f.body} onChange={set("body")}>{["SUV", "Sedan", "Pickup", "Coupe", "Van"].map(b => <option key={b}>{b}</option>)}</select></div>
          <div className="field"><label>Mileage</label><input className="input" value={f.mileage} onChange={set("mileage")} placeholder="56800" inputMode="numeric" /></div>
          <div className="field" style={{ gridColumn: "span 2" }}><label>VIN</label><input className="input mono" value={f.vin} onChange={set("vin")} maxLength={17} placeholder="17-char VIN" /></div>
        </div>
      </div>
      <div className="form-card">
        <h3><I.tag width="14" height="14" /> Pricing</h3>
        <div className="form-grid">
          <div className="field"><label>Start price (USD)</label><input className="input" value={f.startPrice} onChange={set("startPrice")} inputMode="numeric" placeholder="58000" /></div>
          <div className="field"><label>Reserve (blank = none)</label><input className="input" value={f.reserve} onChange={set("reserve")} inputMode="numeric" placeholder="No reserve" /></div>
          <div className="field"><label>Buy Now (optional)</label><input className="input" value={f.buyNow} onChange={set("buyNow")} inputMode="numeric" /></div>
        </div>
        <div className="muted" style={{ fontSize: 12, marginTop: 10 }}>Estimated commission on a successful sale: <b>{f.startPrice ? `${(Engine.commissionRate(Number(f.startPrice) || 0) * 100).toFixed(0)}% (≈ ${fmtUSD(Engine.commissionFor(Number(f.startPrice) || 0))})` : "—"}</b></div>
      </div>
      <div className="row gap-10">
        <button className="btn primary lg" disabled={!ready} onClick={submit}><I.upload width="14" height="14" /> Submit for inspection</button>
        {!ready && <span className="muted" style={{ fontSize: 12.5 }}>Year, make, model, VIN (11+), and start price are required.</span>}
      </div>
    </div>
  );
}

/* ---- Account ---- */
function CAccount({ me, onSignOut }) {
  return (
    <div className="fadein col gap-16" style={{ maxWidth: 640 }}>
      <div className="card card-pad row gap-12">
        <div className="avatar" style={{ width: 52, height: 52, fontSize: 18, borderRadius: 0 }}>{me.business.split(" ").map(x => x[0]).slice(0, 2).join("")}</div>
        <div><b style={{ fontSize: 17 }}>{me.business}</b><div className="muted" style={{ fontSize: 13 }}>{me.type} · {me.id}</div><Pill kind="green" style={{ marginTop: 6 }}><I.check width="11" height="11" /> ★ {me.rating} · verified consignor</Pill></div>
      </div>
      <div className="form-card">
        <h3>Account details</h3>
        <dl className="kv" style={{ gridTemplateColumns: "auto 1fr" }}>
          <dt>Contact</dt><dd>{me.contact}</dd>
          <dt>Email</dt><dd>{me.email}</dd>
          <dt>Phone</dt><dd>{me.phone}</dd>
          <dt>Country</dt><dd>{me.country}</dd>
          <dt>Payout method</dt><dd>{me.payout}</dd>
        </dl>
      </div>
      <div><button className="btn outline" onClick={onSignOut}><I.back width="13" height="13" /> Sign out</button></div>
    </div>
  );
}

Object.assign(window, { Consignor });