Share Settings Panel with Permission Dropdown

<section class="md:p-8 shadow-[0_10px_60px_-10px_rgba(0,0,0,0.6)] bg-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur max-w-xl">
          <!-- Share Header Row -->
          <div class="mb-6 flex flex-wrap items-center gap-3">
            <span class="text-sm text-slate-300">Share</span>
            <span class="inline-flex items-center gap-2 rounded-md bg-white/10 px-3 py-1.5 text-sm font-medium text-white ring-1 ring-inset ring-white/15">
              <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
              Orbit Campaign Hub
            </span>
          </div>

          <!-- Toggle: Link sharing -->
          <label class="group mb-5 flex cursor-pointer items-start gap-3">
            <input id="link-share" type="checkbox" class="peer sr-only" checked="">
            <span class="mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-md border border-white/20 bg-black/20 ring-1 ring-inset ring-white/10 transition peer-checked:bg-emerald-500/20 peer-checked:ring-emerald-400/40">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-transparent transition-opacity duration-150 peer-checked:text-emerald-300"><path d="M20 6 9 17l-5-5"></path></svg>
            </span>
            <span class="select-none text-[15px] text-slate-200">Link sharing is on</span>
          </label>

          <!-- Anyone with link -->
          <div class="mb-4 rounded-2xl border border-white/10 bg-black/20 p-4 ring-1 ring-inset ring-white/10">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div class="text-slate-300">
                <p class="text-[15px]">
                  Anyone with the link is a
                  <span class="sr-only">role</span>
                </p>
              </div>

              <!-- Custom dropdown -->
              <div class="relative">
                <button id="role-button" class="inline-flex w-full items-center justify-between gap-2 rounded-lg bg-white/10 px-3 py-2 text-[15px] font-medium text-white ring-1 ring-inset ring-white/15 hover:bg-white/15">
                  <span class="flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-4 w-4 opacity-80"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3"></circle></svg>
                    Reader
                  </span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 opacity-80"><path d="m6 9 6 6 6-6"></path></svg>
                </button>

                <div id="role-menu" class="invisible absolute right-0 z-20 mt-2 w-44 translate-y-1 opacity-0 transition-all duration-150 ease-out">
                  <div class="overflow-hidden rounded-xl border border-white/10 bg-[#0F1115]/95 backdrop-blur ring-1 ring-white/10 shadow-xl">
                    <button data-role="Reader" class="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-slate-200 hover:bg-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye h-4 w-4"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg> Reader
                    </button>
                    <button data-role="Commenter" class="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-slate-200 hover:bg-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-square" class="lucide lucide-message-square h-4 w-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg> Commenter
                    </button>
                    <button data-role="Editor" class="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-slate-200 hover:bg-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="edit-3" class="lucide lucide-edit-3 h-4 w-4"><path d="M13 21h8"></path><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path></svg> Editor
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Workspace access -->
          <div class="mb-3 rounded-2xl border border-white/10 bg-black/10 p-4 ring-1 ring-inset ring-white/10">
            <div class="flex items-center justify-between">
              <p class="text-[15px] text-slate-300">Everyone in Team can access</p>
              <span class="rounded-full bg-white/5 px-2.5 py-1 text-xs text-slate-400 ring-1 ring-inset ring-white/10">Off</span>
            </div>
          </div>

          <!-- Org access -->
          <div class="rounded-2xl border border-white/10 bg-black/10 p-4 ring-1 ring-inset ring-white/10">
            <div class="flex items-center justify-between">
              <p class="text-[15px] text-slate-300">Everyone at Nimbus can access</p>
              <span class="rounded-full bg-white/5 px-2.5 py-1 text-xs text-slate-400 ring-1 ring-inset ring-white/10">Off</span>
            </div>
          </div>

          <!-- Footer copy -->
          <div class="mt-8 border-t border-white/10 pt-6">
            <h2 class="text-2xl tracking-tight font-semibold text-white">Precision sharing without friction</h2>
            <p class="mt-2 text-[15px] leading-relaxed text-slate-400">
              Update names, roles, and messaging to reflect your brand. Permissions are clear, consistent, and safe by default.
            </p>
          </div>
        </section>