> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpalm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Palm API Documentation

> Learn how to get started with the Palm Platform

export const BackgroundGlobe = () => <div id="globe-wrapper">
    <img src="/images/globe.svg" alt="Decorative globe" id="globe-content" className="" />
  </div>;

export const HeroDiagram = () => <div data-carousel className="inner-diagram-wrapper">

    {}
    <div className="connection-layer-dots" aria-hidden="true">
      {}
      <div className="path-dot in" data-pos="top"></div>
      <div className="path-dot in" data-pos="right-top"></div>
      <div className="path-dot in" data-pos="right"></div>
      <div className="path-dot in" data-pos="right-bottom"></div>
      <div className="path-dot in" data-pos="bottom"></div>
      <div className="path-dot in" data-pos="left-bottom"></div>
      <div className="path-dot in" data-pos="left"></div>
      <div className="path-dot in" data-pos="left-top"></div>
      {}
      <div className="path-dot out" data-pos="top"></div>
      <div className="path-dot out" data-pos="right-top"></div>
      <div className="path-dot out" data-pos="right"></div>
      <div className="path-dot out" data-pos="right-bottom"></div>
      <div className="path-dot out" data-pos="bottom"></div>
      <div className="path-dot out" data-pos="left-bottom"></div>
      <div className="path-dot out" data-pos="left"></div>
      <div className="path-dot out" data-pos="left-top"></div>
    </div>

    {}
    <div className="diagram-nodes">

      <div className="diagram-node diagram-node--top">
        <div className="diagram-node__circle">
          <svg width="27" height="24" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0.9" clipPath="url(#clip0_2231_12551)">
              <path d="M25.6486 3.09819C25.337 2.58206 22.1691 1.08528 17.547 0.15625C15.6775 2.22077 15.6775 3.04657 15.6255 3.35625C15.5736 3.66593 16.2487 4.54335 16.9238 5.42077C18.1702 7.07238 18.5338 7.38206 18.7415 7.89818C19.105 8.7756 18.4818 10.9433 18.0664 12.853C18.0664 12.8014 16.9238 8.67238 16.4564 6.04012C16.4045 5.78206 16.4564 5.67883 16.4564 5.67883C13.6521 5.42077 11.7305 5.31754 11.4189 6.7627C10.1206 6.7627 9.49742 7.12399 9.34162 7.38206C9.03002 7.9498 9.39355 9.08528 9.65322 9.65302C9.86095 9.18851 10.9515 9.29173 11.3151 9.29173C11.5228 9.34335 11.5228 9.39496 11.5747 9.5498V15.0724H8.19909L5.34277 22.8659C6.6411 23.4853 8.09522 24.0014 8.97809 24.0014C9.86095 24.0014 12.0421 22.8659 12.3537 22.8659C12.6134 22.8659 14.7946 24.0014 15.6775 24.0014C16.5603 24.0014 17.9625 23.5369 19.3128 22.8659L16.4564 15.0724H13.0808V9.75625C13.0289 9.44657 12.8731 9.29173 12.7692 9.29173L14.4311 9.24012C14.1714 8.31109 13.8598 7.58851 13.3924 7.53689C13.4963 7.33044 13.6521 7.22722 13.8079 7.07238H12.5095C12.6134 6.40141 14.3272 6.60786 15.0543 6.71109C15.7813 10.4272 17.2354 15.4853 17.2874 15.5369C17.3393 15.5885 18.5338 16.053 18.6376 16.1046C19.3128 14.6079 20.4034 10.1692 20.4553 9.08528C21.3382 9.39496 21.0266 10.5304 20.8188 11.7175C19.8321 17.7562 19.0012 19.6143 18.8454 20.7498C19.7282 20.5433 20.1956 20.3885 20.3514 20.2853C20.4553 20.0788 20.8708 19.0982 21.2343 17.9627C21.7536 16.3111 22.5326 12.1821 22.5326 10.5304C22.5326 10.1692 22.1691 9.70464 21.5978 9.44657C21.5978 9.44657 21.9094 8.93044 22.0133 8.56915C22.221 8.20786 22.3768 7.43367 22.3768 7.43367C22.7403 7.53689 23 7.69173 23.0519 8.05302C23.2597 9.65302 23.1558 9.75625 22.9481 12.6982C22.9481 13.5756 22.5845 15.4853 22.2729 17.4466C21.6498 20.9562 21.0266 22.5046 21.0266 23.0724C21.9614 22.7627 22.6884 22.5046 22.7923 22.4014C22.8442 22.2982 23.5193 20.595 24.0387 17.9627C24.2464 16.8272 24.3503 15.7433 24.558 14.6079C24.8177 13.1111 24.8696 11.5111 24.8696 10.2724C24.8696 8.3627 25.1293 8.3627 23.6751 7.64012C24.2464 6.14335 24.0906 5.11109 23.9867 4.80141C23.7271 4.28528 23.4674 4.28528 22.221 4.33689C22.6365 4.80141 22.5326 5.5756 22.4287 6.09173C22.1691 5.88528 22.3249 5.52399 20.9746 5.5756C20.7669 3.40786 20.3514 3.20141 20.3514 3.09819C20.1437 2.84012 19.0531 2.99496 18.7415 3.09819C19.0012 3.30464 19.4686 4.90464 19.2608 5.62722C19.157 5.42077 17.2874 3.30464 17.3912 2.89173C17.4951 2.63367 17.6509 2.3756 18.2741 1.65302C20.4553 2.11754 24.1425 3.45948 24.4022 3.87238C24.6099 4.38851 24.8177 4.95625 24.9735 5.78206C25.1812 7.02077 25.5447 9.9627 25.337 14.4014C25.1293 19.0466 24.5061 21.6272 24.6099 21.524C25.2851 21.3175 26.3757 20.2853 26.4795 20.0272C26.7911 19.253 26.895 16.5692 26.9989 14.0917C26.9469 11.6659 26.6873 8.56915 26.5834 7.38206C26.2199 4.49173 26.0121 3.71754 25.6486 3.09819ZM8.92615 22.4014C8.25102 22.4014 7.2643 22.2982 7.2643 22.2982L8.92615 17.395L10.4841 22.2982C10.4841 22.2466 9.54935 22.4014 8.92615 22.4014ZM17.2874 22.2466C17.2874 22.2466 16.3006 22.3498 15.6255 22.3498C15.0543 22.3498 14.0675 22.2466 14.0675 22.2466L15.6255 17.3433L17.2874 22.2466ZM12.9769 18.4788V16.5692H14.4311L12.2499 22.6595L10.0687 16.6208H11.5228V17.9627C11.5228 17.9627 11.5228 18.0659 11.5747 18.0659C11.7825 18.1691 11.8344 18.1691 11.8344 18.1691L12.9769 18.4788ZM13.1327 8.51754H10.6399C10.4322 7.89818 10.6399 7.74335 11.2112 7.69173C12.1979 7.64012 13.0808 7.64012 13.1327 8.51754ZM20.2476 5.83367C21.1304 5.73044 20.7669 7.33044 20.5072 8.00141C20.1437 7.22722 19.884 6.7627 19.3128 6.04012C19.6244 5.88528 19.884 5.88528 20.2476 5.83367Z" fill="#87909E" />
              <path d="M3.99272 19.4593C4.40819 18.9432 5.96618 17.3948 6.22584 16.5173C6.48551 15.4851 6.74517 13.0077 6.74517 12.4399C6.74517 12.4399 5.18718 13.5238 4.40819 14.3496C4.04465 14.7109 3.57726 15.3819 3.57726 15.3819C3.36952 14.5044 3.62919 13.4722 3.99272 12.9044C4.51205 12.027 6.38164 10.427 6.64131 9.75606C7.05677 8.67219 7.00484 7.74316 7.31644 6.60767C6.07004 7.07219 4.51205 8.00122 3.73306 8.82703C3.68112 7.58832 4.04465 6.65929 4.87558 6.03993C6.07004 5.1109 7.67997 4.59477 8.6667 4.28509C9.54956 4.02703 11.0037 3.76896 11.6788 3.40767C12.9771 2.78832 14.2235 0.930254 14.5351 0.00122161C14.1197 0.00122161 12.5617 -0.0503913 11.0556 0.517351C10.4844 0.775415 10.2247 1.29154 10.017 1.70445C9.75729 2.06574 9.49763 2.47864 9.28989 2.78832C8.6667 3.71735 7.93963 4.18187 7.00484 4.43993C7.00484 4.38832 7.62804 3.97541 8.0435 3.04638C8.40703 2.22058 8.87443 0.672189 8.87443 0.517351C8.0435 0.620576 7.5761 0.878641 6.69324 1.18832C5.81038 1.54961 5.49878 1.96251 5.34298 2.3238C4.71978 3.25283 4.92752 5.93671 3.68112 6.91735C3.73306 5.5238 4.04465 4.02703 3.57726 2.3238C1.08447 3.35606 0.565139 4.23348 0.772872 5.26574C1.03254 6.7109 2.59053 7.33025 3.26566 8.56896C3.52532 8.93025 3.57726 9.44638 3.57726 9.44638C3.62919 9.44638 3.05793 10.1173 3.26566 11.5109C3.26566 11.5109 2.74633 10.4786 2.27893 9.85929C1.55187 8.93025 0.0977418 7.38187 0.0977418 7.38187C-0.213857 11.2528 0.305474 12.027 0.461273 12.3367C0.980604 13.1625 2.74633 14.4012 3.16179 15.227C3.36952 15.5883 3.42146 15.7432 3.42146 15.7432C3.47339 15.8464 3.05793 16.3625 3.10986 17.0851C3.16179 17.3432 3.21373 17.6012 3.31759 17.9625C3.31759 17.9625 2.74633 17.1367 2.01927 16.3109C1.39607 15.5367 0.0977418 14.6077 0.0458087 14.6077C-0.00612432 15.0722 0.253541 17.1883 0.305474 17.5496C0.40934 18.6335 0.513206 19.6141 1.448 20.5948C2.17506 21.369 4.71978 22.4012 5.23911 22.6077C5.23911 22.6077 5.13525 22.0915 4.87558 21.4206C4.40819 20.6464 3.99272 19.4593 3.99272 19.4593Z" fill="#87909E" />
            </g>
            <defs>
              <clipPath id="clip0_2231_12551">
                <rect width="27" height="24" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </div>
        <span className="diagram-node__label">IRS</span>
      </div>

      <div className="diagram-node diagram-node--right-top">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0002 1.25C12.4003 1.25005 12.789 1.37503 13.1128 1.60522L13.2468 1.70996L13.2534 1.71582C14.9205 3.17331 17.2422 4.25063 19 4.25073C19.4641 4.25073 19.9096 4.43459 20.2378 4.7627C20.566 5.09088 20.7498 5.53637 20.7498 6.00049V13.0002C20.7498 15.6983 19.7966 17.7603 18.2668 19.3298C16.7575 20.8783 14.7205 21.915 12.5869 22.6587L12.5811 22.6609C12.2055 22.7881 11.7979 22.7829 11.4253 22.6484V22.6492C9.28613 21.9104 7.24537 20.8766 5.73438 19.3291C4.29887 17.8587 3.37132 15.9542 3.26099 13.499L3.25 13.0002V6.00049C3.25 5.53642 3.43459 5.09087 3.7627 4.7627C4.09075 4.43476 4.53591 4.25086 4.99976 4.25073C6.75691 4.25073 9.08849 3.16391 10.7463 1.71582L10.7529 1.70996C11.1005 1.41309 11.5432 1.25006 12.0002 1.25ZM12.0002 2.75C11.9014 2.75006 11.8049 2.78454 11.7292 2.84814C9.90721 4.43835 7.24085 5.75073 4.99976 5.75073C4.93363 5.75086 4.87001 5.77721 4.82324 5.82397C4.77652 5.87083 4.75 5.93431 4.75 6.00049V13.0002L4.75952 13.425C4.85171 15.5118 5.62599 17.071 6.80811 18.2817C8.08943 19.5939 9.88415 20.53 11.9146 21.2312C11.9202 21.2331 11.9265 21.2357 11.9321 21.2378C11.9858 21.2577 12.0449 21.2583 12.0991 21.24C14.123 20.5339 15.9137 19.5958 17.1931 18.2832C18.4533 16.9902 19.2498 15.3021 19.2498 13.0002V6.00049C19.2498 5.93419 19.2234 5.87086 19.1765 5.82397C19.1296 5.77717 19.0662 5.75073 19 5.75073C16.7593 5.75063 14.1025 4.44914 12.2698 2.84814C12.1943 2.78492 12.0988 2.75006 12.0002 2.75ZM14.47 9.46997C14.7628 9.1772 15.2376 9.1772 15.5305 9.46997C15.8234 9.76283 15.8233 10.2376 15.5305 10.5305L11.5308 14.5303C11.2379 14.8232 10.7631 14.8232 10.4702 14.5303L8.46997 12.5308C8.17721 12.2379 8.17723 11.7631 8.46997 11.4702C8.76284 11.1774 9.23765 11.1774 9.53052 11.4702L10.9998 12.9395L14.47 9.46997Z" fill="#87909E" />
          </svg>
        </div>
        <span className="diagram-node__label">FinCEN</span>
      </div>

      <div className="diagram-node diagram-node--right">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 2H6C5.46957 2 4.96086 2.21072 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8M14 2C14.3166 1.99949 14.6301 2.06161 14.9225 2.18277C15.215 2.30394 15.4806 2.48176 15.704 2.706L19.292 6.294C19.5168 6.51751 19.6952 6.78335 19.8167 7.07616C19.9382 7.36898 20.0005 7.68297 20 8M14 2V7C14 7.26522 14.1054 7.51957 14.2929 7.70711C14.4804 7.89464 14.7348 8 15 8L20 8M10 9H8M16 13H8M16 17H8" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">SOS</span>
      </div>

      <div className="diagram-node diagram-node--right-bottom">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 3V21M19 8L22 16C21.1345 16.6491 20.0819 17 19 17C17.9181 17 16.8655 16.6491 16 16L19 8ZM19 8V7M3 7H4C6.79039 7 9.53789 6.31313 12 5C14.4621 6.31313 17.2096 7 20 7H21M5 8L8 16C7.13452 16.6491 6.08185 17 5 17C3.91815 17 2.86548 16.6491 2 16L5 8ZM5 8V7M7 21H17" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">Lawsuits</span>
      </div>

      <div className="diagram-node diagram-node--bottom">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 15H13C13.5304 15 14.0391 14.7893 14.4142 14.4142C14.7893 14.0391 15 13.5304 15 13C15 12.4696 14.7893 11.9609 14.4142 11.5858C14.0391 11.2107 13.5304 11 13 11H10C9.4 11 8.9 11.2 8.6 11.6L3 17M7 20.9998L8.6 19.5998C8.9 19.1998 9.4 18.9998 10 18.9998H14C15.1 18.9998 16.1 18.5998 16.8 17.7998L21.4 13.3998C21.7859 13.0351 22.0111 12.5321 22.0261 12.0014C22.0411 11.4706 21.8447 10.9557 21.48 10.5698C21.1153 10.1839 20.6123 9.95867 20.0816 9.94367C19.5508 9.92867 19.0359 10.1251 18.65 10.4898L14.45 14.3898M2 16L8 22M18.9001 9.0001C18.9001 10.6017 17.6017 11.9001 16.0001 11.9001C14.3985 11.9001 13.1001 10.6017 13.1001 9.0001C13.1001 7.39847 14.3985 6.1001 16.0001 6.1001C17.6017 6.1001 18.9001 7.39847 18.9001 9.0001ZM9 5C9 6.65685 7.65685 8 6 8C4.34315 8 3 6.65685 3 5C3 3.34315 4.34315 2 6 2C7.65685 2 9 3.34315 9 5Z" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">Tax</span>
      </div>

      <div className="diagram-node diagram-node--left-bottom">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 8H10.5M15 2L14 4H17C17.5304 4 18.0391 4.21071 18.4142 4.58579C18.7893 4.96086 19 5.46957 19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6C5 5.46957 5.21071 4.96086 5.58579 4.58579C5.96086 4.21071 6.46957 4 7 4H10M16.8991 22.0001C16.6691 20.8704 16.0557 19.8548 15.1629 19.1254C14.27 18.396 13.1525 17.9976 11.9996 17.9976C10.8467 17.9976 9.72917 18.396 8.83631 19.1254C7.94345 19.8548 7.33009 20.8704 7.1001 22.0001M9 2L12 8M15 15C15 16.6569 13.6569 18 12 18C10.3431 18 9 16.6569 9 15C9 13.3431 10.3431 12 12 12C13.6569 12 15 13.3431 15 15Z" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">Permit</span>
      </div>

      <div className="diagram-node diagram-node--left">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 10H18M16 14H18M6.16992 15.0001C6.37606 14.4141 6.75902 13.9065 7.26594 13.5475C7.77286 13.1884 8.37873 12.9956 8.99992 12.9956C9.62111 12.9956 10.227 13.1884 10.7339 13.5475C11.2408 13.9065 11.6238 14.4141 11.8299 15.0001M11 11C11 12.1046 10.1046 13 9 13C7.89543 13 7 12.1046 7 11C7 9.89543 7.89543 9 9 9C10.1046 9 11 9.89543 11 11ZM4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17V7C2 5.89543 2.89543 5 4 5Z" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">License</span>
      </div>

      <div className="diagram-node diagram-node--left-top">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0002 13V20C12.0002 20.5304 12.211 21.0391 12.586 21.4142C12.9611 21.7893 13.4698 22 14.0002 22C14.5307 22 15.0394 21.7893 15.4145 21.4142C15.7895 21.0391 16.0002 20.5304 16.0002 20M12.0002 2V4M20.9922 12.9998C21.1477 13.0011 21.3012 12.9662 21.4408 12.8978C21.5803 12.8293 21.702 12.7293 21.7962 12.6057C21.8903 12.482 21.9543 12.3381 21.9832 12.1854C22.012 12.0327 22.0048 11.8753 21.9622 11.7258C21.3951 9.51472 20.1084 7.55514 18.3048 6.15584C16.5013 4.75655 14.2835 3.99707 12.0007 3.99707C9.71804 3.99707 7.5002 4.75655 5.69667 6.15584C3.89314 7.55514 2.60642 9.51472 2.03925 11.7258C1.99687 11.8746 1.98957 12.0311 2.01792 12.1832C2.04627 12.3352 2.1095 12.4786 2.20263 12.602C2.29577 12.7255 2.41627 12.8257 2.55467 12.8947C2.69307 12.9637 2.84559 12.9997 3.00025 12.9998H20.9922Z" stroke="#87909E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <span className="diagram-node__label">Insurance</span>
      </div>

      <div className="diagram-node diagram-node--center">
        <div className="diagram-node__circle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.4997 16.4704V20.9856C10.4997 22.6528 11.8509 24 13.516 24V16.4672C13.516 16.1632 13.8843 16.0096 14.102 16.224L17.2977 19.4176C18.4761 20.5952 20.3877 20.5952 21.5661 19.4176L16.2378 14.0928C16.0233 13.8752 16.1738 13.5072 16.4812 13.5072H20.9993C22.6644 13.5072 24.0157 12.1568 24.0157 10.4928H16.478C16.1738 10.4928 16.0201 10.1248 16.2346 9.9072L19.4303 6.7136C20.6087 5.536 20.6087 3.6256 19.4303 2.448L14.102 7.7728C13.8875 7.9872 13.516 7.8368 13.516 7.5296V3.0144C13.516 1.3504 12.1647 0 10.4997 0V7.5328C10.4997 7.8368 10.1314 7.9904 9.91367 7.776L6.71799 4.5824C5.53962 3.4048 3.62797 3.4048 2.4496 4.5824L7.77788 9.9072C7.99562 10.1248 7.84192 10.4928 7.53452 10.4928H3.01637C1.35128 10.4928 0 11.8432 0 13.5072H7.53772C7.84192 13.5072 7.99562 13.8752 7.78108 14.0928L4.58539 17.2864C3.40702 18.464 3.40702 20.3744 4.58539 21.552L9.91367 16.2272C10.1282 16.0128 10.4997 16.1632 10.4997 16.4704Z" fill="white" />
          </svg>
        </div>
        <div className="diagram-node__card-text">
          <p className="diagram-node__card-title">Your Company Inc.</p>
          <p className="diagram-node__card-subtitle">ID: 4820 - 3921 - 9741</p>
        </div>
      </div>

    </div>

    {}
    <svg className="connection-layer-wrapper" width="471" height="495" viewBox="0 0 471 495" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g className="connection-layer">
        <line x1="235.5" y1="247.5" x2="235.2" y2="72.1" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="351.1" y2="120.9" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="397.9" y2="247.5" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="350.9" y2="353.9" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="235.2" y2="401" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="119.2" y2="353.9" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="71.6" y2="247.5" className="diagram-connection-line" />
        <line x1="235.5" y1="247.5" x2="119.5" y2="120.9" className="diagram-connection-line" />
      </g>
    </svg>

  </div>;

export const iconProps = (variant = "default") => {
  const iconVariants = {
    default: "palm-icon-default",
    horizontal: "palm-icon-horizontal",
    stack: "palm-icon-stack",
    navigation: "palm-icon-navigation",
    darkHorizontal: "palm-icon-dark-horizontal",
    dark_stack: "palm-icon-dark-stack",
    getStarted: "palm-icon-get-started"
  };
  return iconVariants[variant] ?? iconVariants.default;
};

export const PalmCard = ({title, description, icon, variant = "default", href, items}) => {
  if (variant === "getStarted") {
    return <div data-card className="pc-wrapper-get-started flex flex-col gap-4 border border-[rgba(4,44,47,0.1)] rounded-2xl p-6">
        <div className="pc-wrapper-inner-get-started">
          {icon !== undefined && <div className="pc-icon-container-get-started">{icon}</div>}
          {title !== undefined && <span className="pc-title-get-started">{title}</span>}
        </div>
        {items && items.length > 0 && <ul className="pc-items-get-started">
            {items.map((item, i) => <li key={i}>
                <a href={item.href} className="pc-item-link-get-started">{item.label}</a>
              </li>)}
          </ul>}
      </div>;
  }
  const variants = {
    default: {
      wrapper: "pc-wrapper-default",
      title: "pc-title",
      description: "pc-description"
    },
    horizontal: {
      wrapper: "pc-wrapper-card",
      title: "pc-title-horizontal",
      description: "pc-description"
    },
    stack: {
      wrapper: "pc-wrapper-stack",
      title: "pc-title-stack",
      description: "pc-description"
    },
    darkHorizontal: {
      wrapper: "pc-wrapper-dark-horizontal",
      title: "pc-title-dark-horizontal",
      description: "pc-description-dark-horizontal"
    },
    navigation: {
      wrapper: "pc-wrapper-navigation",
      title: "pc-title-navigation",
      description: "pc-description-navigation"
    },
    dark_stack: {
      icon: "pc-icon-card",
      title: "pc-title",
      description: "pc-description"
    }
  };
  const styles = variants[variant] ?? variants.default;
  const inner = <a data-card href={href ? href : '#'} className={`no-underline flex flex-col h-full items-start gap-4 p-6 rounded-2xl hover:opacity-80 transition-opacity ${styles.wrapper}`}>
      {icon !== undefined && <span className="icon-wrapper">{icon}</span>}
      {(title !== undefined || description !== undefined) && <div className="flex flex-col min-w-0">
          {title !== undefined && <span className={styles.title}>{title}</span>}
          {description !== undefined && <span className={styles.description}>{description}</span>}
        </div>}
    </a>;
  return inner;
};

export const HomeWrapper = ({header, description, children}) => {
  return <div className="basis-1 gap-4 palm-home-wrapper flex flex-col min-[1280px]:flex-row min-[1280px]:gap-16 items-center">
      <div className="flex w-full flex-col gap-6">
        <h1 className="m-0 !font-medium leading-[40px] text-[32px] xl:leading-[48px] xl:text-[40px]">Palm API Documentation</h1>
        <p className="text-[16px] leading-[24px]">Palm provides modern identity verification infrastructure to verify users and businesses, store sensitive data, and connect financial accounts — at the speed and scale of the internet.</p>
      </div>
      {children}
    </div>;
};

<div className="basis-1 gap-4 palm-home-wrapper flex flex-col min-[1280px]:flex-row min-[1280px]:gap-16 items-center">
  <div className="flex w-full flex-col gap-6">
    <h1 className="m-0 !font-medium leading-[40px] text-[32px] xl:leading-[48px] xl:text-[40px]" style={{color: '#FFFFFF'}}>Palm API Documentation</h1>
    <p className="text-[16px] leading-[24px] m-0" style={{color: '#D6D9DE'}}>Palm provides modern identity verification infrastructure to verify users and businesses, store sensitive data, and connect financial accounts — at the speed and scale of the internet.</p>
  </div>

  <div className="outer-diagram-wrapper">
    <div className="carousel-placeholder" style={{ display: "flex", flexShrink: 0, flexBasis: "50%", width: "100%", minHeight: "495px", margin: "1.5rem 0", borderRadius: "12px", background: "transparent", border: "none", alignItems: "center", justifyContent: "center" }}>
      <div className="card-skeleton-spinner" />
    </div>

    <HeroDiagram />
  </div>

  <BackgroundGlobe />
</div>

<h2 className="margin-wrapper">Get started</h2>

<div className="cards-placeholder margin-wrapper" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.5rem", marginTop: "1.5rem" }}>
  <div className="card-skeleton">
    <div className="card-skeleton-spinner" />
  </div>

  <div className="card-skeleton">
    <div className="card-skeleton-spinner" />
  </div>

  <div className="card-skeleton">
    <div className="card-skeleton-spinner" />
  </div>
</div>

<div className="grid md:grid-cols-3 gap-6 mt-6 margin-wrapper">
  <PalmCard
    variant="getStarted"
    title="Onboard"
    icon={<Icon className={iconProps("getStarted")} icon="door-open" />}
    items={[
{ label: "Enrich a record with authoritative data", href: "/onboard/overview" },
{ label: "Prefill business applications", href: "/onboard/overview" },
{ label: "Name availability during onboarding", href: "/onboard/overview" },
]}
  />

  <PalmCard
    variant="getStarted"
    title="Verify"
    icon={<Icon className={iconProps("getStarted")} icon="shield-check" />}
    items={[
{ label: "Verify a business's identity", href: "/verify/verify-a-business" },
{ label: "Verify a person", href: "/verify/verify-a-person" },
{ label: "Verify a person's connection to business", href: "/verify/verify-a-person" },
]}
  />

  <PalmCard
    variant="getStarted"
    title="Monitor"
    icon={<Icon className={iconProps("getStarted")} icon="scan-eye" />}
    items={[
{ label: "Alert me to changes on a business", href: "/monitor/overview" },
{ label: "Alert me to the next compliance task", href: "/monitor/overview" },
{ label: "Detect New Businesses", href: "/monitor/overview" },
]}
  />
</div>

<a href="/use-cases/overview" className="pc-get-started-see-all margin-wrapper">See all use cases <Icon icon="arrow-right" className="pc-get-started-arrow" /></a>

<h2 className="margin-wrapper">Resources</h2>

<div className="grid cards-placeholder margin-wrapper lg:grid-cols-3" style={{ gap: "1.5rem", marginTop: "1.5rem" }}>
  <div className="card-skeleton card-skeleton--short">
    <div className="card-skeleton-spinner" />
  </div>

  <div className="card-skeleton card-skeleton--short">
    <div className="card-skeleton-spinner" />
  </div>

  <div className="card-skeleton card-skeleton--short">
    <div className="card-skeleton-spinner" />
  </div>
</div>

<div className="grid lg:grid-cols-3 gap-6 mt-6 margin-wrapper">
  <PalmCard variant="default" title="Contact us" description="Talk to us about questions, issues or any other requests you might have (technical, billing, integration issues, access, etc.)" icon={<Icon className={iconProps("default")} icon="headset" />} href="mailto:support@getpalm.com" />

  <PalmCard variant="default" title="API status" description="Monitor API uptime and check for any service incidents." icon={<Icon className={iconProps("default")} icon="activity" />} href="https://status.getpalm.com" />

  <PalmCard variant="default" title="Console" description="Manage your API keys, view usage, and test in the Palm Console." icon={<Icon className={iconProps("default")} icon="layout-dashboard" />} href="https://platform.getpalm.com" />
</div>
