'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useHbfcStore } from '@/lib/use-hbfc-store';
import { supabase, supabaseUrl } from '@/lib/supabase';
import type { User as SupabaseUserType } from '@supabase/supabase-js';
import { ClubEvent, GalleryItem, LeadershipMember, AdminAccount } from '@/lib/hbfc-data';
import { ImageUploadButton } from '@/components/ImageUploadButton';
import {
  Shield,
  ShieldCheck,
  Lock,
  User,
  Plus,
  Trash2,
  Edit3,
  CheckCircle,
  AlertCircle,
  LogOut,
  ArrowLeft,
  Compass,
  Calendar,
  Image as ImageIcon,
  Flame,
  Sparkles,
  RefreshCw,
  FileText,
  ExternalLink,
  Eye,
  Check,
  X,
  Mail,
  Phone,
  MapPin,
  HeartHandshake,
  Layers,
  Info,
  Download,
  Upload,
  Globe,
  Server,
  Terminal,
  CheckSquare,
  Copy,
  Code,
  KeyRound,
  UserPlus,
  Loader2,
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

export default function AdminPage() {
  const store = useHbfcStore();

  // Supabase Authentication state
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [authError, setAuthError] = useState('');
  const [authSuccess, setAuthSuccess] = useState('');
  const [authLoading, setAuthLoading] = useState(false);
  const [authMode, setAuthMode] = useState<'signin' | 'signup' | 'forgot'>('signin');
  const [supabaseUser, setSupabaseUser] = useState<SupabaseUserType | null>(null);

  // Sync Supabase Auth session on component mount
  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      if (data.session?.user) {
        setSupabaseUser(data.session.user);
        store.setAdminAuthenticated(true, data.session.user.email);
      }
    }).catch(() => {});

    const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
      if (session?.user) {
        setSupabaseUser(session.user);
        store.setAdminAuthenticated(true, session.user.email);
      } else {
        setSupabaseUser(null);
      }
    });

    return () => {
      authListener?.subscription?.unsubscribe();
    };
  }, []);

  // Active Management Tab
  const [activeTab, setActiveTab] = useState<
    | 'sections'
    | 'brand'
    | 'hero'
    | 'chairman'
    | 'omr'
    | 'events'
    | 'gallery'
    | 'leadership'
    | 'pillars'
    | 'about'
    | 'announcements'
    | 'registrations'
    | 'hosting'
    | 'admin-users'
  >('sections');

  // New Admin User Form State
  const [newAdmin, setNewAdmin] = useState<{
    name: string;
    email: string;
    password: string;
    role: AdminAccount['role'];
  }>({
    name: '',
    email: '',
    password: '',
    role: 'Media Officer',
  });
  const [showAdminPasswords, setShowAdminPasswords] = useState<Record<string, boolean>>({});

  // Success notification toast
  const [savedToast, setSavedToast] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setSavedToast(msg);
    setTimeout(() => {
      setSavedToast(null);
    }, 3500);
  };

  // Safe In-App Confirmation Modal (bypasses iframe sandbox window.confirm restrictions)
  const [confirmModal, setConfirmModal] = useState<{
    isOpen: boolean;
    title: string;
    message: string;
    confirmLabel?: string;
    onConfirm: () => void;
  }>({
    isOpen: false,
    title: '',
    message: '',
    confirmLabel: 'Delete Item',
    onConfirm: () => {},
  });

  const openConfirm = (title: string, message: string, onConfirm: () => void, confirmLabel = 'Delete Item') => {
    setConfirmModal({
      isOpen: true,
      title,
      message,
      confirmLabel,
      onConfirm: () => {
        try {
          onConfirm();
        } catch (err) {
          console.error('Confirm action error:', err);
        } finally {
          setConfirmModal((prev) => ({ ...prev, isOpen: false }));
        }
      },
    });
  };

  // Inline deletion confirmation state - zero modal blockage
  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);

  const executeDelete = (id: string, action: () => void, label = 'item') => {
    if (deleteConfirmId === id) {
      try {
        action();
        showToast(`Deleted ${label} successfully.`);
      } catch (err) {
        console.error('Delete error:', err);
      }
      setDeleteConfirmId(null);
    } else {
      setDeleteConfirmId(id);
      setTimeout(() => {
        setDeleteConfirmId((curr) => (curr === id ? null : curr));
      }, 4500);
    }
  };

  // Form states for adding items
  const [newEvent, setNewEvent] = useState({
    title: '',
    edition: 'Edition 8.0',
    date: '',
    time: '06:30 AM',
    location: 'Calabar, Cross River State',
    description: '',
    category: 'walkathon' as ClubEvent['category'],
    distance: '15 KM',
    registrationOpen: true,
    featured: false,
    image: 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=1200&q=80',
  });

  const [newGallery, setNewGallery] = useState({
    title: '',
    category: 'walkathon' as GalleryItem['category'],
    image: 'https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?auto=format&fit=crop&w=1200&q=80',
    location: 'Calabar, Nigeria',
  });

  const [newLeader, setNewLeader] = useState({
    name: '',
    role: '',
    category: 'trustees' as LeadershipMember['category'],
    bio: '',
    image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80',
  });

  const [newAnnounceText, setNewAnnounceText] = useState('');
  const [newAnnounceUrgent, setNewAnnounceUrgent] = useState(false);

  const [newOmrHighlight, setNewOmrHighlight] = useState('');

  // Editing state for existing items
  const [editingEvent, setEditingEvent] = useState<ClubEvent | null>(null);
  const [editingGallery, setEditingGallery] = useState<GalleryItem | null>(null);
  const [editingLeader, setEditingLeader] = useState<LeadershipMember | null>(null);

  // New Impact Pillar state
  const [newPillar, setNewPillar] = useState({
    title: '',
    subtitle: '',
    desc: '',
    stat: '',
    statLabel: '',
  });

  // Hosting & Backup states
  const [importJsonText, setImportJsonText] = useState('');
  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);

  const copyToClipboard = (text: string, label: string) => {
    navigator.clipboard.writeText(text);
    setCopiedCommand(label);
    showToast(`Copied ${label} to clipboard!`);
    setTimeout(() => setCopiedCommand(null), 2500);
  };

  const handleDownloadBackup = () => {
    const json = store.exportFullBackup();
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `hbfc-website-backup-${new Date().toISOString().slice(0, 10)}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast('Website backup exported successfully.');
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      const text = event.target?.result as string;
      if (text) {
        setImportJsonText(text);
      }
    };
    reader.readAsText(file);
  };

  const handleRestoreBackup = () => {
    if (!importJsonText.trim()) {
      showToast('Please select a file or paste JSON data first.');
      return;
    }
    const res = store.importFullBackup(importJsonText);
    if (res.success) {
      showToast(res.message);
      setImportJsonText('');
    } else {
      showToast(res.message);
    }
  };

  // Handlers for Supabase Authentication
  const handleSupabaseSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthError('');
    setAuthSuccess('');

    const cleanEmail = loginEmail.trim();
    if (!cleanEmail) {
      setAuthError('Please enter your email address.');
      return;
    }

    setAuthLoading(true);

    try {
      if (authMode === 'signin') {
        if (!loginPassword) {
          setAuthError('Please enter your password.');
          setAuthLoading(false);
          return;
        }

        const { data, error } = await supabase.auth.signInWithPassword({
          email: cleanEmail,
          password: loginPassword,
        });

        if (error) {
          setAuthError(error.message);
        } else if (data.session?.user) {
          setSupabaseUser(data.session.user);
          store.setAdminAuthenticated(true, data.session.user.email);
          showToast(`Welcome back, ${data.session.user.email}! Supabase authentication successful.`);
        }
      } else if (authMode === 'signup') {
        if (!loginPassword || loginPassword.length < 6) {
          setAuthError('Password must be at least 6 characters.');
          setAuthLoading(false);
          return;
        }

        const { data, error } = await supabase.auth.signUp({
          email: cleanEmail,
          password: loginPassword,
          options: {
            data: {
              role: 'HBFC Administrator',
            },
          },
        });

        if (error) {
          setAuthError(error.message);
        } else if (data.user) {
          if (data.session) {
            setSupabaseUser(data.user);
            store.setAdminAuthenticated(true, data.user.email);
            showToast('Supabase Admin account created and session established!');
          } else {
            setAuthSuccess('Admin user registered in Supabase. Check your inbox to confirm your email, or sign in directly if auto-confirmation is enabled in your Supabase dashboard.');
          }
        }
      } else if (authMode === 'forgot') {
        const { error } = await supabase.auth.resetPasswordForEmail(cleanEmail);
        if (error) {
          setAuthError(error.message);
        } else {
          setAuthSuccess(`Password reset instructions sent to ${cleanEmail}. Please check your email inbox.`);
        }
      }
    } catch (err: any) {
      setAuthError(err.message || 'An unexpected authentication error occurred.');
    } finally {
      setAuthLoading(false);
    }
  };

  // 1. If not authenticated, show sleek Supabase Authentication Gate
  if (!store.isAdmin) {
    return (
      <div className="min-h-screen bg-neutral-950 text-white flex flex-col items-center justify-center p-4 sm:p-6 selection:bg-amber-400 selection:text-black">
        {/* Subtle background glow */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_var(--tw-gradient-stops))] from-amber-500/10 via-neutral-950 to-neutral-950 pointer-events-none" />

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="relative w-full max-w-md bg-neutral-900 border border-neutral-800 rounded-3xl p-6 sm:p-8 shadow-2xl shadow-black/80"
        >
          {/* Logo & Crest */}
          <div className="flex justify-center mb-5">
            <div className="w-16 h-16 rounded-2xl bg-black border-2 border-amber-400 p-1.5 shadow-lg flex items-center justify-center">
              <img
                src="/hbfc-logo.jpg"
                alt="HBFC Official Crest"
                className="w-full h-full object-contain"
                referrerPolicy="no-referrer"
              />
            </div>
          </div>

          <div className="text-center mb-6">
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-[10px] font-bold uppercase tracking-widest mb-2">
              <ShieldCheck className="w-3.5 h-3.5" />
              <span>Supabase Authentication</span>
            </div>
            <h1 className="text-2xl font-black uppercase tracking-tight text-white">
              HBFC Admin Sign In
            </h1>
            <p className="text-xs text-neutral-400 mt-1">
              Sign in with your verified Supabase user credentials to access live site content controls.
            </p>
            <div className="mt-2 text-[10px] text-neutral-500 font-mono">
              Project: <span className="text-amber-400/80">pqyybwnxuxungtfbfkyc.supabase.co</span>
            </div>
          </div>

          {/* Mode Tabs */}
          <div className="grid grid-cols-3 gap-1.5 bg-neutral-950 p-1 rounded-xl mb-4 border border-neutral-800 text-[11px] font-bold">
            <button
              type="button"
              onClick={() => {
                setAuthMode('signin');
                setAuthError('');
                setAuthSuccess('');
              }}
              className={`py-1.5 rounded-lg transition-all cursor-pointer ${
                authMode === 'signin'
                  ? 'bg-amber-400 text-neutral-950 shadow'
                  : 'text-neutral-400 hover:text-white'
              }`}
            >
              Sign In
            </button>
            <button
              type="button"
              onClick={() => {
                setAuthMode('signup');
                setAuthError('');
                setAuthSuccess('');
              }}
              className={`py-1.5 rounded-lg transition-all cursor-pointer ${
                authMode === 'signup'
                  ? 'bg-amber-400 text-neutral-950 shadow'
                  : 'text-neutral-400 hover:text-white'
              }`}
            >
              Register
            </button>
            <button
              type="button"
              onClick={() => {
                setAuthMode('forgot');
                setAuthError('');
                setAuthSuccess('');
              }}
              className={`py-1.5 rounded-lg transition-all cursor-pointer ${
                authMode === 'forgot'
                  ? 'bg-amber-400 text-neutral-950 shadow'
                  : 'text-neutral-400 hover:text-white'
              }`}
            >
              Reset Pass
            </button>
          </div>

          {authError && (
            <div className="p-3 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs font-medium flex items-center gap-2 mb-4">
              <AlertCircle className="w-4 h-4 shrink-0 text-rose-400" />
              <span>{authError}</span>
            </div>
          )}

          {authSuccess && (
            <div className="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs font-medium flex items-center gap-2 mb-4">
              <CheckCircle className="w-4 h-4 shrink-0 text-emerald-400" />
              <span>{authSuccess}</span>
            </div>
          )}

          <form onSubmit={handleSupabaseSubmit} className="space-y-4">
            <div>
              <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                Supabase Account Email *
              </label>
              <input
                type="email"
                required
                autoComplete="email"
                value={loginEmail}
                onChange={(e) => setLoginEmail(e.target.value)}
                placeholder="admin@yourdomain.com"
                className="w-full px-4 py-2.5 rounded-xl bg-neutral-800/80 border border-neutral-700 text-white text-sm focus:border-amber-400 focus:outline-none transition-colors"
              />
            </div>

            {authMode !== 'forgot' && (
              <div>
                <div className="flex items-center justify-between mb-1">
                  <label className="text-[11px] font-bold uppercase tracking-wider text-neutral-300">
                    Password *
                  </label>
                  {authMode === 'signin' && (
                    <button
                      type="button"
                      onClick={() => setAuthMode('forgot')}
                      className="text-[10px] text-amber-400 hover:underline cursor-pointer"
                    >
                      Forgot?
                    </button>
                  )}
                </div>
                <input
                  type="password"
                  required
                  autoComplete={authMode === 'signup' ? 'new-password' : 'current-password'}
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                  placeholder="Enter your Supabase password"
                  className="w-full px-4 py-2.5 rounded-xl bg-neutral-800/80 border border-neutral-700 text-white text-sm focus:border-amber-400 focus:outline-none transition-colors"
                />
              </div>
            )}

            <button
              type="submit"
              disabled={authLoading}
              className="w-full py-3 rounded-xl bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 hover:from-amber-300 hover:to-amber-500 disabled:opacity-50 text-neutral-950 font-black text-xs uppercase tracking-wider shadow-lg shadow-amber-500/20 flex items-center justify-center gap-2 cursor-pointer transition-all active:scale-98"
            >
              {authLoading ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span>Connecting to Supabase...</span>
                </>
              ) : authMode === 'signin' ? (
                <>
                  <Lock className="w-4 h-4" />
                  <span>Sign In with Supabase</span>
                </>
              ) : authMode === 'signup' ? (
                <>
                  <UserPlus className="w-4 h-4" />
                  <span>Register in Supabase Auth</span>
                </>
              ) : (
                <>
                  <Mail className="w-4 h-4" />
                  <span>Send Reset Email</span>
                </>
              )}
            </button>
          </form>

          <div className="mt-6 pt-5 border-t border-neutral-800 text-center">
            <Link
              href="/"
              className="text-xs text-neutral-400 hover:text-white inline-flex items-center gap-1.5 transition-colors"
            >
              <ArrowLeft className="w-3.5 h-3.5" />
              <span>Return to Public Website</span>
            </Link>
          </div>
        </motion.div>
      </div>
    );
  }

  // 2. Authenticated Admin Dashboard
  const { data } = store;

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100 flex flex-col selection:bg-amber-400 selection:text-black">
      {/* Toast Notification */}
      <AnimatePresence>
        {savedToast && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="fixed top-5 right-5 z-50 px-4 py-3 rounded-xl bg-emerald-600 text-white text-xs font-bold shadow-xl flex items-center gap-2 border border-emerald-400"
          >
            <CheckCircle className="w-4 h-4 text-white" />
            <span>{savedToast}</span>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Safe In-App Confirmation Modal (bypasses iframe alert/confirm issues) */}
      <AnimatePresence>
        {confirmModal.isOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in">
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="relative w-full max-w-md bg-neutral-900 border border-neutral-700 rounded-2xl p-6 shadow-2xl space-y-4"
            >
              <div className="flex items-center gap-3 text-rose-400">
                <div className="w-10 h-10 rounded-xl bg-rose-500/20 border border-rose-500/40 flex items-center justify-center shrink-0">
                  <Trash2 className="w-5 h-5 text-rose-400" />
                </div>
                <div>
                  <h3 className="text-base font-bold text-white">{confirmModal.title}</h3>
                  <p className="text-xs text-neutral-400 mt-0.5">Permanent Deletion Confirmation</p>
                </div>
              </div>

              <p className="text-xs text-neutral-300 leading-relaxed bg-neutral-950/60 p-3 rounded-xl border border-neutral-800">
                {confirmModal.message}
              </p>

              <div className="flex items-center justify-end gap-2.5 pt-2">
                <button
                  type="button"
                  onClick={() => setConfirmModal((prev) => ({ ...prev, isOpen: false }))}
                  className="px-4 py-2 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-xs font-semibold cursor-pointer transition-all"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={confirmModal.onConfirm}
                  className="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white text-xs font-bold cursor-pointer transition-all shadow-md flex items-center gap-1.5"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  <span>{confirmModal.confirmLabel || 'Delete Permanently'}</span>
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Edit Event Modal */}
      <AnimatePresence>
        {editingEvent && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm overflow-y-auto">
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="relative w-full max-w-xl bg-neutral-900 border border-neutral-700 rounded-2xl p-6 shadow-2xl space-y-4 my-8"
            >
              <div className="flex items-center justify-between pb-3 border-b border-neutral-800">
                <div className="flex items-center gap-2">
                  <Edit3 className="w-5 h-5 text-amber-400" />
                  <h3 className="text-sm font-bold text-white uppercase tracking-wider">
                    Edit Event: {editingEvent.title}
                  </h3>
                </div>
                <button
                  type="button"
                  onClick={() => setEditingEvent(null)}
                  className="p-1 rounded-lg text-neutral-400 hover:text-white hover:bg-neutral-800"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                <div className="sm:col-span-2">
                  <label className="block font-bold text-neutral-300 mb-1">Title</label>
                  <input
                    type="text"
                    value={editingEvent.title}
                    onChange={(e) => setEditingEvent({ ...editingEvent, title: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Edition</label>
                  <input
                    type="text"
                    value={editingEvent.edition}
                    onChange={(e) => setEditingEvent({ ...editingEvent, edition: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Date</label>
                  <input
                    type="text"
                    value={editingEvent.date}
                    onChange={(e) => setEditingEvent({ ...editingEvent, date: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Time</label>
                  <input
                    type="text"
                    value={editingEvent.time}
                    onChange={(e) => setEditingEvent({ ...editingEvent, time: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Distance</label>
                  <input
                    type="text"
                    value={editingEvent.distance}
                    onChange={(e) => setEditingEvent({ ...editingEvent, distance: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block font-bold text-neutral-300 mb-1">Location</label>
                  <input
                    type="text"
                    value={editingEvent.location}
                    onChange={(e) => setEditingEvent({ ...editingEvent, location: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block font-bold text-neutral-300 mb-1">Banner Image URL</label>
                  <input
                    type="text"
                    value={editingEvent.image}
                    onChange={(e) => setEditingEvent({ ...editingEvent, image: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block font-bold text-neutral-300 mb-1">Description</label>
                  <textarea
                    rows={3}
                    value={editingEvent.description}
                    onChange={(e) => setEditingEvent({ ...editingEvent, description: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between pt-3 border-t border-neutral-800">
                <button
                  type="button"
                  onClick={() => {
                    store.deleteEvent(editingEvent.id);
                    setEditingEvent(null);
                    showToast(`Deleted "${editingEvent.title}"`);
                  }}
                  className="px-3.5 py-1.5 rounded-xl bg-rose-600 hover:bg-rose-500 text-white text-xs font-bold cursor-pointer transition-colors flex items-center gap-1.5 shadow-sm"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  <span>Delete Event Permanently</span>
                </button>

                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => setEditingEvent(null)}
                    className="px-4 py-2 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-xs font-semibold text-neutral-300 cursor-pointer"
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      store.updateEvent(editingEvent.id, editingEvent);
                      setEditingEvent(null);
                      showToast(`Saved changes to "${editingEvent.title}"`);
                    }}
                    className="px-4 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs cursor-pointer shadow-md"
                  >
                    Save Changes
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Edit Leader Modal */}
      <AnimatePresence>
        {editingLeader && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="relative w-full max-w-md bg-neutral-900 border border-neutral-700 rounded-2xl p-6 shadow-2xl space-y-4"
            >
              <div className="flex items-center justify-between pb-3 border-b border-neutral-800">
                <h3 className="text-sm font-bold text-white uppercase tracking-wider">
                  Edit Leader: {editingLeader.name}
                </h3>
                <button
                  type="button"
                  onClick={() => setEditingLeader(null)}
                  className="p-1 rounded-lg text-neutral-400 hover:text-white hover:bg-neutral-800"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>

              <div className="space-y-3 text-xs">
                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Full Name</label>
                  <input
                    type="text"
                    value={editingLeader.name}
                    onChange={(e) => setEditingLeader({ ...editingLeader, name: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Role / Executive Title</label>
                  <input
                    type="text"
                    value={editingLeader.role}
                    onChange={(e) => setEditingLeader({ ...editingLeader, role: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Category</label>
                  <select
                    value={editingLeader.category}
                    onChange={(e) => setEditingLeader({ ...editingLeader, category: e.target.value as any })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  >
                    <option value="trustees">Board of Trustees</option>
                    <option value="executive">Executive Committee</option>
                    <option value="patrons">Patron & Advisory</option>
                  </select>
                </div>

                <div>
                  <label className="block font-bold text-neutral-300 mb-1">Portrait Photo URL</label>
                  <input
                    type="text"
                    value={editingLeader.image}
                    onChange={(e) => setEditingLeader({ ...editingLeader, image: e.target.value })}
                    className="w-full px-3 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between pt-3 border-t border-neutral-800">
                <button
                  type="button"
                  onClick={() => {
                    store.deleteLeadership(editingLeader.id);
                    setEditingLeader(null);
                    showToast(`Removed "${editingLeader.name}"`);
                  }}
                  className="px-3.5 py-1.5 rounded-xl bg-rose-600 hover:bg-rose-500 text-white text-xs font-bold cursor-pointer transition-colors flex items-center gap-1.5 shadow-sm"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  <span>Remove Leader Permanently</span>
                </button>

                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => setEditingLeader(null)}
                    className="px-3 py-1.5 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-xs font-semibold text-neutral-300 cursor-pointer"
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      store.updateLeadership(editingLeader.id, editingLeader);
                      setEditingLeader(null);
                      showToast(`Updated "${editingLeader.name}"`);
                    }}
                    className="px-4 py-1.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs cursor-pointer shadow-md"
                  >
                    Save Changes
                  </button>
                </div>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* Top Admin Header Bar */}
      <header className="sticky top-0 z-40 bg-neutral-900/95 backdrop-blur-md border-b border-neutral-800 px-4 sm:px-8 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-black border border-amber-400/80 p-1 flex items-center justify-center shrink-0">
            <img
              src="/hbfc-logo.jpg"
              alt="HBFC Crest"
              className="w-full h-full object-contain"
              referrerPolicy="no-referrer"
            />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="font-black text-sm uppercase tracking-tight text-white">
                HBFC Admin Suite
              </span>
              <span className="px-2 py-0.5 rounded text-[9px] font-black uppercase bg-emerald-500 text-white flex items-center gap-1">
                <ShieldCheck className="w-3 h-3" />
                <span>Supabase Auth</span>
              </span>
            </div>
            <p className="text-[10px] text-neutral-400 hidden sm:block truncate max-w-xs">
              {supabaseUser?.email || store.adminEmail || 'Supabase Authenticated'} • Live Database & Storage
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2 sm:gap-3">
          <Link
            href="/"
            target="_blank"
            className="px-3 py-1.5 rounded-lg bg-neutral-800 hover:bg-neutral-700 text-xs font-bold text-neutral-200 hover:text-white flex items-center gap-1.5 transition-colors border border-neutral-700"
          >
            <Eye className="w-3.5 h-3.5 text-emerald-400" />
            <span className="hidden sm:inline">Preview Live Website</span>
            <ExternalLink className="w-3 h-3 text-neutral-400" />
          </Link>

          <button
            type="button"
            onClick={() => {
              openConfirm(
                'Reset Website to Official Defaults',
                'Are you sure you want to reset all website data, events, and records back to initial official defaults? Any custom additions or edits will be restored.',
                () => {
                  store.resetToDefault();
                  showToast('Website reset to default official data.');
                },
                'Confirm Reset'
              );
            }}
            title="Reset to default data"
            className="p-2 rounded-lg bg-neutral-800 hover:bg-neutral-700 text-neutral-400 hover:text-white transition-colors border border-neutral-700 cursor-pointer"
          >
            <RefreshCw className="w-4 h-4" />
          </button>

          <button
            type="button"
            onClick={async () => {
              await supabase.auth.signOut().catch(() => {});
              store.logoutAdmin();
              setSupabaseUser(null);
              showToast('Logged out of Supabase Admin Session.');
            }}
            className="px-3 py-1.5 rounded-lg bg-rose-600/20 hover:bg-rose-600/30 text-rose-300 hover:text-rose-200 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5 border border-rose-500/30 transition-all cursor-pointer"
          >
            <LogOut className="w-3.5 h-3.5" />
            <span>Sign Out</span>
          </button>
        </div>
      </header>

      {/* Main Layout: Sidebar Navigation & Content Panel */}
      <div className="flex-1 flex flex-col md:flex-row max-w-7xl w-full mx-auto p-3 sm:p-6 gap-6">
        {/* Mobile Horizontal Tabs Selector */}
        <div className="md:hidden flex items-center gap-1.5 overflow-x-auto pb-2 scrollbar-none -mx-1 px-1">
          {[
            { id: 'sections', label: 'Sections', icon: Layers },
            { id: 'brand', label: 'Brand', icon: FileText },
            { id: 'hero', label: 'Hero', icon: Flame },
            { id: 'chairman', label: 'Chairman', icon: User },
            { id: 'omr', label: 'OMR', icon: Compass },
            { id: 'events', label: `Events (${data.events.length})`, icon: Calendar },
            { id: 'gallery', label: `Gallery (${data.gallery.length})`, icon: ImageIcon },
            { id: 'leadership', label: `Leaders (${data.leadership.length})`, icon: Shield },
            { id: 'pillars', label: `Pillars (${data.impactPillars.length})`, icon: Layers },
            { id: 'about', label: 'About', icon: Info },
            { id: 'announcements', label: `Alerts (${data.announcements.length})`, icon: Sparkles },
            { id: 'registrations', label: `Registrations (${store.registrations.length})`, icon: HeartHandshake },
            { id: 'hosting', label: 'Go-Live & Hosting', icon: Globe },
          ].map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id as any)}
                className={`px-3 py-1.5 rounded-xl text-xs font-bold whitespace-nowrap flex items-center gap-1.5 shrink-0 transition-all ${
                  isActive
                    ? 'bg-amber-400 text-neutral-950 font-black shadow-sm'
                    : 'bg-neutral-800 text-neutral-300 hover:text-white'
                }`}
              >
                <Icon className="w-3.5 h-3.5" />
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>

        {/* Sidebar Tabs for Desktop */}
        <aside className="hidden md:block w-64 shrink-0 space-y-1 bg-neutral-900/60 p-3 rounded-2xl border border-neutral-800 self-start">
          <div className="px-3 py-2 text-[10px] font-black uppercase tracking-wider text-neutral-500">
            Control Categories
          </div>

          <button
            type="button"
            onClick={() => setActiveTab('sections')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'sections'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Layers className="w-4 h-4 text-emerald-400" />
            <span>Website Sections (Show/Hide)</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('brand')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'brand'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <FileText className="w-4 h-4" />
            <span>Brand & Contact Info</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('hero')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'hero'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Flame className="w-4 h-4" />
            <span>Hero Headline & Cover</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('chairman')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'chairman'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <User className="w-4 h-4" />
            <span>Chairman&apos;s Statement</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('omr')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'omr'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Compass className="w-4 h-4" />
            <span>OMR Expedition & Highlights</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('events')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'events'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Calendar className="w-4 h-4" />
            <span>Club Events ({data.events.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('gallery')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'gallery'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <ImageIcon className="w-4 h-4" />
            <span>Photo Gallery ({data.gallery.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('leadership')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'leadership'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Shield className="w-4 h-4" />
            <span>Board & Leadership ({data.leadership.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('pillars')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'pillars'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Layers className="w-4 h-4" />
            <span>Impact Pillars ({data.impactPillars.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('about')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'about'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Info className="w-4 h-4" />
            <span>About & Core Values</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('announcements')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'announcements'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <Sparkles className="w-4 h-4" />
            <span>Top Alert Bar ({data.announcements.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('registrations')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer ${
              activeTab === 'registrations'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
            }`}
          >
            <HeartHandshake className="w-4 h-4" />
            <span>Registrations ({store.registrations.length})</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('hosting')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer border border-amber-400/30 ${
              activeTab === 'hosting'
                ? 'bg-amber-400 text-neutral-950 font-black shadow-md'
                : 'text-amber-400 hover:text-white hover:bg-neutral-800/80 bg-amber-400/5'
            }`}
          >
            <Globe className="w-4 h-4 text-amber-400" />
            <span>Go-Live & Hosting Suite</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('admin-users')}
            className={`w-full text-left px-3.5 py-2.5 rounded-xl text-xs font-bold flex items-center gap-2.5 transition-all cursor-pointer border border-emerald-500/30 ${
              activeTab === 'admin-users'
                ? 'bg-emerald-500 text-neutral-950 font-black shadow-md'
                : 'text-emerald-400 hover:text-white hover:bg-neutral-800/80 bg-emerald-500/5'
            }`}
          >
            <KeyRound className="w-4 h-4 text-emerald-400" />
            <span>Admin Logins & Security ({store.adminAccounts.length})</span>
          </button>
        </aside>

        {/* Content Area */}
        <main className="flex-1 bg-neutral-900 border border-neutral-800 rounded-2xl p-4 sm:p-7 shadow-sm">
          {/* TAB 0: Website Sections & Visibility Control */}
          {activeTab === 'sections' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Layers className="w-5 h-5 text-amber-400" />
                  <span>Website Sections Manager</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Delete, hide, or restore entire parts of the live website with one click.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {[
                  {
                    key: 'spotlight',
                    name: 'Annual Walkathon 7.0 Spotlight & Countdown',
                    desc: 'The featured Calabar Walkathon 7.0 showcase with countdown timer and route information.',
                  },
                  {
                    key: 'omrExpedition',
                    name: 'Obudu Mountain Resort (OMR) Expedition',
                    desc: 'The 11KM high-altitude mountain climb showcase and expedition itinerary.',
                  },
                  {
                    key: 'chairman',
                    name: "Chairman's Statement & Executive Address",
                    desc: "The Chairman's welcome speech, presidential portrait, and club fraternity address.",
                  },
                  {
                    key: 'events',
                    name: 'Featured Club Events Schedule',
                    desc: 'Calendar of upcoming walks, summits, fitness drills, and civic health drives.',
                  },
                  {
                    key: 'gallery',
                    name: 'Photo Gallery Showcase',
                    desc: 'Visual photography album of club moments, past editions, and mountain climbs.',
                  },
                  {
                    key: 'impact',
                    name: 'Civic Impact Pillars',
                    desc: 'The 5 key impact pillars highlighting health, unity, and humanitarian outreach.',
                  },
                  {
                    key: 'announcements',
                    name: 'Top Announcements Alert Bar',
                    desc: 'The rolling banner at the very top of the website for urgent notices and updates.',
                  },
                ].map((sec) => {
                  const isVisible = (data.visibleSections as any)?.[sec.key] ?? true;
                  return (
                    <div
                      key={sec.key}
                      className={`p-4 rounded-2xl border transition-all ${
                        isVisible
                          ? 'bg-neutral-800/80 border-neutral-700'
                          : 'bg-rose-950/20 border-rose-800/50'
                      }`}
                    >
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="text-xs sm:text-sm font-bold text-white">{sec.name}</h4>
                        <span
                          className={`text-[9px] font-black uppercase px-2 py-0.5 rounded tracking-wider ${
                            isVisible
                              ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
                              : 'bg-rose-500/20 text-rose-300 border border-rose-500/30'
                          }`}
                        >
                          {isVisible ? 'Live on Website' : 'Deleted / Hidden'}
                        </span>
                      </div>
                      <p className="text-[11px] text-neutral-400 mb-4">{sec.desc}</p>
                      <button
                        type="button"
                        onClick={() => {
                          store.toggleSectionVisibility(sec.key);
                          showToast(
                            isVisible
                              ? `Removed "${sec.name}" from live site.`
                              : `Restored "${sec.name}" to live site.`
                          );
                        }}
                        className={`w-full py-2 rounded-xl text-xs font-bold uppercase tracking-wider cursor-pointer transition-all flex items-center justify-center gap-1.5 ${
                          isVisible
                            ? 'bg-rose-600/20 hover:bg-rose-600/30 text-rose-300 border border-rose-500/30'
                            : 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm'
                        }`}
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                        <span>{isVisible ? 'Delete / Hide from Website' : 'Restore to Website'}</span>
                      </button>
                    </div>
                  );
                })}
              </div>

              {/* Cloud Media Storage Status Card */}
              <div className="p-5 rounded-2xl bg-gradient-to-r from-neutral-900 via-neutral-850 to-neutral-900 border border-amber-500/30 shadow-xl space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 shrink-0">
                      <Upload className="w-5 h-5" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="text-sm font-black uppercase text-white tracking-wide">
                          Cloud Media Storage Active
                        </h3>
                        <span className="px-2 py-0.5 rounded text-[9px] font-black uppercase bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
                          Connected
                        </span>
                      </div>
                      <p className="text-xs text-neutral-400 mt-0.5">
                        Storage bucket <code className="text-amber-300 bg-neutral-800 px-1.5 py-0.5 rounded">hbfc-media</code> is live. Photos uploaded in the Gallery or Events tabs are stored permanently in the cloud.
                      </p>
                    </div>
                  </div>

                  <div className="shrink-0">
                    <ImageUploadButton
                      folder="gallery"
                      label="Quick Upload Test Photo"
                      onSuccess={(_url) => {
                        showToast('Test image uploaded to cloud storage successfully!');
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 1: Brand & Contact Info */}
          {activeTab === 'brand' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <FileText className="w-5 h-5 text-amber-400" />
                  <span>Club Branding & Contact Info</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Updates here reflect immediately across the navbar, footer, contact page, and page titles.
                </p>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Club Full Name
                  </label>
                  <input
                    type="text"
                    value={data.brand.name}
                    onChange={(e) => store.updateGeneralInfo('name', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Club Motto
                  </label>
                  <input
                    type="text"
                    value={data.brand.motto}
                    onChange={(e) => store.updateGeneralInfo('motto', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Official Email
                  </label>
                  <input
                    type="email"
                    value={data.brand.email}
                    onChange={(e) => store.updateGeneralInfo('email', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Official Phone
                  </label>
                  <input
                    type="text"
                    value={data.brand.phone}
                    onChange={(e) => store.updateGeneralInfo('phone', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Secretariat Address / Location
                  </label>
                  <input
                    type="text"
                    value={data.brand.location}
                    onChange={(e) => store.updateGeneralInfo('location', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Instagram Handle / URL
                  </label>
                  <input
                    type="text"
                    value={data.brand.instagram}
                    onChange={(e) => store.updateGeneralInfo('instagram', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Facebook Page
                  </label>
                  <input
                    type="text"
                    value={data.brand.facebook}
                    onChange={(e) => store.updateGeneralInfo('facebook', e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>
              </div>

              <div className="p-3.5 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs flex items-center justify-between">
                <span>Changes save live to the website automatically.</span>
                <button
                  type="button"
                  onClick={() => showToast('Brand settings confirmed!')}
                  className="px-3 py-1 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-bold cursor-pointer transition-all"
                >
                  Save Confirmed
                </button>
              </div>
            </div>
          )}

          {/* TAB 2: Hero Section */}
          {activeTab === 'hero' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Flame className="w-5 h-5 text-amber-400" />
                  <span>Homepage Hero Section</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Customize the headline, subheadline, and visual backdrop for the homepage hero.
                </p>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Main Hero Headline
                  </label>
                  <input
                    type="text"
                    value={data.hero.headline}
                    onChange={(e) =>
                      store.updateHero(e.target.value, data.hero.subheadline, data.hero.bgImage)
                    }
                    placeholder="HEALTH IS WEALTH"
                    className="w-full px-3.5 py-2.5 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-base font-bold focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Hero Subheadline / Executive Description
                  </label>
                  <textarea
                    rows={3}
                    value={data.hero.subheadline}
                    onChange={(e) =>
                      store.updateHero(data.hero.headline, e.target.value, data.hero.bgImage)
                    }
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Hero Background Image URL (Optional)
                  </label>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={data.hero.bgImage}
                      onChange={(e) =>
                        store.updateHero(data.hero.headline, data.hero.subheadline, e.target.value)
                      }
                      className="flex-1 px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                    />
                    {data.hero.bgImage && (
                      <button
                        type="button"
                        onClick={() => {
                          store.updateHero(data.hero.headline, data.hero.subheadline, '');
                          showToast('Cleared hero background image.');
                        }}
                        className="px-3 py-1.5 rounded-xl bg-neutral-800 hover:bg-rose-600/30 text-rose-300 border border-neutral-700 text-xs font-semibold cursor-pointer"
                        title="Clear background image"
                      >
                        Clear
                      </button>
                    )}
                  </div>
                </div>
              </div>

              <div className="pt-3 border-t border-neutral-800 flex justify-end">
                <button
                  type="button"
                  onClick={() => showToast('Hero section updated successfully!')}
                  className="px-5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs uppercase tracking-wider cursor-pointer transition-all"
                >
                  Save Hero Settings
                </button>
              </div>
            </div>
          )}

          {/* TAB 3: Chairman's Speech */}
          {activeTab === 'chairman' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <User className="w-5 h-5 text-amber-400" />
                  <span>Chairman&apos;s Statement & Message</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Edit the club Chairman&apos;s address, portrait, and inspirational quotes.
                </p>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Chairman Full Name & Title
                  </label>
                  <input
                    type="text"
                    value={data.chairman.name}
                    onChange={(e) =>
                      store.updateChairman(
                        e.target.value,
                        data.chairman.role,
                        data.chairman.message,
                        data.chairman.quote,
                        data.chairman.image
                      )
                    }
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Leadership Role Designation
                  </label>
                  <input
                    type="text"
                    value={data.chairman.role}
                    onChange={(e) =>
                      store.updateChairman(
                        data.chairman.name,
                        e.target.value,
                        data.chairman.message,
                        data.chairman.quote,
                        data.chairman.image
                      )
                    }
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Chairman Portrait Image URL
                  </label>
                  <div className="flex gap-3 items-center">
                    <input
                      type="text"
                      value={data.chairman.image}
                      onChange={(e) =>
                        store.updateChairman(
                          data.chairman.name,
                          data.chairman.role,
                          data.chairman.message,
                          data.chairman.quote,
                          e.target.value
                        )
                      }
                      className="flex-1 px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                    />
                    <div className="w-10 h-10 rounded-xl bg-neutral-800 border border-neutral-700 overflow-hidden shrink-0">
                      <img src={data.chairman.image} alt="Preview" className="w-full h-full object-cover" />
                    </div>
                  </div>
                  <div className="mt-2">
                    <ImageUploadButton
                      folder="chairman"
                      label="Upload Chairman Portrait to Cloud"
                      onSuccess={(url) => {
                        store.updateChairman(
                          data.chairman.name,
                          data.chairman.role,
                          data.chairman.message,
                          data.chairman.quote,
                          url
                        );
                        showToast('Chairman photo uploaded and updated!');
                      }}
                    />
                  </div>
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Highlighted Executive Quote
                  </label>
                  <input
                    type="text"
                    value={data.chairman.quote}
                    onChange={(e) =>
                      store.updateChairman(
                        data.chairman.name,
                        data.chairman.role,
                        data.chairman.message,
                        e.target.value,
                        data.chairman.image
                      )
                    }
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Full Chairman&apos;s Message / Statement
                  </label>
                  <textarea
                    rows={6}
                    value={data.chairman.message}
                    onChange={(e) =>
                      store.updateChairman(
                        data.chairman.name,
                        data.chairman.role,
                        e.target.value,
                        data.chairman.quote,
                        data.chairman.image
                      )
                    }
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none leading-relaxed"
                  />
                </div>
              </div>

              <div className="pt-3 border-t border-neutral-800 flex justify-end">
                <button
                  type="button"
                  onClick={() => showToast('Chairman statement updated!')}
                  className="px-5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs uppercase tracking-wider cursor-pointer transition-all"
                >
                  Save Chairman Details
                </button>
              </div>
            </div>
          )}

          {/* TAB 4: OMR Mountain Expedition */}
          {activeTab === 'omr' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Compass className="w-5 h-5 text-amber-400" />
                  <span>Obudu Mountain Resort (OMR) Expedition</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Configure the annual high-altitude summit trek and manage expedition itinerary highlights.
                </p>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Expedition Title
                  </label>
                  <input
                    type="text"
                    value={data.omrExpedition.title}
                    onChange={(e) => store.updateOmr({ title: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Theme / Tagline
                  </label>
                  <input
                    type="text"
                    value={data.omrExpedition.tagline}
                    onChange={(e) => store.updateOmr({ tagline: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Expedition Distance / Route
                  </label>
                  <input
                    type="text"
                    value={data.omrExpedition.distance}
                    onChange={(e) => store.updateOmr({ distance: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Summit Altitude
                  </label>
                  <input
                    type="text"
                    value={data.omrExpedition.altitude}
                    onChange={(e) => store.updateOmr({ altitude: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Hero Banner Image
                  </label>
                  <input
                    type="text"
                    value={data.omrExpedition.image}
                    onChange={(e) => store.updateOmr({ image: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="sm:col-span-2">
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Expedition Narrative Description
                  </label>
                  <textarea
                    rows={4}
                    value={data.omrExpedition.description}
                    onChange={(e) => store.updateOmr({ description: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>
              </div>

              {/* OMR Highlights & Itinerary Manager */}
              <div className="pt-4 border-t border-neutral-800 space-y-3">
                <div className="flex items-center justify-between">
                  <h3 className="text-xs font-black uppercase tracking-wider text-amber-300">
                    Expedition Itinerary Highlights ({data.omrExpedition.highlights?.length || 0})
                  </h3>
                </div>

                <div className="flex gap-2">
                  <input
                    type="text"
                    placeholder="Add a new highlight (e.g. 11KM Becheve Nature Reserve trek)"
                    value={newOmrHighlight}
                    onChange={(e) => setNewOmrHighlight(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        if (newOmrHighlight.trim()) {
                          store.addOmrHighlight(newOmrHighlight);
                          setNewOmrHighlight('');
                          showToast('Added expedition highlight.');
                        }
                      }
                    }}
                    className="flex-1 px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs"
                  />
                  <button
                    type="button"
                    onClick={() => {
                      if (newOmrHighlight.trim()) {
                        store.addOmrHighlight(newOmrHighlight);
                        setNewOmrHighlight('');
                        showToast('Added expedition highlight.');
                      }
                    }}
                    className="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Add</span>
                  </button>
                </div>

                <div className="space-y-2 pt-2">
                  {data.omrExpedition.highlights?.map((hl, idx) => (
                    <div
                      key={idx}
                      className="p-2.5 rounded-xl bg-neutral-800/80 border border-neutral-700/70 flex items-center justify-between gap-3 text-xs"
                    >
                      <div className="flex items-center gap-2 text-neutral-200">
                        <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
                        <span>{hl}</span>
                      </div>
                      <button
                        type="button"
                        onClick={() => executeDelete(`omr-${idx}`, () => store.deleteOmrHighlight(idx), hl)}
                        className={`p-1 rounded-lg cursor-pointer transition-all flex items-center gap-1 ${
                          deleteConfirmId === `omr-${idx}`
                            ? 'bg-rose-600 text-white font-bold text-[10px] px-2 py-0.5 animate-pulse'
                            : 'bg-rose-500/20 hover:bg-rose-500/40 text-rose-300'
                        }`}
                        title="Delete highlight"
                      >
                        <Trash2 className="w-3.5 h-3.5 shrink-0" />
                        {deleteConfirmId === `omr-${idx}` && <span>Delete?</span>}
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* TAB 5: Events Manager */}
          {activeTab === 'events' && (
            <div className="space-y-6">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                  <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                    <Calendar className="w-5 h-5 text-amber-400" />
                    <span>Club Events Manager</span>
                  </h2>
                  <p className="text-xs text-neutral-400 mt-1">
                    Create, edit, toggle registration, or delete events. Deletions apply immediately across the website.
                  </p>
                </div>
              </div>

              {/* Add New Event Form */}
              <div className="p-4 rounded-2xl bg-neutral-800/60 border border-neutral-700/60 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
                  <Plus className="w-4 h-4" />
                  <span>Add New Event</span>
                </h3>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <input
                    type="text"
                    placeholder="Event Title *"
                    value={newEvent.title}
                    onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <input
                    type="text"
                    placeholder="Edition (e.g. Edition 8.0)"
                    value={newEvent.edition}
                    onChange={(e) => setNewEvent({ ...newEvent, edition: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <input
                    type="text"
                    placeholder="Date (e.g. Nov 14, 2026)"
                    value={newEvent.date}
                    onChange={(e) => setNewEvent({ ...newEvent, date: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <input
                    type="text"
                    placeholder="Location"
                    value={newEvent.location}
                    onChange={(e) => setNewEvent({ ...newEvent, location: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <input
                    type="text"
                    placeholder="Distance (e.g. 15 KM)"
                    value={newEvent.distance}
                    onChange={(e) => setNewEvent({ ...newEvent, distance: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <select
                    value={newEvent.category}
                    onChange={(e) => setNewEvent({ ...newEvent, category: e.target.value as any })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  >
                    <option value="walkathon">Walkathon</option>
                    <option value="expedition">Expedition</option>
                    <option value="outreach">Outreach</option>
                  </select>
                  <div className="sm:col-span-3">
                    <input
                      type="text"
                      placeholder="Description"
                      value={newEvent.description}
                      onChange={(e) => setNewEvent({ ...newEvent, description: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                    />
                  </div>
                  <div className="sm:col-span-3 pt-1">
                    <label className="block text-[11px] font-bold uppercase text-neutral-300 mb-1">
                      Event Cover Banner Photo
                    </label>
                    <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
                      <ImageUploadButton
                        folder="events"
                        label="Upload Event Banner to Cloud"
                        onSuccess={(url) => {
                          setNewEvent((prev) => ({ ...prev, image: url }));
                          showToast('Event banner uploaded to cloud storage!');
                        }}
                      />
                      {newEvent.image && (
                        <div className="flex items-center gap-2 text-xs text-neutral-400">
                          <div className="w-10 h-7 rounded bg-neutral-900 border border-neutral-700 overflow-hidden shrink-0">
                            <img src={newEvent.image} alt="Event Preview" className="w-full h-full object-cover" />
                          </div>
                          <span className="truncate max-w-[200px] text-[11px] text-amber-300">Ready</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                <div className="pt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={() => {
                      if (!newEvent.title.trim()) {
                        showToast('Please enter an event title');
                        return;
                      }
                      store.addEvent(newEvent);
                      setNewEvent({
                        title: '',
                        edition: 'Edition 8.0',
                        date: '',
                        time: '06:30 AM',
                        location: 'Calabar, Cross River State',
                        description: '',
                        category: 'walkathon' as ClubEvent['category'],
                        distance: '15 KM',
                        registrationOpen: true,
                        featured: false,
                        image: 'https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=1200&q=80',
                      });
                      showToast(`Added event: ${newEvent.title}`);
                    }}
                    className="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Publish Event</span>
                  </button>
                </div>
              </div>

              {/* Existing Events List */}
              <div className="space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-neutral-400">
                  Existing Events ({data.events.length})
                </h3>

                {data.events.map((evt) => (
                  <div
                    key={evt.id}
                    className="p-3.5 rounded-xl bg-neutral-800/80 border border-neutral-700/80 flex flex-col sm:flex-row sm:items-center justify-between gap-3"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-xl bg-neutral-900 overflow-hidden border border-neutral-700 shrink-0">
                        <img src={evt.image} alt={evt.title} className="w-full h-full object-cover" />
                      </div>
                      <div>
                        <div className="flex items-center gap-2">
                          <h4 className="text-sm font-bold text-white">{evt.title}</h4>
                          <span className="text-[10px] uppercase font-bold text-emerald-400 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20">
                            {evt.category}
                          </span>
                        </div>
                        <p className="text-xs text-neutral-400 mt-0.5">
                          {evt.date} • {evt.location} • <span className="text-amber-400 font-semibold">{evt.distance}</span>
                        </p>
                      </div>
                    </div>

                    <div className="flex items-center gap-2 self-end sm:self-auto">
                      <button
                        type="button"
                        onClick={() => {
                          store.updateEvent(evt.id, {
                            registrationOpen: !evt.registrationOpen,
                          });
                          showToast(`Toggled registration for ${evt.title}`);
                        }}
                        className="px-2.5 py-1.5 rounded-lg bg-neutral-700 hover:bg-neutral-600 text-neutral-200 text-xs font-medium cursor-pointer"
                      >
                        {evt.registrationOpen ? 'Close Reg' : 'Open Reg'}
                      </button>

                      <button
                        type="button"
                        onClick={() => setEditingEvent(evt)}
                        className="p-1.5 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 cursor-pointer"
                        title="Edit event"
                      >
                        <Edit3 className="w-4 h-4" />
                      </button>

                      <button
                        type="button"
                        onClick={() => executeDelete(evt.id, () => store.deleteEvent(evt.id), evt.title)}
                        className={`p-1.5 rounded-lg cursor-pointer transition-all flex items-center gap-1.5 ${
                          deleteConfirmId === evt.id
                            ? 'bg-rose-600 text-white font-bold text-xs px-2.5 py-1.5 shadow-md animate-pulse'
                            : 'bg-rose-500/20 hover:bg-rose-500/30 text-rose-300'
                        }`}
                        title="Delete event"
                      >
                        <Trash2 className="w-4 h-4 shrink-0" />
                        {deleteConfirmId === evt.id && <span>Confirm Delete?</span>}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 6: Gallery Photos */}
          {activeTab === 'gallery' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <ImageIcon className="w-5 h-5 text-amber-400" />
                  <span>Photo Gallery Manager</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Add, update, or delete photographs displayed in the club gallery showcase.
                </p>
              </div>

              {/* Add Photo Form */}
              <div className="p-4 rounded-2xl bg-neutral-800/60 border border-neutral-700/60 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
                  <Plus className="w-4 h-4" />
                  <span>Add New Gallery Photo</span>
                </h3>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <input
                    type="text"
                    placeholder="Photo Title / Caption *"
                    value={newGallery.title}
                    onChange={(e) => setNewGallery({ ...newGallery, title: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <select
                    value={newGallery.category}
                    onChange={(e) => setNewGallery({ ...newGallery, category: e.target.value as any })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  >
                    <option value="walkathon">Walkathon</option>
                    <option value="expedition">Expedition</option>
                    <option value="community">Community</option>
                  </select>
                  <input
                    type="text"
                    placeholder="Location (e.g. Calabar)"
                    value={newGallery.location}
                    onChange={(e) => setNewGallery({ ...newGallery, location: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <div className="sm:col-span-3">
                    <input
                      type="text"
                      placeholder="Image URL *"
                      value={newGallery.image}
                      onChange={(e) => setNewGallery({ ...newGallery, image: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                    />
                  </div>
                  <div className="sm:col-span-3 pt-1">
                    <label className="block text-[11px] font-bold uppercase text-neutral-300 mb-1">
                      Upload Direct Photo from Phone or Laptop
                    </label>
                    <div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center">
                      <ImageUploadButton
                        folder="gallery"
                        label="Upload Photo to Cloud Gallery"
                        onSuccess={(url) => {
                          setNewGallery((prev) => ({ ...prev, image: url }));
                          showToast('Photo uploaded to cloud storage!');
                        }}
                      />
                      {newGallery.image && (
                        <div className="flex items-center gap-2 text-xs text-neutral-400">
                          <div className="w-10 h-10 rounded-xl bg-neutral-900 border border-neutral-700 overflow-hidden shrink-0">
                            <img src={newGallery.image} alt="Preview" className="w-full h-full object-cover" />
                          </div>
                          <span className="truncate max-w-[200px] text-[11px] text-amber-300">Ready to publish</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                <div className="pt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={() => {
                      if (!newGallery.title.trim() || !newGallery.image.trim()) {
                        showToast('Please provide a photo title and image URL');
                        return;
                      }
                      store.addGalleryItem(newGallery);
                      setNewGallery({
                        title: '',
                        category: 'walkathon' as GalleryItem['category'],
                        image: 'https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?auto=format&fit=crop&w=1200&q=80',
                        location: 'Calabar, Nigeria',
                      });
                      showToast('Photo added to gallery.');
                    }}
                    className="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Upload to Gallery</span>
                  </button>
                </div>
              </div>

              {/* Existing Gallery Grid */}
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                {data.gallery.map((item) => (
                  <div
                    key={item.id}
                    className="group relative rounded-xl overflow-hidden bg-neutral-800 border border-neutral-700 aspect-square"
                  >
                    <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent p-2.5 flex flex-col justify-between">
                      <button
                        type="button"
                        onClick={() => executeDelete(item.id, () => store.deleteGalleryItem(item.id), item.title)}
                        className={`self-end p-1.5 rounded-lg text-white cursor-pointer shadow-md transition-all flex items-center gap-1 ${
                          deleteConfirmId === item.id
                            ? 'bg-rose-700 font-bold text-[10px] px-2 py-1 animate-pulse'
                            : 'bg-rose-600 hover:bg-rose-500'
                        }`}
                        title="Delete photo"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                        {deleteConfirmId === item.id && <span>Confirm?</span>}
                      </button>

                      <div>
                        <span className="text-[9px] uppercase font-bold text-amber-400 tracking-wider block">
                          {item.category}
                        </span>
                        <p className="text-xs font-bold text-white truncate">{item.title}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 7: Board & Leadership */}
          {activeTab === 'leadership' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Shield className="w-5 h-5 text-amber-400" />
                  <span>Board of Trustees & Leadership Directory</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Manage profiles, roles, and photos of club trustees, committee leaders, and patrons.
                </p>
              </div>

              {/* Add Leader Form */}
              <div className="p-4 rounded-2xl bg-neutral-800/60 border border-neutral-700/60 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
                  <Plus className="w-4 h-4" />
                  <span>Add New Leader</span>
                </h3>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <input
                    type="text"
                    placeholder="Full Name *"
                    value={newLeader.name}
                    onChange={(e) => setNewLeader({ ...newLeader, name: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <input
                    type="text"
                    placeholder="Role (e.g. Captain, General Secretary) *"
                    value={newLeader.role}
                    onChange={(e) => setNewLeader({ ...newLeader, role: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  />
                  <select
                    value={newLeader.category}
                    onChange={(e) => setNewLeader({ ...newLeader, category: e.target.value as any })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                  >
                    <option value="trustees">Board of Trustees</option>
                    <option value="executive">Executive Committee</option>
                    <option value="patrons">Patron & Advisory</option>
                  </select>
                  <div className="sm:col-span-3">
                    <input
                      type="text"
                      placeholder="Portrait Image URL"
                      value={newLeader.image}
                      onChange={(e) => setNewLeader({ ...newLeader, image: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white"
                    />
                  </div>
                </div>

                <div className="pt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={() => {
                      if (!newLeader.name.trim() || !newLeader.role.trim()) {
                        showToast('Please provide a leader name and role');
                        return;
                      }
                      store.addLeadership(newLeader);
                      setNewLeader({
                        name: '',
                        role: '',
                        category: 'trustees' as LeadershipMember['category'],
                        bio: '',
                        image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80',
                      });
                      showToast(`Added ${newLeader.name} to leadership.`);
                    }}
                    className="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Add Leader</span>
                  </button>
                </div>
              </div>

              {/* Existing Leaders List */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {data.leadership.map((leader) => (
                  <div
                    key={leader.id}
                    className="p-3.5 rounded-xl bg-neutral-800/80 border border-neutral-700/80 flex items-center justify-between gap-3"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-11 h-11 rounded-xl bg-neutral-900 overflow-hidden border border-neutral-700 shrink-0">
                        <img src={leader.image} alt={leader.name} className="w-full h-full object-cover" />
                      </div>
                      <div>
                        <h4 className="text-xs font-bold text-white">{leader.name}</h4>
                        <p className="text-[11px] text-amber-400 font-medium">{leader.role}</p>
                        <span className="text-[9px] uppercase tracking-wider text-neutral-400">
                          {leader.category}
                        </span>
                      </div>
                    </div>

                    <div className="flex items-center gap-1.5">
                      <button
                        type="button"
                        onClick={() => setEditingLeader(leader)}
                        className="p-1.5 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 cursor-pointer"
                        title="Edit leader"
                      >
                        <Edit3 className="w-4 h-4" />
                      </button>

                      <button
                        type="button"
                        onClick={() => executeDelete(leader.id, () => store.deleteLeadership(leader.id), leader.name)}
                        className={`p-1.5 rounded-lg cursor-pointer transition-all flex items-center gap-1.5 ${
                          deleteConfirmId === leader.id
                            ? 'bg-rose-600 text-white font-bold text-xs px-2.5 py-1.5 shadow-md animate-pulse'
                            : 'bg-rose-500/20 hover:bg-rose-500/30 text-rose-300'
                        }`}
                        title="Delete leader"
                      >
                        <Trash2 className="w-4 h-4 shrink-0" />
                        {deleteConfirmId === leader.id && <span>Confirm Delete?</span>}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 8: Impact Pillars */}
          {activeTab === 'pillars' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Layers className="w-5 h-5 text-amber-400" />
                  <span>Impact Pillars & Achievements</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Manage the impact cards, metrics, and civic achievement statistics displayed on the homepage.
                </p>
              </div>

              {/* Add New Pillar Form */}
              <div className="p-4 rounded-2xl bg-neutral-800/60 border border-neutral-700/60 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
                  <Plus className="w-4 h-4" />
                  <span>Add New Impact Pillar</span>
                </h3>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                  <input
                    type="text"
                    placeholder="Pillar Title (e.g. Public Health Transformation) *"
                    value={newPillar.title}
                    onChange={(e) => setNewPillar({ ...newPillar, title: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white"
                  />
                  <input
                    type="text"
                    placeholder="Subtitle (e.g. Preventive Medicine in Action)"
                    value={newPillar.subtitle}
                    onChange={(e) => setNewPillar({ ...newPillar, subtitle: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white"
                  />
                  <input
                    type="text"
                    placeholder="Key Metric (e.g. 15,000+)"
                    value={newPillar.stat}
                    onChange={(e) => setNewPillar({ ...newPillar, stat: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white"
                  />
                  <input
                    type="text"
                    placeholder="Metric Label (e.g. Active Walkers Mobilized)"
                    value={newPillar.statLabel}
                    onChange={(e) => setNewPillar({ ...newPillar, statLabel: e.target.value })}
                    className="px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white"
                  />
                  <div className="sm:col-span-2">
                    <textarea
                      rows={2}
                      placeholder="Narrative description of this pillar's civic impact"
                      value={newPillar.desc}
                      onChange={(e) => setNewPillar({ ...newPillar, desc: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white"
                    />
                  </div>
                </div>

                <div className="pt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={() => {
                      if (!newPillar.title.trim()) {
                        showToast('Please provide a pillar title');
                        return;
                      }
                      store.addImpactPillar(newPillar);
                      setNewPillar({
                        title: '',
                        subtitle: '',
                        desc: '',
                        stat: '',
                        statLabel: '',
                      });
                      showToast('Added impact pillar.');
                    }}
                    className="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Create Pillar</span>
                  </button>
                </div>
              </div>

              {/* Pillars List */}
              <div className="space-y-3">
                {data.impactPillars.map((pillar) => (
                  <div
                    key={pillar.id}
                    className="p-4 rounded-xl bg-neutral-800/80 border border-neutral-700/80 space-y-2"
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <h4 className="text-sm font-bold text-white">{pillar.title}</h4>
                        <span className="text-xs font-mono font-bold text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded">
                          {pillar.stat}
                        </span>
                      </div>

                      <button
                        type="button"
                        onClick={() => executeDelete(pillar.id, () => store.deleteImpactPillar(pillar.id), pillar.title)}
                        className={`p-1.5 rounded-lg cursor-pointer transition-all flex items-center gap-1.5 ${
                          deleteConfirmId === pillar.id
                            ? 'bg-rose-600 text-white font-bold text-xs px-2.5 py-1.5 shadow-md animate-pulse'
                            : 'bg-rose-500/20 hover:bg-rose-500/30 text-rose-300'
                        }`}
                        title="Delete pillar"
                      >
                        <Trash2 className="w-4 h-4 shrink-0" />
                        {deleteConfirmId === pillar.id && <span>Confirm Delete?</span>}
                      </button>
                    </div>

                    <p className="text-xs text-neutral-400 leading-relaxed">{pillar.desc}</p>
                    <p className="text-[11px] text-neutral-500 font-mono">
                      Metric Label: {pillar.statLabel}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 9: About & Core Values */}
          {activeTab === 'about' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Info className="w-5 h-5 text-amber-400" />
                  <span>About Page & Core Values</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Customize the official club mission statement, vision, and core values.
                </p>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Mission Statement
                  </label>
                  <textarea
                    rows={3}
                    value={data.about.mission}
                    onChange={(e) => store.updateAbout({ mission: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Vision Statement
                  </label>
                  <textarea
                    rows={3}
                    value={data.about.vision}
                    onChange={(e) => store.updateAbout({ vision: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-bold uppercase tracking-wider text-neutral-300 mb-1">
                    Club History & Heritage
                  </label>
                  <textarea
                    rows={4}
                    value={data.about.history}
                    onChange={(e) => store.updateAbout({ history: e.target.value })}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-800 border border-neutral-700 text-white text-xs sm:text-sm focus:border-amber-400 focus:outline-none"
                  />
                </div>
              </div>

              {/* Core Values List */}
              <div className="pt-4 border-t border-neutral-800 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300">
                  Core Values ({data.about.values?.length || 0})
                </h3>

                <div className="space-y-2">
                  {data.about.values?.map((val, idx) => (
                    <div
                      key={idx}
                      className="p-3 rounded-xl bg-neutral-800/80 border border-neutral-700 flex items-center justify-between gap-3 text-xs"
                    >
                      <div>
                        <h4 className="font-bold text-white">{val.title}</h4>
                        <p className="text-neutral-400 text-[11px]">{val.desc}</p>
                      </div>

                      <button
                        type="button"
                        onClick={() => executeDelete(`val-${idx}`, () => store.deleteAboutValue(idx), val.title)}
                        className={`p-1 rounded-lg cursor-pointer transition-all flex items-center gap-1 ${
                          deleteConfirmId === `val-${idx}`
                            ? 'bg-rose-600 text-white font-bold text-[10px] px-2 py-0.5 animate-pulse'
                            : 'bg-rose-500/20 hover:bg-rose-500/40 text-rose-300'
                        }`}
                        title="Delete value"
                      >
                        <Trash2 className="w-3.5 h-3.5 shrink-0" />
                        {deleteConfirmId === `val-${idx}` && <span>Delete?</span>}
                      </button>
                    </div>
                  ))}
                </div>
              </div>

              <div className="pt-3 border-t border-neutral-800 flex justify-end">
                <button
                  type="button"
                  onClick={() => showToast('About settings updated successfully!')}
                  className="px-5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs uppercase tracking-wider cursor-pointer transition-all"
                >
                  Save About Details
                </button>
              </div>
            </div>
          )}

          {/* TAB 10: Announcements (Top Alert Bar) */}
          {activeTab === 'announcements' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <Sparkles className="w-5 h-5 text-amber-400" />
                  <span>Broadcast Announcements (Top Bar)</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Post high-priority alerts across the very top of all website pages.
                </p>
              </div>

              <div className="p-4 rounded-2xl bg-neutral-800/60 border border-neutral-700/60 space-y-3">
                <h3 className="text-xs font-black uppercase tracking-wider text-amber-300 flex items-center gap-1.5">
                  <Plus className="w-4 h-4" />
                  <span>Create Announcement</span>
                </h3>

                <div>
                  <textarea
                    rows={2}
                    placeholder="Enter urgent broadcast message for site visitors..."
                    value={newAnnounceText}
                    onChange={(e) => setNewAnnounceText(e.target.value)}
                    className="w-full px-3.5 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-white text-xs focus:border-amber-400 focus:outline-none"
                  />
                </div>

                <div className="flex flex-wrap items-center justify-between gap-3">
                  <label className="flex items-center gap-2 text-xs text-neutral-300 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={newAnnounceUrgent}
                      onChange={(e) => setNewAnnounceUrgent(e.target.checked)}
                      className="rounded border-neutral-700 text-amber-400 focus:ring-0"
                    />
                    <span>Mark as Urgent Alert</span>
                  </label>

                  <button
                    type="button"
                    onClick={() => {
                      if (!newAnnounceText.trim()) {
                        showToast('Please type an announcement message');
                        return;
                      }
                      store.addAnnouncement(newAnnounceText.trim(), newAnnounceUrgent);
                      setNewAnnounceText('');
                      setNewAnnounceUrgent(false);
                      showToast('Broadcast alert posted live!');
                    }}
                    className="px-5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Broadcast Now</span>
                  </button>
                </div>
              </div>

              {/* Active Announcements List */}
              <div className="space-y-2.5">
                <h3 className="text-xs font-black uppercase tracking-wider text-neutral-400">
                  Active Top Alerts ({data.announcements.length})
                </h3>

                {data.announcements.length === 0 ? (
                  <p className="text-xs text-neutral-500 italic p-4 bg-neutral-800/40 rounded-xl text-center">
                    No active broadcast alerts currently displayed.
                  </p>
                ) : (
                  data.announcements.map((ann) => (
                    <div
                      key={ann.id}
                      className={`p-3 rounded-xl border flex items-center justify-between gap-3 ${
                        ann.urgent
                          ? 'bg-amber-500/10 border-amber-500/30 text-amber-200'
                          : 'bg-neutral-800/80 border-neutral-700/80 text-neutral-200'
                      }`}
                    >
                      <div className="min-w-0">
                        <div className="flex items-center gap-2">
                          <span
                            className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase ${
                              ann.urgent ? 'bg-amber-400 text-black' : 'bg-neutral-700 text-neutral-300'
                            }`}
                          >
                            {ann.urgent ? 'URGENT' : 'NOTICE'}
                          </span>
                          <span className="text-[10px] text-neutral-400">{ann.date}</span>
                        </div>
                        <p className="text-xs font-medium mt-1 leading-snug">{ann.text}</p>
                      </div>

                      <button
                        type="button"
                        onClick={() => executeDelete(ann.id, () => store.deleteAnnouncement(ann.id), 'announcement')}
                        className={`p-1.5 rounded-lg cursor-pointer shrink-0 transition-all flex items-center gap-1 ${
                          deleteConfirmId === ann.id
                            ? 'bg-rose-600 text-white font-bold text-xs px-2.5 py-1 shadow-md animate-pulse'
                            : 'bg-neutral-700 hover:bg-rose-600 text-neutral-300 hover:text-white'
                        }`}
                        title="Remove announcement"
                      >
                        <Trash2 className="w-4 h-4 shrink-0" />
                        {deleteConfirmId === ann.id && <span>Delete?</span>}
                      </button>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* TAB 11: Registrations & Volunteers */}
          {activeTab === 'registrations' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <HeartHandshake className="w-5 h-5 text-amber-400" />
                  <span>Walkathon Registrations & Volunteer Applications</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Review incoming registrations, update status, or delete entries.
                </p>
              </div>

              <div className="space-y-3">
                {store.registrations.length === 0 ? (
                  <p className="text-xs text-neutral-500 italic p-6 bg-neutral-800/40 rounded-xl text-center">
                    No registrations found.
                  </p>
                ) : (
                  store.registrations.map((reg) => (
                    <div
                      key={reg.id}
                      className="p-4 rounded-xl bg-neutral-800/80 border border-neutral-700/80 flex flex-col sm:flex-row sm:items-center justify-between gap-3"
                    >
                      <div>
                        <div className="flex items-center gap-2">
                          <h4 className="text-sm font-bold text-white">{reg.fullName}</h4>
                          <span className="text-[10px] font-mono text-amber-400 px-2 py-0.5 rounded bg-neutral-900 border border-neutral-700">
                            {reg.regNumber}
                          </span>
                        </div>
                        <p className="text-xs text-neutral-400 mt-0.5">
                          {reg.phone} • {reg.email} • T-Shirt: <strong className="text-white">{reg.tshirtSize}</strong>
                        </p>
                        <p className="text-[11px] text-neutral-500 mt-1">
                          Registered: {reg.registeredAt} • {reg.organization} ({reg.location})
                        </p>
                      </div>

                      <div className="flex items-center gap-2 self-end sm:self-auto">
                        <select
                          value={reg.status}
                          onChange={(e) => {
                            store.updateRegistrationStatus(reg.id, e.target.value as any);
                            showToast(`Updated status for ${reg.fullName}`);
                          }}
                          className="px-2.5 py-1 rounded-lg bg-neutral-900 border border-neutral-700 text-xs text-amber-300 font-semibold"
                        >
                          <option value="confirmed">Confirmed</option>
                          <option value="kit_collected">Kit Collected</option>
                          <option value="pending">Pending</option>
                        </select>

                        <button
                          type="button"
                          onClick={() => executeDelete(reg.id, () => store.deleteRegistration(reg.id), reg.fullName)}
                          className={`p-1.5 rounded-lg cursor-pointer transition-all flex items-center gap-1 ${
                            deleteConfirmId === reg.id
                              ? 'bg-rose-600 text-white font-bold text-xs px-2 py-1 shadow-md animate-pulse'
                              : 'bg-rose-500/20 hover:bg-rose-500/30 text-rose-300'
                          }`}
                          title="Delete registration"
                        >
                          <Trash2 className="w-3.5 h-3.5 shrink-0" />
                          {deleteConfirmId === reg.id && <span>Delete?</span>}
                        </button>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* TAB 12: Go-Live & Hosting Suite */}
          {activeTab === 'hosting' && (
            <div className="space-y-8">
              {/* Header */}
              <div>
                <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-[11px] font-bold uppercase tracking-widest mb-2">
                  <Globe className="w-3.5 h-3.5" />
                  <span>Production Deployment & Domain Guide</span>
                </div>
                <h2 className="text-xl sm:text-2xl font-black uppercase text-white tracking-tight">
                  Launch HBFC Live on Your Hosting & Custom Domain
                </h2>
                <p className="text-xs sm:text-sm text-neutral-400 mt-1 max-w-2xl leading-relaxed">
                  Everything you need to deploy this Next.js website to your hosting provider (Vercel, cPanel, Netlify, VPS, or Docker) and connect your official custom domain.
                </p>
              </div>

              {/* SECTION 1: Backup & Migration */}
              <div className="p-5 sm:p-6 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-neutral-800">
                  <div className="flex items-center gap-2.5">
                    <Download className="w-5 h-5 text-amber-400" />
                    <div>
                      <h3 className="text-sm font-black uppercase tracking-wide text-white">
                        1. One-Click Website Data Export & Backup
                      </h3>
                      <p className="text-[11px] text-neutral-400">
                        Export all current customizations (events, chairman statement, announcements, photos, and registrations) into a single portable JSON file.
                      </p>
                    </div>
                  </div>

                  <button
                    type="button"
                    onClick={handleDownloadBackup}
                    className="px-4 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-neutral-950 font-bold text-xs uppercase tracking-wider transition-all flex items-center gap-2 shrink-0 cursor-pointer shadow-md"
                  >
                    <Download className="w-4 h-4" />
                    <span>Download Backup (JSON)</span>
                  </button>
                </div>

                <div className="pt-2">
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-300 mb-1.5">
                    Restore or Import Website Data into New Host
                  </label>
                  <p className="text-[11px] text-neutral-400 mb-3">
                    Deploying to a fresh server or computer? Upload your exported JSON file below to instantly restore all data.
                  </p>

                  <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                    <input
                      type="file"
                      accept=".json,application/json"
                      onChange={handleFileUpload}
                      className="text-xs text-neutral-400 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-neutral-800 file:text-amber-300 hover:file:bg-neutral-700 cursor-pointer"
                    />

                    <button
                      type="button"
                      onClick={handleRestoreBackup}
                      disabled={!importJsonText}
                      className="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 disabled:opacity-40 text-white font-bold text-xs uppercase tracking-wider transition-all flex items-center justify-center gap-1.5 cursor-pointer shrink-0"
                    >
                      <Upload className="w-3.5 h-3.5" />
                      <span>Restore to Website</span>
                    </button>
                  </div>
                </div>
              </div>

              {/* SECTION 2: Hosting Platform Options */}
              <div className="space-y-4">
                <h3 className="text-sm font-black uppercase tracking-wider text-amber-400 flex items-center gap-2">
                  <Server className="w-4 h-4" />
                  <span>2. Recommended Hosting Platforms for Next.js</span>
                </h3>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                  {/* Option A: Vercel */}
                  <div className="p-5 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="px-2.5 py-1 rounded-full bg-emerald-500/20 text-emerald-300 font-black text-[10px] uppercase tracking-wider">
                        ★ Recommended (Fastest & Free)
                      </span>
                      <span className="text-[11px] text-neutral-500 font-mono">vercel.com</span>
                    </div>
                    <h4 className="text-base font-bold text-white">Vercel (Creators of Next.js)</h4>
                    <p className="text-neutral-400 leading-relaxed text-[11px]">
                      Vercel provides native, automatic support for Next.js App Router, edge caching, free SSL certificates, and zero configuration.
                    </p>
                    <div className="p-3 rounded-xl bg-neutral-900 border border-neutral-800 space-y-1.5 text-[11px] text-neutral-300 font-mono">
                      <p>1. Push codebase to GitHub / GitLab</p>
                      <p>2. Log into vercel.com & click &ldquo;Add New Project&rdquo;</p>
                      <p>3. Select repo & click &ldquo;Deploy&rdquo;</p>
                      <p>4. Add your custom domain under Project Settings → Domains</p>
                    </div>
                  </div>

                  {/* Option B: cPanel / Traditional Shared Hosting */}
                  <div className="p-5 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="px-2.5 py-1 rounded-full bg-amber-500/20 text-amber-300 font-black text-[10px] uppercase tracking-wider">
                        cPanel / Shared Host
                      </span>
                      <span className="text-[11px] text-neutral-500 font-mono">cPanel / Hostinger / Namecheap</span>
                    </div>
                    <h4 className="text-base font-bold text-white">cPanel Node.js Selector</h4>
                    <p className="text-neutral-400 leading-relaxed text-[11px]">
                      If your hosting provider offers cPanel with the &ldquo;Setup Node.js App&rdquo; feature (CloudLinux/Passenger).
                    </p>
                    <div className="p-3 rounded-xl bg-neutral-900 border border-neutral-800 space-y-1.5 text-[11px] text-neutral-300 font-mono">
                      <p>1. In cPanel, click &ldquo;Setup Node.js App&rdquo;</p>
                      <p>2. Choose Node.js version 20.x or 22.x</p>
                      <p>3. Set Application root & startup file: <span className="text-amber-400">server.ts</span> or Next script</p>
                      <p>4. Run <span className="text-amber-400">npm install</span> and <span className="text-amber-400">npm run build</span></p>
                    </div>
                  </div>

                  {/* Option C: Netlify / Render / Railway */}
                  <div className="p-5 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="px-2.5 py-1 rounded-full bg-blue-500/20 text-blue-300 font-black text-[10px] uppercase tracking-wider">
                        Modern Cloud
                      </span>
                      <span className="text-[11px] text-neutral-500 font-mono">Netlify / Render / Railway</span>
                    </div>
                    <h4 className="text-base font-bold text-white">Netlify or Render</h4>
                    <p className="text-neutral-400 leading-relaxed text-[11px]">
                      Great alternatives to Vercel with automatic continuous deployments from Git.
                    </p>
                    <div className="p-3 rounded-xl bg-neutral-900 border border-neutral-800 space-y-1.5 text-[11px] text-neutral-300 font-mono">
                      <p>Build Command: <span className="text-amber-400">npm run build</span></p>
                      <p>Publish directory: <span className="text-amber-400">.next</span></p>
                      <p>Environment Variables: APP_URL=https://your-domain.com</p>
                    </div>
                  </div>

                  {/* Option D: Linux VPS (Ubuntu / Debian / Docker) */}
                  <div className="p-5 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="px-2.5 py-1 rounded-full bg-purple-500/20 text-purple-300 font-black text-[10px] uppercase tracking-wider">
                        Self-Hosted VPS
                      </span>
                      <span className="text-[11px] text-neutral-500 font-mono">DigitalOcean / AWS / Linode</span>
                    </div>
                    <h4 className="text-base font-bold text-white">Ubuntu VPS with PM2 & Nginx</h4>
                    <p className="text-neutral-400 leading-relaxed text-[11px]">
                      Full root control over your dedicated cloud instance with automated SSL via Certbot.
                    </p>
                    <div className="p-3 rounded-xl bg-neutral-900 border border-neutral-800 space-y-1.5 text-[11px] text-neutral-300 font-mono">
                      <p># Build and start background service:</p>
                      <p className="text-amber-400">npm run build</p>
                      <p className="text-amber-400">pm2 start npm --name &ldquo;hbfc&rdquo; -- start</p>
                      <p># Nginx reverse proxy to http://localhost:3000</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* SECTION 3: Custom Domain & DNS Mapping */}
              <div className="p-5 sm:p-6 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-4">
                <div className="flex items-center gap-2">
                  <Globe className="w-5 h-5 text-amber-400" />
                  <h3 className="text-sm font-black uppercase tracking-wide text-white">
                    3. Connecting Your Custom Domain (e.g. hbfc.org / healthybillionaires.com)
                  </h3>
                </div>

                <p className="text-xs text-neutral-400 leading-relaxed">
                  Log into your domain registrar (GoDaddy, Namecheap, Google Domains, Cloudflare, Whogohost, etc.) and add the following DNS records:
                </p>

                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs border border-neutral-800 rounded-xl overflow-hidden">
                    <thead className="bg-neutral-900 text-neutral-300 font-bold uppercase text-[10px]">
                      <tr>
                        <th className="p-3 border-b border-neutral-800">Record Type</th>
                        <th className="p-3 border-b border-neutral-800">Host / Name</th>
                        <th className="p-3 border-b border-neutral-800">Points To (Value)</th>
                        <th className="p-3 border-b border-neutral-800">TTL</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-neutral-850 text-neutral-300 font-mono text-[11px]">
                      <tr>
                        <td className="p-3 text-amber-400 font-bold">A Record</td>
                        <td className="p-3">@ (or root)</td>
                        <td className="p-3 text-neutral-200">76.76.21.21 <span className="text-[10px] text-neutral-500 font-sans">(if Vercel) or your host IP</span></td>
                        <td className="p-3 text-neutral-500">Auto / 3600</td>
                      </tr>
                      <tr>
                        <td className="p-3 text-emerald-400 font-bold">CNAME Record</td>
                        <td className="p-3">www</td>
                        <td className="p-3 text-neutral-200">cname.vercel-dns.com <span className="text-[10px] text-neutral-500 font-sans">(or your domain root)</span></td>
                        <td className="p-3 text-neutral-500">Auto / 3600</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* SECTION 4: Pre-Launch Verification Checklist */}
              <div className="p-5 sm:p-6 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-4">
                <div className="flex items-center gap-2">
                  <CheckSquare className="w-5 h-5 text-emerald-400" />
                  <h3 className="text-sm font-black uppercase tracking-wide text-white">
                    4. Production Go-Live Checklist
                  </h3>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                  <div className="flex items-start gap-2.5 p-3 rounded-xl bg-neutral-900 border border-neutral-800">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-white block font-bold">SEO Sitemap Ready</strong>
                      <span className="text-neutral-400 text-[11px]">Generated automatically at <code className="text-amber-400">/sitemap.xml</code> for Google indexing.</span>
                    </div>
                  </div>

                  <div className="flex items-start gap-2.5 p-3 rounded-xl bg-neutral-900 border border-neutral-800">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-white block font-bold">Search Bot Crawler File</strong>
                      <span className="text-neutral-400 text-[11px]">Generated at <code className="text-amber-400">/robots.txt</code> keeping admin console private.</span>
                    </div>
                  </div>

                  <div className="flex items-start gap-2.5 p-3 rounded-xl bg-neutral-900 border border-neutral-800">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-white block font-bold">Legal & Participation Waivers</strong>
                      <span className="text-neutral-400 text-[11px]">Live at <code className="text-amber-400">/privacy</code> and <code className="text-amber-400">/terms</code>.</span>
                    </div>
                  </div>

                  <div className="flex items-start gap-2.5 p-3 rounded-xl bg-neutral-900 border border-neutral-800">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-white block font-bold">Social Media Cards & Schema</strong>
                      <span className="text-neutral-400 text-[11px]">Rich WhatsApp, Twitter, and Facebook preview cards active with official HBFC logo.</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          {/* TAB 12: Admin Logins & Security */}
          {activeTab === 'admin-users' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-black uppercase text-white flex items-center gap-2">
                  <KeyRound className="w-5 h-5 text-emerald-400" />
                  <span>Admin Logins & Supabase Authentication</span>
                </h2>
                <p className="text-xs text-neutral-400 mt-1">
                  Manage administrator accounts authenticated directly through your Supabase project (GoTrue Auth).
                </p>
              </div>

              {/* Active Supabase Connection Info Card */}
              <div className="p-4 rounded-2xl bg-neutral-950 border border-emerald-500/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shrink-0">
                    <ShieldCheck className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-bold text-white uppercase tracking-wider">Active Supabase Session</span>
                      <span className="text-[9px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-mono">Connected</span>
                    </div>
                    <p className="text-xs text-neutral-400 font-mono mt-0.5">
                      User: <span className="text-white font-bold">{supabaseUser?.email || store.adminEmail || 'Active Admin'}</span>
                    </p>
                    <p className="text-[10px] text-neutral-500 font-mono">
                      Project: {supabaseUrl}
                    </p>
                  </div>
                </div>

                <a
                  href="https://supabase.com/dashboard"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-3.5 py-1.5 rounded-xl bg-neutral-900 hover:bg-neutral-800 border border-neutral-700 text-xs font-bold text-amber-300 hover:text-amber-200 flex items-center gap-1.5 transition-colors shrink-0"
                >
                  <span>Supabase Dashboard</span>
                  <ExternalLink className="w-3 h-3" />
                </a>
              </div>

              {/* Add New Admin Account Form */}
              <div className="p-5 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-4 shadow-sm">
                <div className="flex items-center gap-2">
                  <UserPlus className="w-4 h-4 text-emerald-400" />
                  <h3 className="text-sm font-black uppercase tracking-wider text-white">
                    Register Admin User into Supabase Auth
                  </h3>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
                  <div>
                    <label className="block text-[11px] font-bold uppercase text-neutral-300 mb-1">
                      Full Name *
                    </label>
                    <input
                      type="text"
                      placeholder="e.g. Media Officer"
                      value={newAdmin.name}
                      onChange={(e) => setNewAdmin({ ...newAdmin, name: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white focus:border-amber-400 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold uppercase text-neutral-300 mb-1">
                      Admin Email *
                    </label>
                    <input
                      type="email"
                      placeholder="e.g. media@hbfc.org"
                      value={newAdmin.email}
                      onChange={(e) => setNewAdmin({ ...newAdmin, email: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white focus:border-amber-400 focus:outline-none"
                    />
                  </div>

                  <div>
                    <div className="flex items-center justify-between mb-1">
                      <label className="text-[11px] font-bold uppercase text-neutral-300">
                        Password *
                      </label>
                      <button
                        type="button"
                        onClick={() => {
                          const rand = Math.random().toString(36).slice(-6).toUpperCase();
                          const gen = `HBFC@${rand}#2026`;
                          setNewAdmin({ ...newAdmin, password: gen });
                          showToast('Generated strong password!');
                        }}
                        className="text-[9px] uppercase font-bold text-amber-400 hover:text-amber-300 cursor-pointer"
                      >
                        Generate
                      </button>
                    </div>
                    <input
                      type="text"
                      placeholder="Enter secret password"
                      value={newAdmin.password}
                      onChange={(e) => setNewAdmin({ ...newAdmin, password: e.target.value })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white font-mono focus:border-amber-400 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold uppercase text-neutral-300 mb-1">
                      Access Role *
                    </label>
                    <select
                      value={newAdmin.role}
                      onChange={(e) => setNewAdmin({ ...newAdmin, role: e.target.value as any })}
                      className="w-full px-3 py-2 rounded-xl bg-neutral-900 border border-neutral-700 text-xs text-white focus:border-amber-400 focus:outline-none"
                    >
                      <option value="Super Admin">Super Admin (Full Access)</option>
                      <option value="Secretary">Secretary (Events & Regs)</option>
                      <option value="Media Officer">Media Officer (Gallery & News)</option>
                      <option value="Event Coordinator">Event Coordinator (Walkathons)</option>
                    </select>
                  </div>
                </div>

                <div className="pt-2 flex justify-end">
                  <button
                    type="button"
                    onClick={async () => {
                      if (!newAdmin.name.trim() || !newAdmin.email.trim() || !newAdmin.password.trim()) {
                        showToast('Please enter full name, email, and password.');
                        return;
                      }
                      try {
                        const { data: authData, error: authErr } = await supabase.auth.signUp({
                          email: newAdmin.email.trim(),
                          password: newAdmin.password.trim(),
                          options: {
                            data: {
                              name: newAdmin.name.trim(),
                              role: newAdmin.role,
                            },
                          },
                        });
                        if (authErr) {
                          showToast(`Supabase: ${authErr.message}`);
                        } else {
                          store.addAdminAccount(newAdmin);
                          showToast(`Admin account registered in Supabase Auth for ${newAdmin.email}!`);
                          setNewAdmin({
                            name: '',
                            email: '',
                            password: '',
                            role: 'Media Officer',
                          });
                        }
                      } catch (err: any) {
                        showToast(err.message || 'Failed to register in Supabase Auth');
                      }
                    }}
                    className="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs uppercase tracking-wider cursor-pointer transition-all flex items-center gap-1.5 shadow-md"
                  >
                    <UserPlus className="w-4 h-4" />
                    <span>Create Admin Account</span>
                  </button>
                </div>
              </div>

              {/* Active Admin Accounts List */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h3 className="text-xs font-black uppercase tracking-wider text-neutral-400">
                    Active Admin Users ({store.adminAccounts.length})
                  </h3>
                  <span className="text-[11px] text-neutral-400">
                    All accounts listed here can sign in at <code className="text-amber-400">/admin</code>
                  </span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-3.5">
                  {store.adminAccounts.map((account) => {
                    const isRevealed = showAdminPasswords[account.id] || false;
                    return (
                      <div
                        key={account.id}
                        className="p-4 rounded-2xl bg-neutral-950 border border-neutral-800 flex flex-col justify-between gap-3 transition-all hover:border-neutral-700"
                      >
                        <div className="flex items-start justify-between gap-3">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-xl bg-neutral-900 border border-amber-500/30 flex items-center justify-center font-black text-amber-400 text-xs shrink-0">
                              {account.name.slice(0, 2).toUpperCase()}
                            </div>
                            <div>
                              <div className="flex items-center gap-2">
                                <h4 className="text-sm font-bold text-white">{account.name}</h4>
                                <span className={`text-[9px] uppercase font-black px-2 py-0.5 rounded border ${
                                  account.role === 'Super Admin'
                                    ? 'bg-amber-500/20 text-amber-300 border-amber-500/30'
                                    : account.role === 'Secretary'
                                    ? 'bg-blue-500/20 text-blue-300 border-blue-500/30'
                                    : 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30'
                                }`}>
                                  {account.role}
                                </span>
                              </div>
                              <p className="text-xs text-neutral-300 font-mono mt-0.5 flex items-center gap-1.5">
                                <Mail className="w-3 h-3 text-neutral-500" />
                                <span>{account.email}</span>
                              </p>
                            </div>
                          </div>

                          <button
                            type="button"
                            onClick={() => {
                              openConfirm(
                                `Revoke Access for ${account.name}?`,
                                `Are you sure you want to delete the admin account for ${account.email}? They will immediately lose access to the Admin Suite.`,
                                () => {
                                  const res = store.deleteAdminAccount(account.id);
                                  showToast(res.message);
                                },
                                'Revoke Admin'
                              );
                            }}
                            className="p-1.5 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 cursor-pointer transition-colors"
                            title="Delete Admin Account"
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                        </div>

                        {/* Password & Credentials Display */}
                        <div className="p-2.5 rounded-xl bg-neutral-900 border border-neutral-800 flex items-center justify-between text-xs font-mono">
                          <div className="flex items-center gap-2 truncate">
                            <span className="text-[10px] uppercase text-neutral-400 font-sans font-bold">Password:</span>
                            <span className="text-amber-300 font-bold tracking-wider">
                              {isRevealed ? account.password : '••••••••••••'}
                            </span>
                          </div>

                          <div className="flex items-center gap-1.5 shrink-0">
                            <button
                              type="button"
                              onClick={() => {
                                setShowAdminPasswords((prev) => ({
                                  ...prev,
                                  [account.id]: !isRevealed,
                                }));
                              }}
                              className="px-2 py-1 rounded bg-neutral-800 hover:bg-neutral-700 text-[10px] text-neutral-300 font-sans cursor-pointer transition-colors"
                            >
                              {isRevealed ? 'Hide' : 'Show'}
                            </button>

                            <button
                              type="button"
                              onClick={async () => {
                                const details = `HBFC Admin Login:\nURL: https://.../admin\nEmail: ${account.email}\nPassword: ${account.password}`;
                                try {
                                  await navigator.clipboard.writeText(details);
                                  showToast(`Copied login credentials for ${account.name}!`);
                                } catch {
                                  showToast(`Email: ${account.email} | Pass: ${account.password}`);
                                }
                              }}
                              className="px-2 py-1 rounded bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 text-[10px] font-sans font-bold cursor-pointer transition-colors flex items-center gap-1"
                              title="Copy Login Details"
                            >
                              <Copy className="w-3 h-3" />
                              <span>Copy</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Security Advisory Card */}
              <div className="p-4 rounded-2xl bg-neutral-950 border border-neutral-800 space-y-2 text-xs text-neutral-400">
                <div className="flex items-center gap-2 text-amber-400 font-bold uppercase text-[11px]">
                  <Shield className="w-4 h-4" />
                  <span>Executive Multi-User Security Guidelines</span>
                </div>
                <ul className="list-disc list-inside space-y-1 text-[11px] text-neutral-300">
                  <li>Each executive or media coordinator should have their own dedicated email address and password.</li>
                  <li>When an executive leaves the committee, immediately click the red trash icon to revoke their access.</li>
                  <li>You can always see active logins and click &ldquo;Copy&rdquo; to send the login details directly to authorized officers via WhatsApp or email.</li>
                </ul>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}