{props.appointmentId ? (
  /* ── Detail mode: single appointment ─────────────────────────────────── */
  props.isLoading ? (
    <div className="mx-auto max-w-lg space-y-4">
      <div className="h-8 w-48 animate-pulse rounded bg-muted/30" />
      <div className="h-40 animate-pulse rounded-lg border border-border bg-muted/30" />
    </div>
  ) : props.fetchError ? (
    <div className="rounded-xl border border-destructive/20 bg-destructive/5 p-6 text-center">
      <p className="text-destructive text-sm">{props.fetchError}</p>
    </div>
  ) : props.appointment ? (
    <div className="mx-auto max-w-lg space-y-5">
      <div className="flex items-center justify-between gap-3">
        <h2 className="font-bold text-foreground text-xl">Your Appointment</h2>
        <span className={`inline-flex items-center rounded-full px-2.5 py-1 font-medium text-xs ${props.statusColors[props.appointment.status] ?? "bg-muted text-muted-foreground"}`}>
          {props.statusLabels[props.appointment.status] ?? props.appointment.status}
        </span>
      </div>

      {props.isCancelled && (
        <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 text-sm dark:border-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-400">
          Your appointment has been cancelled.
        </div>
      )}

      <div className="rounded-lg border border-border bg-card p-5 space-y-3">
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Date &amp; Time</span>
          <span className="font-medium text-foreground">{props.formatDateTime(props.appointment.startsAt)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Ends</span>
          <span className="font-medium text-foreground">{props.formatDateTime(props.appointment.endsAt)}</span>
        </div>
        <div className="h-px bg-border" />
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Name</span>
          <span className="font-medium text-foreground">{props.appointment.customerName}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Email</span>
          <span className="font-medium text-foreground">{props.appointment.customerEmail}</span>
        </div>
        <div className="h-px bg-border" />
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Price</span>
          <span className="font-medium text-foreground">{props.formatCurrency(props.appointment.price, props.appointment.currency)}</span>
        </div>
        {props.appointment.notes && (
          <div className="flex justify-between text-sm gap-4">
            <span className="text-muted-foreground">Notes</span>
            <span className="text-foreground text-right">{props.appointment.notes}</span>
          </div>
        )}
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Booking ID</span>
          <span className="font-mono text-foreground text-xs">{props.appointment.id.slice(0, 12)}…</span>
        </div>
      </div>

      {props.cancelError && (
        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-800 text-sm dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
          {props.cancelError}
        </div>
      )}

      {props.isCancellable && (
        <button
          type="button"
          onClick={props.onCancel}
          disabled={props.isCancelling}
          className="w-full rounded-lg border border-destructive/40 bg-destructive/5 px-4 py-2.5 font-medium text-destructive text-sm transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {props.isCancelling ? "Cancelling…" : "Cancel Appointment"}
        </button>
      )}
    </div>
  ) : (
    <div className="rounded-xl border border-dashed border-border p-10 text-center">
      <p className="font-medium text-foreground">Appointment not found</p>
      <p className="mt-1 text-muted-foreground text-sm">
        The appointment ID may be invalid or expired.
      </p>
    </div>
  )
) : (
  /* ── List mode: all customer appointments ─────────────────────────────── */
  props.isUnauthenticated ? (
    <div className="rounded-xl border border-dashed border-border p-10 text-center">
      <p className="font-medium text-foreground">Sign in to view appointments</p>
      <p className="mt-1 text-muted-foreground text-sm">
        You need to be signed in to see your appointments.
      </p>
    </div>
  ) : props.isLoading ? (
    <div className="space-y-3">
      {[1, 2, 3].map((i) => (
        <div key={i} className="h-20 animate-pulse rounded-lg border border-border bg-muted/30" />
      ))}
    </div>
  ) : props.fetchError ? (
    <div className="rounded-xl border border-destructive/20 bg-destructive/5 p-6 text-center">
      <p className="text-destructive text-sm">{props.fetchError}</p>
    </div>
  ) : props.appointments.length === 0 ? (
    <div className="rounded-xl border border-dashed border-border p-12 text-center">
      <p className="font-medium text-foreground">No appointments yet</p>
      <p className="mt-2 text-muted-foreground text-sm">
        When you book an appointment, it will appear here.
      </p>
      <a
        href="/appointments"
        className="mt-4 inline-flex items-center gap-1.5 rounded-full bg-foreground px-5 py-2 text-background text-sm font-medium hover:opacity-90"
      >
        Book an appointment
      </a>
    </div>
  ) : (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="font-semibold text-foreground text-lg">My Appointments</h2>
        <a href="/appointments" className="text-muted-foreground text-sm hover:text-foreground">
          Book new →
        </a>
      </div>
      {props.appointments.map((appt) => (
        <a
          key={appt.id}
          href={`/account/appointments/${appt.id}`}
          className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 transition-colors hover:bg-muted/30"
        >
          <div className="min-w-0">
            <p className="font-medium text-foreground text-sm truncate">
              {props.formatDateTime(appt.startsAt)}
            </p>
            <p className="text-muted-foreground text-xs mt-0.5">
              {props.formatCurrency(appt.price, appt.currency)}
            </p>
          </div>
          <span className={`shrink-0 inline-flex items-center rounded-full px-2.5 py-1 font-medium text-xs ${props.statusColors[appt.status] ?? "bg-muted text-muted-foreground"}`}>
            {props.statusLabels[appt.status] ?? appt.status}
          </span>
        </a>
      ))}
    </div>
  )
)}