import { LayoutFragment } from "../../shared/ui/fragments.tsx";

export const EventJoinPageFragment = () => {
  return (
    <LayoutFragment title="Join Event">
      <div class="auth-card">
        <div class="brand-header">
          <div
            class="brand-logo"
            style="background: var(--primary-light); color: var(--primary);"
          >
            <svg
              width="26"
              height="26"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z">
              </path>
              <path d="M13 5v2"></path>
              <path d="M13 17v2"></path>
              <path d="M13 11v2"></path>
            </svg>
          </div>
          <h1>Join Event or Workshop</h1>
          <p class="subtitle">
            Enter your event PIN code or slug to claim an instant sandbox seat.
          </p>
        </div>

        <form id="joinForm" data-on-submit="@post('/api/join')">
          <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.875rem; color: var(--text-secondary);">
              Event PIN or Slug Code
            </label>
            <input
              type="text"
              name="code"
              id="eventCode"
              placeholder="e.g. 749-123 or deno-lab"
              required
              autofocus
              style="width: 100%; font-size: 1.1rem; text-align: center; letter-spacing: 0.05em; font-weight: 600; min-height: 48px;"
            />
          </div>

          <div
            id="joinNotice"
            style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem;"
          />

          <button
            type="submit"
            id="joinBtn"
            class="btn-primary"
            style="width: 100%; min-height: 48px; font-size: 1rem;"
          >
            ⚡ Enter Workshop
          </button>
        </form>

        <div style="margin-top: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--text-muted);">
          Looking for standard sign in?{" "}
          <a
            href="/login"
            style="color: var(--primary); text-decoration: none; font-weight: 600;"
          >
            Sign in with Passkey
          </a>
        </div>
      </div>
    </LayoutFragment>
  );
};