export const GuestDrawerAttendeesFragment = () => {
  return (
    <div
      id="attendeesDrawer"
      class="drawer-overlay"
      style="display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s ease;"
    >
      <div
        class="drawer-panel"
        style="position: fixed; background: var(--surface-card); box-shadow: var(--shadow-lg); z-index: 1050; display: flex; flex-direction: column; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);"
      >
        <div style="padding: 1.5rem; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 0.25rem;">
          <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <h2
              id="guestDrawerTitle"
              style="margin: 0; font-size: 1.25rem; color: var(--text-primary);"
            >
              [Event Name] Guests
            </h2>
            <button
              type="button"
              onclick="closeAttendeesDrawer()"
              style="background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; line-height: 1;"
              aria-label="Close Drawer"
            >
              &times;
            </button>
          </div>
          <div
            id="guestDrawerContext"
            style="font-size: 0.8rem; color: var(--text-secondary);"
          >
            Event Pass · <span id="guestDrawerClaimed">0</span> /{" "}
            <span id="guestDrawerMax">0</span> Claimed Seats ·{" "}
            <span id="guestDrawerCountdown">⏳ 0h 0m left</span>{" "}
            · (<span id="guestDrawerExpiresAt">
              --:--
            </span>)
          </div>
        </div>

        <div
          id="attendeesDrawerContent"
          style="flex: 1; overflow-y: auto; padding: 1.5rem;"
        >
          {/* Populated dynamically via JS / SSE */}
          <div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-muted); font-size: 0.9rem;">
            Loading attendees...
          </div>
        </div>

        <style>
          {`
            /* Desktop Slide-Over Panel */
            @media (min-width: 768px) {
              .drawer-panel {
                top: 0;
                right: 0;
                width: 420px;
                height: 100vh;
                transform: translateX(100%);
              }
              .drawer-panel.open {
                transform: translateX(0);
              }
            }
            /* Mobile Bottom Sheet */
            @media (max-width: 767px) {
              .drawer-panel {
                bottom: 0;
                left: 0;
                width: 100vw;
                height: 80vh;
                border-radius: 16px 16px 0 0;
                transform: translateY(100%);
              }
              .drawer-panel.open {
                transform: translateY(0);
              }
            }
            .drawer-overlay.open {
              display: block !important;
              opacity: 1 !important;
            }
          `}
        </style>
      </div>
    </div>
  );
};