feat(admin): add court management UI with Profile/Courts tabs (Phase 2)

Phase 2 implementation per Chief Cole approval (Chief_Cole-20251107103829)

Club Detail Page Restructure:
- Replaced single-view club detail with tabbed interface
- Three tabs: Profile, Courts, Slot Definitions (links to existing page)
- Tab navigation with active state highlighting
- Breadcrumb navigation maintained

Profile Tab (ClubProfileTab):
- Full club metadata editing form with sections:
  - Basic Information: name (required), timezone (required, IANA dropdown)
  - Location: address line 1/2, city, postal code, country (all optional)
  - Contact: phone, email (validated), website (validated) (all optional)
  - Integration: provider, remote club ID (read-only for Phase 2)
- Client-side validation: required fields, email format, URL format
- Server-side validation: maps backend errors to fields
- Success/error messaging with auto-hide success toast
- Cancel button resets form to original values
- Professional slate theme form styling

Courts Tab (ClubCourtsTab):
- Court list view with empty state
- Add/edit/delete actions per court
- Add Court modal: single field (name), duplicate name validation
- Edit Court modal: pre-populated, same validation
- Delete with cascade blocking:
  - Dependency check before delete (slot definitions, upcoming bookings)
  - Blocking modal shows dependency counts with resolution steps
  - Confirmation modal for clean delete (no dependencies)
- In-memory mock data management (3 courts default)
- Court 1 has mock dependencies (12 slot defs, 45 bookings) for testing

Modal Components:
- CourtFormModal: Add/edit with field-level validation
- DeleteConfirmationModal: Confirm before deletion
- DependenciesBlockingModal: Shows why delete is blocked + resolution steps

All components use professional slate theme
All modals use backdrop blur + center positioning
All forms have loading states + error handling
Build tested and passed (npm run build successful)

Total new lines: ~1400 across 3 components
Ready for mock-driven testing while Backend Brooke builds APIs

src/app/[locale]/admin/clubs/[club_id]/ClubDetailTabs.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ArrowLeft, Loader2, AlertCircle, Lock } from 'lucide-react';
+import Link from 'next/link';
+import { getAdminClubDetail } from '@/src/lib/api/admin-clubs';
+import type { AdminClubDetail, AdminApiError } from '@/src/types/admin-api';
+import useTranslation from '@/src/hooks/useTranslation';
+import ClubProfileTab from './tabs/ClubProfileTab';
+import ClubCourtsTab from './tabs/ClubCourtsTab';
+
+interface ClubDetailTabsProps {
+  clubId: number;
+}
+
+type TabKey = 'profile' | 'courts' | 'slot-definitions';
+
+export default function ClubDetailTabs({ clubId }: ClubDetailTabsProps) {
+  const { t, locale } = useTranslation();
+  const [clubDetail, setClubDetail] = useState<AdminClubDetail | null>(null);
+  const [error, setError] = useState<AdminApiError | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<TabKey>('profile');
+
+  useEffect(() => {
+    loadClubDetail();
+  }, [clubId]);
+
+  async function loadClubDetail() {
+    setLoading(true);
+    const result = await getAdminClubDetail(clubId);
+
+    if (result.success) {
+      setClubDetail(result.data);
+      setError(null);
+    } else {
+      setError(result.error);
+      setClubDetail(null);
+    }
+
+    setLoading(false);
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="flex flex-col items-center justify-center space-y-4">
+          <Loader2 className="w-12 h-12 text-slate-900 animate-spin" />
+          <p className="text-slate-600 font-medium">Loading club details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Authentication error (401)
+  if (error && error.status === 401) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-amber-50 border-2 border-amber-200 rounded-2xl p-8">
+            <div className="flex items-start space-x-4">
+              <Lock className="w-8 h-8 text-amber-700 flex-shrink-0 mt-1" />
+              <div>
+                <h2 className="text-2xl font-bold text-slate-900 mb-4">
+                  Authentication Required
+                </h2>
+                <p className="text-slate-700 leading-relaxed">
+                  Please log in to access the venue management portal.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Forbidden error (403)
+  if (error && error.status === 403) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-8">
+            <div className="flex items-start space-x-4">
+              <Lock className="w-8 h-8 text-red-600 flex-shrink-0 mt-1" />
+              <div>
+                <h2 className="text-2xl font-bold text-slate-900 mb-4">
+                  Access Denied
+                </h2>
+                <p className="text-slate-700 mb-6 leading-relaxed">
+                  {error.detail}
+                </p>
+                <Link
+                  href={`/${locale}/admin/clubs`}
+                  className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to clubs
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Other API errors
+  if (error) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-8">
+            <div className="flex items-start space-x-4">
+              <AlertCircle className="w-8 h-8 text-red-600 flex-shrink-0 mt-1" />
+              <div className="flex-1">
+                <h2 className="text-2xl font-bold text-slate-900 mb-4">
+                  Error Loading Club
+                </h2>
+                <p className="text-slate-700 mb-4 leading-relaxed">
+                  {error.detail}
+                </p>
+                <p className="text-sm text-slate-600 font-mono mb-6">
+                  Error code: {error.code}
+                </p>
+                <Link
+                  href={`/${locale}/admin/clubs`}
+                  className="inline-flex items-center px-4 py-2 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+                >
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to clubs
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!clubDetail) {
+    return null;
+  }
+
+  // Success - render tabbed interface
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      {/* Breadcrumb */}
+      <div className="mb-8">
+        <Link
+          href={`/${locale}/admin/clubs`}
+          className="inline-flex items-center text-slate-600 hover:text-slate-900 font-medium transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back to clubs
+        </Link>
+      </div>
+
+      {/* Club Header */}
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold text-slate-900 mb-2 tracking-tight">
+          {clubDetail.club.name}
+        </h1>
+        <p className="text-lg text-slate-600 font-light">
+          {clubDetail.club.timezone}
+        </p>
+      </div>
+
+      {/* Tab Navigation */}
+      <div className="border-b-2 border-slate-200 mb-8">
+        <div className="flex space-x-1">
+          <button
+            onClick={() => setActiveTab('profile')}
+            className={`px-6 py-3 font-semibold transition-colors border-b-2 ${
+              activeTab === 'profile'
+                ? 'border-slate-900 text-slate-900'
+                : 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
+            }`}
+          >
+            Profile
+          </button>
+          <button
+            onClick={() => setActiveTab('courts')}
+            className={`px-6 py-3 font-semibold transition-colors border-b-2 ${
+              activeTab === 'courts'
+                ? 'border-slate-900 text-slate-900'
+                : 'border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300'
+            }`}
+          >
+            Courts
+          </button>
+          <Link
+            href={`/${locale}/admin/clubs/${clubId}/slot-definitions`}
+            className="px-6 py-3 font-semibold text-slate-600 hover:text-slate-900 hover:border-slate-300 transition-colors border-b-2 border-transparent"
+          >
+            Slot Definitions
+          </Link>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'profile' && (
+        <ClubProfileTab clubId={clubId} onUpdate={loadClubDetail} />
+      )}
+
+      {activeTab === 'courts' && (
+        <ClubCourtsTab clubId={clubId} />
+      )}
+    </div>
+  );
+}

src/app/[locale]/admin/clubs/[club_id]/page.tsx

@@ -1,4 +1,4 @@
-import AdminClubDetailComponent from './AdminClubDetail';
+import ClubDetailTabs from './ClubDetailTabs';
 import AdminAuthGuard from '@/src/components/AdminAuthGuard';
 
 export default async function AdminClubDetailPage({
@@ -11,7 +11,7 @@ export default async function AdminClubDetailPage({
 
   return (
     <AdminAuthGuard>
-      <AdminClubDetailComponent clubId={clubId} />
+      <ClubDetailTabs clubId={clubId} />
     </AdminAuthGuard>
   );
 }

src/app/[locale]/admin/clubs/[club_id]/tabs/ClubCourtsTab.tsx

@@ -0,0 +1,535 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Loader2, AlertCircle, Plus, Edit, Trash2, AlertTriangle, X } from 'lucide-react';
+import {
+  getCourts,
+  createCourt,
+  updateCourt,
+  deleteCourt,
+  getCourtDependencies,
+} from '@/src/lib/api/courts';
+import type { Court, CourtRequest, CourtDependencies } from '@/src/types/courts';
+import { formatTimestamp } from '@/src/types/courts';
+
+interface ClubCourtsTabProps {
+  clubId: number;
+}
+
+export default function ClubCourtsTab({ clubId }: ClubCourtsTabProps) {
+  const [courts, setCourts] = useState<Court[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Modal state
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showDependenciesModal, setShowDependenciesModal] = useState(false);
+
+  const [selectedCourt, setSelectedCourt] = useState<Court | null>(null);
+  const [dependencies, setDependencies] = useState<CourtDependencies | null>(null);
+
+  useEffect(() => {
+    loadCourts();
+  }, [clubId]);
+
+  async function loadCourts() {
+    setLoading(true);
+    const result = await getCourts(clubId);
+
+    if (result.success) {
+      setCourts(result.data);
+      setError(null);
+    } else {
+      setError(result.error.detail);
+    }
+
+    setLoading(false);
+  }
+
+  function handleAdd() {
+    setShowAddModal(true);
+  }
+
+  function handleEdit(court: Court) {
+    setSelectedCourt(court);
+    setShowEditModal(true);
+  }
+
+  async function handleDeleteClick(court: Court) {
+    setSelectedCourt(court);
+
+    // Check dependencies first
+    const result = await getCourtDependencies(clubId, court.court_id);
+
+    if (result.success) {
+      setDependencies(result.data);
+
+      if (result.data.can_delete) {
+        // No dependencies, show delete confirmation
+        setShowDeleteModal(true);
+      } else {
+        // Has dependencies, show blocking modal
+        setShowDependenciesModal(true);
+      }
+    } else {
+      setError(result.error.detail);
+    }
+  }
+
+  function closeModals() {
+    setShowAddModal(false);
+    setShowEditModal(false);
+    setShowDeleteModal(false);
+    setShowDependenciesModal(false);
+    setSelectedCourt(null);
+    setDependencies(null);
+  }
+
+  async function handleSuccess() {
+    await loadCourts();
+    closeModals();
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && courts.length === 0) {
+    return (
+      <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-6">
+        <div className="flex items-start space-x-3">
+          <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+          <p className="text-red-700">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header with Add button */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold text-slate-900">Courts</h2>
+          <p className="text-slate-600">Manage court inventory for this club</p>
+        </div>
+        <button
+          onClick={handleAdd}
+          className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+        >
+          <Plus className="w-5 h-5 mr-2" />
+          Add Court
+        </button>
+      </div>
+
+      {/* Empty state */}
+      {courts.length === 0 ? (
+        <div className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-12">
+          <div className="flex flex-col items-center text-center space-y-6">
+            <div className="text-6xl">🎾</div>
+            <h3 className="text-2xl font-bold text-slate-900">
+              No Courts Yet
+            </h3>
+            <p className="text-slate-600 max-w-md leading-relaxed">
+              Add your first court to start managing slot definitions and bookings for this club.
+            </p>
+            <button
+              onClick={handleAdd}
+              className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+            >
+              <Plus className="w-5 h-5 mr-2" />
+              Add First Court
+            </button>
+          </div>
+        </div>
+      ) : (
+        /* Court list */
+        <div className="space-y-4">
+          {courts.map((court) => (
+            <div
+              key={court.court_id}
+              className="bg-white border-2 border-slate-200 rounded-2xl p-6 hover:border-slate-300 transition-colors"
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h3 className="text-xl font-bold text-slate-900 mb-2">
+                    {court.name}
+                  </h3>
+                  <p className="text-sm text-slate-600">
+                    ID: {court.court_id} · Created {formatTimestamp(court.created_at)}
+                  </p>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <button
+                    onClick={() => handleEdit(court)}
+                    className="p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
+                    title="Edit"
+                  >
+                    <Edit className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => handleDeleteClick(court)}
+                    className="p-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
+                    title="Delete"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add Modal */}
+      {showAddModal && (
+        <CourtFormModal
+          clubId={clubId}
+          onClose={closeModals}
+          onSuccess={handleSuccess}
+        />
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && selectedCourt && (
+        <CourtFormModal
+          clubId={clubId}
+          court={selectedCourt}
+          onClose={closeModals}
+          onSuccess={handleSuccess}
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && selectedCourt && (
+        <DeleteConfirmationModal
+          clubId={clubId}
+          court={selectedCourt}
+          onClose={closeModals}
+          onSuccess={handleSuccess}
+        />
+      )}
+
+      {/* Dependencies Blocking Modal */}
+      {showDependenciesModal && selectedCourt && dependencies && (
+        <DependenciesBlockingModal
+          court={selectedCourt}
+          dependencies={dependencies}
+          onClose={closeModals}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Court Form Modal (Add/Edit)
+ */
+interface CourtFormModalProps {
+  clubId: number;
+  court?: Court;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+function CourtFormModal({ clubId, court, onClose, onSuccess }: CourtFormModalProps) {
+  const isEditing = !!court;
+  const [name, setName] = useState(court?.name || '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [fieldError, setFieldError] = useState('');
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!name || name.trim().length === 0) {
+      setFieldError('Court name is required');
+      return;
+    }
+
+    setSaving(true);
+    setError('');
+    setFieldError('');
+
+    const request: CourtRequest = {
+      name: name.trim(),
+    };
+
+    const result = isEditing
+      ? await updateCourt(clubId, court!.court_id, request)
+      : await createCourt(clubId, request);
+
+    if (result.success) {
+      onSuccess();
+    } else {
+      if (result.error.code === 'validation_error' && result.error.errors) {
+        const nameError = result.error.errors.find(e => e.field === 'name');
+        if (nameError) {
+          setFieldError(nameError.message);
+        }
+      } else if (result.error.code === 'duplicate_court_name') {
+        setFieldError(result.error.detail);
+      } else {
+        setError(result.error.detail);
+      }
+    }
+
+    setSaving(false);
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl p-8 max-w-md w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-slate-900">
+            {isEditing ? 'Edit Court' : 'Add Court'}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
+            disabled={saving}
+          >
+            <X className="w-5 h-5 text-slate-600" />
+          </button>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+            <div className="flex items-start space-x-3">
+              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-sm font-semibold text-slate-900 mb-2">
+              Court Name <span className="text-red-600">*</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder='e.g., "Court 1", "North Court", "VIP Court"'
+              maxLength={100}
+              className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
+                fieldError
+                  ? 'border-red-300 focus:border-red-500'
+                  : 'border-slate-200 focus:border-slate-900'
+              } focus:outline-none`}
+              disabled={saving}
+              autoFocus
+            />
+            {fieldError && (
+              <p className="mt-1 text-sm text-red-600">{fieldError}</p>
+            )}
+            <p className="mt-2 text-xs text-slate-500">
+              Examples: "Court 1", "North Court", "VIP Court"
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-end space-x-3 pt-4 border-t-2 border-slate-100">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
+              disabled={saving}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50"
+              disabled={saving}
+            >
+              {saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {isEditing ? 'Save' : 'Add'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Delete Confirmation Modal
+ */
+interface DeleteConfirmationModalProps {
+  clubId: number;
+  court: Court;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+function DeleteConfirmationModal({ clubId, court, onClose, onSuccess }: DeleteConfirmationModalProps) {
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState('');
+
+  async function handleDelete() {
+    setDeleting(true);
+    setError('');
+
+    const result = await deleteCourt(clubId, court.court_id);
+
+    if (result.success) {
+      onSuccess();
+    } else {
+      setError(result.error.detail);
+    }
+
+    setDeleting(false);
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl p-8 max-w-md w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-bold text-slate-900">Delete Court?</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
+            disabled={deleting}
+          >
+            <X className="w-5 h-5 text-slate-600" />
+          </button>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+            <div className="flex items-start space-x-3">
+              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <p className="text-sm text-red-700">{error}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="mb-6">
+          <p className="text-slate-700 leading-relaxed">
+            Are you sure you want to delete <strong>"{court.name}"</strong>?
+          </p>
+          <p className="text-slate-600 mt-2">
+            This action cannot be undone.
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end space-x-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
+            disabled={deleting}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDelete}
+            className="inline-flex items-center px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+            disabled={deleting}
+          >
+            {deleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Dependencies Blocking Modal
+ */
+interface DependenciesBlockingModalProps {
+  court: Court;
+  dependencies: CourtDependencies;
+  onClose: () => void;
+}
+
+function DependenciesBlockingModal({ court, dependencies, onClose }: DependenciesBlockingModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl p-8 max-w-md w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <AlertTriangle className="w-6 h-6 text-amber-600" />
+            <h2 className="text-2xl font-bold text-slate-900">Cannot Delete Court</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5 text-slate-600" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          <p className="text-slate-700 leading-relaxed">
+            Court <strong>"{court.name}"</strong> cannot be deleted because it is referenced by:
+          </p>
+
+          <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-2">
+            {dependencies.dependencies.slot_definitions > 0 && (
+              <div className="flex justify-between items-center">
+                <span className="text-slate-700">Slot definitions:</span>
+                <span className="font-bold text-slate-900">
+                  {dependencies.dependencies.slot_definitions}
+                </span>
+              </div>
+            )}
+            {dependencies.dependencies.upcoming_bookings > 0 && (
+              <div className="flex justify-between items-center">
+                <span className="text-slate-700">Upcoming bookings:</span>
+                <span className="font-bold text-slate-900">
+                  {dependencies.dependencies.upcoming_bookings}
+                </span>
+              </div>
+            )}
+          </div>
+
+          <p className="text-sm text-slate-600 leading-relaxed">
+            To delete this court, you must first:
+          </p>
+
+          <ol className="list-decimal list-inside space-y-1 text-sm text-slate-700">
+            {dependencies.dependencies.slot_definitions > 0 && (
+              <li>Delete or reassign all slot definitions</li>
+            )}
+            {dependencies.dependencies.upcoming_bookings > 0 && (
+              <li>Cancel or move all upcoming bookings</li>
+            )}
+          </ol>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end space-x-3 pt-6 border-t-2 border-slate-100 mt-6">
+          <button
+            onClick={onClose}
+            className="px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/[locale]/admin/clubs/[club_id]/tabs/ClubProfileTab.tsx

@@ -0,0 +1,458 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
+import { getClubProfile, updateClubProfile } from '@/src/lib/api/courts';
+import type { ClubProfile, ClubProfileUpdateRequest} from '@/src/types/courts';
+import { COMMON_TIMEZONES, isValidEmail, isValidUrl } from '@/src/types/courts';
+
+interface ClubProfileTabProps {
+  clubId: number;
+  onUpdate?: () => void;
+}
+
+export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps) {
+  const [profile, setProfile] = useState<ClubProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  // Form state
+  const [name, setName] = useState('');
+  const [timezone, setTimezone] = useState('');
+  const [addressLine1, setAddressLine1] = useState('');
+  const [addressLine2, setAddressLine2] = useState('');
+  const [city, setCity] = useState('');
+  const [postalCode, setPostalCode] = useState('');
+  const [country, setCountry] = useState('');
+  const [phone, setPhone] = useState('');
+  const [email, setEmail] = useState('');
+  const [website, setWebsite] = useState('');
+
+  useEffect(() => {
+    loadProfile();
+  }, [clubId]);
+
+  async function loadProfile() {
+    setLoading(true);
+    const result = await getClubProfile(clubId);
+
+    if (result.success) {
+      const prof = result.data;
+      setProfile(prof);
+
+      // Populate form
+      setName(prof.name);
+      setTimezone(prof.timezone);
+      setAddressLine1(prof.address_line_1 || '');
+      setAddressLine2(prof.address_line_2 || '');
+      setCity(prof.city || '');
+      setPostalCode(prof.postal_code || '');
+      setCountry(prof.country || '');
+      setPhone(prof.phone || '');
+      setEmail(prof.email || '');
+      setWebsite(prof.website || '');
+
+      setError(null);
+    } else {
+      setError(result.error.detail);
+    }
+
+    setLoading(false);
+  }
+
+  function validateForm(): boolean {
+    const newErrors: Record<string, string> = {};
+
+    if (!name || name.trim().length === 0) {
+      newErrors.name = 'Name is required';
+    }
+
+    if (!timezone) {
+      newErrors.timezone = 'Timezone is required';
+    }
+
+    if (email && !isValidEmail(email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    if (website && !isValidUrl(website)) {
+      newErrors.website = 'Invalid URL format (must include http:// or https://)';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    setSuccess(false);
+
+    const request: ClubProfileUpdateRequest = {
+      name: name.trim(),
+      timezone,
+      address_line_1: addressLine1.trim() || undefined,
+      address_line_2: addressLine2.trim() || undefined,
+      city: city.trim() || undefined,
+      postal_code: postalCode.trim() || undefined,
+      country: country.trim() || undefined,
+      phone: phone.trim() || undefined,
+      email: email.trim() || undefined,
+      website: website.trim() || undefined,
+    };
+
+    const result = await updateClubProfile(clubId, request);
+
+    if (result.success) {
+      setProfile(result.data);
+      setSuccess(true);
+      setError(null);
+
+      // Call parent update callback
+      if (onUpdate) {
+        onUpdate();
+      }
+
+      // Hide success message after 3 seconds
+      setTimeout(() => setSuccess(false), 3000);
+    } else {
+      // Handle validation errors
+      if (result.error.code === 'validation_error' && result.error.errors) {
+        const fieldErrors: Record<string, string> = {};
+        result.error.errors.forEach(err => {
+          fieldErrors[err.field] = err.message;
+        });
+        setErrors(fieldErrors);
+      } else {
+        setError(result.error.detail);
+      }
+    }
+
+    setSaving(false);
+  }
+
+  function handleCancel() {
+    if (!profile) return;
+
+    // Reset form to original values
+    setName(profile.name);
+    setTimezone(profile.timezone);
+    setAddressLine1(profile.address_line_1 || '');
+    setAddressLine2(profile.address_line_2 || '');
+    setCity(profile.city || '');
+    setPostalCode(profile.postal_code || '');
+    setCountry(profile.country || '');
+    setPhone(profile.phone || '');
+    setEmail(profile.email || '');
+    setWebsite(profile.website || '');
+    setErrors({});
+    setError(null);
+  }
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-8 h-8 text-slate-600 animate-spin" />
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && !profile) {
+    return (
+      <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-6">
+        <div className="flex items-start space-x-3">
+          <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+          <p className="text-red-700">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!profile) return null;
+
+  return (
+    <div className="max-w-4xl">
+      {/* Success message */}
+      {success && (
+        <div className="mb-6 bg-green-50 border-2 border-green-200 rounded-2xl p-6">
+          <div className="flex items-center space-x-3">
+            <CheckCircle className="w-5 h-5 text-green-600" />
+            <p className="text-green-700 font-medium">Profile updated successfully</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="mb-6 bg-red-50 border-2 border-red-200 rounded-2xl p-6">
+          <div className="flex items-start space-x-3">
+            <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+            <p className="text-red-700">{error}</p>
+          </div>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Basic Information */}
+        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Basic Information</h3>
+
+          <div className="space-y-4">
+            {/* Name */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Name <span className="text-red-600">*</span>
+              </label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
+                  errors.name
+                    ? 'border-red-300 focus:border-red-500'
+                    : 'border-slate-200 focus:border-slate-900'
+                } focus:outline-none`}
+                disabled={saving}
+              />
+              {errors.name && (
+                <p className="mt-1 text-sm text-red-600">{errors.name}</p>
+              )}
+            </div>
+
+            {/* Timezone */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Timezone <span className="text-red-600">*</span>
+              </label>
+              <select
+                value={timezone}
+                onChange={(e) => setTimezone(e.target.value)}
+                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
+                  errors.timezone
+                    ? 'border-red-300 focus:border-red-500'
+                    : 'border-slate-200 focus:border-slate-900'
+                } focus:outline-none`}
+                disabled={saving}
+              >
+                {COMMON_TIMEZONES.map((tz) => (
+                  <option key={tz.value} value={tz.value}>
+                    {tz.label}
+                  </option>
+                ))}
+              </select>
+              {errors.timezone && (
+                <p className="mt-1 text-sm text-red-600">{errors.timezone}</p>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* Location */}
+        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Location</h3>
+
+          <div className="space-y-4">
+            {/* Address Line 1 */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Address Line 1
+              </label>
+              <input
+                type="text"
+                value={addressLine1}
+                onChange={(e) => setAddressLine1(e.target.value)}
+                placeholder="123 High Street"
+                maxLength={200}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                disabled={saving}
+              />
+            </div>
+
+            {/* Address Line 2 */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Address Line 2
+              </label>
+              <input
+                type="text"
+                value={addressLine2}
+                onChange={(e) => setAddressLine2(e.target.value)}
+                placeholder="Building A"
+                maxLength={200}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                disabled={saving}
+              />
+            </div>
+
+            {/* City & Postal Code */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-semibold text-slate-900 mb-2">
+                  City
+                </label>
+                <input
+                  type="text"
+                  value={city}
+                  onChange={(e) => setCity(e.target.value)}
+                  placeholder="London"
+                  maxLength={100}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                  disabled={saving}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-slate-900 mb-2">
+                  Postal Code
+                </label>
+                <input
+                  type="text"
+                  value={postalCode}
+                  onChange={(e) => setPostalCode(e.target.value)}
+                  placeholder="SW1A 1AA"
+                  maxLength={20}
+                  className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                  disabled={saving}
+                />
+              </div>
+            </div>
+
+            {/* Country */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Country
+              </label>
+              <input
+                type="text"
+                value={country}
+                onChange={(e) => setCountry(e.target.value)}
+                placeholder="United Kingdom"
+                maxLength={100}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                disabled={saving}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Contact */}
+        <section className="bg-white border-2 border-slate-200 rounded-2xl p-6">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Contact</h3>
+
+          <div className="space-y-4">
+            {/* Phone */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Phone
+              </label>
+              <input
+                type="tel"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                placeholder="+44 20 1234 5678"
+                maxLength={50}
+                className="w-full px-4 py-3 border-2 border-slate-200 rounded-lg font-medium focus:border-slate-900 focus:outline-none transition-colors"
+                disabled={saving}
+              />
+            </div>
+
+            {/* Email */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Email
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="info@centralpadel.com"
+                maxLength={100}
+                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
+                  errors.email
+                    ? 'border-red-300 focus:border-red-500'
+                    : 'border-slate-200 focus:border-slate-900'
+                } focus:outline-none`}
+                disabled={saving}
+              />
+              {errors.email && (
+                <p className="mt-1 text-sm text-red-600">{errors.email}</p>
+              )}
+            </div>
+
+            {/* Website */}
+            <div>
+              <label className="block text-sm font-semibold text-slate-900 mb-2">
+                Website
+              </label>
+              <input
+                type="url"
+                value={website}
+                onChange={(e) => setWebsite(e.target.value)}
+                placeholder="https://www.centralpadel.com"
+                maxLength={200}
+                className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
+                  errors.website
+                    ? 'border-red-300 focus:border-red-500'
+                    : 'border-slate-200 focus:border-slate-900'
+                } focus:outline-none`}
+                disabled={saving}
+              />
+              {errors.website && (
+                <p className="mt-1 text-sm text-red-600">{errors.website}</p>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* Integration (read-only) */}
+        <section className="bg-slate-50 border-2 border-slate-200 rounded-2xl p-6">
+          <h3 className="text-xl font-bold text-slate-900 mb-6">Integration</h3>
+
+          <div className="space-y-3">
+            <div className="flex justify-between items-center">
+              <span className="text-slate-600 font-medium">Provider:</span>
+              <span className="font-semibold text-slate-900">{profile.provider}</span>
+            </div>
+            {profile.provider !== 'local' && profile.remote_club_id && (
+              <div className="flex justify-between items-center">
+                <span className="text-slate-600 font-medium">Remote Club ID:</span>
+                <span className="font-mono text-slate-900">{profile.remote_club_id}</span>
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end space-x-3 pt-4">
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="px-6 py-3 text-slate-700 font-semibold rounded-lg hover:bg-slate-100 transition-colors"
+            disabled={saving}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="inline-flex items-center px-6 py-3 bg-slate-900 text-white font-semibold rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            disabled={saving}
+          >
+            {saving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            Save Changes
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}