function SubmitButton({ label = "Save changes", form }: { label?: string; form?: string }) {
  const [pending, setPending] = useState(false);

  async function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    if (pending) return;
    setPending(true);
    try {
      // Submit logic here
    } finally {
      setPending(false);
    }
  }

  return (
    <button
      type="submit"
      form={form}
      disabled={pending}
      aria-busy={pending || undefined}
      onClick={handleClick}
    >
      {pending ? (
        <>
          <Spinner size={16} aria-hidden="true" />
          Saving...
        </>
      ) : (
        label
      )}
    </button>
  );
}

// React Error Boundary with retry
import { Component, type ReactNode } from "react";

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
}

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    // Log to monitoring service
    console.error("ErrorBoundary caught:", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback ?? (
          <div role="alert" className="error-boundary-fallback">
            <p>Something went wrong in this section.</p>
            <button onClick={() => this.setState({ hasError: false })}>
              Try again
            </button>
          </div>
        )
      );
    }
    return this.props.children;
  }
}

// Usage: wrap each major section
// <ErrorBoundary>
//   <DashboardChart />
// </ErrorBoundary>
// <ErrorBoundary>
//   <ActivityFeed />
// </ErrorBoundary>

import { useState } from "react";

type StepProps = {
  onNext: (data: Record<string, string>) => void;
  onBack?: () => void;
};

// --- Step 1: Account info ---
function StepAccount({ onNext }: StepProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});

  function validate() {
    const errs: Record<string, string> = {};
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = "Enter a valid email address.";
    if (password.length < 8) errs.password = "Password must be at least 8 characters.";
    return errs;
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;
    }
    onNext({ email, password });
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <fieldset>
        <legend>Account Information</legend>

        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={() => {
            const errs: Record<string, string> = {};
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = "Enter a valid email address.";
            setErrors((prev) => ({ ...prev, ...errs }));
          }}
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? "email-error" : undefined}
        />
        {errors.email && (
          <p id="email-error" role="alert" className="field-error">
            {errors.email}
          </p>
        )}

        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          onBlur={() => {
            const errs: Record<string, string> = {};
            if (password.length < 8) errs.password = "Password must be at least 8 characters.";
            setErrors((prev) => ({ ...prev, ...errs }));
          }}
          aria-invalid={!!errors.password}
          aria-describedby={errors.password ? "password-error" : undefined}
        />
        {errors.password && (
          <p id="password-error" role="alert" className="field-error">
            {errors.password}
          </p>
        )}
      </fieldset>

      <button type="submit">Next</button>
    </form>
  );
}

// --- Step 2: Profile info ---
function StepProfile({ onNext, onBack }: StepProps) {
  const [name, setName] = useState("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    onNext({ name });
  }

  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <legend>Profile</legend>
        <label htmlFor="name">Full Name</label>
        <input
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </fieldset>
      <div className="button-group">
        <button type="button" onClick={onBack} className="btn-secondary">
          Back
        </button>
        <button type="submit">Next</button>
      </div>
    </form>
  );
}

// --- Step 3: Confirmation ---
function StepConfirm({
  data,
  onBack,
  onSubmit,
}: {
  data: Record<string, string>;
  onBack: () => void;
  onSubmit: () => void;
}) {
  return (
    <div>
      <h3>Confirm your details</h3>
      <dl>
        <dt>Email</dt>
        <dd>{data.email}</dd>
        <dt>Name</dt>
        <dd>{data.name}</dd>
      </dl>
      <div className="button-group">
        <button type="button" onClick={onBack} className="btn-secondary">
          Back
        </button>
        <button type="button" onClick={onSubmit}>
          Create Account
        </button>
      </div>
    </div>
  );
}

// --- Progress indicator ---
function ProgressBar({ currentStep, totalSteps }: { currentStep: number; totalSteps: number }) {
  const steps = ["Account", "Profile", "Confirm"];
  return (
    <nav aria-label="Form progress">
      <ol className="progress-steps">
        {steps.map((label, i) => (
          <li
            key={label}
            className={
              i < currentStep ? "completed" : i === currentStep ? "active" : ""
            }
            aria-current={i === currentStep ? "step" : undefined}
          >
            <span className="step-number">{i + 1}</span>
            <span className="step-label">{label}</span>
          </li>
        ))}
      </ol>
      <div
        className="progress-bar"
        role="progressbar"
        aria-valuenow={currentStep + 1}
        aria-valuemin={1}
        aria-valuemax={totalSteps}
      >
        <div
          className="progress-fill"
          style={{ width: `${((currentStep + 1) / totalSteps) * 100}%` }}
        />
      </div>
    </nav>
  );
}

// --- Wizard container ---
export default function SignupWizard() {
  const [step, setStep] = useState(0);
  const [formData, setFormData] = useState<Record<string, string>>({});

  function handleNext(data: Record<string, string>) {
    setFormData((prev) => ({ ...prev, ...data }));
    setStep((s) => s + 1);
  }

  function handleBack() {
    setStep((s) => s - 1);
  }

  function handleSubmit() {
    // POST formData to API
    console.log("Submitting:", formData);
  }

  return (
    <div className="wizard" role="region" aria-label="Sign up">
      <ProgressBar currentStep={step} totalSteps={3} />
      {step === 0 && <StepAccount onNext={handleNext} />}
      {step === 1 && <StepProfile onNext={handleNext} onBack={handleBack} />}
      {step === 2 && (
        <StepConfirm data={formData} onBack={handleBack} onSubmit={handleSubmit} />
      )}
    </div>
  );
}

import { useState, useEffect, useRef, useMemo } from "react";

type CommandItem = {
  id: string;
  label: string;
  category: string;
  icon?: string;
  action: () => void;
  keywords?: string[];
};

type CommandPaletteProps = {
  commands: CommandItem[];
};

export function CommandPalette({ commands }: CommandPaletteProps) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);

  // Open on Cmd+K / Ctrl+K
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setOpen((prev) => !prev);
      }
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

  // Focus input when opened
  useEffect(() => {
    if (open) {
      setQuery("");
      setActiveIndex(0);
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [open]);

  // Substring filter
  const filtered = useMemo(() => {
    if (!query) return commands;
    const lower = query.toLowerCase();
    return commands.filter(
      (cmd) =>
        cmd.label.toLowerCase().includes(lower) ||
        cmd.category.toLowerCase().includes(lower) ||
        cmd.keywords?.some((k) => k.toLowerCase().includes(lower))
    );
  }, [query, commands]);

  // Group by category
  const grouped = useMemo(() => {
    const map = new Map<string, CommandItem[]>();
    for (const item of filtered) {
      const list = map.get(item.category) || [];
      list.push(item);
      map.set(item.category, list);
    }
    return map;
  }, [filtered]);

  // Flatten for index-based keyboard navigation
  const flatList = useMemo(() => filtered, [filtered]);

  function execute(item: CommandItem) {
    setOpen(false);
    item.action();
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActiveIndex((i) => Math.min(i + 1, flatList.length - 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        setActiveIndex((i) => Math.max(i - 1, 0));
        break;
      case "Enter":
        e.preventDefault();
        if (flatList[activeIndex]) execute(flatList[activeIndex]);
        break;
      case "Escape":
        setOpen(false);
        break;
    }
  }

  // Scroll active item into view
  useEffect(() => {
    const el = listRef.current?.querySelector('[data-active="true"]');
    el?.scrollIntoView({ block: "nearest" });
  }, [activeIndex]);

  if (!open) return null;

  let itemIndex = -1;

  return (
    <div className="command-backdrop" onClick={() => setOpen(false)}>
      <div
        className="command-palette"
        role="dialog"
        aria-label="Command palette"
        onClick={(e) => e.stopPropagation()}
      >
        <input
          ref={inputRef}
          type="text"
          className="command-input"
          placeholder="Type a command..."
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
            setActiveIndex(0);
          }}
          onKeyDown={handleKeyDown}
          role="combobox"
          aria-expanded
          aria-controls="command-list"
          aria-activedescendant={
            flatList[activeIndex] ? `cmd-${flatList[activeIndex].id}` : undefined
          }
        />
        <ul id="command-list" ref={listRef} role="listbox" className="command-list">
          {[...grouped.entries()].map(([category, items]) => (
            <li key={category} role="presentation">
              <span className="command-category">{category}</span>
              <ul role="group" aria-label={category}>
                {items.map((item) => {
                  itemIndex++;
                  const isActive = itemIndex === activeIndex;
                  const idx = itemIndex; // capture for closure
                  return (
                    <li
                      key={item.id}
                      id={`cmd-${item.id}`}
                      role="option"
                      aria-selected={isActive}
                      data-active={isActive}
                      className={`command-item ${isActive ? "active" : ""}`}
                      onMouseEnter={() => setActiveIndex(idx)}
                      onClick={() => execute(item)}
                    >
                      {item.icon && <span className="command-icon">{item.icon}</span>}
                      <span className="command-label">{item.label}</span>
                    </li>
                  );
                })}
              </ul>
            </li>
          ))}
          {flatList.length === 0 && (
            <li className="command-empty" role="presentation">
              No results for "{query}"
            </li>
          )}
        </ul>
      </div>
    </div>
  );
}

import { useState, useMemo } from "react";

type User = { id: number; name: string; email: string; role: string; status: string };
type SortDir = "asc" | "desc";
type DataState = { status: "loading" } | { status: "error"; message: string } | { status: "success"; data: User[] };

function DataTable({ state }: { state: DataState }) {
  const [sortKey, setSortKey] = useState<keyof User>("name");
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [filter, setFilter] = useState("");

  function toggleSort(key: keyof User) {
    if (sortKey === key) {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setSortKey(key);
      setSortDir("asc");
    }
  }

  const processed = useMemo(() => {
    if (state.status !== "success") return [];
    let rows = [...state.data];
    if (filter) {
      const lower = filter.toLowerCase();
      rows = rows.filter(
        (u) =>
          u.name.toLowerCase().includes(lower) ||
          u.email.toLowerCase().includes(lower) ||
          u.role.toLowerCase().includes(lower)
      );
    }
    rows.sort((a, b) => {
      const aVal = a[sortKey];
      const bVal = b[sortKey];
      const cmp = String(aVal).localeCompare(String(bVal));
      return sortDir === "asc" ? cmp : -cmp;
    });
    return rows;
  }, [state, sortKey, sortDir, filter]);

  // --- Loading state ---
  if (state.status === "loading") {
    return (
      <div className="table-container">
        <table aria-label="Users">
          <thead>
            <tr>
              {["Name", "Email", "Role", "Status"].map((h) => (
                <th key={h}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: 5 }).map((_, i) => (
              <tr key={i} className="skeleton-row">
                <td><div className="skeleton skeleton-text" /></td>
                <td><div className="skeleton skeleton-text" /></td>
                <td><div className="skeleton skeleton-text" /></td>
                <td><div className="skeleton skeleton-text" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  // --- Error state ---
  if (state.status === "error") {
    return (
      <div className="table-error" role="alert">
        <svg aria-hidden="true" className="error-icon" viewBox="0 0 20 20" width="48" height="48">
          <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" strokeWidth="2" />
          <text x="10" y="14" textAnchor="middle" fontSize="14" fill="currentColor">!</text>
        </svg>
        <h3>Unable to load users</h3>
        <p>{state.message}</p>
        <button onClick={() => window.location.reload()}>Retry</button>
      </div>
    );
  }

  // --- Empty state ---
  if (processed.length === 0 && !filter) {
    return (
      <div className="table-empty">
        <svg aria-hidden="true" viewBox="0 0 64 64" width="64" height="64" className="empty-icon">
          <rect x="8" y="16" width="48" height="36" rx="4" fill="none" stroke="currentColor" strokeWidth="2" />
          <line x1="20" y1="28" x2="44" y2="28" stroke="currentColor" strokeWidth="2" />
          <line x1="20" y1="36" x2="36" y2="36" stroke="currentColor" strokeWidth="2" />
        </svg>
        <h3>No users yet</h3>
        <p>Invite your first team member to get started.</p>
        <button>Invite User</button>
      </div>
    );
  }

  // --- Data loaded ---
  const columns: { key: keyof User; label: string }[] = [
    { key: "name", label: "Name" },
    { key: "email", label: "Email" },
    { key: "role", label: "Role" },
    { key: "status", label: "Status" },
  ];

  return (
    <div className="table-container">
      <div className="table-toolbar">
        <input
          type="search"
          placeholder="Filter users..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          aria-label="Filter users"
        />
        <span className="result-count">{processed.length} users</span>
      </div>
      <table aria-label="Users">
        <thead>
          <tr>
            {columns.map((col) => (
              <th
                key={col.key}
                aria-sort={
                  sortKey === col.key
                    ? sortDir === "asc"
                      ? "ascending"
                      : "descending"
                    : "none"
                }
              >
                <button
                  type="button"
                  onClick={() => toggleSort(col.key)}
                  aria-label={`Sort by ${col.label.toLowerCase()}`}
                  style={{ cursor: "pointer" }}
                >
                  {col.label}
                  {sortKey === col.key && (
                    <span aria-hidden="true">{sortDir === "asc" ? " \u2191" : " \u2193"}</span>
                  )}
                </button>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {processed.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.role}</td>
              <td>
                <span className={`status-badge status-${user.status.toLowerCase()}`}>
                  {user.status}
                </span>
              </td>
            </tr>
          ))}
          {processed.length === 0 && filter && (
            <tr>
              <td colSpan={4} className="no-results">
                No users match "{filter}".{" "}
                <button className="btn-link" onClick={() => setFilter("")}>
                  Clear filter
                </button>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

import {
  createContext,
  useContext,
  useState,
  useCallback,
  useEffect,
  useRef,
  type ReactNode,
} from "react";

// --- Types ---
type ToastType = "success" | "error" | "warning" | "info";

interface Toast {
  id: string;
  type: ToastType;
  message: string;
  duration: number; // ms, 0 = no auto-dismiss
  createdAt: number;
}

interface ToastContextValue {
  addToast: (message: string, type?: ToastType, duration?: number) => void;
  removeToast: (id: string) => void;
}

const ToastContext = createContext<ToastContextValue | null>(null);

export function useToast() {
  const ctx = useContext(ToastContext);
  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
  return ctx;
}

// --- Provider ---
export function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = useCallback(
    (message: string, type: ToastType = "info", duration?: number) => {
      const id = crypto.randomUUID();
      // Errors do not auto-dismiss by default
      const dur = duration ?? (type === "error" ? 0 : 5000);
      setToasts((prev) => [...prev.slice(-4), { id, type, message, duration: dur, createdAt: Date.now() }]);
    },
    []
  );

  const removeToast = useCallback((id: string) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }, []);

  return (
    <ToastContext.Provider value={{ addToast, removeToast }}>
      {children}
      <div className="toast-container" aria-live="polite" aria-label="Notifications">
        {toasts.map((toast) => (
          <ToastItem key={toast.id} toast={toast} onDismiss={removeToast} />
        ))}
      </div>
    </ToastContext.Provider>
  );
}

// --- Individual toast ---
const ICONS: Record<ToastType, string> = {
  success: "\u2713",
  error: "\u2717",
  warning: "\u26A0",
  info: "\u2139",
};

function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
  const [exiting, setExiting] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  const dismiss = useCallback(() => {
    setExiting(true);
    setTimeout(() => onDismiss(toast.id), 300); // match CSS exit animation duration
  }, [toast.id, onDismiss]);

  useEffect(() => {
    if (toast.duration > 0) {
      timerRef.current = setTimeout(dismiss, toast.duration);
    }
    return () => clearTimeout(timerRef.current);
  }, [toast.duration, dismiss]);

  return (
    <div
      className={`toast toast-${toast.type} ${exiting ? "toast-exit" : "toast-enter"}`}
      role="status"
    >
      <span className="toast-icon" aria-hidden="true">
        {ICONS[toast.type]}
      </span>
      <p className="toast-message">{toast.message}</p>
      {toast.duration > 0 && (
        <div className="toast-timer">
          <div
            className="toast-timer-bar"
            style={{ animationDuration: `${toast.duration}ms` }}
          />
        </div>
      )}
      <button
        className="toast-close"
        onClick={dismiss}
        aria-label="Dismiss notification"
      >
        &times;
      </button>
    </div>
  );
}

/* --- Supporting CSS ---
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
  max-width: 24rem;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.toast-success { background: #16a34a; }
.toast-error   { background: #dc2626; }
.toast-warning { background: #d97706; }
.toast-info    { background: #2563eb; }

.toast-enter {
  animation: toast-slide-in 300ms ease-out;
}

.toast-exit {
  animation: toast-fade-out 300ms ease-in forwards;
}

@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-0.5rem); }
}

.toast-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}

.toast-timer-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  animation: timer-shrink linear forwards;
}

@keyframes timer-shrink {
  from { width: 100%; }
  to   { width: 0%; }
}
*/

import { useState } from "react";
import { CheckCircle2, Circle, ChevronRight, X } from "lucide-react";

type OnboardingStep = {
  id: string;
  title: string;
  description: string;
  completed: boolean;
  action: () => void;
  actionLabel: string;
};

type OnboardingChecklistProps = {
  steps: OnboardingStep[];
  onDismiss: () => void;
};

export function OnboardingChecklist({ steps, onDismiss }: OnboardingChecklistProps) {
  const [expanded, setExpanded] = useState(true);
  const completedCount = steps.filter((s) => s.completed).length;
  const progress = (completedCount / steps.length) * 100;
  const allComplete = completedCount === steps.length;

  if (allComplete) {
    return (
      <div className="onboarding-complete" role="status">
        <CheckCircle2 className="onboarding-complete-icon" aria-hidden="true" />
        <p className="onboarding-complete-title">You're all set!</p>
        <p className="onboarding-complete-desc">
          You've completed setup. You can always revisit settings later.
        </p>
        <button className="onboarding-dismiss-btn" onClick={onDismiss}>
          Dismiss
        </button>
      </div>
    );
  }

  return (
    <div className="onboarding-checklist" role="region" aria-label="Setup checklist">
      {/* Header */}
      <div className="onboarding-header">
        <div>
          <h3 className="onboarding-title">Get started</h3>
          <p className="onboarding-progress-text">
            {completedCount} of {steps.length} complete
          </p>
        </div>
        <button
          className="onboarding-toggle"
          onClick={() => setExpanded(!expanded)}
          aria-expanded={expanded}
          aria-label={expanded ? "Collapse checklist" : "Expand checklist"}
        >
          {expanded ? <X size={16} /> : <ChevronRight size={16} />}
        </button>
      </div>

      {/* Progress bar */}
      <div
        className="onboarding-progress-track"
        role="progressbar"
        aria-valuenow={completedCount}
        aria-valuemin={0}
        aria-valuemax={steps.length}
      >
        <div
          className="onboarding-progress-fill"
          style={{ width: `${progress}%` }}
        />
      </div>

      {/* Steps */}
      {expanded && (
        <ul className="onboarding-steps">
          {steps.map((step) => (
            <li key={step.id} className="onboarding-step">
              <span className="onboarding-step-icon" aria-hidden="true">
                {step.completed ? (
                  <CheckCircle2 size={20} className="step-done" />
                ) : (
                  <Circle size={20} className="step-pending" />
                )}
              </span>
              <div className="onboarding-step-content">
                <p className={`onboarding-step-title ${step.completed ? "completed" : ""}`}>
                  {step.title}
                </p>
                {!step.completed && (
                  <>
                    <p className="onboarding-step-desc">{step.description}</p>
                    <button
                      className="onboarding-step-action"
                      onClick={step.action}
                    >
                      {step.actionLabel}
                      <ChevronRight size={14} aria-hidden="true" />
                    </button>
                  </>
                )}
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// Usage:
// <OnboardingChecklist
//   steps={[
//     {
//       id: "profile",
//       title: "Complete your profile",
//       description: "Add your name and avatar so your team can recognize you.",
//       completed: true,
//       action: () => navigate("/settings/profile"),
//       actionLabel: "Edit profile",
//     },
//     {
//       id: "invite",
//       title: "Invite your team",
//       description: "Collaboration works best with others. Invite at least one teammate.",
//       completed: false,
//       action: () => navigate("/settings/team"),
//       actionLabel: "Invite teammates",
//     },
//     {
//       id: "project",
//       title: "Create your first project",
//       description: "Start organizing your work with a new project.",
//       completed: false,
//       action: () => openNewProjectModal(),
//       actionLabel: "New project",
//     },
//   ]}
//   onDismiss={() => markOnboardingDismissed()}
// />

import { useState } from "react";
import { User, Bell, Palette, Shield, Plug } from "lucide-react";

const SECTIONS = [
  { id: "profile", label: "Profile", icon: User },
  { id: "notifications", label: "Notifications", icon: Bell },
  { id: "appearance", label: "Appearance", icon: Palette },
  { id: "security", label: "Security", icon: Shield },
  { id: "integrations", label: "Integrations", icon: Plug },
] as const;

export function SettingsPage() {
  const [activeSection, setActiveSection] = useState<string>("profile");

  return (
    <div className="settings-layout">
      {/* Sidebar — visible on desktop, tabs on mobile */}
      <nav className="settings-nav" aria-label="Settings sections">
        <ul className="settings-nav-list">
          {SECTIONS.map(({ id, label, icon: Icon }) => (
            <li key={id}>
              <button
                className={`settings-nav-item ${activeSection === id ? "active" : ""}`}
                onClick={() => setActiveSection(id)}
                aria-current={activeSection === id ? "page" : undefined}
              >
                <Icon size={18} aria-hidden="true" />
                <span>{label}</span>
              </button>
            </li>
          ))}
        </ul>
      </nav>

      {/* Content */}
      <main className="settings-content">
        {activeSection === "profile" && <ProfileSection />}
        {activeSection === "notifications" && <NotificationSection />}
        {/* ...other sections */}
      </main>
    </div>
  );
}

function ProfileSection() {
  const [saved, setSaved] = useState(false);

  function handleSave() {
    // API call here
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  }

  return (
    <section aria-labelledby="profile-heading">
      <h2 id="profile-heading" className="settings-heading">Profile</h2>
      <p className="settings-description">
        Your profile information is visible to your team members.
      </p>

      <div className="settings-card">
        <div className="settings-field">
          <label htmlFor="display-name" className="settings-label">
            Display name
          </label>
          <input
            id="display-name"
            type="text"
            className="settings-input"
            defaultValue="Jane Smith"
          />
        </div>

        <div className="settings-field">
          <label htmlFor="email" className="settings-label">Email</label>
          <input
            id="email"
            type="email"
            className="settings-input"
            defaultValue="jane@example.com"
          />
        </div>

        <div className="settings-actions">
          <button className="btn-primary" onClick={handleSave}>
            {saved ? "Saved!" : "Save changes"}
          </button>
        </div>
      </div>
    </section>
  );
}

/* Settings page layout */
.settings-layout {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
  gap: 2rem;
}

/* Mobile: horizontal scrollable tabs */
.settings-nav-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
}

.settings-nav-item:hover {
  background: var(--color-bg-muted);
}

.settings-nav-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Desktop: vertical sidebar */
@media (min-width: 768px) {
  .settings-layout {
    flex-direction: row;
    gap: 3rem;
  }

  .settings-nav {
    flex-shrink: 0;
    width: 200px;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }

  .settings-nav-list {
    flex-direction: column;
    overflow-x: visible;
  }
}

.settings-content {
  flex: 1;
  min-width: 0;
}

.settings-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.settings-description {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.settings-card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.settings-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.settings-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  font-size: 1rem;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}