/* ─────────────────────────────────────────────────────
   Equipment Balkans — Trust profiles & account management
   Buyer + seller reputation, verification, equipment trust signals
───────────────────────────────────────────────────── */
const { useState: useProf } = React;

const TIER_CFG = {
  Platinum: { color: "#8B5CF6", bg: "rgba(139,92,246,0.14)", icon: "gem" },
  Gold: { color: "#F59E0B", bg: "rgba(245,158,11,0.14)", icon: "award" },
  Silver: { color: "#94A3B8", bg: "rgba(148,163,184,0.16)", icon: "medal" },
  Bronze: { color: "#B45309", bg: "rgba(180,83,9,0.14)", icon: "shield" },
  New: { color: "#64748B", bg: "rgba(100,116,139,0.14)", icon: "sparkles" },
};

function Stars({ value, size = 14 }) {
  const r = Math.round(value || 0);
  return (
    <span style={{ display: "inline-flex", gap: 1 }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <i key={i} data-lucide="star" style={{ width: size, height: size, color: "#F59E0B", fill: i < r ? "#F59E0B" : "none" }}></i>
      ))}
    </span>
  );
}

function TierBadge({ tier, big }) {
  const c = TIER_CFG[tier] || TIER_CFG.New;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: c.bg, color: c.color, fontWeight: 800, fontSize: big ? 12.5 : 11, letterSpacing: ".05em", textTransform: "uppercase", padding: big ? "6px 12px" : "4px 9px", borderRadius: 5 }}>
      <i data-lucide={c.icon} style={{ width: big ? 15 : 13, height: big ? 15 : 13 }}></i>{tier}
    </span>
  );
}

function RatingBar({ label, value }) {
  const pct = (value / 5) * 100;
  const col = value >= 4.7 ? "#22C55E" : value >= 4.3 ? "#F59E0B" : "#EF4444";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ fontSize: 12.5, color: "var(--text-2)", width: 168, flexShrink: 0 }}>{label}</span>
      <div style={{ flex: 1, height: 7, borderRadius: 4, background: "var(--surface-2)", overflow: "hidden" }}>
        <div style={{ width: pct + "%", height: "100%", background: col, borderRadius: 4 }}></div>
      </div>
      <span style={{ fontSize: 12.5, fontWeight: 700, fontFamily: "var(--ff-mono)", color: "var(--text)", width: 30, textAlign: "right" }}>{value.toFixed(1)}</span>
    </div>
  );
}

function StatTile({ label, value, sub, icon, color }) {
  return (
    <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, padding: "15px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: ".07em", textTransform: "uppercase", color: "var(--text-3)" }}>{label}</span>
        <i data-lucide={icon} style={{ width: 15, height: 15, color: color || "var(--text-3)" }}></i>
      </div>
      <div style={{ fontFamily: "var(--ff-mono)", fontSize: 23, fontWeight: 700, color: "var(--text)", marginTop: 7 }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--text-3)", marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function SignalChip({ on, label, icon }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 600, padding: "7px 11px", borderRadius: 7, border: "1px solid var(--border)", color: on ? "var(--text)" : "var(--text-3)", background: on ? "var(--surface)" : "transparent" }}>
      <i data-lucide={on ? "check" : "x"} style={{ width: 13, height: 13, color: on ? "#22C55E" : "var(--text-3)" }}></i>
      <i data-lucide={icon} style={{ width: 13, height: 13 }}></i>{label}
    </span>
  );
}

function ProfBadge({ label }) {
  const ic = label.includes("Dealer") ? "badge-check" : label.includes("Top") ? "award" : label.includes("Inspection") ? "search-check" : label.includes("Funds") ? "wallet" : label.includes("Payer") ? "clock" : "shield-check";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, fontWeight: 700, padding: "8px 13px", borderRadius: 8, background: "rgba(37,99,235,0.1)", color: "var(--cobalt)" }}>
      <i data-lucide={ic} style={{ width: 14, height: 14 }}></i>{label}
    </span>
  );
}

function VerifyRow({ icon, label, ok, editable, onVerify }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 0", borderBottom: "1px solid var(--border)" }}>
      <i data-lucide={icon} style={{ width: 16, height: 16, color: ok ? "#22C55E" : "var(--text-3)" }}></i>
      <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: "var(--text)" }}>{label}</span>
      {ok ? (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 700, color: "#22C55E" }}><i data-lucide="check-circle-2" style={{ width: 14, height: 14 }}></i>Verified</span>
      ) : editable ? (
        <button onClick={onVerify} style={{ fontSize: 11.5, fontWeight: 700, color: "var(--cobalt)" }}>Verify now</button>
      ) : (
        <span style={{ fontSize: 11.5, color: "var(--text-3)" }}>Not verified</span>
      )}
    </div>
  );
}

function ReviewsList({ reviews }) {
  if (!reviews || reviews.length === 0) {
    return <div style={{ fontSize: 13, color: "var(--text-3)", textAlign: "center", padding: "24px 0" }}>No reviews yet.</div>;
  }
  const dot = { positive: "#22C55E", neutral: "#F59E0B", negative: "#EF4444" };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {reviews.map((r, i) => (
        <div key={i} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 10, padding: "14px 16px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 7 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: dot[r.rating] || "#22C55E" }}></span>
            <span style={{ fontSize: 13, fontWeight: 700, color: "var(--text)" }}>{r.by}</span>
            <Stars value={r.stars} size={12} />
            <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-3)" }}>{r.date}</span>
          </div>
          <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.55, margin: 0 }}>{r.text}</p>
          {r.lot && (
            <div style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 8, fontSize: 11, color: "var(--text-3)" }}>
              <i data-lucide="badge-check" style={{ width: 12, height: 12, color: "#22C55E" }}></i>
              Verified transaction · {r.lot}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function SectionHead({ icon, title, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
      <i data-lucide={icon} style={{ width: 16, height: 16, color: "var(--ignite)" }}></i>
      <div>
        <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 18, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", letterSpacing: ".02em", margin: 0, lineHeight: 1 }}>{title}</h2>
        {sub && <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 3 }}>{sub}</div>}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// PUBLIC TRUST PROFILE
// ════════════════════════════════════════════════════
function TrustProfileScreen({ profile, isOwn, user, onNav }) {
  if (!profile) {
    return <div style={{ maxWidth: 900, margin: "0 auto", padding: "80px 24px", textAlign: "center", color: "var(--text-3)" }}>Profile not found. <button onClick={() => onNav({ name: "auctions" })} style={{ color: "var(--cobalt)", fontWeight: 700 }}>Back</button></div>;
  }
  const isSeller = profile.kind === "dealer" || profile.kind === "seller";
  const isBuyer = profile.kind === "buyer";
  const v = profile.verifications || {};
  const sig = profile.sellerSignals;
  const bm = profile.buyerMetrics;

  return (
    <div style={{ maxWidth: 960, margin: "0 auto", padding: "26px 24px 50px" }}>
      <button onClick={() => onNav({ name: "auctions" })} style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--text-2)", fontSize: 12.5, fontWeight: 600, marginBottom: 18 }}>
        <i data-lucide="arrow-left" style={{ width: 15, height: 15 }}></i> Back
      </button>

      {/* Header */}
      <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 16, padding: 24, display: "flex", gap: 20, flexWrap: "wrap", alignItems: "center" }}>
        <span style={{ width: 72, height: 72, borderRadius: 16, background: `linear-gradient(135deg, ${profile.color}, ${profile.color}cc)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28, fontWeight: 800, color: "#fff", fontFamily: "var(--ff-display)", flexShrink: 0 }}>
          {profile.avatar}
        </span>
        <div style={{ flex: 1, minWidth: 220 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 28, fontWeight: 900, color: "var(--text)", textTransform: "uppercase", margin: 0, lineHeight: 1 }}>{profile.name}</h1>
            <span style={{ fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--text-3)", border: "1px solid var(--border-s)", padding: "3px 8px", borderRadius: 4 }}>{profile.kind}</span>
            <TierBadge tier={profile.tier} />
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 8, fontSize: 12.5, color: "var(--text-3)", flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><i data-lucide="map-pin" style={{ width: 13, height: 13 }}></i>{profile.location}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><i data-lucide="calendar" style={{ width: 13, height: 13 }}></i>Member since {profile.memberSince}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><i data-lucide="languages" style={{ width: 13, height: 13 }}></i>{(profile.languages || []).join(", ")}</span>
          </div>
          {profile.bio && <p style={{ fontSize: 13, color: "var(--text-2)", marginTop: 11, lineHeight: 1.55, maxWidth: 560 }}>{profile.bio}</p>}
        </div>
        <div style={{ textAlign: "right", flexShrink: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-end" }}>
            <Stars value={profile.stars} size={16} />
            <span style={{ fontFamily: "var(--ff-mono)", fontSize: 20, fontWeight: 700, color: "var(--text)" }}>{profile.stars.toFixed(1)}</span>
          </div>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 13, color: "#22C55E", fontWeight: 700, marginTop: 4 }}>{profile.positivePct}% positive</div>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{profile.feedbackCount} ratings</div>
          {isOwn && <button onClick={() => onNav({ name: "account", tab: "profile" })} style={{ ...ghostBtn, marginTop: 12, fontSize: 12 }}><i data-lucide="pencil" style={{ width: 13, height: 13 }}></i> Edit profile</button>}
          {!isOwn && isSeller && <button onClick={() => onNav({ name: "auctions" })} style={{ ...primaryBtn, marginTop: 12, fontSize: 12.5 }}><i data-lucide="message-square" style={{ width: 14, height: 14 }}></i> Contact</button>}
        </div>
      </div>

      {/* Stat tiles */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginTop: 16 }} className="eb-stat-grid">
        <StatTile label="Positive" value={profile.positivePct + "%"} sub="last 12 months" icon="thumbs-up" color="#22C55E" />
        <StatTile label={isBuyer ? "Purchases" : "Sales"} value={profile.transactions.count} sub="completed" icon={isBuyer ? "shopping-bag" : "gavel"} color="var(--cobalt)" />
        <StatTile label="Transacted" value={eur(profile.transactions.totalValue)} sub="lifetime" icon="trending-up" color="var(--ignite)" />
        <StatTile label={isBuyer ? "On-time pay" : "On-time handover"} value={(isBuyer ? (bm ? bm.onTimePayment : 100) : (sig ? sig.onTimeHandover : 95)) + "%"} sub={isBuyer ? "0 missed" : "dispatch"} icon="clock" color="#22C55E" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 26 }} className="eb-form-2">
        {/* Verification */}
        <div>
          <SectionHead icon="shield-check" title="Verification" sub="Identity & account checks" />
          <div style={{ ...panelCard, padding: "4px 18px" }}>
            <VerifyRow icon="mail" label="Email address" ok={v.email} />
            <VerifyRow icon="phone" label="Phone number" ok={v.phone} />
            <VerifyRow icon="badge-check" label="Government ID (KYC)" ok={v.id} />
            <VerifyRow icon="credit-card" label="Payment method" ok={v.payment} />
            <div style={{ borderBottom: "none" }}><VerifyRow icon="building-2" label={isBuyer ? "Business / VAT (optional)" : "Business / VAT registered"} ok={v.business} /></div>
          </div>
        </div>

        {/* Badges */}
        <div>
          <SectionHead icon="award" title="Badges & standing" sub="Earned through verified activity" />
          <div style={{ ...panelCard, display: "flex", flexWrap: "wrap", gap: 9, alignContent: "flex-start" }}>
            {(profile.badges || []).length ? profile.badges.map((b) => <ProfBadge key={b} label={b} />) : <span style={{ fontSize: 13, color: "var(--text-3)" }}>No badges yet.</span>}
            <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, marginTop: 4, fontSize: 12, color: "var(--text-3)" }}>
              <TierBadge tier={profile.tier} /> tier — based on positive %, volume &amp; verified history.
            </div>
          </div>
        </div>
      </div>

      {/* Seller: detailed ratings + equipment trust */}
      {isSeller && profile.dsr && (
        <div style={{ marginTop: 26 }}>
          <SectionHead icon="list-checks" title="Detailed seller ratings" sub="How buyers rated recent transactions (1–5)" />
          <div style={{ ...panelCard, display: "flex", flexDirection: "column", gap: 13 }}>
            <RatingBar label="Item as described" value={profile.dsr.described} />
            <RatingBar label="Communication" value={profile.dsr.communication} />
            <RatingBar label="Handover on time" value={profile.dsr.handover} />
            <RatingBar label="Documentation & title" value={profile.dsr.documentation} />
          </div>
        </div>
      )}

      {isSeller && sig && (
        <div style={{ marginTop: 26 }}>
          <SectionHead icon="hard-hat" title="Equipment trust" sub="Heavy-equipment specific quality signals" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 14 }} className="eb-stat-grid">
            <StatTile label="Inspected" value={sig.inspectedPct + "%"} sub="independent report" icon="search-check" color="var(--cobalt)" />
            <StatTile label="Service history" value={sig.serviceHistoryPct + "%"} sub="records provided" icon="file-text" color="var(--cobalt)" />
            <StatTile label="Title verified" value={sig.titleVerifiedPct + "%"} sub="ownership confirmed" icon="file-check" color="#22C55E" />
            <StatTile label="Dispute rate" value={sig.disputeRate + "%"} sub="of transactions" icon="alert-triangle" color={sig.disputeRate < 2 ? "#22C55E" : "#F59E0B"} />
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
            <SignalChip on={true} label={`${sig.years} yrs in business`} icon="briefcase" />
            <SignalChip on={true} label={`${sig.unitsSold} units sold`} icon="package" />
            <SignalChip on={sig.warranty} label="Warranty offered" icon="shield" />
            <SignalChip on={sig.exportSupport} label="Export & logistics" icon="ship" />
          </div>
        </div>
      )}

      {/* Buyer: standing */}
      {isBuyer && bm && (
        <div style={{ marginTop: 26 }}>
          <SectionHead icon="user-check" title="Buyer standing" sub="Payment reliability & account history" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 14 }} className="eb-stat-grid">
            <StatTile label="On-time pay" value={bm.onTimePayment + "%"} sub="of wins paid" icon="clock" color="#22C55E" />
            <StatTile label="Total spent" value={eur(bm.totalSpent)} sub="lifetime" icon="trending-up" color="var(--ignite)" />
            <StatTile label="Strikes" value={bm.strikes} sub="non-payment" icon="alert-triangle" color={bm.strikes === 0 ? "#22C55E" : "#EF4444"} />
            <StatTile label="Disputes" value={bm.disputeRate + "%"} sub="opened" icon="scale" color="#22C55E" />
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
            <SignalChip on={bm.fundsVerified} label="Funds verified" icon="wallet" />
            <SignalChip on={true} label="Bidder in good standing" icon="gavel" />
            <SignalChip on={bm.strikes === 0} label="No payment defaults" icon="check" />
          </div>
        </div>
      )}

      {/* Reviews */}
      <div style={{ marginTop: 26 }}>
        <SectionHead icon="message-square-quote" title="Reviews" sub={`${(profile.reviews || []).length} verified reviews`} />
        <ReviewsList reviews={profile.reviews} />
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// ACCOUNT MANAGEMENT (own, editable) — Profile tab
// ════════════════════════════════════════════════════
function AccountManagement({ user, profile, onSave, onVerify, onNav }) {
  const baseCity = (profile?.location || "Belgrade, Serbia").split(",")[0].trim();
  const baseCountry = (profile?.location || "Belgrade, Serbia").split(",")[1]?.trim() || "Serbia";
  const init = user.account || {
    phone: "+381 60 000 0000",
    bio: profile?.bio || "",
    languages: (profile?.languages || ["English"]).join(", "),
    billing: { street: "Bulevar Kralja Aleksandra 73", city: baseCity, postal: "11000", country: baseCountry },
    collection: { street: "", city: "", postal: "", country: baseCountry },
    company: { name: "", vat: "" },
    sameAsCollection: true,
  };
  const [f, setF] = useProf(init);
  const [saved, setSaved] = useProf(false);
  const v = { ...(profile?.verifications || {}), ...(user.verifications || {}) };

  const set = (k, val) => { setF((p) => ({ ...p, [k]: val })); setSaved(false); };
  const setAddr = (which, k, val) => { setF((p) => ({ ...p, [which]: { ...p[which], [k]: val } })); setSaved(false); };

  const COUNTRIES = ["Serbia", "Croatia", "Slovenia", "Bosnia & Herzegovina", "Montenegro", "North Macedonia", "Albania", "Other (EU)"];

  const save = () => { onSave({ account: f }); setSaved(true); };

  const AddressFields = ({ which }) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <PField label="Street address"><input value={f[which].street} onChange={(e) => setAddr(which, "street", e.target.value)} placeholder="Street and number" style={inputStyle} /></PField>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12 }} className="eb-form-2">
        <PField label="City"><input value={f[which].city} onChange={(e) => setAddr(which, "city", e.target.value)} placeholder="City" style={inputStyle} /></PField>
        <PField label="Postal code"><input value={f[which].postal} onChange={(e) => setAddr(which, "postal", e.target.value)} placeholder="00000" style={inputStyle} /></PField>
      </div>
      <PField label="Country"><select value={f[which].country} onChange={(e) => setAddr(which, "country", e.target.value)} style={{ ...inputStyle, cursor: "pointer" }}>{COUNTRIES.map((c) => <option key={c}>{c}</option>)}</select></PField>
    </div>
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 26, maxWidth: 760 }}>
      {/* Reputation summary */}
      <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 14, padding: 18, display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ width: 52, height: 52, borderRadius: 12, background: `linear-gradient(135deg, ${profile?.color || "#2563EB"}, ${(profile?.color || "#2563EB")}cc)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, fontWeight: 800, color: "#fff", fontFamily: "var(--ff-display)", flexShrink: 0 }}>{profile?.avatar || (user.name || "U")[0]}</span>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ fontSize: 15, fontWeight: 800, color: "var(--text)" }}>Your reputation</span>
            {profile && <TierBadge tier={profile.tier} />}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
            <Stars value={profile?.stars || 5} size={13} />
            <span style={{ fontSize: 12.5, color: "var(--text-3)" }}>{profile?.positivePct ?? 100}% positive · {profile?.feedbackCount ?? 0} ratings</span>
          </div>
        </div>
        <button onClick={() => onNav({ name: "profile", id: profile?.id })} style={{ ...ghostBtn, fontSize: 12.5 }}>View public profile <i data-lucide="arrow-up-right" style={{ width: 14, height: 14 }}></i></button>
      </div>

      {/* Personal info */}
      <div>
        <SectionHead icon="user" title="Personal information" />
        <div style={{ ...panelCard, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="eb-form-2">
            <PField label="Full name"><input value={user.name || ""} readOnly style={{ ...inputStyle, opacity: 0.7 }} /></PField>
            <PField label="Email"><input value={user.email || ""} readOnly style={{ ...inputStyle, opacity: 0.7 }} /></PField>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="eb-form-2">
            <PField label="Phone"><input value={f.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+381 …" style={inputStyle} /></PField>
            <PField label="Languages"><input value={f.languages} onChange={(e) => set("languages", e.target.value)} placeholder="Serbian, English" style={inputStyle} /></PField>
          </div>
          <PField label="Bio"><textarea value={f.bio} onChange={(e) => set("bio", e.target.value)} rows={2} placeholder="A short line buyers and sellers will see on your profile." style={{ ...inputStyle, resize: "vertical", lineHeight: 1.5 }} /></PField>
        </div>
      </div>

      {/* Addresses */}
      <div>
        <SectionHead icon="map-pin" title="Addresses" sub="Billing and where equipment is collected or delivered" />
        <div style={{ ...panelCard, marginBottom: 12 }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--text-2)", marginBottom: 14 }}>Billing address</div>
          <AddressFields which="billing" />
          <button onClick={() => set("sameAsCollection", !f.sameAsCollection)} style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 14, fontSize: 12.5, color: "var(--text-2)", fontWeight: 600 }}>
            <span style={{ width: 18, height: 18, borderRadius: 5, border: `1px solid ${f.sameAsCollection ? "var(--ignite)" : "var(--border-s)"}`, background: f.sameAsCollection ? "var(--ignite)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center" }}>{f.sameAsCollection && <i data-lucide="check" style={{ width: 12, height: 12, color: "#fff" }}></i>}</span>
            Collection / delivery address is the same as billing
          </button>
        </div>
        {!f.sameAsCollection && (
          <div style={{ ...panelCard }}>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--text-2)", marginBottom: 14 }}>Collection / delivery address</div>
            <AddressFields which="collection" />
          </div>
        )}
      </div>

      {/* Company (optional) */}
      <div>
        <SectionHead icon="building-2" title="Business details" sub="Required to sell as a verified dealer (optional for buyers)" />
        <div style={{ ...panelCard, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="eb-form-2">
          <PField label="Company name"><input value={f.company.name} onChange={(e) => setAddr("company", "name", e.target.value)} placeholder="Optional" style={inputStyle} /></PField>
          <PField label="VAT / Tax ID"><input value={f.company.vat} onChange={(e) => setAddr("company", "vat", e.target.value)} placeholder="Optional" style={inputStyle} /></PField>
        </div>
      </div>

      {/* Verification center */}
      <div>
        <SectionHead icon="shield-check" title="Verification center" sub="Verify to lift bidding limits and earn trust badges" />
        <div style={{ ...panelCard, padding: "4px 18px" }}>
          <VerifyRow icon="mail" label="Email address" ok={v.email} editable onVerify={() => onVerify("email")} />
          <VerifyRow icon="phone" label="Phone number" ok={v.phone} editable onVerify={() => onVerify("phone")} />
          <VerifyRow icon="badge-check" label="Government ID (KYC)" ok={v.id} editable onVerify={() => onVerify("id")} />
          <VerifyRow icon="credit-card" label="Payment method" ok={v.payment} editable onVerify={() => onNav({ name: "account", tab: "payments" })} />
          <div style={{ borderBottom: "none" }}><VerifyRow icon="building-2" label="Business / VAT registration" ok={v.business} editable onVerify={() => onVerify("business")} /></div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 10, fontSize: 12, color: "var(--text-3)" }}>
          <i data-lucide="info" style={{ width: 14, height: 14, color: "var(--cobalt)" }}></i>
          ID + payment verification are required to bid on lots over €10,000.
        </div>
      </div>

      {/* Save */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, position: "sticky", bottom: 0, background: "var(--bg)", padding: "14px 0", borderTop: "1px solid var(--border)" }}>
        <button onClick={save} style={primaryBtn}><i data-lucide="check" style={{ width: 15, height: 15 }}></i> Save changes</button>
        {saved && <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, color: "#22C55E", fontWeight: 600 }}><i data-lucide="check-circle-2" style={{ width: 15, height: 15 }}></i>Saved</span>}
      </div>
    </div>
  );
}

function PField({ label, children }) {
  return (<div><label style={fieldLabel}>{label}</label><div style={{ marginTop: 6 }}>{children}</div></div>);
}

Object.assign(window, { TrustProfileScreen, AccountManagement, TierBadge, Stars });