// Link new account — bottom sheet flow

const PLAID_COUNTRIES = [
  // UAE pinned at top
  { id: "AE", name: "United Arab Emirates", flag: "🇦🇪", pinned: true },
  // Plaid-supported markets
  { id: "US", name: "United States", flag: "🇺🇸" },
  { id: "CA", name: "Canada", flag: "🇨🇦" },
  { id: "GB", name: "United Kingdom", flag: "🇬🇧" },
  { id: "IE", name: "Ireland", flag: "🇮🇪" },
  { id: "FR", name: "France", flag: "🇫🇷" },
  { id: "ES", name: "Spain", flag: "🇪🇸" },
  { id: "DE", name: "Germany", flag: "🇩🇪" },
  { id: "IT", name: "Italy", flag: "🇮🇹" },
  { id: "NL", name: "Netherlands", flag: "🇳🇱" },
  { id: "BE", name: "Belgium", flag: "🇧🇪" },
  { id: "PT", name: "Portugal", flag: "🇵🇹" },
  { id: "PL", name: "Poland", flag: "🇵🇱" },
  { id: "DK", name: "Denmark", flag: "🇩🇰" },
  { id: "NO", name: "Norway", flag: "🇳🇴" },
  { id: "SE", name: "Sweden", flag: "🇸🇪" },
  { id: "EE", name: "Estonia", flag: "🇪🇪" },
  { id: "LV", name: "Latvia", flag: "🇱🇻" },
  { id: "LT", name: "Lithuania", flag: "🇱🇹" },
];

const BANK_PROVIDERS_BY_COUNTRY = {
  AE: ["Emirates NBD", "ADCB", "FAB", "Mashreq", "HSBC", "Wio", "Liv"],
  US: [
    "Chase",
    "Bank of America",
    "Wells Fargo",
    "Citi",
    "Capital One",
    "Ally",
  ],
  CA: ["RBC", "TD Bank", "Scotiabank", "BMO", "CIBC", "National Bank"],
  GB: [
    "Barclays",
    "HSBC",
    "Lloyds",
    "NatWest",
    "Monzo",
    "Starling",
    "Revolut",
    "Wise",
  ],
  IE: ["AIB", "Bank of Ireland", "Permanent TSB", "Revolut", "N26"],
  FR: [
    "BNP Paribas",
    "Société Générale",
    "Crédit Agricole",
    "La Banque Postale",
  ],
  ES: ["Santander", "BBVA", "CaixaBank", "Bankinter"],
  DE: ["Deutsche Bank", "Commerzbank", "N26", "DKB", "ING"],
  IT: ["UniCredit", "Intesa Sanpaolo", "BPER", "Fineco"],
  NL: ["ING", "Rabobank", "ABN AMRO", "Bunq"],
  BE: ["BNP Paribas Fortis", "KBC", "Belfius", "ING"],
  PT: ["Millennium BCP", "Santander Totta", "Novo Banco", "Caixa Geral"],
  PL: ["PKO BP", "Pekao", "mBank", "ING", "Santander"],
  DK: ["Danske Bank", "Nordea", "Jyske Bank", "Nykredit"],
  NO: ["DNB", "Nordea", "SpareBank 1", "Sbanken"],
  SE: ["Swedbank", "SEB", "Handelsbanken", "Nordea"],
  EE: ["Swedbank", "SEB", "LHV", "Coop Pank"],
  LV: ["Swedbank", "SEB", "Citadele", "Luminor"],
  LT: ["Swedbank", "SEB", "Luminor", "Šiaulių bankas"],
};

const BROKERAGES_LIST = [
  "Saxo",
  "Interactive Brokers",
  "eToro",
  "Charles Schwab",
  "Sarwa",
  "FAB Securities",
  "Robinhood",
  "Fidelity",
];
const CRYPTO_EXCHANGES = [
  "Binance",
  "Coinbase",
  "Kraken",
  "Bybit",
  "OKX",
  "BitOasis",
];
const WEB3_FEATURED_WALLETS = [
  { key: "walletconnect", name: "WalletConnect", brand: "walletconnect" },
  { key: "binance", name: "Binance Wallet", brand: "binance" },
];
const WEB3_WALLETS = [
  { key: "binance", name: "Binance Wallet", brand: "binance" },
  { key: "metamask", name: "MetaMask", brand: "metamask" },
  { key: "safepal", name: "SafePal", brand: "safepal" },
  { key: "trust", name: "Trust Wallet", brand: "trust" },
  { key: "fireblocks", name: "Fireblocks", brand: "fireblocks" },
  { key: "okx", name: "OKX Wallet", brand: "okx" },
  { key: "tokenpocket", name: "TokenPocket", brand: "tokenpocket" },
  { key: "bitget", name: "Bitget Wallet", brand: "bitget" },
  { key: "uniswap", name: "Uniswap", brand: "uniswap" },
  { key: "ledger", name: "Ledger", brand: "ledger" },
  { key: "zerion", name: "Zerion", brand: "zerion" },
  { key: "phantom", name: "Phantom", brand: "phantom" },
  { key: "rainbow", name: "Rainbow", brand: "rainbow" },
  { key: "coinbase-wallet", name: "Coinbase Wallet", brand: "coinbase" },
  { key: "rabby", name: "Rabby Wallet", brand: "rabby" },
  { key: "ledger-live", name: "Ledger Live", brand: "ledger" },
  { key: "trezor", name: "Trezor Suite", brand: "trezor" },
  { key: "argent", name: "Argent", brand: "argent" },
  { key: "crypto-com", name: "Crypto.com DeFi", brand: "crypto" },
  { key: "tonkeeper", name: "Tonkeeper", brand: "ton" },
  { key: "solflare", name: "Solflare", brand: "solflare" },
  { key: "backpack", name: "Backpack", brand: "backpack" },
  { key: "keplr", name: "Keplr", brand: "keplr" },
  { key: "exodus", name: "Exodus", brand: "exodus" },
  { key: "glow", name: "Glow", brand: "glow" },
  { key: "coin98", name: "Coin98", brand: "coin98" },
  { key: "mathwallet", name: "MathWallet", brand: "math" },
  { key: "imtoken", name: "imToken", brand: "imtoken" },
  { key: "safe", name: "Safe", brand: "safe" },
  { key: "frame", name: "Frame", brand: "frame" },
  { key: "enkrypt", name: "Enkrypt", brand: "enkrypt" },
  { key: "xdefi", name: "XDEFI Wallet", brand: "xdefi" },
  { key: "leap", name: "Leap Wallet", brand: "leap" },
  { key: "frontier", name: "Frontier", brand: "frontier" },
  { key: "brave", name: "Brave Wallet", brand: "brave" },
  { key: "core", name: "Core", brand: "core" },
  { key: "onekey", name: "OneKey", brand: "onekey" },
  { key: "taho", name: "Taho", brand: "taho" },
  { key: "sequence", name: "Sequence", brand: "sequence" },
  { key: "spot", name: "Spot", brand: "spot" },
  { key: "temple", name: "Temple", brand: "temple" },
  { key: "blocto", name: "Blocto", brand: "blocto" },
];

const REAL_ESTATE_TYPES = [
  "Apartment",
  "Villa",
  "Townhouse",
  "Studio",
  "Land",
  "Commercial",
];
const VALUABLE_SUBKINDS = [
  { key: "car", label: "Car", icon: "car" },
  { key: "commodities", label: "Commodities (gold, etc.)", icon: "gem" },
  { key: "stock_opts", label: "Stock options (startup)", icon: "chart" },
  { key: "business", label: "Business equity", icon: "briefcase" },
];
const MORTGAGE_TYPE_FIXED_THEN_DYNAMIC = "Fixed then variable";
const MORTGAGE_TYPE_DYNAMIC = "Variable";
const MORTGAGE_TYPE_FULLY_FIXED = "Fully fixed";
const MORTGAGE_RATE_TYPES = [
  MORTGAGE_TYPE_FIXED_THEN_DYNAMIC,
  MORTGAGE_TYPE_DYNAMIC,
  MORTGAGE_TYPE_FULLY_FIXED,
];
const MORTGAGE_FIXED_PERIOD_OPTIONS = ["1", "2", "3", "4", "5"];

function normalizeMortgageRateType(rateType) {
  if (
    rateType === "Fixed 3y then dynamic" ||
    rateType === "Fixed then dynamic"
  ) {
    return MORTGAGE_TYPE_FIXED_THEN_DYNAMIC;
  }
  if (rateType === "Dynamic") {
    return MORTGAGE_TYPE_DYNAMIC;
  }
  return MORTGAGE_RATE_TYPES.includes(rateType)
    ? rateType
    : MORTGAGE_TYPE_FIXED_THEN_DYNAMIC;
}

function cleanMortgageMoney(v) {
  return String(v).replace(/[^0-9]/g, "");
}

function cleanMortgageRate(v) {
  return String(v).replace(/[^0-9.]/g, "");
}

function cleanMortgageYears(v) {
  return String(v).replace(/[^0-9]/g, "");
}

function hasMortgageRateInputs(fields) {
  const rateType = normalizeMortgageRateType(fields.rateType);
  if (rateType === MORTGAGE_TYPE_FIXED_THEN_DYNAMIC) {
    return fields.fixedPeriodYears && fields.fixedApr;
  }
  if (rateType === MORTGAGE_TYPE_DYNAMIC) {
    return fields.currentApr || fields.dynamicApr;
  }
  return fields.fixedApr;
}

function hasMortgageCoreDetails(fields, requireProperty = false) {
  return (
    (!requireProperty || !!fields.property) &&
    !!fields.lender &&
    !!fields.originalAmount &&
    !!fields.startDate &&
    !!fields.termYears &&
    !!hasMortgageRateInputs(fields)
  );
}

function canSaveMortgageForm(fields, requireProperty = false) {
  return (
    hasMortgageCoreDetails(fields, requireProperty) &&
    !!fields.balance &&
    !!fields.monthlyPayment
  );
}

function getMortgageRateTypePatch(fields, nextRateType) {
  const rateType = normalizeMortgageRateType(nextRateType);
  const patch = {
    rateType,
    margin: "",
    dynamicApr: "",
  };

  if (rateType === MORTGAGE_TYPE_FIXED_THEN_DYNAMIC) {
    patch.currentApr = "";
    patch.apr = fields.fixedApr || "";
  } else if (rateType === MORTGAGE_TYPE_DYNAMIC) {
    patch.fixedApr = "";
    patch.fixedPeriodYears = "";
    patch.currentApr = fields.currentApr || fields.dynamicApr || "";
    patch.apr = patch.currentApr;
  } else {
    patch.currentApr = "";
    patch.fixedPeriodYears = "";
    patch.apr = fields.fixedApr || "";
  }

  return patch;
}

// Auto-title from address: take everything before the first comma, fall back to a sensible default.
function deriveRealEstateTitle(address) {
  if (!address) return "";
  const head = address.split(",")[0].trim();
  return head || "";
}

function AddAssetModal({ theme, accent, open, onClose }) {
  // step:
  //   pick                 → kind picker
  //   bank-country         → choose country
  //   bank-provider        → choose bank within country
  //   broker-provider      → choose trading account
  //   crypto-exchange      → centralized exchange picker
  //   crypto-wallet-address→ track a public wallet address
  //   crypto-wallet-review → review discovered wallet assets
  //   re-address           → real estate: address
  //   re-details           → real estate: size / type / rooms / purchase / date / mortgaged?
  //   re-mortgage          → real estate: link account vs add manually (only if mortgaged)
  //   re-mortgage-manual   → real estate: manual mortgage details
  //   val-subkind          → valuables: pick subcategory
  //   val-form             → valuables: enter details
  const [step, setStep] = React.useState("pick");
  const [kind, setKind] = React.useState(null);
  const [country, setCountry] = React.useState(null);
  const [walletAddress, setWalletAddress] = React.useState("");

  // Real estate working state
  const [reAddress, setReAddress] = React.useState("");
  const [reTitle, setReTitle] = React.useState("");
  const [reTitleEdited, setReTitleEdited] = React.useState(false);
  const [reSize, setReSize] = React.useState("");
  const [reType, setReType] = React.useState("Apartment");
  const [reRooms, setReRooms] = React.useState("");
  const [rePurchase, setRePurchase] = React.useState("");
  const [rePurchaseDate, setRePurchaseDate] = React.useState("");
  const [reMortgaged, setReMortgaged] = React.useState(false);
  const [mortgageFields, setMortgageFields] = React.useState({});

  // Valuables working state
  const [valSub, setValSub] = React.useState(null);
  const [valFields, setValFields] = React.useState({});

  React.useEffect(() => {
    if (!open) {
      setTimeout(() => {
        setStep("pick");
        setKind(null);
        setCountry(null);
        setWalletAddress("");
        setReAddress("");
        setReTitle("");
        setReTitleEdited(false);
        setReSize("");
        setReType("Apartment");
        setReRooms("");
        setRePurchase("");
        setRePurchaseDate("");
        setReMortgaged(false);
        setMortgageFields({});
        setValSub(null);
        setValFields({});
      }, 300);
    }
  }, [open]);

  const kinds = [
    { key: "bank", label: "Bank account", icon: "building" },
    { key: "broker", label: "Trading account", icon: "chart" },
    { key: "crypto", label: "Crypto", icon: "coin" },
    { key: "re", label: "Real estate", icon: "home" },
    { key: "valuables", label: "Valuables", icon: "gem" },
  ];

  const pickKind = (k) => {
    setKind(k);
    if (k.key === "bank") setStep("bank-country");
    if (k.key === "broker") setStep("broker-provider");
    if (k.key === "crypto") setStep("crypto-exchange");
    if (k.key === "re") setStep("re-address");
    if (k.key === "valuables") setStep("val-subkind");
  };

  // Keep auto-title in sync with address until user manually edits.
  const onChangeAddress = (v) => {
    setReAddress(v);
    if (!reTitleEdited) setReTitle(deriveRealEstateTitle(v));
  };

  if (!open) return null;

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        zIndex: 100,
        display: "flex",
        alignItems: "flex-end",
        background: "rgba(0,0,0,0.55)",
        animation: "himma-fade 200ms",
      }}
      onClick={onClose}
    >
      <style>{`
        @keyframes himma-fade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes himma-slide { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
      `}</style>

      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%",
          maxHeight: "88%",
          background: theme.surface,
          borderRadius: "24px 24px 0 0",
          borderTop: `0.5px solid ${theme.line2}`,
          padding: "10px 20px 34px",
          animation: "himma-slide 260ms cubic-bezier(.2,.8,.25,1)",
          overflow: "auto",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            paddingBottom: 14,
          }}
        >
          <div
            style={{
              width: 40,
              height: 4,
              borderRadius: 2,
              background: theme.line2,
            }}
          />
        </div>

        {step === "pick" && (
          <>
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                letterSpacing: -0.4,
              }}
            >
              Add asset
            </div>

            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 18,
              }}
            >
              {kinds.map((k) => {
                const Icon = Ico[k.icon];
                return (
                  <button
                    key={k.key}
                    onClick={() => pickKind(k)}
                    style={{
                      background: theme.surface2,
                      border: `0.5px solid ${theme.line}`,
                      borderRadius: 14,
                      padding: "14px 14px",
                      display: "flex",
                      alignItems: "center",
                      gap: 12,
                      cursor: "pointer",
                      textAlign: "left",
                      color: theme.text,
                    }}
                  >
                    <div
                      style={{
                        width: 36,
                        height: 36,
                        borderRadius: 10,
                        background: theme.surface3,
                        color: accent,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        flexShrink: 0,
                      }}
                    >
                      <Icon size={17} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>
                        {k.label}
                      </div>
                    </div>
                    <Ico.chevR size={14} stroke={theme.textMute} />
                  </button>
                );
              })}
            </div>
          </>
        )}

        {step === "bank-country" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("pick")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Choose country
            </div>
            <div
              style={{
                fontSize: 12.5,
                color: theme.textDim,
                marginTop: 4,
                fontFamily: FONTS.ui,
              }}
            >
              We’ll show banks supported in that country.
            </div>

            <div
              style={{
                marginTop: 16,
                display: "flex",
                flexDirection: "column",
                gap: 6,
              }}
            >
              {PLAID_COUNTRIES.map((c, i, arr) => {
                const showSep =
                  c.pinned && i + 1 < arr.length && !arr[i + 1].pinned;
                return (
                  <React.Fragment key={c.id}>
                    <button
                      onClick={() => {
                        setCountry(c);
                        setStep("bank-provider");
                      }}
                      style={{
                        background: theme.surface2,
                        border: `0.5px solid ${theme.line}`,
                        borderRadius: 12,
                        padding: "12px 14px",
                        display: "flex",
                        alignItems: "center",
                        gap: 12,
                        cursor: "pointer",
                        textAlign: "left",
                        color: theme.text,
                      }}
                    >
                      <span style={{ fontSize: 20, lineHeight: 1 }}>
                        {c.flag}
                      </span>
                      <span
                        style={{ flex: 1, fontSize: 13.5, fontWeight: 500 }}
                      >
                        {c.name}
                      </span>
                      <Ico.chevR size={13} stroke={theme.textMute} />
                    </button>
                    {showSep && (
                      <div
                        style={{
                          fontFamily: FONTS.mono,
                          fontSize: 9.5,
                          letterSpacing: 1,
                          textTransform: "uppercase",
                          color: theme.textMute,
                          padding: "8px 4px 2px",
                        }}
                      >
                        Other supported countries
                      </div>
                    )}
                  </React.Fragment>
                );
              })}
            </div>
          </>
        )}

        {step === "bank-provider" && country && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("bank-country")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Banks in {country.name}
            </div>
            <div
              style={{
                fontSize: 12.5,
                color: theme.textDim,
                marginTop: 4,
                fontFamily: FONTS.ui,
              }}
            >
              Select your bank to connect securely.
            </div>

            <div
              style={{
                marginTop: 18,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 8,
              }}
            >
              {(BANK_PROVIDERS_BY_COUNTRY[country.id] || []).map((p) => (
                <ProviderTile
                  key={p}
                  theme={theme}
                  name={p}
                  onClick={onClose}
                />
              ))}
            </div>

            <SecureBadge theme={theme} accent={accent} />
          </>
        )}

        {step === "broker-provider" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("pick")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Choose your trading account
            </div>
            <div
              style={{
                fontSize: 12.5,
                color: theme.textDim,
                marginTop: 4,
                fontFamily: FONTS.ui,
              }}
            >
              Select your broker to connect securely.
            </div>

            <div
              style={{
                marginTop: 18,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 8,
              }}
            >
              {BROKERAGES_LIST.map((p) => (
                <ProviderTile
                  key={p}
                  theme={theme}
                  name={p}
                  onClick={onClose}
                />
              ))}
            </div>

            <SecureBadge theme={theme} accent={accent} />
          </>
        )}

        {step === "crypto-exchange" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("pick")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Link your crypto
            </div>

            <div
              style={{
                marginTop: 18,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 8,
              }}
            >
              {CRYPTO_EXCHANGES.map((p) => (
                <ProviderTile
                  key={p}
                  theme={theme}
                  name={p}
                  onClick={onClose}
                />
              ))}
            </div>

            <button
              onClick={() => {
                setWalletAddress("");
                setStep("crypto-wallet-address");
              }}
              style={{
                marginTop: 14,
                width: "100%",
                background: "transparent",
                border: `0.5px dashed ${theme.line2}`,
                borderRadius: 12,
                padding: "12px",
                color: theme.text,
                cursor: "pointer",
                fontFamily: FONTS.ui,
                fontSize: 12.5,
                fontWeight: 500,
              }}
            >
              + Link Web3 wallet
            </button>

            <SecureBadge theme={theme} accent={accent} />
          </>
        )}

        {step === "crypto-wallet-address" && (
          <WalletAddressTracker
            theme={theme}
            accent={accent}
            address={walletAddress}
            setAddress={setWalletAddress}
            onBack={() => setStep("crypto-exchange")}
            onReview={() => setStep("crypto-wallet-review")}
          />
        )}

        {step === "crypto-wallet-review" && (
          <WalletDiscoveryReview
            theme={theme}
            accent={accent}
            address={walletAddress}
            onBack={() => setStep("crypto-wallet-address")}
            onDone={onClose}
          />
        )}

        {step === "re-address" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("pick")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Property address
            </div>
            <div
              style={{
                fontSize: 12.5,
                color: theme.textDim,
                marginTop: 4,
                fontFamily: FONTS.ui,
              }}
            >
              Include the unit number if you’re in a building.
            </div>

            <FormField theme={theme} label="Address">
              <textarea
                value={reAddress}
                onChange={(e) => onChangeAddress(e.target.value)}
                placeholder="Tower B · Apt 1204, Jumeirah Village Circle, Dubai"
                rows={2}
                style={inputStyle(theme)}
              />
            </FormField>

            <FormField
              theme={theme}
              label="Title (optional)"
              hint="Auto-generated from your address — feel free to rename."
            >
              <input
                value={reTitle}
                onChange={(e) => {
                  setReTitle(e.target.value);
                  setReTitleEdited(true);
                }}
                placeholder="JVC Studio"
                style={inputStyle(theme)}
              />
            </FormField>

            <PrimaryBtn
              theme={theme}
              accent={accent}
              label="Continue"
              disabled={reAddress.trim().length < 4}
              onClick={() => setStep("re-details")}
            />
          </>
        )}

        {step === "re-details" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("re-address")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Property details
            </div>

            <FormField theme={theme} label="Type">
              <SegmentedRow
                theme={theme}
                accent={accent}
                value={reType}
                options={REAL_ESTATE_TYPES}
                onChange={setReType}
              />
            </FormField>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 12,
              }}
            >
              <FormField theme={theme} label="Size (sqft)">
                <input
                  value={reSize}
                  onChange={(e) =>
                    setReSize(e.target.value.replace(/[^0-9]/g, ""))
                  }
                  placeholder="612"
                  inputMode="numeric"
                  style={inputStyle(theme)}
                />
              </FormField>
              <FormField theme={theme} label="Rooms">
                <input
                  value={reRooms}
                  onChange={(e) =>
                    setReRooms(e.target.value.replace(/[^0-9]/g, ""))
                  }
                  placeholder="1"
                  inputMode="numeric"
                  style={inputStyle(theme)}
                />
              </FormField>
            </div>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 12,
              }}
            >
              <FormField theme={theme} label="Purchase price (AED)">
                <input
                  value={rePurchase}
                  onChange={(e) =>
                    setRePurchase(e.target.value.replace(/[^0-9]/g, ""))
                  }
                  placeholder="540000"
                  inputMode="numeric"
                  style={inputStyle(theme)}
                />
              </FormField>
              <FormField theme={theme} label="Purchase date">
                <input
                  value={rePurchaseDate}
                  onChange={(e) => setRePurchaseDate(e.target.value)}
                  placeholder="May 2024"
                  style={inputStyle(theme)}
                />
              </FormField>
            </div>

            <FormField theme={theme} label="Mortgaged?">
              <Toggle
                theme={theme}
                accent={accent}
                value={reMortgaged}
                onChange={setReMortgaged}
              />
            </FormField>

            <PrimaryBtn
              theme={theme}
              accent={accent}
              label={reMortgaged ? "Continue" : "Add property"}
              disabled={!rePurchase || !reSize}
              onClick={() => (reMortgaged ? setStep("re-mortgage") : onClose())}
            />
          </>
        )}

        {step === "re-mortgage" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("re-details")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              Track the mortgage
            </div>
            <div
              style={{
                fontSize: 12.5,
                color: theme.textDim,
                marginTop: 4,
                fontFamily: FONTS.ui,
              }}
            >
              Link the account paying the mortgage so we can track payments
              automatically — or enter the details by hand.
            </div>

            <div
              style={{
                marginTop: 18,
                display: "flex",
                flexDirection: "column",
                gap: 8,
              }}
            >
              <ModeCard
                theme={theme}
                accent={accent}
                icon="building"
                title="Link an account"
                onClick={() => {
                  setStep("bank-country");
                }}
              />
              <ModeCard
                theme={theme}
                accent={accent}
                icon="compose"
                title="Add manually"
                onClick={() => setStep("re-mortgage-manual")}
              />
            </div>

            <SecureBadge theme={theme} accent={accent} />
          </>
        )}

        {step === "re-mortgage-manual" && (
          <ManualMortgageForm
            theme={theme}
            accent={accent}
            propertyTitle={
              reTitle || deriveRealEstateTitle(reAddress) || "Property"
            }
            fields={mortgageFields}
            setFields={setMortgageFields}
            onBack={() => setStep("re-mortgage")}
            onDone={onClose}
          />
        )}

        {step === "val-subkind" && (
          <>
            <BackBtn theme={theme} onClick={() => setStep("pick")} />
            <div
              style={{
                fontFamily: FONTS.display,
                fontSize: 22,
                color: theme.text,
                marginTop: 10,
              }}
            >
              What kind of valuable?
            </div>

            <div
              style={{
                marginTop: 18,
                display: "flex",
                flexDirection: "column",
                gap: 8,
              }}
            >
              {VALUABLE_SUBKINDS.map((s) => (
                <ModeCard
                  key={s.key}
                  theme={theme}
                  accent={accent}
                  icon={s.icon}
                  title={s.label}
                  onClick={() => {
                    setValSub(s);
                    setValFields({});
                    setStep("val-form");
                  }}
                />
              ))}
            </div>
          </>
        )}

        {step === "val-form" && valSub && (
          <ValuableForm
            theme={theme}
            accent={accent}
            sub={valSub}
            fields={valFields}
            setFields={setValFields}
            onBack={() => setStep("val-subkind")}
            onDone={onClose}
          />
        )}
      </div>
    </div>
  );
}

const WALLET_DISCOVERY_ASSETS = [
  { asset: "BTC", qty: "1.245", valuation: "$122,533" },
  { asset: "ETH", qty: "3.600", valuation: "$12,312" },
  { asset: "USDT", qty: "18,420.00", valuation: "$18,420" },
];

function detectWalletAddress(address) {
  const value = address.trim();
  if (/^0x[a-fA-F0-9]{40}$/.test(value)) {
    return { tag: "EVM", valid: true };
  }
  if (value.startsWith("0x")) {
    return { tag: "EVM", valid: false };
  }
  if (/^T[1-9A-HJ-NP-Za-km-z]{33}$/.test(value)) {
    return { tag: "TRON", valid: true };
  }
  if (value.startsWith("T")) {
    return { tag: "TRON", valid: false };
  }
  if (/^[1-9A-HJ-NP-Za-km-z]{43,44}$/.test(value)) {
    return { tag: "SOLANA", valid: true };
  }
  if (/^(bc1[a-z0-9]{25,87}|[13][a-km-zA-HJ-NP-Z1-9]{25,34})$/.test(value)) {
    return { tag: "BITCOIN", valid: true };
  }
  if (/^(bc1|[13])/.test(value)) {
    return { tag: "BITCOIN", valid: false };
  }
  return { tag: "", valid: false };
}

function WalletAddressTracker({
  theme,
  accent,
  address,
  setAddress,
  onBack,
  onReview,
}) {
  const detection = detectWalletAddress(address);

  return (
    <>
      <BackBtn theme={theme} onClick={onBack} />
      <div
        style={{
          fontFamily: FONTS.display,
          fontSize: 22,
          color: theme.text,
          marginTop: 10,
        }}
      >
        Add wallet address
      </div>
      <div
        style={{
          fontSize: 12.5,
          color: theme.textDim,
          marginTop: 4,
          fontFamily: FONTS.ui,
          lineHeight: 1.35,
        }}
      >
        Paste your public wallet address. We track holdings via verified network
        explorers — read-only.
      </div>

      <FormField
        theme={theme}
        label="Public address"
        action={
          detection.tag ? (
            <span
              style={{
                color: "rgb(44, 91, 255)",
                fontFamily: FONTS.mono,
                fontSize: 10,
                letterSpacing: 0.6,
              }}
            >
              [ {detection.tag} ]
            </span>
          ) : null
        }
      >
        <input
          value={address}
          onChange={(e) => setAddress(e.target.value)}
          placeholder="Enter address (0x..., T..., bc1..., etc.)"
          autoCapitalize="none"
          autoCorrect="off"
          spellCheck={false}
          style={inputStyle(theme)}
        />
      </FormField>

      <ExplorerDirectory />

      <PrimaryBtn
        theme={theme}
        accent={accent}
        label="Track wallet"
        disabled={!detection.valid}
        onClick={onReview}
      />

      <SecureBadge theme={theme} accent={accent} />
    </>
  );
}

function ExplorerDirectory() {
  const explorers = [
    { label: "Etherscan", href: "https://etherscan.io" },
    { label: "Tronscan", href: "https://tronscan.org" },
    { label: "Solscan", href: "https://solscan.io" },
    { label: "blockchain.com", href: "https://www.blockchain.com/explorer" },
  ];

  return (
    <div
      style={{
        padding: "10px 2px",
        fontFamily: FONTS.ui,
        fontSize: 10,
        lineHeight: 1.35,
        color: "rgb(44, 91, 255)",
      }}
    >
      <span>Look up on </span>
      {explorers.map((explorer, index) => (
        <React.Fragment key={explorer.href}>
          <a
            href={explorer.href}
            target="_blank"
            rel="noreferrer"
            style={{
              color: "rgb(44, 91, 255)",
              textDecoration: "underline",
              textDecorationThickness: 1,
              textUnderlineOffset: 3,
            }}
          >
            {explorer.label}
          </a>
          {index < explorers.length - 1 && <span> | </span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function WalletDiscoveryReview({ theme, accent, address, onBack, onDone }) {
  const shortAddress =
    address.length > 14
      ? `${address.slice(0, 6)}...${address.slice(-6)}`
      : address;

  return (
    <>
      <BackBtn theme={theme} onClick={onBack} />
      <div
        style={{
          fontFamily: FONTS.display,
          fontSize: 22,
          color: theme.text,
          marginTop: 10,
        }}
      >
        Found Assets
      </div>
      <div
        style={{
          fontSize: 12.5,
          color: theme.textDim,
          marginTop: 4,
          fontFamily: FONTS.ui,
        }}
      >
        Review the discovered holdings for {shortAddress} before adding them to
        total wealth.
      </div>

      <div
        style={{
          marginTop: 18,
          border: `0.5px solid ${theme.line}`,
          borderRadius: 14,
          overflow: "hidden",
          background: theme.surface2,
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "0.8fr 0.9fr 1.2fr",
            gap: 8,
            padding: "11px 12px",
            borderBottom: `0.5px solid ${theme.line}`,
            fontFamily: FONTS.mono,
            fontSize: 9.5,
            letterSpacing: 1,
            color: theme.textMute,
          }}
        >
          <span>ASSET</span>
          <span>QTY</span>
          <span style={{ textAlign: "right" }}>VALUATION</span>
        </div>
        {WALLET_DISCOVERY_ASSETS.map((row, index) => (
          <div
            key={row.asset}
            style={{
              display: "grid",
              gridTemplateColumns: "0.8fr 0.9fr 1.2fr",
              gap: 8,
              padding: "12px",
              borderBottom:
                index === WALLET_DISCOVERY_ASSETS.length - 1
                  ? "none"
                  : `0.5px solid ${theme.line}`,
              alignItems: "center",
              fontFamily: FONTS.ui,
              fontSize: 13,
              color: theme.text,
            }}
          >
            <strong style={{ fontWeight: 600 }}>{row.asset}</strong>
            <span>{row.qty}</span>
            <span style={{ textAlign: "right" }}>{row.valuation}</span>
          </div>
        ))}
      </div>

      <PrimaryBtn
        theme={theme}
        accent={accent}
        label="APPEND_TO_TOTAL_WEALTH"
        onClick={onDone}
      />
    </>
  );
}

function Web3WalletConnectHome({
  theme,
  onBack,
  onClose,
  onShowQr,
  onShowWallets,
}) {
  return (
    <>
      <Web3Header
        theme={theme}
        title="Connect Wallet"
        onBack={onBack}
        backLabel
        onClose={onClose}
      />

      <div
        style={{
          marginTop: 22,
          display: "flex",
          flexDirection: "column",
          gap: 8,
        }}
      >
        {WEB3_FEATURED_WALLETS.map((wallet) => (
          <button
            key={wallet.key}
            onClick={() => onShowQr(wallet)}
            style={{
              width: "100%",
              minHeight: 56,
              border: `0.5px solid ${theme.line}`,
              borderRadius: 14,
              background: theme.surface2,
              color: theme.text,
              padding: "10px 12px",
              display: "flex",
              alignItems: "center",
              gap: 12,
              cursor: "pointer",
              textAlign: "left",
            }}
          >
            <WalletBrandMark brand={wallet.brand} size={36} />
            <span
              style={{
                flex: 1,
                minWidth: 0,
                fontFamily: FONTS.ui,
                fontSize: 12.5,
                lineHeight: 1.2,
                fontWeight: 400,
                color: theme.text,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {wallet.name}
            </span>
            {wallet.key === "walletconnect" && (
              <span
                style={{
                  flexShrink: 0,
                  borderRadius: 4,
                  background: "#EAF4FF",
                  color: "#4787F7",
                  padding: "5px 7px",
                  fontFamily: FONTS.mono,
                  fontSize: 10,
                  lineHeight: 1,
                  fontWeight: 400,
                  letterSpacing: 0.2,
                  whiteSpace: "nowrap",
                }}
              >
                QR CODE
              </span>
            )}
          </button>
        ))}
      </div>

      <button
        onClick={onShowWallets}
        style={{
          marginTop: 12,
          width: "100%",
          minHeight: 58,
          border: `0.5px solid ${theme.line}`,
          borderRadius: 14,
          background: theme.surface2,
          color: theme.text,
          display: "flex",
          alignItems: "center",
          gap: 12,
          padding: "10px 12px",
          cursor: "pointer",
          textAlign: "left",
        }}
      >
        <span
          style={{
            width: 36,
            height: 36,
            borderRadius: 10,
            background: theme.surface3,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
            color: theme.textMute,
          }}
        >
          <Ico.search size={17} sw={1.7} />
        </span>
        <span
          style={{
            flex: 1,
            minWidth: 0,
            fontFamily: FONTS.ui,
            fontSize: 12.5,
            fontWeight: 400,
            color: theme.text,
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          Search Wallet
        </span>
        <span
          style={{
            flexShrink: 0,
            borderRadius: 4,
            background: "#ECECEC",
            color: "#A3A3A3",
            padding: "4px 7px",
            fontFamily: FONTS.mono,
            fontSize: 11,
            lineHeight: 1,
            fontWeight: 400,
          }}
        >
          {WEB3_WALLETS.length}
        </span>
      </button>
    </>
  );
}

function Web3WalletQr({ theme, wallet, onBack, onClose }) {
  const copyLink = () => {
    const link = `wc:himma-${wallet.key}@2?relay-protocol=irn`;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(link);
    }
  };

  return (
    <>
      <Web3Header
        theme={theme}
        title={wallet.name}
        onBack={onBack}
        onClose={onClose}
      />

      <div
        style={{
          marginTop: 18,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <PseudoWalletQr wallet={wallet} />
        <div
          style={{
            marginTop: 18,
            fontFamily: FONTS.ui,
            fontSize: 14,
            lineHeight: 1.35,
            color: theme.textDim,
            textAlign: "center",
          }}
        >
          Scan this QR Code with your phone
        </div>
        <button
          onClick={copyLink}
          style={{
            marginTop: 16,
            border: `0.5px solid ${theme.line2}`,
            borderRadius: 9,
            background: "#FFFFFF",
            color: theme.text,
            padding: "9px 12px",
            fontFamily: FONTS.mono,
            fontSize: 11.5,
            lineHeight: 1,
            display: "inline-flex",
            alignItems: "center",
            gap: 9,
            cursor: "pointer",
          }}
        >
          Copy link <CopyGlyph />
        </button>
      </div>
    </>
  );
}

function Web3WalletList({
  theme,
  search,
  setSearch,
  onBack,
  onClose,
  onSelectWallet,
}) {
  const query = search.trim().toLowerCase();
  const wallets = WEB3_WALLETS.filter((wallet) =>
    wallet.name.toLowerCase().includes(query),
  );

  return (
    <>
      <Web3Header
        theme={theme}
        title="All Wallets"
        onBack={onBack}
        onClose={onClose}
      />

      <div
        style={{
          marginTop: 16,
          display: "flex",
          width: "100%",
        }}
      >
        <label
          style={{
            flex: 1,
            height: 46,
            border: `0.5px solid ${theme.line2}`,
            borderRadius: 12,
            background: "#FFFFFF",
            display: "flex",
            alignItems: "center",
            padding: "0 12px",
            color: theme.textMute,
          }}
        >
          <Ico.search size={16} sw={1.8} />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search wallet"
            style={{
              width: "100%",
              minWidth: 0,
              border: "none",
              outline: "none",
              background: "transparent",
              color: "#333333",
              fontFamily: FONTS.ui,
              fontSize: 12.5,
              fontWeight: 400,
              lineHeight: 1,
            }}
          />
        </label>
      </div>

      <div
        style={{
          marginTop: 12,
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 8,
        }}
      >
        {wallets.map((wallet) => (
          <button
            key={wallet.key}
            onClick={() => onSelectWallet(wallet)}
            style={{
              minWidth: 0,
              height: 88,
              border: "none",
              borderRadius: 10,
              background: theme.surface2,
              color: "#383838",
              padding: "9px 7px 8px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              cursor: "pointer",
              position: "relative",
              overflow: "hidden",
            }}
          >
            <WalletBrandMark brand={wallet.brand} size={40} />
            <span
              style={{
                marginTop: 7,
                width: "100%",
                fontFamily: FONTS.ui,
                fontSize: 11.5,
                fontWeight: 400,
                color: theme.text,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {wallet.name}
            </span>
          </button>
        ))}
      </div>

      {wallets.length === 0 && (
        <div
          style={{
            marginTop: 28,
            textAlign: "center",
            color: theme.textMute,
            fontFamily: FONTS.ui,
            fontSize: 13,
          }}
        >
          No wallets found
        </div>
      )}
    </>
  );
}

function Web3Header({ theme, title, help, onBack, backLabel, onClose }) {
  return (
    <div
      style={{
        minHeight: 32,
        display: "grid",
        gridTemplateColumns: backLabel ? "54px 1fr 54px" : "32px 1fr 32px",
        alignItems: "center",
        gap: 8,
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: backLabel ? "flex-start" : "center",
        }}
      >
        {onBack && backLabel ? (
          <BackBtn theme={theme} onClick={onBack} />
        ) : onBack ? (
          <button
            onClick={onBack}
            aria-label="Back"
            style={web3IconButtonStyle(theme)}
          >
            <Ico.chevL size={18} sw={1.8} />
          </button>
        ) : help ? (
          <button aria-label="Wallet help" style={web3IconButtonStyle(theme)}>
            <QuestionGlyph theme={theme} />
          </button>
        ) : null}
      </div>
      <div
        style={{
          minWidth: 0,
          textAlign: "center",
          fontFamily: FONTS.ui,
          fontSize: 22,
          fontWeight: 400,
          color: theme.text,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {title}
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <button
          onClick={onClose}
          aria-label="Close"
          style={web3IconButtonStyle(theme)}
        >
          <Ico.close size={18} sw={1.8} />
        </button>
      </div>
    </div>
  );
}

function web3IconButtonStyle(theme) {
  return {
    width: 34,
    height: 34,
    border: `0.5px solid ${theme.line}`,
    borderRadius: 12,
    background: "transparent",
    color: theme.textDim,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    padding: 0,
  };
}

function QuestionGlyph({ theme }) {
  return (
    <span
      style={{
        width: 21,
        height: 21,
        borderRadius: 11,
        border: `1.5px solid ${theme.textDim}`,
        color: theme.textDim,
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: FONTS.ui,
        fontSize: 12,
        lineHeight: 1,
        fontWeight: 700,
      }}
    >
      ?
    </span>
  );
}

function WalletBrandMark({ brand, size = 56, mono = false }) {
  const radius = Math.max(8, Math.round(size * 0.18));
  const base = {
    width: size,
    height: size,
    borderRadius: radius,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    overflow: "hidden",
  };

  if (brand === "walletconnect") {
    return (
      <div
        style={{
          ...base,
          background: mono ? "transparent" : "#4198FF",
        }}
      >
        <WalletConnectGlyph
          size={Math.round(size * 0.62)}
          color={mono ? "#333333" : "#FFFFFF"}
        />
      </div>
    );
  }

  if (brand === "binance") {
    return (
      <div style={{ ...base, background: "#11161D" }}>
        <BinanceGlyph size={Math.round(size * 0.72)} />
      </div>
    );
  }

  if (brand === "metamask") {
    return (
      <div style={{ ...base, background: "#FFFFFF" }}>
        <svg width={size * 0.72} height={size * 0.62} viewBox="0 0 72 62">
          <path d="M5 4l22 16-4 13L8 28z" fill="#E65A11" />
          <path d="M67 4L45 20l4 13 15-5z" fill="#F6851B" />
          <path d="M23 33l13-6 13 6-5 20H28z" fill="#F36D16" />
          <path d="M14 37l14 16H12z" fill="#C74714" />
          <path d="M58 37L44 53h16z" fill="#E2761B" />
          <path d="M28 53l8 5 8-5z" fill="#763D16" />
        </svg>
      </div>
    );
  }

  if (brand === "safepal") {
    return (
      <div
        style={{
          ...base,
          background: "linear-gradient(135deg, #5D31FF, #4715DB)",
        }}
      >
        <svg width={size * 0.64} height={size * 0.64} viewBox="0 0 64 64">
          <path d="M12 18h28L28 30h24L31 52H12l14-14H4z" fill="#FFFFFF" />
        </svg>
      </div>
    );
  }

  if (brand === "trust") {
    return (
      <div style={{ ...base, background: "#FFFFFF" }}>
        <svg width={size * 0.66} height={size * 0.72} viewBox="0 0 64 72">
          <path
            d="M32 4l25 9v18c0 17-10 28-25 37C17 59 7 48 7 31V13z"
            fill="#2B74FF"
          />
          <path
            d="M32 4l25 9v18c0 17-10 28-25 37z"
            fill="#21E39E"
            opacity="0.8"
          />
        </svg>
      </div>
    );
  }

  if (brand === "fireblocks") {
    return (
      <div
        style={{
          ...base,
          background: "linear-gradient(135deg, #0C5BCB, #073978)",
        }}
      >
        <svg width={size * 0.58} height={size * 0.52} viewBox="0 0 56 50">
          <path d="M28 3l24 43H4z" fill="#FFFFFF" />
        </svg>
      </div>
    );
  }

  if (brand === "okx") {
    return (
      <div style={{ ...base, background: "#000000" }}>
        <svg width={size * 0.64} height={size * 0.64} viewBox="0 0 64 64">
          {[8, 34].map((x) =>
            [8, 34].map((y) => (
              <rect
                key={`${x}-${y}`}
                x={x}
                y={y}
                width="20"
                height="20"
                rx="2"
                fill="#FFFFFF"
              />
            )),
          )}
          <rect x="22" y="22" width="20" height="20" rx="2" fill="#000000" />
        </svg>
      </div>
    );
  }

  if (brand === "tokenpocket") {
    return (
      <div style={{ ...base, background: "#2E82FF", color: "#FFFFFF" }}>
        <span
          style={{
            fontFamily: FONTS.ui,
            fontSize: size * 0.42,
            lineHeight: 1,
            fontWeight: 800,
          }}
        >
          TP
        </span>
      </div>
    );
  }

  if (brand === "bitget") {
    return (
      <div style={{ ...base, background: "#062D36" }}>
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 64 64">
          <path d="M18 8l30 24-30 24 10-24z" fill="#26E5F2" />
        </svg>
      </div>
    );
  }

  if (brand === "uniswap") {
    return (
      <div style={{ ...base, background: "#FFF1FB", color: "#F13BCE" }}>
        <span
          style={{
            fontFamily: FONTS.ui,
            fontSize: size * 0.48,
            lineHeight: 1,
            fontWeight: 800,
          }}
        >
          U
        </span>
      </div>
    );
  }

  if (brand === "ledger") {
    return (
      <div style={{ ...base, background: "#000000" }}>
        <svg width={size * 0.66} height={size * 0.66} viewBox="0 0 64 64">
          <path
            d="M12 26V12h14M38 12h14v14M52 38v14H38M26 52H12V38"
            fill="none"
            stroke="#FFFFFF"
            strokeWidth="5"
          />
        </svg>
      </div>
    );
  }

  if (brand === "zerion") {
    return (
      <div style={{ ...base, background: "#2D65F2" }}>
        <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 64 64">
          <path
            d="M12 15h40L26 49h26"
            fill="none"
            stroke="#FFFFFF"
            strokeWidth="10"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
    );
  }

  if (brand === "phantom") {
    return (
      <div
        style={{
          ...base,
          background: "linear-gradient(135deg, #6157FF, #795CFF)",
        }}
      >
        <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 64 64">
          <path
            d="M12 40c0-17 10-28 24-28 10 0 17 8 17 19v18H12z"
            fill="#FFFFFF"
          />
          <circle cx="29" cy="29" r="3" fill="#6157FF" />
          <circle cx="43" cy="29" r="3" fill="#6157FF" />
        </svg>
      </div>
    );
  }

  return (
    <div style={{ ...base, background: "#6B7280", color: "#FFFFFF" }}>
      <span
        style={{
          fontFamily: FONTS.ui,
          fontSize: size * 0.38,
          lineHeight: 1,
          fontWeight: 800,
        }}
      >
        {String(brand).slice(0, 2).toUpperCase()}
      </span>
    </div>
  );
}

function WalletConnectGlyph({ size = 28, color = "#FFFFFF" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <path d="M16 27c8-8 24-8 32 0l-6 6c-5-5-15-5-20 0z" fill={color} />
      <path d="M7 34l9-9 16 16 16-16 9 9-25 25z" fill={color} opacity="0.96" />
    </svg>
  );
}

function BinanceGlyph({ size = 42 }) {
  const pieces = [
    [23, 5, 10],
    [10, 18, 10],
    [23, 18, 10],
    [36, 18, 10],
    [23, 31, 10],
  ];

  return (
    <svg width={size} height={size} viewBox="0 0 56 56" aria-hidden="true">
      {pieces.map(([x, y, s]) => (
        <rect
          key={`${x}-${y}`}
          x={x}
          y={y}
          width={s}
          height={s}
          transform={`rotate(45 ${x + s / 2} ${y + s / 2})`}
          fill="#F4C623"
        />
      ))}
    </svg>
  );
}

function PseudoWalletQr({ wallet }) {
  const seed = wallet.key
    .split("")
    .reduce((sum, char) => sum + char.charCodeAt(0), 0);
  const modules = [];
  const cell = 3;
  const skipFinder = (x, y) =>
    (x < 7 && y < 7) || (x > 21 && y < 7) || (x < 7 && y > 21);
  const skipCenter = (x, y) => x > 10 && x < 19 && y > 10 && y < 19;

  for (let y = 0; y < 29; y += 1) {
    for (let x = 0; x < 29; x += 1) {
      if (skipFinder(x, y) || skipCenter(x, y)) continue;
      const on =
        (x * 11 + y * 17 + seed) % 5 === 0 ||
        (x * y + seed) % 13 === 0 ||
        (x + y + seed) % 11 === 0;
      if (!on) continue;
      const tall = (x + y + seed) % 4 === 0;
      modules.push(
        <rect
          key={`${x}-${y}`}
          x={x * cell + 2}
          y={y * cell + 2}
          width={tall ? 1.4 : 2}
          height={tall ? 4.6 : 2}
          rx="1"
          fill="#FFFFFF"
        />,
      );
    }
  }

  const finder = (x, y) => (
    <g key={`${x}-${y}`}>
      <rect x={x} y={y} width="15" height="15" rx="6" fill="#FFFFFF" />
      <rect x={x + 3} y={y + 3} width="9" height="9" rx="4" fill="#333333" />
      <rect x={x + 6} y={y + 6} width="3" height="3" rx="1.5" fill="#FFFFFF" />
    </g>
  );

  return (
    <div
      style={{
        width: "100%",
        maxWidth: 258,
        aspectRatio: "1 / 1",
        borderRadius: 12,
        background: "#333333",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 91 91"
        preserveAspectRatio="xMidYMid meet"
      >
        {finder(2, 2)}
        {finder(74, 2)}
        {finder(2, 74)}
        {modules}
      </svg>
      <div
        style={{
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
          width: 62,
          height: 56,
          borderRadius: 5,
          background: "#FFFFFF",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <WalletBrandMark brand={wallet.brand} size={42} mono />
      </div>
    </div>
  );
}

function CopyGlyph() {
  return (
    <span
      aria-hidden="true"
      style={{
        width: 14,
        height: 14,
        position: "relative",
        display: "inline-block",
      }}
    >
      <span
        style={{
          position: "absolute",
          left: 4,
          top: 1,
          width: 8,
          height: 8,
          border: "1.5px solid #555555",
          borderRadius: 1,
        }}
      />
      <span
        style={{
          position: "absolute",
          left: 1,
          top: 4,
          width: 8,
          height: 8,
          border: "1.5px solid #555555",
          borderRadius: 1,
          background: "#FFFFFF",
        }}
      />
    </span>
  );
}

function ManualMortgageForm({
  theme,
  accent,
  propertyTitle,
  fields,
  setFields,
  onBack,
  onDone,
}) {
  const set = (k, v) =>
    setFields((f) =>
      typeof k === "object" ? { ...f, ...k } : { ...f, [k]: v },
    );
  const rateType = normalizeMortgageRateType(fields.rateType);
  const canSubmit = canSaveMortgageForm(fields);

  const setFixedApr = (value) => {
    const fixedApr = cleanMortgageRate(value);
    set({ fixedApr, apr: fixedApr });
  };
  const setCurrentApr = (value) => {
    const currentApr = cleanMortgageRate(value);
    set({ currentApr, dynamicApr: "", apr: currentApr });
  };

  return (
    <>
      <BackBtn theme={theme} onClick={onBack} />
      <div
        style={{
          fontFamily: FONTS.display,
          fontSize: 22,
          color: theme.text,
          marginTop: 10,
        }}
      >
        Mortgage details
      </div>
      <div
        style={{
          fontSize: 12.5,
          color: theme.textDim,
          marginTop: 4,
          fontFamily: FONTS.ui,
        }}
      >
        Add the mortgage manually so Himma can track the balance alongside this
        property.
      </div>

      <MortgageFormGroup theme={theme} title="Core Details">
        <div
          style={{
            marginTop: 10,
            padding: "12px 14px",
            borderRadius: 14,
            background: theme.surface2,
            border: `0.5px solid ${theme.line}`,
            display: "flex",
            alignItems: "center",
            gap: 10,
          }}
        >
          <div
            style={{
              width: 32,
              height: 32,
              borderRadius: 10,
              background: theme.surface3,
              color: accent,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <Ico.home size={15} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{
                fontFamily: FONTS.mono,
                fontSize: 9.5,
                color: theme.textMute,
                letterSpacing: 1,
                textTransform: "uppercase",
              }}
            >
              Linked property
            </div>
            <div
              style={{
                fontSize: 13,
                color: theme.text,
                fontWeight: 500,
                marginTop: 2,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {propertyTitle}
            </div>
          </div>
        </div>

        <FormField theme={theme} label="Lender">
          <input
            value={fields.lender || ""}
            onChange={(e) => set("lender", e.target.value)}
            placeholder="Mashreq"
            style={inputStyle(theme)}
          />
        </FormField>

        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Original Amount">
            <input
              value={fields.originalAmount || ""}
              onChange={(e) =>
                set("originalAmount", cleanMortgageMoney(e.target.value))
              }
              placeholder="480000"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Start Date">
            <input
              type="date"
              value={fields.startDate || ""}
              onChange={(e) =>
                set({
                  startDate: e.target.value,
                  originationDate: e.target.value,
                })
              }
              style={inputStyle(theme)}
            />
          </FormField>
        </div>

        <FormField theme={theme} label="Term (Years)">
          <input
            value={fields.termYears || ""}
            onChange={(e) => {
              const termYears = cleanMortgageYears(e.target.value);
              set({
                termYears,
                term: termYears ? `${termYears} years` : "",
              });
            }}
            placeholder="25"
            inputMode="numeric"
            style={inputStyle(theme)}
          />
        </FormField>
      </MortgageFormGroup>

      <MortgageFormGroup theme={theme} title="Rate Structure">
        <MortgageRateTypeFields
          theme={theme}
          accent={accent}
          fields={fields}
          rateType={rateType}
          onRateTypeChange={(v) => set(getMortgageRateTypePatch(fields, v))}
          onFixedPeriodYearsChange={(v) => set("fixedPeriodYears", v)}
          onFixedAprChange={setFixedApr}
          onCurrentAprChange={setCurrentApr}
        />
      </MortgageFormGroup>

      <MortgageFormGroup theme={theme} title="Current Status">
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Outstanding Balance (AED)">
            <input
              value={fields.balance || ""}
              onChange={(e) =>
                set("balance", cleanMortgageMoney(e.target.value))
              }
              placeholder="460000"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Monthly Payment (AED)">
            <input
              value={fields.monthlyPayment || ""}
              onChange={(e) =>
                set("monthlyPayment", cleanMortgageMoney(e.target.value))
              }
              placeholder="2840"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      </MortgageFormGroup>

      <MortgageFormGroup theme={theme} title="Payment Day">
        <FormField theme={theme} label="Payment Day">
          <input
            value={fields.paymentDay || ""}
            onChange={(e) => set("paymentDay", e.target.value)}
            placeholder="1st"
            style={inputStyle(theme)}
          />
        </FormField>
      </MortgageFormGroup>

      <PrimaryBtn
        theme={theme}
        accent={accent}
        label="Add property and mortgage"
        disabled={!canSubmit}
        onClick={onDone}
      />
    </>
  );
}

function MortgageRateTypeFields({
  theme,
  accent,
  fields,
  rateType,
  onRateTypeChange,
  onFixedPeriodYearsChange,
  onFixedAprChange,
  onCurrentAprChange,
}) {
  return (
    <>
      <FormField theme={theme} label="Mortgage type">
        <MortgageSegmentedControl
          theme={theme}
          accent={accent}
          value={rateType}
          options={MORTGAGE_RATE_TYPES}
          onChange={onRateTypeChange}
        />
      </FormField>

      {rateType === MORTGAGE_TYPE_FIXED_THEN_DYNAMIC && (
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Fixed Period Duration">
            <select
              value={fields.fixedPeriodYears || ""}
              onChange={(e) => onFixedPeriodYearsChange(e.target.value)}
              style={inputStyle(theme)}
            >
              <option value="" disabled>
                Select
              </option>
              {MORTGAGE_FIXED_PERIOD_OPTIONS.map((years) => (
                <option key={years} value={years}>
                  {years} year{years === "1" ? "" : "s"}
                </option>
              ))}
            </select>
          </FormField>
          <FormField theme={theme} label="Fixed APR (%)">
            <input
              value={fields.fixedApr || ""}
              onChange={(e) => onFixedAprChange(e.target.value)}
              placeholder="4.50"
              inputMode="decimal"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      )}

      {rateType === MORTGAGE_TYPE_DYNAMIC && (
        <FormField theme={theme} label="Current APR (%)">
          <input
            value={fields.currentApr || fields.dynamicApr || ""}
            onChange={(e) => onCurrentAprChange(e.target.value)}
            placeholder="5.25"
            inputMode="decimal"
            style={inputStyle(theme)}
          />
        </FormField>
      )}

      {rateType === MORTGAGE_TYPE_FULLY_FIXED && (
        <FormField theme={theme} label="Fixed APR (%)">
          <input
            value={fields.fixedApr || ""}
            onChange={(e) => onFixedAprChange(e.target.value)}
            placeholder="4.95"
            inputMode="decimal"
            style={inputStyle(theme)}
          />
        </FormField>
      )}
    </>
  );
}

function MortgageFormGroup({ theme, title, children }) {
  return (
    <div
      style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: `0.5px solid ${theme.line}`,
      }}
    >
      <SectionLabel theme={theme}>{title}</SectionLabel>
      <div style={{ marginTop: 2 }}>{children}</div>
    </div>
  );
}

function MortgageSegmentedControl({ theme, value, options, onChange }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "1.25fr 0.78fr 0.92fr",
        gap: 6,
        background: theme.surface2,
        border: `0.5px solid ${theme.line2}`,
        borderRadius: 14,
        padding: 3,
      }}
    >
      {options.map((option) => {
        const active = value === option;
        return (
          <button
            key={option}
            onClick={() => onChange(option)}
            style={{
              minHeight: 42,
              background: active ? theme.text : "transparent",
              color: active ? theme.bg : theme.textDim,
              border: "none",
              borderRadius: 11,
              padding: "7px 6px",
              fontFamily: FONTS.ui,
              fontSize: 11.5,
              fontWeight: 600,
              lineHeight: 1.15,
              cursor: "pointer",
              textAlign: "center",
            }}
          >
            {option}
          </button>
        );
      })}
    </div>
  );
}

function ValuableForm({
  theme,
  accent,
  sub,
  fields,
  setFields,
  onBack,
  onDone,
}) {
  const set = (k, v) => setFields((f) => ({ ...f, [k]: v }));

  // Fields per subkind
  let body = null;
  let canSubmit = false;

  if (sub.key === "car") {
    canSubmit = fields.make && fields.value;
    body = (
      <>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Make">
            <input
              value={fields.make || ""}
              onChange={(e) => set("make", e.target.value)}
              placeholder="Mazda"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Model">
            <input
              value={fields.model || ""}
              onChange={(e) => set("model", e.target.value)}
              placeholder="CX-5"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Year">
            <input
              value={fields.year || ""}
              onChange={(e) =>
                set("year", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="2022"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Estimated value (AED)">
            <input
              value={fields.value || ""}
              onChange={(e) =>
                set("value", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="82000"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      </>
    );
  } else if (sub.key === "commodities") {
    canSubmit = fields.kind && fields.value;
    body = (
      <>
        <FormField theme={theme} label="Type">
          <SegmentedRow
            theme={theme}
            accent={accent}
            value={fields.kind || "Gold"}
            options={["Gold", "Silver", "Platinum", "Other"]}
            onChange={(v) => set("kind", v)}
          />
        </FormField>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Quantity (g)">
            <input
              value={fields.qty || ""}
              onChange={(e) =>
                set("qty", e.target.value.replace(/[^0-9.]/g, ""))
              }
              placeholder="220"
              inputMode="decimal"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Estimated value (AED)">
            <input
              value={fields.value || ""}
              onChange={(e) =>
                set("value", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="46000"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      </>
    );
  } else if (sub.key === "stock_opts") {
    canSubmit = fields.company && fields.value;
    body = (
      <>
        <FormField theme={theme} label="Company">
          <input
            value={fields.company || ""}
            onChange={(e) => set("company", e.target.value)}
            placeholder="Stripe Inc."
            style={inputStyle(theme)}
          />
        </FormField>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Shares / units">
            <input
              value={fields.units || ""}
              onChange={(e) =>
                set("units", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="2500"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Estimated value (AED)">
            <input
              value={fields.value || ""}
              onChange={(e) =>
                set("value", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="64000"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      </>
    );
  } else if (sub.key === "business") {
    canSubmit = fields.name && fields.value;
    body = (
      <>
        <FormField theme={theme} label="Business name">
          <input
            value={fields.name || ""}
            onChange={(e) => set("name", e.target.value)}
            placeholder="Side Studio"
            style={inputStyle(theme)}
          />
        </FormField>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          <FormField theme={theme} label="Ownership %">
            <input
              value={fields.ownership || ""}
              onChange={(e) =>
                set("ownership", e.target.value.replace(/[^0-9.]/g, ""))
              }
              placeholder="40"
              inputMode="decimal"
              style={inputStyle(theme)}
            />
          </FormField>
          <FormField theme={theme} label="Equity value (AED)">
            <input
              value={fields.value || ""}
              onChange={(e) =>
                set("value", e.target.value.replace(/[^0-9]/g, ""))
              }
              placeholder="22400"
              inputMode="numeric"
              style={inputStyle(theme)}
            />
          </FormField>
        </div>
      </>
    );
  }

  return (
    <>
      <BackBtn theme={theme} onClick={onBack} />
      <div
        style={{
          fontFamily: FONTS.display,
          fontSize: 22,
          color: theme.text,
          marginTop: 10,
        }}
      >
        {sub.label}
      </div>

      <div style={{ marginTop: 16 }}>{body}</div>

      <PrimaryBtn
        theme={theme}
        accent={accent}
        label="Add asset"
        disabled={!canSubmit}
        onClick={onDone}
      />
    </>
  );
}

function FormField({ theme, label, hint, action, children }) {
  return (
    <div style={{ marginTop: 14 }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 8,
          fontFamily: FONTS.mono,
          fontSize: 10,
          color: theme.textMute,
          textTransform: "uppercase",
          letterSpacing: 1,
          marginBottom: 6,
        }}
      >
        <span>{label}</span>
        {action}
      </div>
      {children}
      {hint && (
        <div
          style={{
            fontSize: 11,
            color: theme.textMute,
            marginTop: 6,
            fontFamily: FONTS.ui,
          }}
        >
          {hint}
        </div>
      )}
    </div>
  );
}

function inputStyle(theme) {
  return {
    width: "100%",
    background: theme.surface2,
    border: `0.5px solid ${theme.line2}`,
    borderRadius: 12,
    padding: "12px 14px",
    color: theme.text,
    fontSize: 13.5,
    fontFamily: FONTS.ui,
    outline: "none",
    resize: "vertical",
  };
}

function SegmentedRow({ theme, accent, value, options, onChange }) {
  return (
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
      {options.map((o) => {
        const active = o === value;
        return (
          <button
            key={o}
            onClick={() => onChange(o)}
            style={{
              background: active ? theme.text : theme.surface2,
              color: active ? theme.bg : theme.text,
              border: `0.5px solid ${active ? theme.text : theme.line2}`,
              borderRadius: 999,
              padding: "7px 12px",
              fontFamily: FONTS.ui,
              fontSize: 12,
              fontWeight: 500,
              cursor: "pointer",
              whiteSpace: "nowrap",
            }}
          >
            {o}
          </button>
        );
      })}
    </div>
  );
}

function Toggle({ theme, accent, value, onChange }) {
  return (
    <button
      onClick={() => onChange(!value)}
      style={{
        width: 46,
        height: 26,
        borderRadius: 13,
        border: `0.5px solid ${theme.line2}`,
        background: value ? accent : theme.surface2,
        position: "relative",
        cursor: "pointer",
        transition: "background 140ms",
        padding: 0,
      }}
    >
      <span
        style={{
          position: "absolute",
          top: 2,
          left: value ? 22 : 2,
          width: 20,
          height: 20,
          borderRadius: 10,
          background: "#fff",
          boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
          transition: "left 140ms",
        }}
      />
    </button>
  );
}

function PrimaryBtn({ theme, accent, label, disabled, onClick }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        marginTop: 22,
        width: "100%",
        background: disabled ? theme.surface3 : accent,
        color: disabled ? theme.textMute : theme.bg,
        border: "none",
        padding: "14px",
        borderRadius: 14,
        fontFamily: FONTS.ui,
        fontSize: 14,
        fontWeight: 600,
        opacity: disabled ? 0.55 : 1,
        cursor: disabled ? "not-allowed" : "pointer",
      }}
    >
      {label}
    </button>
  );
}

function ProviderTile({ theme, name, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        background: theme.surface2,
        border: `0.5px solid ${theme.line}`,
        borderRadius: 12,
        padding: "12px 10px",
        display: "flex",
        alignItems: "center",
        gap: 10,
        fontFamily: FONTS.ui,
        fontSize: 12.5,
        color: theme.text,
        cursor: "pointer",
        textAlign: "left",
      }}
    >
      <BrandLogo name={name} size={28} />
      <span
        style={{
          flex: 1,
          minWidth: 0,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {name}
      </span>
    </button>
  );
}

function ModeCard({ theme, accent, icon, title, onClick }) {
  const Icon = Ico[icon];
  return (
    <button
      onClick={onClick}
      style={{
        background: theme.surface2,
        border: `0.5px solid ${theme.line}`,
        borderRadius: 14,
        padding: "14px",
        display: "flex",
        alignItems: "center",
        gap: 12,
        cursor: "pointer",
        textAlign: "left",
        color: theme.text,
      }}
    >
      <div
        style={{
          width: 34,
          height: 34,
          borderRadius: 10,
          background: theme.surface3,
          color: accent,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        <Icon size={16} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{title}</div>
      </div>
      <Ico.chevR size={13} stroke={theme.textDim} />
    </button>
  );
}

function SecureBadge({ theme, accent }) {
  return (
    <div
      style={{
        marginTop: 18,
        padding: "10px 12px",
        background: theme.surface2,
        borderRadius: 10,
        display: "flex",
        alignItems: "center",
        gap: 8,
      }}
    >
      <Ico.shield size={14} stroke={accent} />
      <span
        style={{
          fontFamily: FONTS.mono,
          fontSize: 10.5,
          color: theme.textDim,
          letterSpacing: 0.2,
        }}
      >
        Read-only. Himma never moves money.
      </span>
    </div>
  );
}

function BackBtn({ onClick, theme }) {
  return (
    <button
      onClick={onClick}
      style={{
        background: "transparent",
        border: "none",
        color: theme.textDim,
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        gap: 4,
        padding: 0,
        fontSize: 12,
        fontFamily: FONTS.ui,
      }}
    >
      <Ico.chevL size={12} /> Back
    </button>
  );
}

Object.assign(window, { AddAssetModal });